実験する

この記事のPageSpeedInsights評価を90以上にする

PageSpeed Insights大好き!サイト高速化したい!すみお(@sumio3_)です!

ページの読み込み速度って大事ですよね。
読み込み速度が1秒違うだけでユーザーの直帰率やコンバージョン率が大きく変わるこのご時世、今回はこの記事のPageSpeed Insightsのモバイル評価を90以上する実験をしてみようと思います!

余談ですが、その昔MONKEYJAPANというWEB制作ブログを運営してまして(閉鎖)、「wordpressサイト高速化させてGTmetrixから100%モラタ」という記事を書いたら、あのgori.meさんが記事ツイートしてくれたり、SEOで「GTmetrix」で本家に次ぐ2位になったりと、高速化でめちゃめちゃ頑張ってた時期がありました。余談でした。

初回の状況(2019/10/04 00:05)

契約サーバー wpXクラウド
プラン グレードA(500円のやつ)
OS Linux
PHPバージョン 7.2.17
キャッシュ wpX管理画面から有効化

どこにでもあるレンタルサーバーです。
続いて現在のWordPressの状況。

テーマ JIN
記事数 この記事で3記事目
プラグイン Classic Editor , Redirection , Yoast SEO
高速化プラグイン なし
解析JSタグ GoogleAnalytics

このままの状況でスピード計測してみました。
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

70!思いのほか悪くなかった。
しかし見ていくと改善点は多数ありました。
この記事内で随時施策報告していきます!

高速化施策1回目(2019/10/04 23:00)

それではPageSpeedInsightsで出た「改善できる項目」をチェックして一個ずつ改善してきます。

1,次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
アップロードした画像を最適なフォーマットに自動変換する プラグインまたはサービスの使用をご検討ください。

て書いてました。
つまり普通のJPEGやPNG形式の画像じゃなく、もっと圧縮する(軽量化する)フォーマットで書き出せよ、WordPressの人はプラグイン使えよという事ですね。
しかしこちらの記事では、まだ対応の必要なし(ブラウザやWordpressが対応できていない)と記載されていました。
【WordPress】JPEG 2000、JPG XR、WebPはまだ対応必要なし

でもWebP(ウェッピー)に関しては対応ブラウザの状況的に一般的になる可能性が高いため、対応してて損はない気がする。
【画像軽量化】WebPにそろそろ対応したほうが良さそうなので現時点で最適方法の考察

うーん、どうしよう・・・
WebPに関しては色んな意見があるので何が正解かわからない。

とりあえずMacユーザーとしてsafari非対応は見逃せないのでWebP対応は今後に置いといて、画像サイズの最適化をまずすることにしました。

面倒くさいし(笑)

2,オフスクリーン画像の遅延読み込み

フスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。
WordPress の遅延読み込みプラグインをインストールすると、画面外の画像の読み込みを遅らせたり、遅延読み込み機能のあるテーマに切り替えたりできます。AMP プラグインの使用もご検討ください。

そのまんまですが、画像を遅延読み込みしてページ自体を表示させるのを早くしろってことですね。

画像の高速化

1と2はWordPressのプラグイン「Smush Image Optimization, Compression, and Lazy Load」略して「Smush」で解決でいます。

世界規模で見たら数ある画像圧縮系プラグインの中では一番人気なんじゃないですかね。
2番目は「EWWW Image Optimizer」ですかね。

インストール後、有効化したらまず「Bulk Smush」しましょう。
すでにアップロードしている画像を圧縮(軽量化)してくれます。