ページスピードについて

Google サーチコンソールにいつの間にか「速度」という項目が追加されました。

Googleは検索ランキングでページ速度を使用すると発表しています。

Using page speed in mobile search ranking

来年は5Gも来て大容量のデータが高速にダウンロードできるようになり、動画がいよいよ本格化するのでは、と言われています。
そんな最中、逆行しているような気がしますが、サーチコンソールに追加されたとなるといよいよGoogleは「速さ」要素を重要視しているのが明らかです。
現在の所、この点数が良いと検索順位がよくなるかと言えば、あまりそうは思えません。
1位になっているサイトがかなり遅かったりします。ただ、遅いページはビジネスチャンスを逃しますし、今後重要視されだした時に大きく検索順位が変わる要因になりえます。

サーチコンソールの「速度（試験運用版）」を押すと、「PageSpeed Insights を試す」と出てきます。

PageSpeed Insights

「ウェブページのURLを入力」部分に御社のホームページのURLを入れてみてください。
弊社は以前からこのスピードを重要視してきました。

キャッシュを使っている為か、何回か押すと点数が変わります・・。(これは、一番いい時です）

改善させるコツ

ページローダーを使わない

以前弊社は、ばらばらと表示されるよりは、全部読み込んでから表示させた方が綺麗ではないかと思いローダーを使っていました。
その為、表示されるまでの時間がかなりかかり、点数を下げていました。
「First Contentful Paint」が初回表示の秒数になります。ローダーはなるべく使わないようにしましょう。

次世代フォーマットでの画像の配信

PageSpeed Insightsで、「JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。」と書かれております。

実は、弊社はまだpngやjpgを使用しております。
理由は、JPEG 2000、JPEG XR、WebPの対応ブラウザの少なさです。一番対応されているのが2019年11月現在WebP(うぇっぴー)です。
このWebPはなんと、Googleが開発した静止画フォーマットなのです。かなり軽くなるようで、弊社の場合はWebPに変換した場合、表示速度が3秒早くなる、とPageSpeed Insightsで書かれていました。

2019年11月現在IE11及び、Safari、iOS Safariで対応されていません。
日本人はIEとiphoneで見る確率が高いので、もしWebPを使用する場合は、対応されていないブラウザの場合、jpgやpngを代わりに表示させなくてはいけません。

書き方ですが、pictureタグを使います。

<picture>
<source srcset="xxx.webp" type="image/webp">
<img src="○○○.jpg">
</picture>

と、今まで <img src="○○○.jpg">のみ書いていた所、どちらも書きます。
ただ、このpictureタグ、IE11に対応しておりませんので、jsが必要です。

Picturefill

実は、上記の処理をして弊社サイトを表示させた所、新たにjsが加わった為かPageSpeed Insightsの点数が落ちたのです・・・。
弊社はiphoneでWebPが表示されるようになったら対応する予定です。

ChromeはGoogleが開発したブラウザですが、読み込みの遅いページにラベルをつける事を検討していると発表しています。

Moving towards a faster web

スピード対応はできる所からやった方が良さそうです。

画像を圧縮する

jpgやpngを使用する場合でも、できるだけ画像は圧縮しましょう。
弊社の場合は、下記のサービスを使っています。

tinyjpg

枚数に限りはありますが、フォルダ毎選択、圧縮して、フォルダ毎ダウンロードできます。画像の名前などは変わらないのでとても便利です。

ウェブフォントはサブセットする

デザイナーとしては、とても便利なウェブフォントですが、重くなる原因の1つです。
Google fontや日本語フォントは、使うフォントのみにサブセットしましょう。
日本語フォントは特に重いです。常用漢字のみにサブセットするとかなり軽くなります。

css、jsは圧縮する

cssやjsはなるべく1つにして（リクエスト回数が減ります）、圧縮しましょう。
様々な圧縮方法がありますが、1つご紹介します。

css-minifier

左側にcssやjsを入れ、Minifyするをクリックすると、空白や改行を削除し1行に圧縮してくれます。
ただ、ここで注意なのが、圧縮するとよくエラーやトラブルが起きます。必ず圧縮前の物も取っておいて、圧縮後、表示や機能がそのままか確認しましょう。

キャッシュを使う

頻繁に変更しない、画像、css、jsはキャッシュさせます。
弊社は.htaccessでキャッシュを行っています。

まとめ

このように、ホームページの速度を早くするのは、かなり技術がいります。
来年の5Gと絡んでどう動くかわかりませんが、Googleがスピード対応に本腰を入れているのは確かです。
5Gの地方格差、対応する国、地域は限られていますし、全国、世界のユーザーを考慮する場合はどんな環境でも早いWebをまだまだ求められそうです。