プラグインが吐き出したCSSによるレンダリング遅延時の対策

7694a7fd626516f517c791e71b44914f_s

PageSpeed Insightsというサイトをご存じでしょうか?ホームページやブログの点数を付けてくれるサイトなんですけど、そのサイトでこのブログを診てもらったら、結構厳しい点数をもらいました。.

PCサイトとスマホサイトの両方の点数を付けてくれるんですけど、50点くらいでした。どこが悪いのか教えてくれるのですが、一番まずいのはCSSやJavaScriptが縮小や圧縮をされてないという点みたいでした。

グーグルが言うには、たくさんあるCSSやJavaScriptは先ず統合しなさいという事です。そして、余分なスペースやコメントなどを外して縮小し、更にはGZIPで圧縮してファイルサイズを小さくしなさいと言っています。

ブラウザーがサイトの分析をするのに時間がかかり過ぎてしまってはユーザーのためにも良くないという事なのでしょう。その指摘の裏にはそういう思いがあるんだと思います。.

そこで色々と調べて作業してたんですが、今、一番ネックっぽかったのはCrayon Syntax Highlighterという、ソースコードをキレイに表示してくれるプラグインのCSSでした。

『これが原因で、ページのレンダリングに遅延が発生しています。』と言われてしまったんです。そこで最初、様々な圧縮系のプラグインで解決しようと思ったのですが、どうもサイトのレイアウトが崩れてしまったり不具合の多いプラグインばかりで使い物になりませんでした。

【スポンサーリンク】

 

仕方がないので、手作業で修正する事にしました。

やりたい事は、

Crayon Syntax Highlighterの吐き出すCSSがレンダリングの邪魔をしないようにする。

で、具体的にどうするかと言うと、<head>~</head>内にはCrayon Syntax Highlighterが吐き出すCSSの<link>要素を置かないで</html>の外に移動する事にしました。⇒CSSの配信を最適化する

※</html>の外側に<link>要素って置いても良いんですね。知りませんでした。

先ずは、Crayon Syntax Highlighterが吐き出すCSSの<link>要素を<head>要素から取り払う事にしました。

手順は、サイトテンプレートのCSSファイル等がおかれているフォルダのfunction.phpに以下のソースコードを書き加えます。(function.phpがなければ自分でこの名前のphpファイルを作ります。その際には、phpファイルですから<php?を先頭に、?>を終わりに書くのを忘れないで下さいね。)

(※テキストにはコピープロテクトがかかっているので、ソースコード枠右上の『新しいウィンドウでコードを開く』をクリックしてコピペして下さい。)

新しいウィンドウでコードを開く

上の『crayon』、『crayon-theme-classic』、『crayon-font-monaco』というのは、Crayon Syntax HighlighterのCSSのID名です。

例えば、

上の<link>要素ではCSSのID名は、『crayon』です。

id=’crayon-css’から-cssを取れば良いだけです。簡単ですよね。他も同じ要領で抜き出しました。

そうやって作ったソースコードをfunction.phpファイルに書き込むだけで、Crayon Syntax Highlighterが吐き出していたCSSの<link>要素が表示されなくなります。

ただ、このままではCrayon Syntax Highlighterが使えなくなってしまうので、非表示にしたCSSの<link>要素はsingle.phpの</html>直後にコピペします。これでCrayon Syntax Highlighterを原因とするレンダリング遅延問題はとりあえず解決です。

しかし、Crayon Syntax Highlighterはソースコードを書く記事にしか使わないプラグインなのに、レンダリング遅延を指摘されるくらい長いCSSファイルやJavaScriptファイルを常に読み込んでしまうのは問題だと思います。

そこで、このプラグインを使う記事にだけCSSの<link>要素やJavaScriptの<script>要素を表示するようにしました。

先ず、Crayon Syntax Highlighterの設定画面から『必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる』という欄にチェックを入れて保存します。これだけだと先ほどsingle.phpの</html>直後に張り付けたCSSの<link>要素がずっと出っ放しです。(JavaScriptの方はこのプラグインを使っている記事周りにだけ上手い具合に表示されるようになります。)

そこで、

記事のカテゴリーを『ソースコード』にした時だけ、Crayon Syntax HighlighterのCSSの<link>要素をsingle.phpの</html>直後に張り付けるようにしました。

先ほどsingle.phpの</html>直後に張り付けたCrayon Syntax HighlighterのCSSの<link>要素を以下のソースコードに張り替えます。

●●●の部分は自分のドメインに置き換えます。

めんどくさい設定はこれだけです。

後は、Crayon Syntax Highlighterを使いたい時だけ、記事のカテゴリーを『ソースコード』にして記事を書けばOKです。『ソースコード』以外のカテゴリーを複数使っても問題ありません。

以上の作業によって、Crayon Syntax Highlighterを使っている記事のHTMLファイルにだけレンダリング遅延の指摘を受けない場所にCrayon Syntax HighlighterのCSSの<link>要素を表示させる事が可能になります。

今回やった事を簡単にまとめますと、Googleにレンダリング遅延を指摘されたCrayon Syntax HighlighterのCSSの<link>要素をsingle.phpの</html>直後に移動させ、かつ、このプラグインを使った記事のHTMLファイルにだけこのプラグインのCSSの<link>要素とJavaScriptの<script>要素を表示させるようにしました。

レンダリング遅延の指摘を受けている他のプラグインのCSSの<link>要素も、同じように応用して移動できると思いますので良かったら参考にしてみて下さい。

追記:CSSの位置を変えた事が原因でスマホのCrayon Syntax Highlighterのレイアウトがぐちゃぐちゃになっていた為、元に戻しました。JavaScriptだけでなくCSSの配置位置も重要みたいです。

再追記:Crayon Syntax Highlighterのレイアウトがぐちゃぐちゃになったのは、CSSではなくやはりJavascriptの配置位置が問題でした。wpXサーバーのキャッシュを解除しても外れるまでにかなりの時間がかかる事もあった為、タイミング的にCSSの問題と勘違いしてしまいました。

キャッシュで嵌ると、こういう怖さがあるんですよね。1回1回動作を確認しながら変更を加えて行っているつもりでも、実は同じキャッシュを見せられていたという事もある訳です。特にキャッシュの外れるタイミングが不定期だと本当に困っちゃうんですよね。

動作がおかしくなってしまったとしても何が問題だったか分からなくなってしまう危険性があるので。ですから、ちょくちょくバックアップを取りつつ変更を加えて行った方が良いと思います。

再々追記:Crayon Syntax Highlighterに書いたコードがパソコンではちゃんと表示されているのにスマホでは上手く表示されない事が多々あります。原因が特定できません。

再々々追記:どうやらパソコンのブラウザーとスマホのブラウザーの解釈の違いが原因のようです。パソコンでは</html>の後にCSSを書いても何の問題もありませんが、スマホでは</html>の後にCSSを書くのはやはりまだ少々問題があるのかもしれません。

By

※いいねと感じたら『いいね』や『ツイート』、また『コメント』等も頂けると嬉しいです。

 

コメントを残す

※掲載基準 批評:○ 根拠のない誹謗中傷:×

【Ads by 忍者AdMax】


【楽天市場デイリー総合ランキングトップ商品】
555円(送料込)
2016日本雑穀アワード最高金賞!日本のスーパーフード雑穀\大麦&もち麦も配合/
レビュー平均:4.44
レビュー件数:59930
ショップオブザイヤー受賞
自然の都【タマチャンショップ】
5979円(送料込)
\ポイント最大7倍!/当店人気No.1【化粧箱包装】[かにしゃぶ/カニしゃぶ/むき身/かに鍋/鍋/福袋/ますよね/御歳暮/ABSB2016]2015/12/30総合1位!
レビュー平均:4.4
レビュー件数:35874
越前かに問屋「ますよね」
1512円(送料込)
≪天然植物成分90%以上で優しいボタニカルシャンプー&トリートメント≫
レビュー平均:4.31
レビュー件数:28106
ショップオブザイヤー受賞
SALONIAオフィシャルサイト

サブコンテンツ

スポンサーリンク

スポンサーリンク

Ads by Criteo(or AdStir)

このブログのQRコード

このページの先頭へ