目次
前回の記事を読まれた京都の整体院・H先生から、HP表示高速化のご依頼がありました。結論から書きますと、下図のように元々のスコア68から97まで表示速度を改善できました。
H先生のホームページで、どこを改善したかを、これから簡単に紹介していきます。
●表示高速化のために改善した箇所
1つ2つの問題点を改善したくらいでスコアが跳ね上がることはまずありません。そこで、Page Speed Insightsの診断結果を見ながら、足を引っ張っている箇所を小まめに改善していく必要があります。
改善した箇所を、１つずつ見ていくことにしましょう。
▼画像のフォーマット形式を変更する
まず気になったのが、画像フォーマットです。JPEG画像やPNG画像は、見た目はそのままでファイルサイズを小さくできる「WebP画像」に変換することが勧められています。
こちらは、【EWWW Image Optimizer】プラグインを利用すれば自動的に変換されるようになります。
▼すべての画像タグに幅と高さを設定する
画像タグに幅と高さの指定をしていないと、その画像の読み込みが終わるまで画像の大きさが確定しません。そのため、画像を読み込み終わった途端に画像が大きく表示されて、表示レイアウトが変わってしまいます。
スマホでどこかのホームページを見ている時に、いきなり広告が割り込んできて「今読んでいた文章はどこに行った？」となった経験はないでしょうか？
画像の幅と高さを指定しておかないと、これと同じ事が起こりますので、読んでいる人にストレスがかかります。
あらかじめ画像の幅と高さを指定しておくことで、画像が読み込まれても表示が崩れないようになり、スコアが上がります。
WordPressの投稿や固定ページに画像を挿入する際には自動的に幅と高さを設定してくれるので、普通に記事を書く分には心配はいりません。
しかし、テーマやウィジェットなどに書き込まれる画像タグは、幅や高さが指定されていない場合があるので注意が必要です。
▼ファーストビューに表示される画像の先読み設定
特に何も指定しない場合、ページ内にある画像ファイルは次のような流れで読み込まれます。
- HTMLタグを上から順に解釈する
- 画像タグがある
- 画像タグに書いてあるURLを元に、画像を読み込む
- 画像が表示される
しかし、この画像のファイルサイズが大きく、読み込みに時間がかかる場合、ホームページの表示速度の足を引っ張りかねません。
対策として、ホームページを開いた時点の画面（ファーストビュー）に表示される画像は、もっと早く読み込まれるように設定します。
具体的には画像タグに fetchpriority=”high” という記述を追加することで、優先的に画像ファイルをダウンロードしてくれるようになります。
▼真っ先に読み込む必要があるCSSファイルの先読み設定
CSSファイルはホームページのデザインを指定するために必要ですので、最初にダウンロードするように設定します。
具体的には、CSSファイルを呼び出すHTMLタグに rel=’preload’ as=’style’ という記述を追加します。
ただし、ホームページの表示を早くするためには、最大で4つまでに留めるのが良いようです。数が多すぎると真っ先にダウンロードするファイルが増えすぎるので、逆効果になりかねません。
▼特定のページでしか利用されないファイルの読み込みを止める
たとえば、お問い合わせフォームを利用するために必要なJavaScriptファイルやCSSファイルは、お問い合わせフォームを設置しているページだけで呼び出せば問題ありません。
ところが、なぜか全部のページでお問い合わせフォーム用のファイルを呼び出す設定になっていることがままあります。
そこで、Page Speed Insightsの診断結果を見ながら、
「このファイルは全ページに必要なのかな？」
と吟味して、特定のページだけで必要なファイルは、そのページだけで呼び出すように設定します。
▼不要なウェブフォントの読み込みを止める
H先生のホームページではGoogleフォントを読み込んでいましたが、調べるとGoogleフォントをまったく使っていません。
そこで、Googleフォントの読み込みをおこなわないようにしました。
なお、テーマの管理画面で設定できる場合もありますし、そうでなければ【Disable and Remove Google Fonts】プラグインを導入して無効にしてください。
▼読み込みを後回しにしても良いファイルは後で読み込むようにする
▼ほかのページでも利用するファイルをいちいちダウンロードし直さないように設定
▼HTMLファイルなどを圧縮してダウンロードするように設定
▼個々のページのコピーをHTMLファイル形式で出力・保存しておく
これら4つは、WordPressのキャッシュ系プラグインを導入すれば実践できます。
キャッシュ系プラグインはいくつかありますが、私は主に【WP Fastest Cache】を使っています。
ただし、パソコンとスマホとで別の画面を出力するテーマを使っている場合は【WP Super Cache】をオススメします。
●面倒なホームページの表示高速化を代行します
WordPressプラグインを導入すれば改善できる項目もありますし、ある程度は表示速度も上がります。
Page Speed Insightsの結果が思わしくなかった方は、ぜひお試しください。
ただ、ここで紹介した対策のうち、個々のページやテーマに手を加える必要があるものが半分以上を占めており、スコアアップに大きな貢献をするのもこちらの対策です。
Page Speed Insightsの診断結果に表示されている問題点から、どこをどう改善すれば良いかを掴むのもかなりの難題です。「何を書いてあるのかがわからない」という方も少なくないことでしょう。
書いてある内容がわかっても、テーマファイルの書き換えは、HTML・CSS・JavaScript・PHPがある程度は読めないと、適切に書き換えるのは難しいです。
失敗すると最悪の場合、ホームページや管理画面が表示されなくなります。
そんな、難しく面倒くさいホームページの表示高速化を当会で代行いたします。料金などくわしくは下記ページをご覧ください。
●スマホでHPがあっという間に表示されると快適です
ホームページにアクセスした途端にページがキレイに表示されると、ストレスがなく快適です。
逆に、表示に時間がかかるホームページはイライラしますし、時間がかかるほど前の画面に戻ってしまう人が増えます。
SEOやMEO、広告などでせっかくホームページに見込み客を集めても、表示が遅いホームページで追い返すようなマネをするのは大変もったいないです。
ぜひ表示速度をもっと早くして、お客様に無用のストレスをかけないよう改善しましょう。
ホームページ表示高速化についてご質問やご相談がございましたら、下記のお問い合わせフォームやLINE公式アカウントからお寄せください。
投稿者プロフィール
- 地元密着なび代表
- 全国の小さな施術院やお店・事務所がインターネットを使ってお客様を増やすための手助けと、メルマガ＆ブログでの情報発信をしています。
・ホームページ制作＆リニューアル
・SEO＆MEO（ローカルSEO）
・ホームページやブログの更新代行
・SNSの活用サポート
詳しいプロフィールはこちら
