Pagespeed Insightsというgoogleが提供しているサービスで自分のwordpressのホームページの表示速度を測定したのですが、100点中37点という驚異的数字を叩き出し、試行錯誤を繰り返しながらモバイルで91まであげることができたので、具体的に行った施策と遅かった原因をまとめました。
スコアが低かった原因
- 外部ソースを多用していた
- 高画質画像を使っていた
- 無駄にプラグインを入れすぎた
早くする方法
php.headerに追加したコードを削ぎ落とす
ブログに様々な機能を付けたら面白そうと思っており、サイト最適化など考えもしませんでしたが、テーマエディターのphp.headerに追記したページ内遷移をスムーズにする処理や申請が通っていないのにgoogle adsenceのコードを放置していたりと無駄が多すぎました。
外部プラグインを多用するとサイトの評価が下がるのでコメントアウトして無効化したり削除しました。
プラグイン「Autoptimize」で最適化
Autoptimizeはサイトを最適化するためのプラグインで、オフスクリーン画像を遅延させたり、Webp画像圧縮変換さらに使われていないソースコードの削除をしたりあらゆるサイト最適化をボタン１つで行ってくれます！
不要なコードを削除
wordpressでは最初にテーマをインストールして、cssやphp、htmlなどをカスタマイズしてオリジナリティーのあるサイトを作っていくことができます。カスタマイズしていくと１つの同じ命令を何度も行い、非効率です。
Autoptimizeで処理が同じグループは統一してなるべく少ない処理回数に最適化することで表示速度に貢献します。
オフスクリーン画像を延期
オフスクリーン画像というのは、現在開いているページの画面に写っていない場所の画像ファイルのことです。見たいページのリンクをクリックすると現在使っているパソコンからそのページが保存してある場所(コンピュータ)に
「〜のページを表示して！」
と指示します。その指示を受けたコンピュータは
「おk！はいどうぞ！」
とパソコンにそのページの設計図を送ります。そしてパソコンはその設計図通りにページを描画するのですが、オフスクリーン画像を延期していないと最初からスクロールの一番下の画像まで読み込んで描画しようとします。
ページは上から下に見ていく場合がほとんどなので、画面に映る一番上の画像から描画してしたの画像は後から描画しようという考え方です。
これにより、ページにアクセスした時に最初に画面に映る場所が優先的に表示され、ページスコアの評価向上につながります。
画像圧縮して画像を表示
よく知られている画像フォーマットとしてjpeg, png, gifなどがありますが、新しいフォーマットとしてwebpという圧縮方法を用いて画質を下げずにファイルサイズを小さくします。
画像の表示は複雑な色の組み合わせで構成されているので、表示に時間がかかります。さらにアイコン画像だったり、装飾程度の画像であればあまり高画質を使う必要はないです。ですがwebp圧縮方式は、送られてきた画像データの描画方法を効率化させて今までの描画方法より高速に画像を表示させることができます。
プラグインは必要最低限に
スコアが37の時はプラグインが8個もありよく考えたら機能が被っている物もあったので削除して、本当に必要なプラグインのみを残すようにしました。セキュリティー系のプラグインは機能が被っている物も多く、速度を遅くする最も大きな要因なので私は「Akismet Anti-Spam」を削除、セキュリティープラグインは「All In One WP Security」のみに絞りました。
他にも「Jetpack by WordPress.com」「Site Kit By Google」を削除しました。そして代わりに「Autoptimize」を追加しました。
