韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

Webページの高速化について『これからの「標準」を学ぶ マルチデバイス対応サイト構築』で学んだこと

『これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)』を読了しました。
この本は、前半はマルチデバイス対応サイトを制作する方法などについて書かれているのですが、後半(Chapter6とChapter7)は、画像の最適化とWebページの高速化について書かれていて、とても勉強になりました。
この本で学んだことを、次にWebサイトを作るときに取り入れようと思ったので、まとめておきたいと思います。

1、「PageSpeed Insights」で表示速度をチェックする

PageSpeed Insights」は、Googleが提供している判定ツールで、マルチデバイス対応に問題がないかをチェックできます。
ページの表示速度を遅くする原因がある場合は、修正を求められます。

以降の事項を行ったら、この「PageSpeed Insights」でどれだけ効果があったかチェックできます。
ちなみに、現在のこのブログの分析結果は、下のとおりです。何もする前は、50台だったのでかなり改善できました。

・モバイル:75/100

・パソコン:82/100

スポンサーリンク

2、画像のデータ量を減らす

2種類の方法があります。
(1)画像の最適化&再圧縮ツール「OPTIMIZILLA」を利用する。
オンライン上の画像最適化ツールです。圧縮率も調整できるので、画像の見た目のクオリティも変えることができます。
使い方は、「UPLOAD FILES」をクリックして、最適化したい画像をアップロードすれば、最適化が始まります。最適化が終わったら、「Download」ボタンを押せばダウンロードできます。
他にも、OS X環境では、「ImageOptim」というアプリケーションも利用できます。ダウンロードして起動した後、ドラッグ&ドロップで最適化でき、元の画像ファイルは上書きされるので便利です。

(2)WordPressの場合、アップロードした画像を自動的に最適化するプラグイン「EWWW Image Optimizer」を利用する。
「メディア > Bulk Optimize」で、「Start optimizing」をクリックすると、アップロード済みの画像を最適化できます。
また、「Scan and optimize」をクリックすると、テーマフォルダ内の画像も最適化できます。

3、レスポンシブイメージを利用する

レスポンシブイメージとは、複数の画像ソースを用意して、デバイスに合わせて最適な画像ソースを読み込まれるようにすることです。
img要素のsrcset属性とsizes属性、background-imageのimage-set()、picture要素を使って候補となる画像を列挙します。

(1)img要素のsrcset属性
解像度と、画像の横幅を指定して列挙することができます。
解像度は、1x、2x、3x・・・のように指定します。
1xというのは、解像度が1(普通の解像度)のことで、2xは、2倍の解像度(スマートフォンなど)ということになります。
srcset属性に、「画像名 1x, 画像名 2x・・・」のように指定します。

<img srcset="〜.png 1x, 〜.png 2x,〜.png 3x" src="下位互換用の画像.png" alt="">

画像の横幅は、例えば384pxのときは384w、768pxのときは768wといったように、wという単位で指定します。wの値は実際の画像の横幅のサイズと同じにしなければなりません。

<img srcset="〜.png 384w, 〜.png 768w, 〜.png 1536w" src="下位互換用の画像.png" alt="">

(2)img要素のsizes属性
2段組のレイアウトのとき、必要以上に大きな画像が選択される問題を解決します。
ブラウザが、カラムの横幅ではなく、「画像の横幅 x density」に合わせて画像を選択するため、必要以上に大きな画像が選択されてしまいます。
そこで、img要素ののsizes属性を追加し、ブラウザが判別に使う横幅を調整します。
例えば、画面の横幅が980px以上のときは608px、768px以上のときは64vw、それ以外のときは100vwと指定するとします。
※画面の横幅=100vw

<img sizes="(min-width: 980px) 608px, (min-width: 768px) 64vw, 100vw"
 srcset="〜.jpg 400w, 〜.jpg 500w, 〜.jpg 600w, 〜.jpg 800w, 〜,jpg 1000w, 〜.jpg 1200w"
 src="下位互換用の画像(400wと同じもの).jpg"
 alt="">

(3)background-imageのimage-set()
CSSで背景画像を、解像度を指定して列挙します。

background-image: url(img/下位互換用の画像.png);
background-image: -webkit-image-set(
 url(img/〜.png) 1x,
 url(img/〜.png) 2x,
 url(img/〜.png) 3x
);

画像の横幅を指定する場合は、メディアクエリを使って、ブレークポイントごとにimage-set()で背景画像の候補を指定します。

(4)picture要素
img要素のsrcset属性とsizes属性、background-imageのimage-set()は、列挙した画像の中で、実際にどの画像が表示されるかはブラウザが処理することになります。なのでブラウザによって画像の選択に違いが出ます。
全てのブラウザで、同じ選択をさせたい場合は、picture要素で画像の候補を列挙し、source要素のmedeia属性でメディアクエリを指定します。

<picture>
 <source media="(max-width: 499px)"  
  srcset="header-384.jpg 1x, header-768.jpg 2x">
 <source media="(min-width: 500px) and (max-width: 768px)" 
  srcset="header-768.jpg 1x, header-1536.jpg 2x">
 <source media="(min-width: 769px)"
  srcset="header-1536.jpg 1x">
 <img src="header-384.jpg" alt="">
</picture>

※なお、注意点として、これらは全ての主要ブラウザに対応しているわけではないので、「Picturefill」というライブラリを利用します。

(5)WordPressの場合、「RICG Responsive Images」というプラグインを使う
標準では、中サイズ(300px)と大サイズ(1024px)が自動生成されます。
インストールして有効化するだけで、上記のソースコードを自動でかき出してくれます。(すでにアップ済みの画像も)
※一度有効化したあと、プラグインを削除しても書き出したソースコードは消えないみたいです。
functions.phpに以下を指定すると追加画像も作れます。

add_image_size('snap500', 500); //横幅500pxの画像を追加で作成。
add_image_size('snap700', 700); //横幅700pxの画像を追加で作成。

※「Picturefill」の設定も自動的に追加され、主要ブラウザに対応することが可能です。

(6)Photoshop CCでレスポンシブイメージ用の画像を自動生成する
「環境設定 > プラグイン」で、「Generatorを有効にする」にチェックが付いていることを確認し、「ファイル > 生成 > 画像アセット」を選択してチェックを入れた状態にします。
そして、自動生成したい画像レイヤーに、ファイル名の名前をつけます。(例えば、「header.jpg」など。)
そうすると、保存場所にassestsファイルが作成され、「header.jpg」が自動生成されます。
レイヤー名を「header.jpg, 50% header-m.jpg, 25% header-s.jpg」とすると、(横幅と高さが)100%の大きさの「header.jpg」と、50%の大きさの「header-m.jpg」と、25%の大きさの「header-s.jpg」が自動生成されます。

※詳しい利用方法は、Photoshopヘルプを参照。
https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

4、SVG(Scalable Vector Graphics)を利用する

解像度の高いデバイスできれいに表示するためには、高画像度版のデータを用意する必要がありますが、SVGはベクター形式のデータなので、解像度の高いデバイスでも画像がぼやけたりしません。

(1)未対応ブラウザに対応させる
SVGは、Android 2.xとIE8が未対応です。
そこで、picture要素を利用して、未対応ブラウザに対応させます。
※picture要素は複数の画像の候補を列挙するためのもの。

source要素のtype属性を「image/svg+xml」と指定すると、ブラウザはデバイスの対応状況に合わせてくれます。
そして、SVGに未対応なブラウザ用の代替画像は、img要素で指定します。

<picture>
 <source srcset="img/logo.svg" type="image/svg+xml">
 <img src="logo.png" alt="" class="logo">
</picture>

※picture要素に未対応のブラウザでも、img要素で指定した代替画像は表示される。
※picture要素に未対応でSVGに対応したブラウザの場合は、「Picturefill」を利用すると、SVG画像で表示されます。

(2)SVGの最適化
SVGOMG」というオンラインツールで最適化できます。
利用方法:「Open SVG」を選択して最適化したいSVGファイルを開きます。

5、WebフォントやFont Awesome(アイコンフォント)を利用する

1つの画像と比較するとフォントデータの方がデータ量が大きくなるが、ページ内で利用する箇所が多くなるほどフォントデータの方が効率が良くなります。
必要なアイコンのみのフォントデータを作成して、データ量を削減します。
Fontello」というオンラインサービスを利用します。
必要なアイコンを選択して、「Download webfont」をクリックしてダウンロード。
「fontello.css」と、フォントデータが入った「font」というフォルダを、サーバーにアップロードします。
demo.htmlに、クラス名が書いてあるので、表示したい場所に以下のように記述します。

<i class="icon-twitter"></i>

※フォントデータは「font」フォルダに入ったままにします。
※デフォルトでは、fontello.cssは「css」フォルダに入れる想定になっています。ディレクトリ直下に入れる場合は、fontello.cssの@font-faceのurlパスを変える必要があるので注意。

6、CSSで作成したパーツを利用する

トグルボタンの3本線アイコンや、円形の影付きボタンはCSSだけで作成することができます。
(ソースコードは本に書いてあるので省略します。)
また、既存のCSSのアイコンセットを使えば、もっと手軽に利用することができます。
ICONO」をダウンロードし、以下のように設定します。

<link rel="stylesheet" href="icon.min.css">

そして、表示したいところに、以下のように記述します。

<i class="icon-clock"></i>

7、ミニファイ化でHTML/CSS/JavaScriptを縮小する

ミニファイ化とは、HTML、CSS、JSなどのテキスト系リソースの、余分なスペースや改行、コメントなどを取り除くことです。
Online JavaScript/CSS Compressor」というツールを使うと便利です。

8、HTTP圧縮

サーバーのHTTP圧縮機能を利用して、リソースを自動的にgzip圧縮し、データ量を減らしてブラウザに送信します。
ブラウザは圧縮されたリソースをダウンロードし、解凍して利用します。

(1).htaccessに、以下のソースコードを追記します。

<IfModule mod_deflate.c> 
 AddOutputFilterByType DEFLATE text/plain 
 AddOutputFilterByType DEFLATE text/html 
 AddOutputFilterByType DEFLATE text/xml 
 AddOutputFilterByType DEFLATE text/css 
 AddOutputFilterByType DEFLATE application/xhtml+xml 
 AddOutputFilterByType DEFLATE application/xml 
 AddOutputFilterByType DEFLATE application/rss+xml 
 AddOutputFilterByType DEFLATE application/atom_xml 
 AddOutputFilterByType DEFLATE text/javascript 
 AddOutputFilterByType DEFLATE application/x-javascript 
 AddOutputFilterByType DEFLATE application/javascript 
 AddOutputFilterByType DEFLATE application/x-httpd-php 
 AddOutputFilterByType DEFLATE image/svg+xml 
</IfModule>

※エックスサーバーの.htaccessの編集方法:
https://www.xserver.ne.jp/manual/man_server_htaccess.php#edit

(2)エックスサーバーの場合、サーバーパネルから、mod_pagespeed設定をONにする
設定方法:https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php
※ただし、(1)のソースコード(mod_deflate)だけの方が効果が高かったという検証結果もありました。
【参考サイト】『mod_deflate』と『mod_pagespeed』とでアクセス速度比較

でも、私の場合はmod_pagespeedだけの方がPageSpeed Insightsでの結果が良かったので、環境にもよるのかもしれません。
また、「GIDZip Test」という検証ツールもあります。

9、ブラウザキャッシュの利用

次回のアクセスからはキャッシュを利用してページを素早く表示できます。
標準のキャッシュは一時的なもののため、サーバー側でリソースの有効期限を指定します。
.htaccessに、以下を追記します。(CSSを1ヶ月、画像、JS、フォントを1年に指定しています。)

<IfModule mod_expires.c> 
 ExpiresActive On 
 ExpiresByType text/css "access 1 month" 
 ExpiresByType image/png "access plus 1 year" 
 ExpiresByType image/jpg "access plus 1 year" 
 ExpiresByType image/jpeg "access plus 1 year" 
 ExpiresByType image/gif "access plus 1 year" 
 ExpiresByType image/x-icon "access plus 1 year" 
 ExpiresByType text/javascript "access plus 1 year" 
 ExpiresByType application/x-javascript "access plus 1 year" 
 ExpiresByType application/javascript "access plus 1 year" 
 ExpiresByType application/font-woff2 "access plus 1 year" 
 ExpiresByType application/font-woff "access plus 1 year" 
 ExpiresByType application/x-font-ttf "access plus 1 year" 
 ExpiresByType application/x-font-eot "access plus 1 year" 
</IfModule>

※エックスサーバーの.htaccessの編集方法:
https://www.xserver.ne.jp/manual/man_server_htaccess.php#edit

私の場合は、エックスサーバーの、mod_pagespeed設定をONにした状態で、さらに上記ソースコードを記述した方が良い結果が出ました。

10、CSSスプライト画像

「CSSスプライト画像」とは、複数の画像を1つの画像ファイルにまとめ、切り出して表示するテクニックのことです。
ファイルを1つにまとめることで、HTTPリクエストを減らすことができます。
Retaina CSS Sprite Generator」というツールを利用すると便利です。

11、インライン化

「インライン化」とは、CSS、JS、画像のデータを、HTML内に直接記述することです。
そうすることで、HTTPリクエストを減らすことができます。

(1)CSS、JSの場合
style要素、script要素を利用して、HTML内に設定を記述します。

(2)画像の場合
「Data URI scheme」を利用します。これは、img要素のsrc属性などで画像データを直接指定するためのものです。
画像データはBASE64でエンコードしたものを使います。
ただし、エンコードでデータ量が増えるため、小さな画像のインライン化に利用するのが一般的です。
Duri.me」というツールを使うと便利です。

12、各リソースのデータ量の削減と、CSS、JSの排除(レンダリングブロックの排除)

(1)JavaScriptを非同期で読み込む
ブラウザは、JSの読み込みを待たずにDOMの構築を完成させるので、ページの表示速度が速くなります。
非同期読み込みを有効にするには、script属性のasync属性を指定します。
ただし、トグルボタンのjQueryなどは、jQueryを非同期で読み込むと機能しなくなります。
そのため、JSを</body>の直前に記述します。(async属性は削除)
※head内記述することが求められているスクリプトは、この方法は使えないです。

(2)ファーストビューのCSSをインライン化し、それ以外のCSSは、遅延読み込みを指定
ファストビューの表示に必要なCSSは、head内の<style></style>に記述し、<link>は削除します。
そして、</body>の直前に、JSでDOM構築後に読み込むように指定します。

<script>
var mycss = function() { 
var l = document.createElement('link'); 
 l.rel = 'stylesheet'; 
 l.href = 'http://fonts.googleapis.com/css?family=Poiret+One';  //ここにCSSのパスを記述
var s = document.getElementsByTagName('script')[0]; 
 s.parentNode.insertBefore(l, s);
 }; 
window.addEventListener('DOMContentLoaded', mycss); 
</script>

<script>内のコードは、複数追加して、CSSのパスのみ変更すれば、複数のCSSを遅延読み込みできます。

(3)画像の遅延読み込み
「Lazy Load」というプラグイン(js)を利用します。
ファーストビュー以外の画像に、class名をlazyと指定します。


以上、自分のメモ程度にざっと書いたので、詳しい内容は、『これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)』を読んでいただくことをおすすめします。

スポンサーリンク