先日、重い腰を上げてサイトのデザインを見直しましたが、その理由はページ表示速度の遅さを改善したかったからです。
ページの表示速度が速いか遅いかは、Googleの「PageSpeed Insights」というページで100点満点中何点かという形で確認することができます。このサイト、PCで表示する場合は80点くらいでしたが、携帯電話だと20点くらいの低い数字になることもありました。
なんとかしなくては・・・と。
Googleによれば、点数の低い主な理由（表示速度が遅い理由）は画像が重たいことと広告等の外部読み込みが影響していることのようです。
もしかして利用しているデザインテンプレート（Affinger）を自分で色々弄りすぎて１ページに表示する情報量を多くしすぎたこと、GoogleのAdsense広告を自動（お任せ）にしたせいでたくさん広告が表示されてしまったことの２つが原因かなぁと思い、先日更新して最新のもの（ほぼテンプレートそのまま）にし、広告も自動表示をやめたのですがGoogleの点数はあまり変わらず・・・。
そこで、あらためて以下の取り組みをしたところ、携帯電話側の表示速度も80点台まで回復したので備忘録として残しておきます。
プラグイン「EWWW Image Optimizer」で画像を次世代フォーマットであるWebP形式に変換
画像を圧縮して表示を高速化させるプラグイン「EWWW Image Optimizer」は以前から導入していましたが、次世代フォーマットであるWebP形式への変換は、まだニッチな形式だろうと思って実行するのを躊躇していました。
しかし、JPEG(非可逆圧縮)と比べて25〜34%、PNG(可逆圧縮)と比べて28%容量を削減できるようなので、背に腹は代えられないと思い実行。これがかなり効果がありました。
参考にしたサイトは以下です。
プラグイン「Async JavaScript」でJavaScriptの読み込みを遅らせる
JavaScriptはGoogleのAdsense広告をはじめ、種々の機能に使用されていますが、ワードプレスでJavaScriptを使うと、その読み込みが完了するまでページの描画をブロック（表示をストップ）してしまうらしいです。そこで、JavaScriptの読み込みを遅らせるプラグインを導入することにしました。
上のページを参考にしました。ここでは、「Async JavaScript」以外にも「Autoptimize」というJavaScript、CSSの速度改善プラグイン、「W3 TOTAL CACHE」というキャッシュプラグインが紹介されております。うちはこの２つはすでに導入済みでしたのでその延長上で「Async JavaScript」も導入してみました。
Google Adsense広告の読み込みを遅らせる
実は前述２に書いたJavaScript読み込み遅延プラグインを見つける前に、JavaScriptの命令文を直接弄ってGoogle Adsense広告だけを読み込み遅延させる方法を見つけて実践しました。前述２があればこれは不要な気がしますが、備忘録的に残しておきます。
結構似たような悩みを抱えている方は多いのですね。おかげで助かりました。おかげさまで携帯電話の表示速度も改善されて80点台まで戻ることができました。
