勉強会でお世話になっているアラタナ社の高見さんが、サイトの高速化に関する記事をブログで書かれていたので、内容をこのサイトに適用してみました。
素晴らしい記事を書かれた高見さんに感謝致します。
改善内容
詳しい改善内容や手順は、高見さんが書かれたこちらの記事を参照して下さい。
解説されている内容のうち、下記の項目は既に導入済みでしたので、このページでは触れません。
- AMP
- 構造化マークアップ
常時SSL、並びにHTTP/2に関しては、私がSSLサーバー証明証を持っていないので、導入できません。よって、これらもこのページでは触れません。
現在のスコア
まず、なにも行っていない状態で、Googleのツール PageSpeed Insightで速度を測定しました。その結果がこちらです。
「うわっ…私のサーバー、遅すぎ…？」
Google Tag Managerを導入
タグ埋め込みに関する処理をGoogle Tag Manager経由で行うよう設定してみました。その結果がこちらです。
4ポイント改善です。
WordPressページをキャッシュ化
以前、別のキャッシュプラグインを使用していましたが、頻繁にPHPのスクリプトを弄っていたので、キャッシュをクリアするのが面倒、いざクリアすると、不具合でクリア出来なかったりしたので、キャッシュ化していませんでした。
解説に習ってAutoptimizeプラグインを導入してみました。その結果がこちらです。
さらに4ポイント、合計8ポイント改善です。
コンテンツを圧縮
Apacheの設定を変更し、非圧縮コンテンツを圧縮し、クライアントへ返すよう設定しました。その結果がこちら。
さらに4ポイント、合計12ポイント改善です。良い感じです。
ブラウザにキャッシュさせる
キャッシュ コントロールを行うよう.htaccessを編集し、ブラウザにキャッシュさせるよう設定しました。その結果がこちら。
あれ？減ってる！？Chromeで確認すると確かにキャッシュされていますが、どうも私の環境ではイマイチ効果が薄い、いや、自サーバー以外のファイルロードによるオーバーヘッドが大きく、効果が薄く見えるようです。
JavaScript、CSSを全て最適化
Autoptimizeプラグインの設定で、初期値が設定されていて、いくつかのファイルを最適化されていませんでした。これらのファイルも含め、全てのJavaScript、CSSファイルを最適化した結果がこちら。
1ポイント改善しました。こちらも、自サーバー以外のファイルロードによるオーバーヘッドが大きく、効果が薄く見えるようです。
スコアが伸びない理由
スコアが伸びない理由を考えてみました。
- 外部サーバーのJavaScriptやCSSのロード
- 使用しているEC2インスタンスが非力
- HTTP/2の未導入
外部サーバーのJavaScriptやCSSのロード
外部サーバーのファイルロードについてはどうしようもありません。キャッシュコントロールもできませんし、圧縮転送もできません。このサイトは広告等で多数のJavaScriptやCSSをロードしています。PageSpeed Insightの改善提案によると、それが原因でスコアが伸びないようです。
EC2インスタンスが非力
現在、t2.microで運用しています。これをt2.smallへ変更すればスコアが改善するでしょう。お金で解決出来ますが、そのお金が無いので解決できません。これもどうしようもありません。
HTTP/2の未導入
常時SSL化し、HTTP/2を導入すればスコアが改善するでしょう。しかし、SSLサーバー証明証を持っていないので、やっぱりこれもどうしようもありません。今は無料でSSLサーバー証明証を発行してくれるサービスがあるので、それを用いてSSLサーバー証明書を取得出来ればHTTP/2を導入できそうです。
実際の体感速度
これまでに行った設定で、スコアが48から60に改善しました。数字としては小さいですが、実際の速度はどんなもんでしょう？試してみました。
早くなってる！
思ったよりも随分早くなっていました。広告のロード待ちが発生するので、インジケーターは周り続けていますが、コンテンツ自体は随分早くレンダリングされるようになりました。現状取りうる手段による高速化は、達成できたと思います。
最後に
今までやっていなかった私が言うのはおこがましいですが、それ程難しくない作業でサイトを高速化できますので、興味を持たれたら、是非チャレンジしてみて下さい。
宮崎県在住。
プログラムを書いて暮らしています。趣味はルアーフィッシング、ギター。