すぐにできる！Webパフォーマンス最適化

こんにちは。TAM UX/UIチーム エンジニアの加納です。
主にフロントエンド周りを担当しています。

最近クライアントより「Webサイトの表示が遅いので改善してほしい」や「検索順位を上げたい」といったお問い合わせが多々あります。
またWebサイトの高速化は企業の売り上げにも大きく関わってくる部分なので関心も大きいかと思います。

Webサイトの高速化と聞くと、サーバ側の処理を速くする必要があると考えている方も多いかと思いますが、フロントエンド側でもできることはたくさんあります。

今回は自分がこれまで試した中でエンジニア以外の方でもすぐに実践できる方法を紹介したいと思います。

1．Webパフォーマンスとは？

Webパフォーマンスという言葉を聞いたことがある方も多いかと思いますが、そもそもWebパフォーマンスとは何を指すのかというと、主に「Webサイトの読み込み(ロード)時間」を指します。

つまり「Webサイトをどれだけ速く表示できるのか」を指しており、表示が速ければ速いほどパフォーマンスが良いサイトと言えます。

具体的な数値として、下記の 「PageSpeed Insights」というツールを使って簡単に計測することが可能です。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

こちらはPageSpeed Insightsで企業サイトを測定した結果です。
(Appleのサイトを測定しています。)

詳細な説明は割愛しますが、中央に表示されている「47」という数値は主にページ読み込みや画像表示速度に関する指標で、数値が高ければ高いほどWebパフォーマンスの良いサイトと言えます。
※通信状況等により、数値は多少変動します。

また数値を上げるための改善点についても記載されており、パフォーマンス改善のために主にこちらの情報をもとに修正していくことになります。

2. Webパフォーマンスはなぜ重要なのか？

Webパフォーマンスが重要な理由は大きく2つあります。

一つ目が、UXの向上です。
ページの表示速度が速ければ速いほどユーザが快適にサイトを閲覧できます。
Googleの調査によるとページの読み込みに3秒以上かかると、ユーザの53%以上は離脱するという調査結果も出ています。

参考サイト
https://www.thinkwithgoogle.com/data-collections/top-12-marketing-insights-2017-carry-you-2018/

二つ目が、検索ランキングの向上です。
Google検索などのランキングにおいて、ページの表示速度もランキングに影響することは公式サイトでも公表されています。

参考サイト
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

このように、Webパフォーマンスはユーザの離脱率や流入数に大きな影響を与えるため、企業の売り上げにも大きく影響してくる可能性があります。

3. すぐにできるWebパフォーマンスの改善法

Webパフォーマンスを改善する選択肢はたくさんあり、難易度の高い方法からすぐに実践できる方法からさまざまです。

今回はその中でも自分がこれまで試した結果、簡単に実践できて効果も大きいと感じた方法を紹介したいと思います。

1. 画像の容量をできるだけ小さくする

Webサイトのパフォーマンスを上げる最も簡単な方法は「データ転送量」を減らすことです。
そしてWebサイトのデータ転送量の大部分を占めるのが画像です。

画像の容量を下げる方法はいくつかありますが、中でも効果的なのが画像形式にWebPを使う方法です。
WebPはGoogleが開発した画像圧縮形式で従来のJPGやPNGと比べて、20%以上画像を圧縮することが可能です。
Web上でJPGやPNGからWebPに変換できるツールがたくさんあるので、それらを使えば簡単に変換できます。
※対応策はありますが一部対応していないブラウザがあるので注意が必要です。

WebPの使用ができない場合でも、画像をきちんと圧縮してから表示するだけでも効果はあります。

2. 不要なコードを削除する
主にCSSやJavaScriptのファイルで使用していないのに、残したままにしているコードがある場合、それだけブラウザが読み込むファイルのデータ容量は大きくなるため、ページの表示速度も遅くなります。
不要なコードはできるだけ削除しましょう！

3. 第三者コードを貼らない
第三者コードとは外部サイトと連携すると時に接続されるリンク先のことです。
例えばYouTubeやFacebook、Googleアナリティクスなどのリンクがこれに当たります。
第三者コードへの接続のためにサイト読み込みに時間がかかり、サイトの表示速度が遅くなる原因となります。

中でもYouTubeによる影響は大きく、適切な処理をしなければWebパフォーマンスの評価を大きく下げる可能性があります。

そのためリスクを考慮した上で、貼る必要があるのか判断した方が良いです。

4. 画像の遅延読み込み
画像の遅延読み込みは比較的簡単に実装でき、かつパフォーマンスを大幅に向上させることができます。
遅延読み込みとは、「画面に表示されていない部分の画像の読み込みは後回しにしよう！」という機能です。
つまりユーザがスクロールして画面に表示する直前までは画像は読み込まれません。
これにより、ページが最低限の操作を受け付けるまでの時間や、スクロールしない場合でも通信容量が増えるといった緩和することができます。

現在Chromeのみの対応になりますが、方法は簡単で遅延読み込みさせたい画像のimgタグに下記の通りloading="lazy”を記述するだけです。

   <img src="sample.jpg" loading="lazy" alt=".."/>

最後に
Webパフォーマンスは目に見えない部分のため、普段意識されていない方も多いかと思いますが、UXや検索順位を上げるうえで非常に重要な要素の一つです。

Webパフォーマンスを上げる方法はこれ以外にも数えきれないほどありますが、今回は自分が試してみた中で比較的簡単に実践できる方法を挙げてみました。

自分自身もWebパフォーマンスの最適化についてはまだまだ知らないことがたくさんあるので、日々試行錯誤しながら学んでいるところですが、Webサイトの表示速度などで悩まれている方に少しでもお役に立てれば幸いです。

TAM はWebサービス、業務アプリなどの新しい価値を作り出すサポートしています！お気軽にご相談ください。
https://www.tam-tam.co.jp/ux/

加納 聖也 / Seiya Kanou
エンジニア
前職ではSIer系企業で5年間営業職を経験。
PC一台でモノづくりができるエンジニアと自由な社風に惹かれて
2020年4月よりTAMに参加。
スキルアップのため日々修行中。