サイトやブログの読み込み速度は、ユーザビリティの観点でもSEOの観点でも速いに越したことはありません。
この記事では、Wordpressで構築されたサイトの読み込みスピードを上げるためのテクニックをご紹介します。
また、htmlやCSSの専門的な知識がない人に向け、ノンコーディングで実施できるものを取り上げます。
また、SEO対策はサイトの速度だけではありません。その他の代表的な対策は別の記事にまとめていますのでご覧ください。
サイトのスピードを左右する要素
サイトの読み込みスピードを決める要素は多数存在しますが、サーバのスペックなどインフラの条件を変えられない場合、下記のようなものがコントロールしやすい要素です。
- 画像データのファイルサイズ：多くの場合、重い画像データを使いすぎていることでサイトのスピードに悪影響を及ぼします。これを防ぐためには、サムネイルなどの画像を圧縮して小さくします
- ページを読み込む方式：クリックされたページを最初に全て読み込んでから表示すると不要な時間がかかります。遅延読み込みを利用して、ユーザが記事を読みつつ同時にサイトの読み込みを行います
- JavaScript コードの最適化：サイトの読み込みは、生成されたコードが上から逐次的に上から実行されます。JavaScriptをCSSの後に読み込むことによってページの表示を早めることができます
- サイトをキャッシュしているか：サイトをキャッシュすることで毎回サーバまでデータを取りに行くことがなくなり高速化が可能です
- プラグインやウィジェットの最適化：重いプラグインをたくさん入れているとそれだけで読み込みが遅くなります。また、ウィジェットなども同様です。不要なものは削除しておくか、PCとモバイルで出し分けをすると良いです
運営11年4,200社導入実績！SEO対策なら【ファイナルSEO】
スピードを上げるためのテクニック
ここからは上記の各要因に対して取り得る策を紹介します。基本的にはWordpressのプラグインを活用しています。
画像データを自動的に圧縮する
画像の圧縮にはEWWW Image Optimizerというプラグインを使っています。
EWWW Image Optimizerを使うことによって、新しく画像をアップロードする際に自動的に圧縮してくれるだけでなく、今までそのままアップロードしていた画像を一括で圧縮してくれる機能もあります。
使い方は簡単です。インストールし、ダッシュボードからEWWW Image Optimizerを開きます。
「ベーシック」タブで「メタデータを削除」にチェックを入れます。
同様に、「変換」タブで「コンバージョンリンクを非表示」にチェック。初期設定はこれで完了です。
また、過去にアップロードした画像を一括圧縮するには、「メディア」→「一括最適化」をクリックし、
「最適化されていない画像をスキャンする」ボタンを押すと画像の読み込みと圧縮がスタートします。少し時間がかかります。
結果的に、このサイトでは20%程度画像を圧縮することに成功しています。
ページの遅延読み込みを行う
遅延読み込みとは、ページがロードされたタイミングではなく、実際にオブジェクトが読まれるタイミングで読み込みを行う技術です。
最初にすべてを読み込みませんので、その分ページの表示が早くなります。
このプラグインにはa3 Lazy Loadを利用します。
プラグインをインストールし、settingへ進みます。
「Lazy Load Activation」ボタンはデフォルトでオンになっていると思いますので、特に操作は不要です。ここがオンになっているとページに遅延読み込みが適用されます。
その他、Lazy Load ImagesやLazy Load Videos and iframesもオンでOKです。読んで字のごとく画像と動画も遅延読み込みしてくれます。
JavaScriptタグを先に読み込まない
同様に、a3 Lazy Loadを使って、JavaScriptの読み込み位置を調整します。
これをすることによって、JavaScriptより先にCSSを読み込み、ページの表示を早くすることが可能になります。
Script Load Optimizationのボタンを「FOOTER」に設定しましょう。
また、別のAutoptimizeというプラグインを使ってJavaScriptの最適化も行います。
インストールし、設定を開きます。設定すべきところは2か所だけです。
まず、「JS、CSS & HTML」タブを開き、「JavaScriptコードの最適化」にチェック。
そして、「追加」タブで「webfont.js で非同期にフォントを結合して読み込む」にチェックを入れます。
こうすることにより、レンダリングを妨げずにGoogle Web Fontを読み込むことができます。
サイトをキャッシュする
こちらはキャッシュする方法です。WP Fastest Cacheというプラグインを使います。
設定箇所がやや多いため、下記の画像を参照して設定にチェックを入れてください。
また、WP Fastest Cacheは設定タブからより詳細な設定もできますが、そのためには有料プランに申し込む必要があります。
無償版でも上記の設定は可能になりますし、十分に強力なので無償のままでも差支えは無いかと思います。
不要なプラグインを削除しウィジェットを出し分ける
プラグインも多くしすぎると速度に影響するため、利用する最低限以外は無効化することをオススメしています。
個人的には10個前後が上限の目安ではないかと思います。
また、当ブログではサイドバーにFacebookの埋め込みウィジェットを出していますが、これも読み込みに時間がかかるためモバイルでは表示しないように設定しています。
このようにウィジェットの出し分けにはWidget Logicというプラグインを利用します。
プラグインをインストールし、有効化すると、ウィジェットの編集画面に「ウィジェットのロジック」という項目が現れます。
ここに短いコードを打ち込むと、デバイスによってウィジェットの出し分けが可能になります。コードの一例は下記のようなものがあります。
wp_is_mobile( )：モバイルでのみ表示
!wp_is_mobile( )：モバイルでのみ非表示
!is_single( ’100’ )：ID100の記事でのみ表示
サイトのスピードチェック方法
ここまでの対策の結果確認の意味もかねて、当ブログのスピードチェックをやってみます。
運営11年4,200社導入実績！SEO対策なら【ファイナルSEO】
サイトのスピードチェックにはGoogleのSpeedinsightというツールがありますが、これは絶対値ではなく100人中の順位が点数として表示されるという話もあります。つまり、どれだけ表示が早くても他にもっと高速なサイトがあれば点数が低くなってしまいます。
今回はその代わりにUbersuggestというツールのスピードチェッカーを使います。
無償でも強力なSEO機能が備わっており非常に便利です。
検索窓に読み込みスピードを確認したいサイトのURLを打ち込み、左側ペインから「Site Audit」をクリックします。
監査ページの中に、PCとモバイルでの表示速度と目安が表示されます。
当ブログだとPCでは表示までに2秒、モバイルでは3秒となっており、それぞれExcellentとExcellent/Goodの評価を得ることができました。
ちなみに、トータルでのSEOスコアは100点中84店でこちらも高評価を得ています。
まとめ
以上、Wordpressサイトを高速化する方法を紹介しました。
冒頭でも申し上げたように、最近ではページの表示スピードも掲載順位に影響しています。Googleも明言しているように、サイトのスピードは速いに越したことはありません。
サイトのスピードを改善してより高い顧客体験を目指しましょう。
今回は以上です。お読みいただきありがとうございました。
コメント