ブログを書き始めて、よく聞いたのが「あれこれブログサイトをカスタマイズするよりは記事を書きましょう」と言うことでした。
当時はWordpressプラグインを使ってあれやこれカスタマイズに力を入れている時期だったため、有料WordPressテーマ「ストーク」
を導入してブログサイトのカスタマイズは止めて、記事を書くことに集中し始めました。力をかけるところが違うでしょと。
そんな中、ここ最近スマホで自身のブログサイトを見ていると「なんか表示が遅いなー」と感じるようになりました。
気のせいかなーと思ったため、サイト評価ができるPageSpeed Insightsで一応確認してみることに。
その結果・・・
【モバイルサイトのスコア】
【パソコンサイトのスコア】
モバイルサイトのスコアは「14」で、パソコンサイトのスコアが「35」とは。。。Orz
体感で遅いと思っていましたが、まさかこんなにスコアが悪いとは思いもしませんでした。
こんな状態なので、何かしら手を加える必要があると判断し、今回プラグインを試行錯誤しつつ対応しました。
・PageSpeed Insightsのスコアが低くて困っている人
・自身のサイト表示が遅いと感じる人
サイトの表示速度に影響を与える原因
まず、サイトの表示速度に影響することってなんだろう？と思い、少し考えてみることにしました。
サイトの表示速度に関わる理由は一つじゃなく複数あるため、全部対応するというよりは手を付けやすいところから着手して、少しずつ改善しようと思います。
そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
引用元：Googleウェブマスター向け公式ブログ ページの読み込み速度をモバイル検索のランキング要素に使用します
Googleウェブマスター向け公式ブログを見てみると、ページの読み込み速度は検索ランキングに影響を与える ということでしっかりと対策しておきたいところです。
【原因その1】サーバ側の処理性能が低いパターン
基本的にブラウザを使ってサイトが表示されるまでの流れとしては
- 端末からサーバへURLリクエスト
- サーバがリクエストを受け付けて、サーバで処理した内容を端末へ返す
- 端末が受け取ったレスポンスを元に追加リクエストしたり、ブラウザで表示処理を実施
となります。
そのため、サーバ側の処理が遅いと、ブラウザ表示が遅くなることにつながることになります。そのため、ブログサイトを運用する身としてはサーバ性能を気にしておく必要があります。
わたしはレンタルサーバーのXserver
を使っているため、簡単にはサーバ性能は上げることはできません。
ただ、サーバの性能は上げることが出来なくても、「サーバ側のキャッシュ機能」を使ってキャッシュ応答させれば、サーバ負荷を下げる対策ができるのではないでしょうか。
ちなみにわたしが使っているレンタルサーバーのXserverでは標準でキャッシュ機能が付いています。
【原因その2】ダウンロードするコンテンツサイズが大きいパターン
次にサーバ処理がいくら早くても、ダウンロードするコンテンツ(画像ファイル、WEBフォント、CSS、JavaScript等)のサイズが大きかったら、ダウンロードに時間がかかってしまい、サイト表示時間に大きな影響が出てしまいます。
ありそうなこととして
- 画像ファイルサイズが大きすぎる
- WEBフォントサイズが大きすぎる
ということが考えられるでしょう。
CSSやJavaScriptのサイズはテキストファイルのため、ほとんどが100KB未満です。
一方で画像ファイルはスマホや携帯カメラの性能が向上したこともあり、画素数や画質を調整しないと画像ファイルサイズが大きくなり、あっという間に500KBや1MBを超えてしまいます。
そして、ブログ記事を構成する画像ファイル自体を減らすことってなかなか難しいですよね。(減らせるわけがない)
そのため、対策としては
- WEBフォントをダウンロードするまではブラウザのデフォルトフォントで表示して、ダウンロード完了したらWEBフォントに切替
- ブラウザ画面に表示されている画像だけ読み込んで、表示箇所の画像を後から読み込む
- CSSやJavaScriptを最適化する
など、WEBフォントや画像を読み込む処理に対して手を加えることが考えられます。
【原因その3】ブラウザ側の処理が多いパターン
そして、最後にブラウザ側の処理が多いパターンがあると思います。わたしも間違いなく当てはまっているはず。。。
WordPressはプラグインを使って機能拡張できるのは大きなメリットなんですが、デメリットとして読み込むJavaScriptの数が増えてしまい、結果的にサイト表示に時間がかかるということになりかねません。
※JavaScriptはサーバ側ではなく、ブラウザ側で処理が実行されます。
そのため、対策としては
- そもそも使うプラグインを限定して減らす
- ページ表示に不要なJavaScriptは後で読み込む
というのが考えられます。
サイト表示速度の改善で対応したこと
上記に記載したとおり、サイト表示が遅いと思われる原因は複数あります。今回、できそうと思った以下のような改善をしていくことにしました。
- WEBフォント(Googleフォント)の読み込みを止める
- 画面に表示されていない画像ファイルの読み込みを遅延させる
- ファーストビューCSSの優先読み込み、CSSの最適化
- JavaScriptの遅延読み込み、JavaScriptの最適化
【原因その2の対策】WEBフォント(Googleフォント)の読み込みを止める
過去、ブログ記事を書いている中でWEBフォントの存在を知りました。
WEBフォントの見た目に感動して、速攻STORKの子テーマに含まれるスタイルシートへWEBフォントを読み込む設定を記述したのでした。
1 2 3 4 5 6 | @import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css); @import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css); body { font-family: 'Noto Sans Japanese', sans-serif; } |
このWEBフォントの読み込ませ方法が良くないようで、端末へWEBフォントのダウンロードが完了しないとテキスト文字が表示されませんでした。
しかも、2MB近いファイルサイズのWEBフォントを2つもダウンロードしている始末。そりゃ、ダウンロードするのに時間がかかるでしょうって話です。
そのため、一旦追加したWEBフォントを読み込む設定をコメントアウトして無効化して対策しました。
まぁ、余計なことはせずにまずはシンプルな状態にして効果を見てみようとしたわけです。
その後、再度PageSpeed Insightsで確認してみると、以下のような結果に。
【モバイルサイトのスコア】
【パソコンサイトのスコア】
WEBフォントの読み込みを外すだけで
- モバイルサイトのスコアを「14」→「21」
- パソコンサイトのスコアを「35」→「61」
に改善することができました。
個別設定していたWEBフォント設定を無効化することによりパソコンサイトのスコアをかなり改善できているのが分かります。
なかなかサイトの表示速度が早くならないって人は「WEBフォント」の読み込み状況を確認してみるのはいかがでしょうか？
少なくともWordPressのテーマで使われているWEBフォントは対策されているため、個別設定している「WEBフォント」は要チェックです！
【原因その2の対策】画面に表示されていない画像ファイルの読み込みを遅延させる
PageSpeed Insightsの分析結果で指摘された中で影響が大きそうなことは「オフスクリーン画像の遅延読み込み」でした。
画面に表示されていない画像も一気にダウンロードしてサイト表示が遅くなってますってことですね。
少し調べてみると、WordPressのプラグインを使うことで簡単に実現出来るということで、早速プラグインを探してインストールしてみました。
プラグイン適用で画像が表示されなくなることがあるため、実施前には万一に備えてブログサイトのバックアップを取っておきましょう。
Lazy Load by WP Rocket
まず試してみたのは「Lazy Load by WP Rocket」プラグインです。
プラグイン有効化後の設定はシンプルで3つのチェックボックスをONにするだけです。
ただ、ブログサイトトップページを確認すると、のヘッダ画像が表示されなくなるという状態に。。。
「Lazy Load by WP Rocket」は設定がシンプルで細かい設定できません。どうしようもなく、「Lazy Load by WP Rocket」プラグインは早々諦めることになりました。
Lazy Load
次に試してみたのは「Lazy Load」プラグインです。
プラグイン有効化後の設定項目は無く、プラグインを有効にするか無効にするかだけです。
有効化してブログサイト表示を一通り確認してみましたが、特に影響はなさそうでした。
ただ、細かい設定ができないということもあり、一旦保留とすることにしました。
Autoptimize(★当ブログで採用★)
次に試してみたのは「Autoptimize」プラグインです。
プラグイン有効化後の設定は「images」項目を選択して
「Lazy-load images?」項目のチェックボックスをONにするだけでOKです。
設定後にブログサイト見ても、表示は問題なさそうでした。
また、「Autoptimize」プラグインは他にも細かい設定ができそう(※後述します)だったため、採用することにしました。
【原因その2の対策】ファーストビューCSSの優先読み込み、CSSの最適化
次の対策として「ファーストビューCSSの優先読み込み、CSSの最適化」を実施しました。
対策に使用したプラグインは先程インストールした「Autoptimize」です。「Autoptimize」の設定には「images」以外に「JS, CSS & HTML」があります。
わたしは以下のチェックボックスをオンにしました。
- CSSコードを最適化
→CSSを最適化したいのでONにします。 - Aggregate CSS-files?
→複数のCSSファイルを一つに集約して効率良くしたいため、ONにします。ONにしなくても個々のCSSファイルは最適化されます。 - インラインのCSSを連結
→CSSファイルはWordPressテーマで別ファイルとして読み込んでいるため、この設定はONにしなくてもいいかなと思います。わたしは念のためにONにしました。
- CSSのインライン化と遅延
→全てのCSSをダウンロードしてからファーストビューを表示しようとすると、時間がかかってしまいます。そのため、必要なCSSだけ先に読み込んでファーストビューの表示速度を上げることにします。
ファーストビューに必要な「クリティカルパスのCSS」はオカピーさんのサイトを参考にクリティカルパスCSSジェネレーターで生成して埋め込みました。
【原因その2,3の対策】JavaScriptの遅延読み込み、JavaScriptの最適化
最後に「JavaScriptの遅延読み込み、JavaScriptの最適化」の対策を実施しました。
「JavaScriptの最適化」は引き続き「Autoptimize」プラグインを使用します。
JavaScriptの設定は「JS, CSS & HTML」の設定項目にあります。
わたしは以下のチェックボックスをONにしました。
- JavaScript コードの最適化
→JavaScriptを最適化したいのでONにします。 - Aggregate JS-files?
複数のJavaScriptファイルを一つに集約して効率良くしたいため、ONにします。ONにしなくても個々のJavaScriptファイルは最適化されます。
ちなみに「JavaScriptの遅延読み込み」は「Autoptimize」プラグインでは実現できなさそうでした。
わたしのブログサイトではプラグインをたくさん使っているため、多くのJavaScriptを読み込んでいます。そのため、「JavaScriptの遅延読み込み」は何としてでも対策しておきたいと思っていました。
色々と調査した結果、「Scripts To Footer」プラグインが使えるんじゃないか？ということで試してみることに。
プラグイン有効化後に設定を確認します。
中身を確認してみると、除外対象の設定だったため、まずはデフォルト設定で問題ないか確認してみました。
すると、WordPressテーマ「ストーク」のスライドリンクが真っ白になり、ブログサイトトップページに表示されなくなる現象が発生しました。
そこで、「Scripts To Footer」の設定で「Header Scripts」->「Keep jQuery in the Header」のチェックボックスをONにしたら、スライドリンクが表示されるようになったため、「Header Scripts」プラグインをそのまま採用するのことへ。
さてさて気になる対策後のPageSpeed Insightsスコアは？
今回、サイト表示の改善として、以下の4つの対策を実施しました。
- WEBフォント(Googleフォント)の読み込みを止める
- 画面に表示されていない画像ファイルの読み込みを遅延させる
- ファーストビューCSSの優先読み込み、CSSの最適化
- JavaScriptの遅延読み込み、JavaScriptの最適化
その後、改めてPageSpeed Insightsで分析してみると・・・
【モバイルサイトのスコア】
【パソコンサイトのスコア】
最終結果として
- モバイルサイトのスコアを「14」→「21」→「42」
- パソコンサイトのスコアを「35」→「61」→「80」
のようにスコアを改善することができました。
ぱちぱちぱち。
スコアが伸びた大きな理由としては「オフスクリーン画像の遅延読み込み」を対策したことだと思います。
モバイルサイトのスコアはまだまだ対策が必要と思われますが、パソコンサイトのスコアはかなり改善できたのでないでしょうか。
その後、先人の知恵を辿って調べていくと、
- Google Analyticsタグを使うとスコアが伸びない
- Google Adsenseタグを使うとスコアが伸びない
という記事をチラホラ見かけるため、最終的にはPageSpeed Insightsのスコアをより伸ばすのであれば、「Google Analyticsタグ」「Google Adsenseタグ」を使わないという結論に至りそうです。
みなさんも自身のブログサイトの表示速度が遅いと感じたら、PageSpeed Insightsで確認して対策してみてはいかがでしょうか？
