ブログ運営者なら誰もが衝突する壁、
＼サイトの高速化／
私も悩まされました。
高速化の確認にはいつもPageSpeed Insightを利用しています。
当初、このブログのサイトスピードは、数記事しか載せていなかったのに、
- パソコン…55
- モバイル…30
程度でした。
始めたばかりなのにそんな遅いの！？ってびっくりしたよ！
しかし、今回色々試行錯誤した今は
- パソコン…99
- モバイル…90
にまで向上！
今回は、この高速化に関する私の格闘の記録を綴っていきます。
「ブログを始めたばかりだからまだ高速化とか考えなくていいや…」と思っているあなた！
これからたくさん情報が詰まっていくブログのスピードは、最初に整えておかないと後悔するかもしれませんよ！
- Cocoonテーマでの高速化設定方法
- 画像を次世代フォーマットに変更する方法
- JavaScriptの遅延方法
cocoonテーマでの高速化
Cocoonテーマ内での高速化設定は次の2つがあります。
- Cocoonテーマでの全体の高速化設定
- PWA設定によるモバイル環境の高速化
Cocoonでの全体の高速化設定
Cocoon設定の中に高速化というメニューがあります。
サイト高速化に関する項目が表示されるので、以下の項目にチェックを入れて保存しましょう。
- ブラウザキャッシュの有効化
- HTMLを縮小化する
- CSSを縮小化する
- JavaScriptを縮小化する
- Lazy Loadを有効にする
- Googleフォントの非同期読み込みを有効にする
- アイコンフォントの非同期読み込みを有効にする
※詳しくはこちらのリンクをご覧ください。
PWA設定によるモバイル環境の高速化
PWA(Progressive Web Apps)とは、モバイルサイトでアプリのような使用感を体験できる機能です。
モバイル端末でより使いやすくなるということかな？
表示スピードの高速化も期待できるそうなので、導入してみることにしました。
導入方法は簡単で、Cocoon設定のPWAタブを開き、PWAを有効化するにチェックをして保存するだけです。
※設定に関する詳しい内容はこちらをご覧下さい。
実際に導入し、サイトスピードを測ってみた結果としては、目に見える効果はありませんでした。
効果も薄いし、ブログの情報量も少ないので、今回はPWAは使用しないことにしたよ。
画像を次世代フォーマットに変更
画像は通常、JPEGやPNGというフォーマットで保存されていると思います。
これらをWebPという次世代フォーマットに変換するとファイルサイズを3割弱容量が削減でき、高速化につながります。
WebPに変換するために、今回はEWWWImage Optimizerというプラグインを使用しました。
このプラグインは、入れておくだけでも画像の圧縮もしてくれるのでおすすめ！
詳しい設定内容はこちらの記事をご覧ください。
モバイルのサイトスピードが上がらない
ここまでで、パソコンでのサイトスピードはだいぶ向上しましたが、モバイルはさほど上がりませんでした。
いろいろやったのに…上がるって書いてたやん…
Cocoon開発者のわいひらさんによると、
ページスピードインサイトで計測している場合、これらの読み込みでも点数が悪化するそうです。
- AdSenseのスクリプト
- Google Analyticsのスクリプト
- Googleタグマネージャのスクリプト
- Googleカスタム検索のスクリプト
- Twitterフォローボタン等のスクリプト
- Facebookいいね！ボタン等のスクリプト
- その他のアクセス解析スクリプト
- 外部サイトから読み込まれている縮小化されていないCSS
実際、ページスピードインサイトでの改善案の中にもJavaScriptの削減が出ているので、
Scriptを何かしら改善しないとサイトスピードは向上しないという結論に至りました。
でもそのために何をしたらいいのかわかんない！！！
とりあえず、色々と調べてみようとページスピードインサイトの改善案の文面をそのままコピーして検索してみました。
そこで見つかったのが次の案です。
ページ読み込みでJavaScriptの遅延させる
プラグインを使って、ページを読み込む際にJavaScriptを遅延させればサイトスピードが早くなるという記事をいくつも発見しました。
そのプラグインがこちら
Flying Scripts by WP Speed Matters
導入して、遅延したいJavaScriptを保存しておけばOKという非常に扱いやすいものです。
実際に導入した手順はこちら。
この方法はすごく効果があったのでおすすめだよ！
ページスピードインサイトの改善案の中には、「レンダリングを妨げるリソースの除外」というものもありました。
この問題についても調べた結果、一番やる価値がありそうな記事はこれかな、と思います。
しかし、パソコンがそこまで得意ではない私はやっていません。
ミスして消えたら嫌だし！
私がやってみた方法だけでも十分スピードは上がるので、興味のある方だけやってみたら良いかと思います。
まとめ
サイトスピードにはずいぶんと悩まされましたが、今回の方法でだいぶ解決しました。
あまりスピードにこだわり過ぎるのも良くないとは思いますが、今のご時世スマホでブログを読む人が本当に多いので少し頑張りました。
今回の方法で早くなったという方はたくさん居られるので、やってみる価値はあると思います。
比較的簡単にできるしね！
でもたまに
- スピードが上がらない
- 上がったけどすぐ元に戻った
- 描画表示が遅い
という方は居られるので、この方法が絶対速くなるというわけではありません。
ただ、そういった方は一度、プラグインやCSSを見直すことをおすすめします。
同じようなプラグインを入れていたり、動きの多いCSSを使いすぎていると、どれだけ頑張っても改善されにくいです。
皆さん、スピード改善頑張ってください！
ではまた。
コメント