
サイト閲覧スピードの向上
まずサイトを作成することをメインに考えていたため、全く意識をしていなかったサイト閲覧スピード、
このサイト閲覧スピードが遅いと、サイトの品質が下がり、広告のクリック単価が上昇または広告掲載されにくくなる
ということを初めて知りました。
そこで今回はサイト閲覧スピードの改善を行いました。
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
↑↑↑上記で作成したサイトを確認したところ・・・・
モバイル:31/100
パソコン:38/100
修正が必要リストにあったのは、
(1)圧縮を有効にする
(2)スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
(3)表示可能コンテンツの優先順位を決定する
(4)画像を最適化する
でした。
(1)圧縮を有効にする
圧縮を有効にすると、
サーバーからの出力をクライアント(ユーザが操作している側のPC)に送る前に圧縮し、
クライアント側で圧縮されたデータをブラウザで展開/描画するので、
通信の負担が激減しページの読み込み時間が劇的に速くなるようです。
その方法としては、以下のコードを.htaccessに追記すればよいそうです。
1 2 3 4 5 6 7 8 9 |
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript |
↓↓↓参考にさせていただきました!!↓↓↓
圧縮を有効にする – PageSpeed Insights
http://webkaru.net/wordpress/pagespeed-insights-deflate/
実際にこれを追記したところ・・・・
モバイル:62/100
パソコン:75/100
大幅に改善され、さらに、(3)表示可能コンテンツの優先順位を決定する についても修正が必要リストからなくなりました!!!
(2)スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
プラグインを使用するのが一番簡単な方法のようですが、テーマやほかのプラグインとの相性を見ながら選択すべきだそうです。
この項目に関しては次回以降にチャレンジしていこうと思います!!
(3)表示可能コンテンツの優先順位を決定する
(1)圧縮を有効にする を対応したところ、修正が必要リストからなくなりました。
(4)画像を最適化する
TinyPngを使用し、画像を小さくして載せなおしたところ、解決しました。
↓↓↓活用させていただきました!!↓↓↓
TinyPNG
https://tinypng.com/