googleアナリティクスを見ていたらサイト速度が7秒もかかっている事に気付き あまりにも良くないので改善する事にしました。
速度改善として行ったことは以下の点となります。
Contents
Google PageSpeed Insightsで現状のサイト速度を確認
developers.google.com/speed/pagespeed/insights/?hl=ja
まずは現状のスピードを確認するためにツールを使用して状況を確認します。
使用したのは、Google PageSpeed Insightsで、スマホとPCでの改善点も表示してくれるので対処が必要な点やページも教えてくれ結果に沿って対処すれば良いので便利なツールです。
使い方は簡単で、Google PageSpeed InsightsにアクセスしURLを入力して「分析」を押下して1分ほどで分析してくれます。
まずは「修正が必要」に表示されている点から対処をしていきます。
今回は画像のサイズが大きいものが多く、時間がかかっていることが大きな影響点となっていました。
大き過ぎる画像を圧縮
少しでもキレイな画像を見せたい気持ちが先行してフルHDサイズなど、不要に重い画像もたくさんありました（笑）
基本中の基本で、地味な作業ですが一つ一つの画像を最適化する事でページ全体のデータ容量小さくなり、読み込み速度が早くなります。
今回は表示サイズの1.5倍以上のpixel数になっている画像から小さく変更しました。
WordPressキャッシュプラグインの使用
今まで、Wordpressのキャッシュ系のプラグインを使用していなかったのですが、プラグインの「wp Super Cache」を設置してみました。
設定は簡単で、プラグインをインストールして「設定」→「WP Super Cache」を選択して「キャッシング利用 (推奨)」にするだけです。
◆WP Super Cache
wordpress.org/plugins/wp-super-cache/
画像を段階的に表示するプラグインの使用
ページ内の画像をページ読み込み時に表示するのではなく、画面スクロールに合わせて徐々に画像を表示するプラグインです。これにより表示直後の時間を短縮することができます。
◆Lazy Load
wordpress.org/plugins/lazy-load/
dns-prefetch（プリフェッチ）の設定
あまり耳にしない用語ですが、dns-prefetch（プリフェッチ）はDNSの名前解決を事前に行うhtmlのmeta定義で、外部ドメインへのリンク多く設置されているページで、リンクをクリックした後の待ち時間を短縮することができます。
dns-prefetchの処理はバックグラウンドで行われるため、訪問者の待ち時間が増えるということもありません。
dns-prefetchの設定例
以下のような宣言をhtmlの
タグ内に追加します。<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="http://example01.com"> <link rel="dns-prefetch" href="http://example02.com"> <link rel="dns-prefetch" href="http://example03.com">
「http:」の記述は抄訳して「//example01.com」と書くこともできます。
この設定8個までは動作保証となっており後はブラウザに依存しますが、９個以上記述してもエラーにはならないので優先したいものを上に書いておくので良いと思います。
—-
これらの設定をして再度、Google PageSpeed Insightsで計測してみるとなんとスコアが２倍にすることができました！（これでもかなりの改善となっているのですw）
正直言ってここまで改善できるとは思っていなかったため、驚いていますが対処方法も簡単な作業ですので是非オススメな速度改善方法だと思います。
おまけ：Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化
その他にはサーバで利用できる場合に限りますが、Apacheの「mod_deflate」モジュールを使用した高速化もあります。
これは画像やHTMLコンテンツを圧縮して転送することで転送するデータ容量を減らすことで高速表示を可能にするモジュールです。
<Location /> # Insert filter SetOutputFilter DEFLATE # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \ \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </Location>
