2018.11.15作成
2018.12.20追加更新
2019.1.12追加更新

あなたのサイト3秒以内?

Webpage Load Time vs 直帰率 出典元pingdom

あなたのサイト表示までの時間何秒ですか?測ってますか?

Pingdomの調査(2018年1月18日米国時間)「Does Page Load Time Really Affect Bounce Rate? – Pingdom Royal」によると、Webページの読み時間が3秒を越えると一気に直帰率が増えてしまうそうだ。グラフの『Bounce rate(%)』が直帰率。3秒あたりから急激に角度が急になっているのがわかる。5秒では38%の直帰率つまり、約4割の人があなたのサイトから離れてしまっているかもしれない。

Googleの公表(2018年2月更新)によると、トラフィック全体の半分以上がモバイルにも関わらず、モバイルのコンバージョン率はデスクトップより低い。モバイルサイトの訪問者の53%は3秒以上表示にかかるページから去ってしまう。

今のところ、人間がページ表示を待っていられる時間はだいたい3秒くらいのようだ。

出典元
Does Page Load Time Really Affect Bounce Rate?

https://royal.pingdom.com/2018/01/18/page-load-time-really-affect-bounce-rate/

 

Find out how you stack up to new industry benchmarks for mobile page speed

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

ページ表示速度は売上げに直結している

ページ表示速度と売上げに関係する調査結果がいくつか公開されている。ページ表示速度が遅いと売上が減るとともに、2度とサイトには来てもらえないばかりか、友人と不満の共有をされてしまう可能性もある。

Kissmetricsが公開している、ページ表示速度とEコマースサイトの利用状況の関係を示すインフォグラフィックによると、
・ページの表示速度が1秒遅れると7%コンバージョンが減る可能性がある。
・1日に10万ドル売り上げるサイトでは1秒のページ表示の遅れで毎年250万ドルの売り上げ損失の可能性がある。

Amazonの元開発エンジニア グレッグ・リンデン氏によると、
・0.1秒の遅延が発生すると、売上は1%減少する。

Microsoftによると
・2秒のレスポンスタイムの低下は、ユーザー1人当たり、4.3%の売上低下を招く。

AkamaiとGomez.com行った調査によると、
・79%はパフォーマンスに不満を持つと2度とそのサイトを利用しない。
・44%が友人にオンラインでの不満足な経験を共有する。

出典元

How Loading Time Affects Your Bottom Line
https://neilpatel.com/blog/loading-time/?wide=1

Speed Is A Killer – Why Decreasing Page Load Time Can Drastically Increase Conversions
https://neilpatel.com/blog/speed-is-a-killer/

【連載 第3回】スマホサイトの表示速度低下は売り上げ減に直結、167サイトの計測で分かった課題とは?
https://www.domore.co.jp/mobilelab/oneweb/mobile_friendly_idmedia01-3

ページ表示速度改善とは?具体的な5つの方法

1 まず計測する
(1)計測する
2 画像の最適化
2-1 画像の枚数を減らす
(2)画像でなくテキストをできるだけ使う
(3)アイコンの画像をアイコンフォントに置き換える
(4)CSSスプラウトを使用する
2-2 画像サイズの最適化
(5)画像サイズの最適化
2-3 画像の容量を圧縮する
(6)画像圧縮を徹底する
(7)jpeg画像データに含まれるEXIF情報は削除する
(8)オフスクリーンの画像を遅延読み込みする
3 CSS・JavaScriptの最適化
(9)CSS・JavaScriptファイルをミニファイ化(圧縮)する
(10)CSS・JavaScriptのレンダリングを妨げるリソースの除外
(11)CSSの工夫
(12)JavaScriptの工夫
4 ブラウザのキャッシュを活用する
(13)ブラウザキャッシュに有効期限を設定する
5 モバイルのAMP(Accelerated Mobile Pages)対応する
(14)AMPサイト作成する
6 ページ表示速度改善チェックリストダウンロードする
※ページ表示速度改善項目を1枚のチェックリストにまとめています。ダウンロードできます。チェックに是非どうぞ。

1 まず計測する

(1)計測する

計測してスコアの数値を確認してみよう。代表的なgoogleの無料速度測定ツールを紹介する。まずはあなたのサイトのURLを入力し計測してみよう。

・Google公式の無料ツール
PageSpeed Insights

PageSpeed InsightsにサイトのURLを入力すると、パソコンとモバイルでの結果をページの表示速度スコアとともに修正点と改善方法を提案してくれる。

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

・Google公式の無料ツール2
testmysite

モバイル専用速度改善のためのGoogle公式無料ツールはtestmysite。具体的な読み込み時間、推定離脱率やライバルサイトとの速度比較、修正した時の短縮できる時間数などとともに優先度の高い修正点を提案してくれる。MFI(モバイルファーストインデックス)対応のためにもここでの計測は大切。

https://testmysite.withgoogle.com/intl/ja-jp

計測する際、アクセスの混み具合にも気を使おう。誰もアクセスしていない時に計測したら早い結果が出るはず。google analiticsなどでピークのタイミングを把握し混雑している時もスピードが保たれているか気にしよう。

また、定期的(例えば1ヶ月に1回等)に計測を続けよう。ページ表示速度の計測は緊急ではないが重要な仕事だ。

出典元
Webサイトの表示速度を改善する3つの方法!Google PageSpeed Insightsとは?~初心者編~
https://fastcoding.jp/blog/all/seo/google-pagespeed/

【画像編】サイト表示速度を高速化するために確認したい10項目
https://mimpiweb.net/blog/seo/faster-image-load/

2 画像の最適化

2-1画像の枚数を減らす

(2)画像でなくテキストを出来るだけ使う

ページ表示の為にロードするデータのほとんどが画像。速度の決め手は画像データの大きさになる。だから画像の軽量化を優先しよう。最初に考えて欲しいのは、使用している画像が必要かどうか。

テキストに置き換え可能であれば画像をテキスト化しよう。

HTMLとCSSだけで表現できることを優先しよう。

例えばボタンを少し立体的に表現してみる。HTMLとCSSを載せておくのでコピペアレンジご自由にどうそ。

例:HTMLとCSSだけで設定したボタン

ボタンの例

HTML

<div class=”samplebtn”>ボタンの例</div>

CSS

.samplebtn{
width:200px;
padding:15px 0px 15px 0px;
font-weight:bold;
text-align:center;
background-color:#fff;
border:1px solid #cdcdcd;
box-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
line-height:1;
color:#666;
border-radius:5px;
background:linear-gradient(to bottom,#fff 20%,#fff5e5 100%);
margin-bottom:3px;
margin-right:3px;
}

(3)アイコンの画像をアイコンフォントに置き換える

アイコンフォントとはアイコン形式のWebフォント(Webサーバー上にフォントファイルを置き、表示する技術)のこと。

アイコンフォントを使うメリット
・画像を準備する必要が無い
・画像表示するより容量軽い
・アイコンを1つのファイルとしてまとめるのでHTTPリクエスト数を削減できる
・CDN経由で読み込むこともできてサーバーへの負担がかからない
・大きさや色の設定が簡単
・画像が鮮明で別途Retinaディスプレイのための画像が必要がない

おすすめは無料で使用できるFontAwesomeの利用。使い方も簡単で、ポピュラーでよく使われておりwebサイト上よく見かける。

使い方(CDN経由の方法)
STEP1 以下のコードをheadタグ内に貼り付け(2019.1.9で最新版v5.6.3)

<link href=”https://use.fontawesome.com/releases/v5.6.3/css/all.css” rel=”stylesheet”>

STEP2 アイコン一覧から使用したいアイコンを探しコードをコピペする
例:FontAwesomeを利用したアイコンとコード
      <i class=”fas fa-angle-right”></i>
<i class=”fas fa-check”></i>
<i class=”fas fa-flag”></i>

出典元
Font Awesome
https://fontawesome.com/?from=io

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome

Webアイコンフォント「Font Awesome」導入も簡単で画像なしでアイコン表示に使えて便利
https://peacepopo.net/blog-entry-224.html

(4)CSSスプラウトを使用する

CSSスプライトとは1つのファイルに複数の画像を配置しcssのbackground-positionプロパティで表示を切り替えるCSSのテクニック。

CSSスプラウトのメリット
メリットは1回のHTTPリクエストで複数の画像を表示できること。画像を一つのファイルにまとめられるため、一旦ユーザーのブラウザー側に保存(キャッシュ)されれば、サイト内の別ページもそこから画像を取り込んでくれるのでHTTPリクエスト数を削減でき速度改善が期待できる。

FontAwesomeでは提供されてない(おすすめ記事のサムネイルなどのような)サイト全体で繰り返し使われている小さい画像があるならCSSスプライトを使用しよう。参考になるリンクを紹介する。

・background-positionのイメージがわかりやすい
CSSスプライトを使ってアイコンを表示する
https://gray-code.com/html_css/making-navigation-by-css-sprite/
・デメリットも参考になる
身につけておきたいWebサイト高速化テクニック #6|HTTPリクエスト数削減テクニック02:CSS Sprite編
https://dev.classmethod.jp/client-side/image-performance-tuning-04//

2-2画像サイズの最適化

(5)画像サイズの最適化

レンダリング(ブラウザ表示)を速くするために画像の幅や高さの指定を意識しよう。
・サイト上での最大表示幅(max-width)より大きな幅の画像を使用しない
・imgタグの幅(width)と高さ(height)を出来るだけ設定する

2−3画像の容量を圧縮する

(6)画像圧縮を徹底する

画像容量は最小化することを心がけよう。少しの手間の積み重ねで表示速度を0.1秒でも速くすることを徹底しよう。画像圧縮するには無料で利用できて簡単に使えるサービスがいくつかあるので紹介する。

・画像圧縮ツール
tinyping
https://tinypng.com/
英語だけれど使い方は簡単。png、jpeg画像をオンラインで圧縮してくれるサービス。ドラッグ&ドロップで同時に20ファイル簡単に圧縮できる。
・画像圧縮ツール2
optimizilla
https://imagecompressor.com/ja/
ping、jpeg画像をオンラインで同時に20ファイルまで圧縮してくれるサービス。少し日本語化されている。

これからの主流の画像フォーマットになるのか?Googleが作った新しい画像フォーマットWebP(ウェッピー)にも変換可能なGoogle画像圧縮のツールも紹介する。デスクトップだけでなくモバイルでも作業ができるようだ。
※Chromeの開発者会議 Chrome Dev Summit 2018(11月12日~13日米時間)で発表された

・Googleのブラウザ上で画像圧縮/画像フォーマット変換できる「Squoosh」
【比較】画像圧縮サービス「Squoosh」がめちゃスゴ!主な圧縮サービスと比較してみた
https://www.danshihack.com/2018/11/15/junp/squoosh.html

・WebPについて参考になるサイト
WebPってなに?Googleが作った新しい画像フォーマットは、軽くてアルファチャンネルもサポート!表示高速化するなら検討してみよう!
https://blog.ideamans.com/2018/04/webp.html

(7)JPEG画像データに含まれるEXIF情報は削除する

JPEGファイルにはEXIF(Exchangeable image file format)情報という撮影日時やGPS情報が保存されている場合がある。データ圧縮と個人情報保護のためサイトに載せる前に確認、削除をしよう。

・インストールせずに使用できるEXIF情報削除ツール(ダウンロードは必要)
画像データから不要なメタデータを一発で削除できる「JPEG&PNG Stripper」
https://gigazine.net/news/20150318-jpeg-png-stripper/
・MacならこちらのEXIF削除ツール
Macで写真の位置情報やexif情報を削除する一番確実な方法
https://best-dream.net/delete-exif/

(8)オフスクリーンの画像を遅延読み込みする

オフスクリーンの画像の遅延読み込みとは、画面で最初に見える範囲(ファーストビュー)に表示されない画像は後で読み込みするテクニック。

遅延読み込みのメリット
・ファーストビューに表示される画像だけを優先して読み込ませれば表示時間の短縮に繋がる
・google PageSpeed Insightsの改善できる項目で推定短縮時間が比較的長く、改善効率が良さそう

設定するにはjQueryのLazy Loadを利用するのが良さそうだ。Lazy Loadは、読み込みを遅延させたい画像を一旦ダミー画像にすり替えて、表示させるタイミングで本物の画像に差し替えるという動きをする。

設定方法
Step1 jQueryプラグイン Lazy Load をgithubからダウンロードする
※githubからダウンロードする方法は【参考】を参照のこと
https://github.com/tuupola/jquery_lazyload

Step2 <head>内に下記のコードをかく

<script src=http://code.jquery.com/jquery-●●●●.min.js</script>   ※jquery未設定の場合

<script src=“js/jquery.lazyload.min.js”></script>

Step3 遅延読み込みさせたい画像のimgタグに、class名lazy を追加する

<img src=“images/dammy.jpg” class=“lazy” dataoriginal=“images/example.jpg”>
出典元
遅延読み込みでWebページを高速化!jQuery Lazy Loadの使い方
https://alaki.co.jp/blog/?p=2527
背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方
https://wemo.tech/207

3 CSS・JavaScriptの最適化

(9)CSS・JavaScriptファイルをミニファイ化(圧縮)する

ミニファイ化とはコードの余分なスペースや改行などを削除すること。

ミニファイ化するメリット
ミニファイ化するとコードファイルの読み込みが速くなり、サイトの表示速度が速くなるのを期待できる。しかし注意点として、ミニファイ化するとソースコードが理解しにくくなるので、開発用のコードとミニファイ化した公開用のコードを別々に管理するのをオススメする。

オンラインで簡単にコードをミニファイ化してくれるサービスがあるので紹介する。

・圧縮ツール(英語)
Online JavaScript/CSS/HTML Compressor
http://refresh-sf.com/
JavaScript CSS HTMLを圧縮してくれる。Inputにコードを入力して右上のコード種別をクリックするだけ。何バイト削減できたかも表示される。
・圧縮ツール(日本語 上部メニューでCSSとJavaScript切替えられる)
・CSS Minifier
https://syncer.jp/css-minifier
・JS Minifier
https://syncer.jp/js-minifier
JavaScript CSS HTMLを圧縮してくれる。Inputにコードを入力して右上のコード種別をクリックするだけ。日本語表示。
出典元
「1クリックでOK」CSSを圧縮してくれるWEBサービス4選
https://macoblog.com/css-asshuku-web/

(10)CSS・JavaScriptのレンダリングを妨げるリソースの除外

【CSS】のレンダリングを妨げるリソースの除外とは、
一言で言うと、画面で最初に見える範囲(ファーストビュー)に関係ないCSSは後から読み込みするテクニック。
具体的に『CSSのレンダリングを妨げるリソースの除外』を理解するには、レンダリング(ブラウザ表示)の仕組みから知る必要がある。
CSSはページのレンダリング(ブラウザ表示)に必要なため、ブラウザがCSSを解析して利用できる準備が整うまでレンダリング(ブラウザに表示)が始まらない。これをレンダリングブロックという。

レンダリングブロックしないでブラウザ表示をするために、CSSの読み込み方法を、画面に表示される部分(ファーストビュー)で見えているところと見えてないところの2つに分けて変える。それが『CSSのレンダリングを妨げるリソースの除外』ということ。

それぞれのCSSの設定は次の通り。

CSSレンダリングを妨げるリソースの除外設定方法
・ファーストビューに関係するCSSを抽出してインラインでHTMLのheadタグに記述する
・それ以外のCSSはレンダリングに干渉させずに読み込む

具体的なやり方は参考リンクを参照のこと。

・レンダリングブロックしないCSSの設定方法
レンダリングブロックを解決するCSS配信の最適化と手順
https://junzou-marketing.com/rendering-block-css-optimization

【JavaScript】のレンダリングを妨げるリソースの除外とは、
CSS同様、画面で最初に見える範囲(ファーストビュー)に関係ないJavaScriptは後から分けて読み込みするテクニック。

JavaScriptレンダリングを妨げるリソースの除外設定方法
・ファーストビューに関するJavaScriptを抽出してインラインでHTMLのheadタグに記述する
・それ以外のJavaScriptはレンダリングに干渉させずに読み込む

具体的なやり方は参考リンクを参照のこと。

・インライン化する方法と非同期で(干渉せず)読み込む方法について
レンダリングをブロックする JavaScript を除去する方法
https://www.marie-web.design/blog/pagespeed-insights/
・GoogleSpeed Insightsの説明ページ
レンダリングを妨げる JavaScript を削除する
https://developers.google.com/speed/docs/insights/BlockingJS

(11)CSSの工夫

CSS作成時に気にしておきたいスピード化のコツや工夫も確認しよう。

・セレクタは浅い階層にとどめておく
ブラウザはセレクタを右から左に読み込む特性があるため、セレクタはなるべく浅い階層で記述する。

・CSS書き方NG集やCSS書き方によるスピード計測の記載あり
<CSS>サイトの表示速度を意識したセレクタの書き方
https://qiita.com/mamiyan/items/778183160e9e58546824

 

・ショートハンドプロパティを使う
ショートハンドとはCSSのプロパティを値をまとめて簡略化して書くことができる記述方法。ショートハンドで記述することによりロングハンドで書くよりもおよそ40%のスペースを節約でき、ファイル容量も少なくできる。

・ショートハンド記述方法の事例多数あり
CSSプロパティのショートハンド指定でコードをスッキリさせる
https://designsupply-web.com/knowledgeside/1591/

出典元
CSSの読み込みを高速化するための5つのポイント
https://ferret-plus.com/7854

(12)JavaScriptの工夫

・<head>でJavaScriptの外部ファイルを読み込む時の工夫

外部ファイルの読み込みの特性として、JavaScriptは読み込みが始まるとその読み込みが完了して実行されるまで次のコードの読み込みが始まらない。一方、CSSスタイルシートの読み込みは複数が同時で、完了していなくてもJavaScriptファイルを含む他のファイル読み込むことができるようだ。<head>でJavaScriptの外部ファイルを読み込む時の工夫として次の2点が考えられる。

JavaScriptの外部ファイルを読み込む時の工夫

・HTTPリクエストを1回に抑えるため、外部ファイルを1つにまとめる

・外部ファイル読み込み時間短縮のため、<head>にはまとめてCSSスタイルシートを先に記述しその次にJavaScriptを記述する

・JavaScript外部ファイル読み込み方法の良い例・悪い例が参考になる
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
https://www.suzukikenichi.com/blog/6-ways-to-improve-page-speed-by-optimizing-javascript/

4 ブラウザのキャッシュを活用する

(13)ブラウザキャッシュに有効期限を設定する

ブラウザキャッシュとは、ブラウザが表示したウェブページのデータを一時的にパソコンに保存する機能。

ブラウザキャッシュを活用するメリット
ブラウザキャッシュの保存期間を長く設定することで、2回目以降にページにアクセスした時、初回パソコンに保存したデータを利用できるようにし表示速度のスピード化を図る。

ブラウザキャッシュの有効期限を設定するには、.htacessファイル(サーバーを制御するためのファイル。サーバーのサイトフォルダ直下に保存されている)に有効期限を書き込みサーバーにアップする。

注意点として設定期間はあまり長くし過ぎてしまうと、古いままの表示になってしまうこともあるので、更新頻度の低いものを長く設定するように気をつける。

・書き換え例
【Before】有効期限1日

ExpiresByType image/jpeg “access plus 1 days”


【After】有効期限1ヶ月

ExpiresByType image/jpeg “access plus 1 months”

 

・設定例

ExpiresActive On
ExpiresByType text/css “access plus 1 days”
ExpiresByType text/javascript “access plus 1 weeks”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/xicon “access plus 1 weeks”
ExpiresByType application/pdf “access plus 1 weeks”
ExpiresByType application/javascript “access plus 1 weeks”
ExpiresByType application/xjavascript “access plus 1 weeks”

出典元
ブラウザキャッシュで表示速度を改善する.htaccessの書き方
https://mutakko.info/post-2522/

5 モバイルサイトをAMP(Accelerated Mobile Pages)対応する

(14)AMPサイト作成する

AMPとはGoogleやTwitterなどが主体となり共同で構築した「モバイル端末で Web ページを高速表示する」ための規格。AMPは速度は早いが制約があるため向き不向きがある。しかし、一度検討しておいて良いものだと思う。

・AMPの制約/メリットデメリットなど参考先
AMP対応のメリット・デメリット、導入する?
https://fastcoding.jp/blog/all/info/amp/

・AMP対応のためのHTML記述方法など詳細
【SEO対策】HTMLページをAMP対応化する詳しい方法と、本当にAMPで良いの?
https://fastcoding.jp/blog/all/frontend/amporpwa/

6 ページ表示速度改善チェックリスト ダウンロードする

クリックすると『ページ表示速度改善チェックリスト by オレコン.pdf』というファイルが開きます

無料マイクロコピーウィークリーレポート

・読者数785名、国内唯一のマイクロコピー専門メルマガ
・週に1回、世界中から集めたウェブサイト改善案を配信

・ECサイト・UI/UX関係者・セールスライターの有益な情報源

[yikes-mailchimp form=”1″ submit=”購読完了”]