最近のブログは表示速度がかなり重要視されています。
本ブログも最初はモバイルの読み込みがかなり遅かったですが、色々と対応することで
PageSpeed insightでのモバイルのスコアを「16」→「74」まで改善することができました。
この記事では効果が大きかった方法とそのほかにも試した方法も含めてご紹介します！
PageSpeed Insightsでサイト速度をチェック
まずは、「PageSpeed Insights」でサイト速度を確認しましょう。
ご自身のサイトのURLを入力して「分析」を押しましょう
分析が終わるとスコアが表示され、さらに下の方には改善すべき項目が表示されます。
この改善すべき項目を対応することで、モバイルの読み込みが早くなり、スコアをあげることができます。
効果が大きかった改善方法
キャッシュプラグイン「WP Fastest Cache」
キャッシュとは「一度読みこんだサイトのデータを一時的に保存しておくことで、再度読み込む時に速く表示することができる仕組みのことです。」
このキャッシュをプラグインで使えるようにしましょう。
「プラグインを追加」する画面で「WP Fastest Cache」と入力して、「今すぐインストール」→「有効化」しましょう。
詳細設定は下記の通りです。
設定を変更したら、「変更を保存」を押します。
設定が完了したら「キャッシュを削除する」タブに移動します。
そして、「すべてのキャッシュを消去」を押します。
これでキャッシュの設定、削除は完了です！
Xserverのサーバーキャッシュを削除
WordPress上で設定を変更しても、サーバー上にキャッシュが残っていて設定が反映されていない可能性もあります。
WordPressの設定を変更したけど、スコアが変わらないという方は、サーバー上のキャッシュの削除も試してみましょう。
本ブログではXserverを使用しているので、Xserverのキャッシュの削除方法をご紹介します。
「高速化」→「サーバーキャッシュ設定」をクリックします。
該当ドメインを選択します。
「キャッシュ削除」のタブをクリックして、「削除する」を押します。
モバイル画面に表示するコンテンツを減らす
こちらの対応が本ブログでは一番効果が高かったです。
JavascriptやCSSの圧縮なども効果があると思いますが、
モバイルで表示するコンテンツ自体を少なくすることで、読み込みがかなり早くなります。
特にCSSを使った装飾やJavaScriptを使った動的な表示を減らすと効果が大きいです。
カルーセルを削除
Cocoonの場合、カルーセルを簡単表示できてオシャレになるので、表示していました。
しかし、こちらの読み込みが遅かったので、モバイルでは表示しないようにしました。
「Cocoon設定」→「カルーセル」をクリックします。
「カルーセルの表示」で「スマートフォンで表示」のチェックを外します。
これでPCではカルーセルが表示されますが、モバイルではカルーセルが表示されなくなります。
Twitterのタイムラインを削除
Twitterのタイムラインも読み込みに時間がかかるので、モバイルの場合は表示しないことをおすすめします。
モバイル時はサイドバーのコンテンツの表示をなくす
サイドバーにTwitterのタイムラインを表示していたので、
モバイルの場合はサイドバーのコンテンツを表示しないようにします。
「Cocoon設定」「モバイル」をクリックします。
モバイルボタンの「モバイルボタン時コンテンツ下のサイドバーを表示」のチェックを外します。
モバイル用のフッターを作成
サイドバーの表示をなくして、モバイル用のフッターを作成しました。
ここでは、Twitterのタイムラインはなくして、プロフィールとカテゴリーだけ表示するようにしました。
その他の改善方法
本ブログではあまり効果がなかったですが、効果が見込める方法を簡単にご紹介します！
追加CSSをstyle.cssに移動する
WordPressの「追加CSS」に記載されているCSSはHTMLの<head>内で読み込まれます。
<head>はページを開いた時に読み込まれるので、ここの記載が多いと表示が遅くなります。
そのため、追加CSSの記載が多い場合は、子テーマのstyle.cssに移動しましょう。
最適化プラグイン Autoptimize
ソースコードを圧縮するプラグインです。下記の項目を最適化できます。
- HTMLの最適化
- CSSの最適化
- JavaScriptの最適化
- 画像の最適化
非同期プラグイン Async Javascript
Javascriptの読み込みを非同期で行い、サイトの高速化を行うプラグインです。
プラグイン Flying Scripts
Javascriptを読み飛ばして、サイトの高速化を行うプラグインです。
画像をWebpに変更
画像を「.webp」に変換して軽量化するプラグインです。
DB最適化プラグイン WP-Optimize DB clean
Wordprssのデータベースの最適化・不要なデータを削除するプラグングインです。
Webフォントの使用をやめる
Webフォントの読み込みにも時間がかかる場合があるので、Webフォントの使用をやめて、デフォルトのフォントを使用しましょう。
コメント