Page Speed Insightsに向き合って見つけた7つの改善策!

相対評価って・・・

なんか悔しい思い出

Page Speed Insightとは

https://developers.google.com/speed/pagespeed/insights/?hl=JA

Page Speed Insights(ページスピードインサイト)は
Googleが提供するサイトの表示スピードを分析し、数値化してくれるサービスです。

結果からは、どういう点が課題で、こういう解決策があるよ。といったことを
教えてくれる便利なものです。

ただ、大事なのはあくまでも全ウェブサイトの相対的な評価なので
これを100点満点にするのが目標だ!!というのはやめておきましょう!

そこを狙いたいのであれば、阿部寛のホームページを参考にしてください。

よく相談されることのひとつでもある

ウェブサイトの仕事をしていると
クライアント様から
ページの表示スピードをもっと上げたいが、なにか改善案を提示してほしい
と相談されることがある。

ぱっと思いつくのは、高解像度の画像をたくさん使っていたり
JavaScriptがソースの上部でこれまたたくさん使われていたりといったものです。

その他にもなにかありますか?

と聞かれたので、これを機会にいろいろ調べてみました。

サイトスピード改善策はいろいろ見つかりました

結果として効果の大小はあるが、以下のような対応を候補にあげました。
費用よりもまずは効果があるかを伝えてあげることがポイントですね。

– 画像の圧縮
– JSの位置を前後で調整
– グーグルフォントを正規記述変更
– jqueryのcdn化
– 解析タグの削除
– lazy loadの実装
– 構文の修正

この中から比較的軽微かつ、効果が出そうなメニューを選び実行したところ
点数は8〜10点ほど上がりました。

画像の圧縮

画像の圧縮は作業したフロントエンドに暗黙のことで任せていることが業務上多いと思います。
状況によって急いでいたりすると、出し直された画像までの圧縮まで手が回ってないこともあるだろうし、
人によって、画像圧縮の精度も様々でしょう。
なので、これはひとつすぐにできる対策でした。

JSの記述位置の調整

JSは<head></head>内だったり
footer手間などに集中して設置されていたりします。

後述しますが、Page Speed Insightはファーストビューを
どれだけ早く表示させるかが評価のポイントなので
あまりソースの頭の方にJS読込が多いと、その時点で時間がかかり
評価は悪くなってしまいます。

こちらは5年近く運用されているサイトになると、少し大掛かりになるので
本当はサイトスピードのことも意識して
なるべく後ろのほうで成り立つ構築を最初からできているといいですよね。

グーグルフォントの正規表現

Google Fonts(日本語)の読み込ませ方は、数年前はearlyaccessと記述されたリンクが多かったのですが
今改めて調べてみると、「あれは試験的だったから、正規版使ってよね」とグーグルさんはおっしゃられておりますので、其のとおりに変更しましょう。
これはなかなか効果的でした!

参考:正式版になった日本語Google Fontsは表示の高速化を期待できる

https://blog.ideamans.com/2018/10/google-fonts-japanese.html

jQueryの読み込ませ方をCDNに変更

これも数年前に作ってたから仕方がなよね。っていう部分なのですが
今はもっと良い記述があるよ!って話しなので、フロントエンドに相談して
CDN化されていなければ、やってもらいましょう。

と、CDNの説明をめっちゃ端折ろうとしていますが、
一応丁寧に説明しておきます。

CDNってなによ?

CDNとは、Content Delivery Networkのことです。
自分のWebページを公開しているサーバーとは別のサーバーに
コンテンツを配信するためのサーバーを用意し、そこからコンテンツを取得します。
サーバーの処理を分散させることで、負荷分散や通信速度の上昇が見込むことができます。

jQueryでは、実行のためのソースをCDN用のサーバーに保存し、
そのサーバーにアクセスすることで、自分達のプログラムでもjQueryを実行することができます。

jQueryを実行するためにはCDNを使用する方法の他に、jQuery本体をダウンロードして使用する方法もありますが、そちらの方法よりも実行速度が速いため、ほとんどの場合でCDNが使用されていて、これが簡単で、効果的です。

解析タグの削除

これはそもそも必要だから入れてるんですよ!って話しになっちゃうんですが。
もし入れるだけ入れて全く解析してないタグがあるのであれば削除しちゃいましょう。
不要な解析タグは外部読込で、結構思いプログラムなので、サイトスピードの観点からいうと
評価を下げてしまいます。

LazyLoadの設定

LazyLoad.jsはウェブサイトを開いた時に、まだブラウザ画面内に見えてない画像は
サーバーから読み込ませないようにするJSになります。
そして、スクロールしてその画像が表示されているところに差し掛かる直前で
人の目には遅れを感じさせないぐらいのスピードで読み込ませることができます。
さきほども言いましたが、PSI(勝手に略しました)はファーストビューで評価を判断しているので、
これは効果的なやりかたです。

アンカーリンクがあるサイトは要注意

これは実際にあった話しなのですが、LazyLoadを施して、一気に点数は改善したのですが。
あとあとなるほどな、、、という問題がひとつありました。
ページ内アンカーリンクがあると、スクロールするスピードの方がLazyLoadの処理よりも
早く、変な位置にアンカーさせてしまうことがありました。
この場合は、そのアンカーの到着地点だけは除外しておくことで回避できます。

構文の修正

構文の修正については、チェッカーを使えばなにかしらエラーが出てきてしまうのですが、
もし優秀なエンジニアが実装をしていれば、それでも出てくるエラーのほとんどが
外部から読み込んでいたりするものだったりします。
構文的には間違っているのかもしれませんが、ウェブサイトはアホではありません。
片言の英語でも、意味が通じてしまうのと同じで、多少構文が違くても、ウェブサイトはただしく認識してくれます。これはKB(キロバイト)レベルの問題だったりするので、ここはあまり気にしなくていいと思いました。

そもそもの評価基準は?

さて、いろいろと改善策をお伝えしましたが
そもそもGoogleのpage speed insights採点基準ですが、
まずは相対評価であるということを制作会社も、クライアント様も含め理解して頂くことが重要です。

どんだけ頑張っても
なぜかA判定をもらえなかった中学時代

「どうしていい結果を出しているのに、Aにならないんだ!?」と、先生を問い詰めた時に

「高垣よ、、、中学校は相対評価なんだ、お前よりすごい奴がまだいるってことだ。」

と、言われて、相対評価を学んだ中学時代。

相対評価と絶対評価の違いを実体験で学んでいる僕としては、
Googleさんもそっちですか、、、と半ばいじけたような気持ちにもなってます。

なので、ウェブサイトのピラミッドの上位には
ものすごいスペックのサーバーを使ってCPU高めなサイトだったり
戦術の阿部寛のホームページのようなテキストベースの超軽量サイトがいる限り
A判定なんて無理だって話しなのです。

判断基準はファーストビューの表示速度

Googleさんは忙しいので、いちいちあなたの全てを知ろうとはしてくれません。
とにかく第一印象、いかに早く顔が観れるかで判断しているようです。

つまるところファーストビューの表示速度が速ければ速いほど、
なんだいい顔してるじゃーん。と上位層に位置づけしてくれるんです。

しかし、シャイなアピール下手な人は、
ま、まずは私の全てを知ってください。と見えもしない最下部の画像まで読み込み終わってから、はじめて顔を見せたりするわけです。

試しにLazy loadや、KVだけを先に読み込ませてからアニメーション発動、
そのあとスクロールするたびに画像を読み込ませる実装をしたら、点数が10点ほどあがりました。

デベロッパーツールで検証しても
load timeは3分の1ぐらいに変わっていたので
ここまで下がると体感もできるぐらい速くなりました。

サイトのスピード改善をしたい。と言われた時に
社内でディレクターレベルで聞いても意外とみんな知らなかったりしたので
こちらを備忘録がわりにアップしてみました。

ご参考になれば幸いです!

まずは何事も知識を蓄えることが大事です。こちらはおすすめ。