PageSpeed Insightsで見る「WEBサイトの読み込みを早くする方法」

PageSpeed InsightsはGoogle Developersの一つで、あらゆる端末でウェブページの表示速度を評価し、読み込み時間を短くするための提案をしてくれる便利なWEBサイトです。URLを指定箇所に入力するだけなので簡単に使えます。

インクループのホームページの様子がこちら

Poorです。
真っ赤です。
赤点です。

ページの最適化がなされておらずユーザーエクスペリエンスが低い……とな……？
そういえば社員が使っても激重な時があります。

ページ表示までに2～3秒以上かかってしまうと、ユーザーのうち1/3は「もーいいやー」と離脱してしまうという今日この頃。回線がよくなってからは「表示されない」なんてこともなくなりましたが、3秒！
自分のパソコンからアクセスしたら早いけれど、ほかの人のパソコンから、あるいはモバイルから見てみたら、「おっそ！」ということもありうる……？

これはどうにかしなければならない案件です。
さっそくPageSpeed Insightsに沿って対応していきます。

PageSpeed Insightsの提案「画像を最適化する」

WEBサイトの表示、読み込みが遅いのは、多くの場合画像に原因があります。
よりきれいな画像で見せたい、という気持ちもありますが、適材適所できちんとしたサイズ、重さ、拡張子を選びましょう。

WordPressなどのCMSを使っていない場合は、画像一つずつを手作業で調節していく必要があります。画像の圧縮などに関してもいろいろ手間ですが、以下のようなサイトを使っていきましょう。

http://compressjpeg.com/ja/　（JPG圧縮）
https://tinypng.com/　（PNG圧縮)

WordPressを使っていて、たくさんの投稿コンテンツ、画像がある場合、これらを一つ一つを圧縮していくのは重労働ですので、プラグインを使ってしまいましょう。

＞EWWW Image Optimizer

こちらのプラグインを入れておくと、すでにアップロードされた画像を検出し、一括で圧縮してくれます。
その上、以後アップロードしてくれたファイルも、自動で圧縮してくれる優れもの。
ですが、「メディアアップロード」を使っていない場合の画像は、一つ一つ手作業でコントロールしていくことになります。FTPを活用してどんどんやっちゃいましょう。
プラグインの使い方は割愛しますが、これらを行うとこんな感じになります。

スクロールバーがなくなるほど、項目を削減できました。が、WEBサイトに広告がある場合はどうにもならず！　こればかりは涙を呑むしかないのですかねぇ……。

評価もサクッと上がっています！

PageSpeed Insightsの提案「ブラウザのキャッシュを利用する」「JavaScript を縮小する」「CSS を縮小する」

キャッシュ（cache）とは「一度アクセスしたWEBサイトの情報を記憶していく」ブラウザ（エクスプローラやGooglechrome、firefoxなどのWEBサイトを見るためのアプリケーション）が持っている自動的なシステムのことです。
WEBサイトの情報を記憶しておくと、次にアクセスしたときにアクセスが劇的に早くなります。

WEBサイトに来てくれた方がもう一度来てくれた時に、読み込みを早くするため、キャッシュを残しておく期限を設定しましょう！
こんな感じでhtaccessに書き込みます。

ついでにできる範囲でJavaScriptとCSSを圧縮してついでにHTMLも圧縮しておきましょう。追記。

書き込む場所はこちら。

WordPressを利用している場合の圧縮はこちらのプラグインが便利です。

＞Autoptimize

が！

プラグインを使うと表示が乱れたり、うまく機能しなかったりすることがありますのでご注意を！
このプラグインが、というよりも、プラグインというものそのものと、WEBサイトの相性があります。ご利用は計画的に！

PageSpeed Insightsの提案「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

レンダリングブロックしているものにあたるJavaScriptやCSSをフッターなどに回すことで回避することが可能です。頭から読み込んでいくので、足の方に回してしまえば、「読み込みをブロックしていない」ということになるわけですね。

＞JavaScript to Footer

こちらのプラグインがおすすめです。

が！

WordPressなどのCMSを利用している場合、このプラグインを使うと表示が乱れたり、うまく機能しなかったりすることがありますのでご注意を！
インクループはこちらのプラグインを泣く泣くあきらめました。速さに勝っても中身の表示がダメだったら何の意味もないですものね。

結果として「36点から83点」へ改善成功！

以上をやるだけでここまであがりました！

モバイルの方はまだまだ手を入れなければなりませんが、ひとまずはPCサイトでの表示をスピードアップです。
ちなみにこの数値、Yahoo！さんとほぼ同じ数値なんですね。

満点じゃなくても大丈夫。なぜなら……

このテストでは、パフォーマンスに関する一般的なベストプラクティスがページに適用されているかどうかをチェックします。スコアが高いとユーザーエクスペリエンスは良いですが、ユーザーエクスペリエンスを保証するものではありません。

とGoogleさんもおっしゃっている通り、満点だからといってユーザーエクスペリエンスが約束されているわけではありません。

「満点じゃなくてもいいの？」とか「緑のグッドライン（85点以上）」と勘ぐってしまいますが、無理してこれに沿ってサイトをあれこれをする必要はないとインクループは考えます。
何せこのPageSpeed Insights、全世界対応です。
世界で使われているインターネットの4G回線は約47％（2015年）。半分は3G回線以下です。日本のインターネット事情で物を見たとき、このPageSpeed Insightsのスコアがどれくらい大切か、と考えると、やはり目安程度で判断したほうがよさそうな気もします。

とにもかくにも、少しの手間でホームページを見てくださっているユーザーの方々の、ストレスフリーなインターネットライフに貢献できるのですから、やらないテはないですね！

引き続きモバイルもしっかり見て行こうと思います。