triBlog

トリアナのブログ。

PICK UP
SEO
WEB制作
2019.7.10

WordPressサイトの表示速度をPageSpeed Insightsの提案に則って高速化してみる。

2019.7.10 WordPressサイトのサイト表示速度をGoogle PageSpeed Insightsの提案に則って高速化してみる。
トリアナブログの高速化はこの記事を見た奥田くんがやってくれると思う(期待)
ライター画像
つかざき

webサイトの表示速度は検索順位に影響されますと言われて早1年

Googleで検索する際にWebサイトの表示速度が検索結果順位に影響があることはご存知でしょうか?
今から1年前ぐらいにGoogleから「Speed Update」の発表があり、ページの読み込み速度をモバイル検索のランキング要素として使用するということが明言されました。

検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。

文中には最終的にはコンテンツ内容が良いことや検索結果として有用性が高いサイトが検索に有利ということは変わりはないという旨が書かれておりますが、極端な例で、
競合サイトとの被リンクやコンテンツ内容のレベルが同一ぐらいであれば、表示速度が遅い方が検索順位が下がってしまう。
ということが大いに考えられるアップデート内容でした🤔

国民的RPGゲーム・ドラゴンクエストだと戦闘時にレベルも攻撃力も一緒だけど素早さが高い方が先制攻撃できますよね?つまりはそういうことです。(乱数の概念は無視)

このアップデートを期に弊社でも本件に関するサイト速度見直し業務のご依頼を頂いたり、新規製作するwebサイトも表示速度を意識した製作を心がけております。

告知から1年経つので今更感はありますが、今回は社内への備忘録がてらSpeed Update後も放置していた自分の趣味ブログ(WordPress使用)を犠牲になってもらい高速化してみようと思います。

WordPressサイトの高速化

検証対象となる塚崎の個人ブログとは

完全に個人のブログです。どこかにリンクを載せたこともないので本邦初公開です😇(たぶん)
このブログは3年ぐらい前にWordPressの勉強を兼ねて立ち上げたサイトだったのですが、釣りを始めたこともあり釣果をメモする事を目的として再利用したサイトです。
たまに釣り記事は書いてましたが、ソースなどのアップデートは久しぶりです。

チェックしてみよう自サイトの表示速度

現在のサイト表示速度をPageSpeed Insightsでチェック

サイトの高速化…の前に、まずは自分のサイトの表示速度がどんなものかをチェック!

PageSpeed Insightsで、URL記入欄に自サイトのURLをコピー&ペーストして分析を開始……

サイト表示速度検証結果 1回目

1回目の計測結果は

モバイル:77
パソコン:82

と言ったまずまずの結果に。
(ぶっちゃけそんなに悪くないなと思ったのはここだけの話( ˘ᾥ˘ ))

この段階で数値がそこそこ高いのはサイト自体の構成や、サイト表示が遅くなる原因にありがちな大きな画像や重いプログラムを多用してない点が挙げられるのではと考えてます。

個人的には表示速度が遅くないということで若干満足したのですが、それでは今回のブログがここで終わってしまうので調査していきます(・ε・)チェ

計測結果を元にサイト表示速度を改善していく

速度調整をするために何を参考にすればよいのか?

PageSpeed Insightsの結果画面を下にスクロールすると「改善できる項目」と見出しが付いている項目があり、「ここを直したらいいよ」とGoogleが教えてくれますので、まずはこの項目をチェックしましょう。

調整① レンダリングを妨げるリソースの除外

改善できる項目で1番最初に気になったのは「レンダリングを妨げるリソースの除外」です。

ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。

個人的解釈としては、
「ファーストビューを表示させるのに使用されているjsやCSSはインライン化(ページに直接書き込む)した方が読み込み速度が早いからおすすめだよ。逆にファーストビュー以外の部分はまとめたりして読み込みを遅くした方がいいよ。」
という認識です。

とは言ったものの、該当する部分を一つ一つピックアップしてインライン化したりその他のソースをまとめたりするのは大変なので、ここはWordPressのプラグインを使います。

まずはこの界隈でもっともポピュラーであろうAutoptimizeさんを使ってみます。
(詳しい設定方法はこちらをご覧ください🐈)

有効化し対象ファイルを設定して保存。
さてさて計測結果はというと….

サイト表示速度検証結果 2回目

モバイル:59

どうしたんだお前。

原因を調査してみると圧縮化したファイルの内、jsファイルに不具合が発生しているようで一時的な表示不具合が発生してしまいました。
jsファイルの圧縮設定をオフにしてみたり設定をあれこれいじってみましたが、あまり効果を感じなかったので別プラグインに変更。

次にFast Velocity Minifyを使ってみます。
インストールして有効化をポチッとな。

サイト表示速度検証結果 3回目

 

モバイル:85

何回か計測してみましたが8〜10程度改善されていることが確認できました。
色々と細かい設定もできるようですが、今回は有効化のみで速度改善したところをみるとデフォルトの設定が優良……というか自分のサイトに適しているのかもしれませんね。
ソースを見てみるとテーマに使っているcssファイルが圧縮され、別ファイルになっているのが確認できます。

Autoptimizeは今回使用見送りとなりましたが、プラグインに対してソースの書き方や圧縮方法または他プラグインとの干渉など、相性の悪いところが原因でした。
プラグインで解決するのであれば、サイトバックアップを取った上で相性の良いプラグインを探してみましょう。
(  ˘ᾥ˘).o(数年前にアップしたサイトなのでCSSの命名規則とかは参考にしないでください。)

調整② webサイトのキャッシュを調整

続いてwebサイトのキャッシュをプラグインで調整します。
今回使ったプラグインはCache Enabler。
(使い方やらキャッシュの概念についてはこちらをご参考に↓)

おすすめ設定を施して保存。

モバイル:92

90の大台を突破✌︎(‘ω’)✌︎

調整③ .htaccessを使ってファイル形式別でもキャッシュを調整してみる

今度はファイル形式別にキャッシュを与えてみます。
.htaccessにmod_expiresというモジュールを使いキャッシュをコントロールします。

このExpiresByType〜の部分でファイルタイプとキャッシュ期間を指定しています。
今回は変化が少なそうなファイル形式のキャッシュを1週間〜1ヶ月と長めに設定してみました。

この.htaccessを使う方法ですが、キャッシュ保存期間を長くしているとサイトのファイル更新を同じURLで更新した際にはサイトを訪れたユーザーに更新したことが伝わらない可能性があるので、この方法を採用するのであれば更新後のファイル名を別のものにするなどの対応が必要ですね🤔

さて、このmod_expiresモジュールを使ってみた結果というと……

サイト表示速度検証結果4回目

モバイル:94
パソコン:99

計測するタイミングによってはサーバー速度の関係で89とかだったりしますが、パソコンが99をマーク。つよい。

ラボデータ

いつも赤・黄文字で怒りがちなGoogle先生もオールグリーンでこれにはご満悦。
両デバイスとも90以上を計測したので今回の高速化作業はこれで完了です。

まとめ

今回はプラグインと.htacessを使いWordPressサイト高速化にチャレンジしてみました。
今回あげたプラグイン以外にも

a3 Lazy Load
画像遅延ロードプラグイン。スクリーンに画像がスクロールインした段階で画像を読み込むように設定してくれます。
(サイトやJetpackとの相性が悪いこともあり、画像がロードされないこともあるので要検証)

など、画像に関するプラグインも有用性が高いです。

ただ、プラグインや.htacessは簡単に導入・変更ができて便利ですが、一歩間違えればwebサイトを閲覧不可にさせてしまう力があります。
自分の個人ブログで試してみましたが、クライアントのサイトなどの場合は安易な導入を行うのではなく導入前のバックアップ・検証を行い、問題がないことを確認してから導入しましょう。

基本的には「wordpress 高速化」「wordpress pagespeed insights」といったキーワードで検索すれば答えが出てくると思いますので、そちらも参考にしつつ高速化をチャレンジしてみてください。
いずれ来るであろうGoogle検索システムのアップデート時にはまたチャレンジしてみたいと思います。
では今回はこのへんで。ありがとうございました。

記事を書いた人

ライター画像
つかざき ディレクター

釣りとねこと炭水化物があれば生きていけます。 仕事はなんでもやります。

ライター画像
つかざき ディレクター

釣りとねこと炭水化物があれば生きていけます。 仕事はなんでもやります。

ページ上部へ