【徹底整理】Webサイト表示速度高速化手法まとめ！｜Labo｜株式会社トライム

Webサイトの表示速度について気にしたことはあるでしょうか？
ユーザー体験（UX）に影響し、SEO対策にもつながるため、Webサイトを運営する上では目を背けてはいけない大事な要素です。PageSpeed Insightsを利用することで気軽に検証でき、100点満点で採点することが可能です。この際、具体的に何点を目指す、というよりは実際に自分でページを閲覧した際の体感時間を意識することが重要です。

この記事ではページ読み込み速度の改善につながる施策を「画像面」「コーディング面」「バックエンド関連」の３つの分類でまとめていきます。

画像面の施策

画像を圧縮する

ページ速度の改善施策の中でも特に、実施しやすく効果も大きいのが画像の圧縮です。
圧縮を行う際に意識すべきことは下記の4つです。

・見た目に影響を与えない範囲でなるべくファイルサイズを小さくする
・最適な画像フォーマット保存形式、画質、解像度を選ぶ
・必要とする効果がCSSで得られる場合はCSSを活用する
・すべてのピクセルが不透明な場合にはGIF、PNGのアルファチャンネルは削除する

特別な事情がなければスマートフォンで綺麗に見えるギリギリまでファイルサイズを圧縮したいところです。

圧縮を行うには、Webサービスを活用してブラウザ上で圧縮する方法や、GulpやWebpackを利用してローカル上で全自動で実施する、といった方法もあります。必要に応じて最適なやり方を選定しましょう。また、どの方法を利用するにしても、必ず実際の表示確認を行うようにしましょう。

TinyPing：画像圧縮Webサービス

次世代フォーマットの利用

これまで一般的に利用されてきた画像フォーマットには得意不得意が存在しました。
例えば、JPGは色のデータが多い写真などに適していて、GIFはイラストなど比較的画素数が写真よりも少ないもの、背景を透過させたい場合はPNG、など。
それら既存フォーマットの良い点を兼ね備えている次世代画像フォーマットをいくつか紹介します。

WebP

Googleが開発した画像規格で、画像ファイルサイズをJPGよりも小さくでき、透過にも対応しています。
safariブラウザに対応していない時期が長かったのですが、現在は全てのブラウザで利用可能になので、圧縮率から見ても利用するメリットが大きいでしょう。

AVIF

もうひとつ注目されている次世代画像フォーマットとして、AVIFが存在します。
HDRカラーをサポートしており、アルファチャンネルやアニメーションにも対応、WebPよりも高い圧縮率を誇る画像規格です。圧縮率の他に高品質なアニメーションGIFも可能という点がWebPにはない有利性です。

現段階ではMicrosoft Edgeブラウザのみ対応していないため、後述のpictureタグを活用しWebPや他の画像フォーマットと併用する形が良いでしょう。

JPG・PNG・WebP・AVIFの比較

実際にそれぞの画像を比較してみたいと思います。
まずはPNGとJPGファイルです。200×200サイズで同じくらいの画質になるよう調整したものが下記に実際に埋め込んだ画像です。
30KBほどPNGファイルのほうが容量が重い結果となっており、可逆圧性（保存を繰り返しても劣化しない性質）と透過性という強みがあるものの、それらのメリットを必要としない状態ではjpgのほうがファイル容量が軽くなることが伺えます。

• 

• 

次にAVIFファイルとWebPファイルです。こちらも200×200サイズで同程度の画質になるよう設定していますが、格段にファイル容量が軽くなりました。
AVIFの方が容量が軽い結果となっていますが、現段階ではMicrosoft Edgeに対応していないため、他フォーマットと組み合わせて利用するようにしましょう。

• 
• 

音声・動画ファイルについて

Web上でMP3やGIFを埋め込んでいる場合、次世代音声・動画フォーマットを利用することで軽量化を図ることが可能です。
音声と動画ファイルでは、それぞれ音声・動画コーデック（元データからエンコード/デコードを行うソフトウェア）の性質も考慮し、フォーマットとの組み合わせを考えて実装することが必要になります。

実際にWeb埋め込みと相性が良いコーデックとフォーマットを整理してみました。

音声ファイル

音声コーデック・フォーマットの組み合わせで対応ブラウザが多く高性能（圧縮率が高く同音質の際に軽量）といえるものは下記の表をご確認ください。

音声コーデック	Opus or AAC
音声フォーマット	mp4.or webm or .wav

動画ファイル

動画の場合は追加で動画コーデックも考慮する必要があります。
動画コーデック・各フォーマットの組み合わせで対応ブラウザが多く高性能（圧縮率が高く同音質の際に軽量）といえるものは下記の表をご確認ください。

動画コーデック	VP9 or AV1
音声コーデック	Opus
動画フォーマット	webm

これらのコーデック・フォーマットはそれぞれ異なる性質をもっており、用途によっても最適な組み合わせは異なるのでそれぞれの性質を確認して選定しましょう。

pictureタグの活用

pictureタグはHTMLへ画像ソースを記述する際に利用するタグの一種で、画面幅や閲覧する端末に応じて画像を出し分けさせることが可能になります。

<picture>
  <source srcset="pc.jpg" media="(min-width: 1025px)">
  <source srcset="tab.jpg" media="(min-width: 600px)">
  <img src="sp.jpg" alt="">
</picture>

複数のimgタグをHTML上に記述し、端末に応じてCSSで表示非表示を切り替える方法なども存在していますが、このやり方では非表示の画像にも読み込みが発生するためそれだけ読み込みが重くなります。

対して、pictureタグを利用することでブラウザが対応していない形式の場合や画面幅に応じて、読み込みを発生させることなく複数の画像を切り替えさせることができるので積極的に活用しましょう。

適切な属性の利用

前述のpictureタグの利用せずにimgタグを利用する場合でも、活用できる属性がいくつか存在しています。これから紹介するsrcset属性とsize属性は組み合わせることで同様に複数枚の画像の出し分けが可能で、いくつかまとめて紹介します。

srcset属性

pictureタグでも利用していた画像幅に応じて複数枚の画像を指定することが可能な属性です。

<img srcset="img/sp.jpg 360w, img/tab.jpg 768w, img/pc.jpg 1100w">

横幅の単位にはw（幅記述子）を使用し、それぞれ360px、768px、1110pxの画像ということを表しています。
ブラウザ側が記載された画像サイズを読み取り、ブラウザ幅に合わせて適切な画像を表示させる仕組みとなります。

size属性

srcset属性のみではブラウザが自動で画像を切り替えるため、任意の横幅で画像切替を指定したい場合はsize属性を併用しましょう。

<img sizes="(max-width: 600px) 300px, (max-width: 1000px) 760px, 900px">

上記の記述の場合、600pxまでは300pxに近い画像が、1000pxでは760pxに近い画像が、それ以降は900pxに近い画像が自動で読み込まれます。また、別のCSSで指定しない限りsizes属性で指定した数値が実際の表示サイズになります。

loading属性

値「lazy」を指定することで、ブラウザに画像が表示するタイミングまで読み込みを遅延させることが可能です。遅延読み込みのメリットは後述の「読み込みファイルの遅延」を確認してください。ページをスクロールして画面内に表示されそうになったタイミングで画像が読み込まれるように設定できます。

<img src="/test.png" width="600" height="300" loading="lazy">

decoding属性

この属性には、imgタグに指定した画像のデコードのタイミングを指定する役割があります。デコードとは、JPGやPNGなどの形式からWebブラウザで表示するためのビットマップ形式に変更する処理をいいます。

指定可能な値は3つ存在します。

sync：他の DOM コンテンツのレンダリングと同期して画像をデコードし、すべてを一緒に表示します。
async：他の DOM コンテンツをレンダリングして表示した後、非同期に画像をデコードします。
auto：デコードモードの優先順位はありません。ブラウザーがユーザーにとって最適なものを決定します。これは既定値です。

MDN Web Docs

レンダリングとは、Webページの各要素の画面への描画を意味しています。
それぞれで大きい差が発生するわけではありませんが、asyncが画像以外のコンテンツを先に描写するようになるため有効と考え２られます。

コーディング面の施策

読み込みファイルの遅延

画像やJavaScriptなどに読み込みの遅延処理を施すことで、初回レンダリング時のリクエスト回数やリクエストサイズを減らし、結果としてページの読み込み時間を短縮することができます。この項目ではファイル形式ごとの遅延方法を確認していきます。

画像

前述したloading属性へ、値「lazy」を指定することで実装することが可能です。
また、一部ブラウザではCSSのcontent-visibilityを指定することでも指定が可能です。

JavaScriptを利用して遅延する方法もあるため、最適な方法を検討し実装しましょう。

CSS

CSSはタグ内に属性「preload」を記述することで遅延読み込みが可能になります。

<link rel="preload" href="css/test.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>

CSSの遅延読み込みの注意点として、ページで読み込む全てのCSSを遅延させると、一瞬CSSが適用されていないHTMLだけの状態で表示されてしまうため、レンダリングを妨げるようなCSSのみ切り分けて遅延読み込みさせましょう。

JavaScript

<script>タグにdefer属性を付与することで読み込みを遅延させることが可能です。

<script src="js/test.js" defer></script>

defer属性の付与により、HTMLの解析と同時にJavaScriptファイルの読み込みが開始されますが、実行がHTMLの解析完了後になるため、遅延させない場合に比べて安定して読み込みが早くなります。

他にもasync属性を付与することでも読み込みタイミングを変更することができます。しかし、defer属性と違い、JavaScriptファイルの読み込みが完了したら即座に実行されてしまい、HTMLの解析を停止させてしまう可能性があります。この場合思わぬ表示崩れが発生する場合があり注意が必要です。

iframe

動画などを埋め込む際に利用するiframe要素も遅延読み込みを設定することができます。
方法はimgと同様にloading属性に値lazyを記述しましょう。

<iframe loading="lazy"src="https://youtu.be/Qj1HMkqLK1Q?si=OOnrkp1KSnwJbqWN"></iframe>

CSS/JavaScript/HTMLの圧縮

コーディングにおける圧縮とは、不要・未使用のコードや重複データの削除を行い、データ容量を軽量化・最小化することを意味します。実施にあたってはツールを利用するのが一般的で、様々なツールが存在していますがよく利用されるものをそれぞれ確認してみましょう。

Google Closure Compiler（JavaScript）

JavaScriptのダウンロードと実行を高速化するためのツール。
構文を解析し、不要なコードの削除や書き換え、コードの問題点の警告など圧縮以外の機能も備えた便利なツールです。
公式サイト

YUI Compressor（CSS/JavaScript）

JavaScript・CSS両方の圧縮を実現可能なツールです。
セキュア且つ、他のツールよりも高い圧縮率を生み出すことを目的として設計された高性能なツールです。
公式サイト

HTML Minifier（HTML）

HTML MinifierはJavaScriptベースのHTML圧縮用ツールです。
ブラウザ上で動作するオンラインツールとしても利用可能ですが、Ruby、Node.js、Gulpなどと組み合わせてローカル上で動作させることも可能です。

JavaScriptライブラリには「min.js」が用意されているため本番ではそちらを利用しましょう。また、HTMLの圧縮はCSSやJavaScriptと比べて効果が少なく、可読性が下がることも考慮に入れて必要に応じて実施しましょう。

JavaScriptの処理内容の見直し

プログラムのコードの挙動を変えずに設計や構造の見直し・改善を行うことをリファクタリングと呼びます。実施方法にもよるが、可読性の向上や処理の軽減といったメリットが考えられ、状況によっては劇的にページの読み込み速度を改善することに繋がります。

リファクタリングに役立つ便利なツールは複数存在しており、下記にリストアップしたものが利用されることが多いです。

• jscodeshift
• CodeGuru

ウェブフォント代替表示について

Webページ中にGoogleフォントなどのウェブフォントの読み込みを行っている場合、フォントが読み込まれるまでテキストが表示されない、もしくは表示にカクつきが出るなどの不具合が出る場合があります。それを防ぐ方法として、CSSでfont-displayプロパティにswapを指定することで代替フォントの指定をすることができます。

@font-face : swap

上記のようにswapを指定すると、ブラウザフォント読み込みまで代替フォントでテキストが表示されるため、使わない場合に比べてテキスト描画が早まります。

必須ドメインへの事前接続

Googleアナリティクスなどのサードパーティへのソースコード読み込みが存在する場合、それが原因で読み込み時に負荷がかかる場合があります。

それらのサードパーティへの接続パフォーマンスの向上を目的として、linkタグへ付与できる属性としてrel属性というものが存在します。href属性で記載したURLとの関係性を表す役割を持ち、href先との関係性を検索エンジンに示したり、リソースをバックグラウンドで先に読み込むといった機能を持ちます。

下記より、リソースの先行読み込みに関する属性についてまとめました。

preconnect属性

ブラウザへと当該URLが重要リソースであることを伝え、必須ドメインへの事前接続が行われるよう促す効果があります。

preload属性

こちらも読み取りを早めるための記述です。当該URLのダウンロードとキャッシュの優先度が上がる効果があります。
強制力があるため優先的に読ませる必要の無いソースへは指定の必要はなく、逆に描画に必要な処理が遅れる可能性があります。

prerender属性

他のウェブページへのURLリンクなどに指定する記述です。指定されたウェブページのリソースを遷移前からレンダリングし、DOM構築やJavaScriptの実行まで行い、画面遷移時の表示を早める効果があります。

バックグラウンドなどでの施策

フロントエンド領域以外でも、サイト表示の高速化につながる施策はいくつか存在しています。それぞれ確認していきましょう。

高速サーバー・プレミアムDNSの使用

最適なサーバーの選定は、サイト表示の高速化に直結する重要な要素です。
安価な共有レンタルサーバーよりも、高速化を念頭に置いたサーバーサービスを利用することで大きな読み込み速度の差を生み出すことができるでしょう。また、DNSによっても影響が出ることがわかっています。やはり無料サービスよりも有料のサービスのほうが安定している傾向があります。Cloudflare、Googleなどが一般的に安定しているとされるプレミアムDNSサービスです。

サーバーとDNSのどちらも気軽に変更することは難しいため、サイト構築前に検討することが重要になるでしょう。

CDNの利用

CDNとは、Content Delivery Networkの略で、本来単一のサーバー（オリジンサーバー）に集中してかかる負荷をキャッシュサーバーと呼ばれるコピーを利用して分散・肩代わりする仕組みです。本項では細かい説明は省きますが、Webサービスへとアクセスしたユーザーへと効率よくコンテンツを閲覧させることに繋がります。

具体的にCDNを利用したほうが良いシーンを整理してみると、

• 大量アクセスが見込まれる
• グローバル展開している
• WordPressや複雑なJavascript、アニメーションなどを利用している

などといった場合に特にCDNを利用することがコンテンツをスムーズに配信するのに役立つと考えられます。

ブラウザキャッシュの活用

キャッシュにはブラウザキャッシュとサーバーキャッシュの2種類が存在します。

ブラウザキャッシュはユーザー側のブラウザに保持されるもので、ブラウザ側で削除や制御が可能です。HTMLやCSS、画像などのリソースを一時的に保存し、次回アクセス時に参照して、ページ読み込み時間を短縮させる効果があります。

対して、サーバーキャッシュはウェブサイト管理者側で設定制御が行われるものです。
ユーザー側からのリクエストに関するレスポンスをサーバー内のキャッシュに保存し、次回同じリクエストが来た際にキャッシュ内のデータを返すことで処理時間の短縮に繋げる効果があります。

ページリダイレクトの厳選

Webサイトのページの削除や移行が行われたときに利用される仕組みとして一般的なリダイレクトですが、複数ページに跨ってリダイレクトが繰り返されると当然最終的なページの読み込みにはそれだけ時間がかかります。

リダイレクトの数は整理して本当に必要な分だけに抑えるようにしましょう。

まとめ

ここまでWebサイトの表示高速化に利用可能な手法を整理してまとめました。

どのWebサイトでも全ての施策を活用できるわけではないため、実施の優先順位はケースバイケースで策定が必要です。高速化したいサイトを詳細に分析し最適な施策の策定を行うことが重要になります。トライムではWebサイトの診断も行わせていただきますので、ぜひお気軽にお問い合わせください。

また、この記事は随時更新いたします。必要なときに見返して、軽量で利用しやすいWebサイトを作成しましょう！