COLUMN コラム

現在のWebサイトはRetina対応で高解像度の写真を使用したり、Webフォントを利用してリッチなサイトに見せるなど表現方法が豊かになりました。しかしその反面、ページ容量は大きくなりやすく、しっかり最適化を行わないと、ページの表示速度は大幅に低下してしまいます。

スマートフォンの普及によりモバイルサイトの需要が高まっている中で、表示速度の遅延はユーザーにストレスを与えるだけでなく、サイトから離脱される大きな要因となります。Webデザイナーは見た目だけでなく、UXデザイン（ユーザー体験）も考慮しなければなりません。

今回はサイト高速化のメリットと表示速度の改善ポイントについて紹介します。

高速化のメリット

サイトの表示速度は離脱率に大きく影響します。一般的には、ページが表示されるのに３秒以上かかると40%のユーザーが去ってしまうと言われています。デザインをどれだけ凝っても表示されるまでに3秒以上かかってしまったら、半数のユーザーはそのデザインを見ることなく去ってしまいます。

この数値だけでも高速化の重要性は伝わるかと思いますが、その他にも以下のような多くのメリットがあります。

・ 競合サイトよりも速ければ、利用されやすくなる。イメージの向上にも繋がる。
・ 高速であるほど再訪問率は高まる。（一度遅いと感じたら再訪問率は下がる）
・ Google検索結果での順位が上がる。（高速なサイトは遅いサイトよりも上位に表示される）

高速化のメリットはサイト単体を見ていては気付きにくいですが、競合サイトと比較した時に顕著になります。パフォーマンス対策は、デザインを検討する際に不可欠な要素であると言えます。

表示速度の計測方法

サイトの表示速度を計測する方法は「PageSpeed Insights」「WebPageTest」「Lighthouse」などがありますが、今回はLighthouseを使用した計測方法(Macの場合)について紹介します。

【Lighthouseとは】
Googleが無料で提供しているWebサイト診断ツールです。「パフォーマンス」「アクセシビリティ」「SEO」といった様々な指標でサイトを分析し、診断結果を100点満点で表示してくれます。以前はChromeの拡張機能として提供されていましたが、現在はデベロッパーツールに搭載されています。

【Lighthouseでの計測】
1. Chromeのシークレットウィンドウで計測したいサイトを開く。（インストールしている拡張機能が診断結果に影響する可能性があるため、シークレットウィンドウを使用します）

2. 「⌘ + option + i」でデベロッパーツールを開いて「Lighthouse」タブを開く。

3. 「Generate report」ボタンをクリックすると診断が始まり、ページを開くのにかかった時間が表示されます。

表示速度の診断結果は「Performance」と「Metrics」の6つの項目に分けて表示されます。「First Contentful Paint（最初の要素が描画されるまでの時間）」や「Speed Index（ページの内容が描画される速度）」などありますが、ページの表示速度を測る指標としては「Largest Contentful Paint（ページのメインコンテンツが表示されるまでの時間）」に注目しておけば良いでしょう。

ここからはLCP（Largest Contentful Paint）を3秒以内にするための、Webデザインの最適化ポイントについて紹介します。

1. 画像の最適化

ほとんどのサイトにおいて、ページ容量が大きくなる一番の原因は画像です。画像を最適化することが表示速度を改善するための基本対策となります。まずは画像の基本的な扱い方を押さえましょう。

1-1. 画像を減らす

そもそも使用する画像の枚数を減らすことができれば、サーバーへのリクエスト回数も減り、ページ容量は軽くなります。画像を作成する際は、CSSで再現できないか？一枚画像として書き出せないか？など、使用する枚数を減らすことを考慮してみましょう。

1-2. 画像形式の選択

画像のファイル形式はJPG、PNG、SVGなどの種類があります。画像を作成する際はラスター画像かベクター画像か、必要な色数、透明処理の有無などを考慮して、適切な画像形式を選択しましょう。

各ファイル形式の説明については、下記の記事もご参照ください。
「JPG、GIF、PNG、SVG、WebPのメリット・デメリット」

1-3. ファイルサイズの最適化

クライアントから提供される画像は、未圧縮で原寸サイズのままのことがあります。サイトで表示する最大幅と高さを確認した上で、必要十分なピクセルサイズに縮小しましょう。

また、Web用に画像を書き出した後は、画像圧縮ツールを使用してファイルサイズを圧縮しましょう。画質を劣化させることなくファイルサイズを大幅に縮小することができます。

下記のサービスは無料で使用することができるのでオススメです。
「TinyPng（JPG、PNGの圧縮が可能）」

1-4. 画像のレスポンシブ対応

デスクトップ用の画像をただ小さく表示するだけでは、モバイルサイトに最適化したとは言えません。HTMLで画像を読み込む時は、pictureタグのsrcset属性を使用して、不必要に大きな画像を読み込まないようにしましょう。（IEにはpicturefill.jsを読み込むことで使用可能になります）

2. Webフォントの最適化

Webフォントを使用すると、すべてのデバイスでフォントの見た目を統一できるので、デザイン性を重視するサイトでは非常に有効です。しかし、Webフォントはサイトのリクエスト数やページ容量を増加させる要因になります。Google FontsやAdobe Fontsなど、魅力的な日本語Webフォントも増えてきましたが、使用する際は見た目と表示速度のバランスに注意しましょう。

2-1. 日本語Webフォントは1つに絞る

日本語Webフォントはひらがな・カタカナ・漢字と扱うデータが多いため、容量が大きくなってしまいます。複数読み込むとパフォーマンスが大幅に低下してしまうので、見出しと本文で別の日本語Webフォントを使用したい場合は、見出しのみに使用するなどして、1つに収めるようにしましょう。

必要最低限の文字だけを抜き出して、容量を小さくする「サブセット化」などの方法もあります。

2-2. 使用するウェイトだけを読み込む

Google Fontsを使用する際は、すべてのウェイトを読み込むのはやめましょう。ウェイトの数が多いとリクエスト数が増加して、パフォーマンスが大幅に低下します。

Google Fontsの読み込み方法は「link」と「@import」の2種類ありますが、どちらの方法でも記述コードから使用するウェイトを修正することができます。コピペして使用する際は、不要なウェイトまで読み込んでいないか確認しましょう。

2-3. 複数フォントは連結して読み込む

Google Fontsから日本語と英語の2種類を読み込む場合、別々にコードをコピペすると2つ記述することになってしまいリクエスト回数が増えてしまいます。連結させることで一度のリクエストで読み込むことが可能になります。

2-4. Google FontsはHTMLで読み込む

Google Fontsの読み込み方法は「HTMLからのlink」と「CSSからの@import」の2種類あります。CSSから@importをする方がHTMLに触れずに修正ができて便利ですが、CSSを読み込んでいる間はレンダリングブロックが発生してしまい、パフォーマンスが低下してしまいます。

HTMLからのlinkでは、rel属性にpreloadを指定することでレンダリングブロックを発生させずに非同期で読み込むことができます。（as属性で読み込むリソースの種類を指定しています）

おわりに

今回はWebサイトの表示速度を改善するポイントについて紹介しました。

Webサイトのパフォーマンスについては、デザイナーが携わる分野ではないと思っている方も多かったのではないでしょうか？しかし実際は、デザイナーが日々の業務で使用している画像やフォントが、パフォーマンスに大きな影響を与えていました。

デザインといえば表面的な部分にとらわれがちですが、サイトを快適に閲覧できるパフォーマンスも重要なUXデザイン（ユーザー体験）です。Webデザイナーとしては見た目とパフォーマンスの両立を図ったデザインを心掛けていきましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。