わりと本気でウェブサイトの高速化に取り組んだ結果。

以下、サイトの読み込み速度UPのために実際に行ったことを紹介していきます。

.htaccess
画像の圧縮
レンダリングをブロックする要素に関して
- JavaScriptを非同期で読み込む。
HTML、CSS、JavaScript を縮小する
jQuery や CSS のセレクタの指定方法やコードの記述を最適化する
DNSプリフェッチによる名前解決（DNSルックアップ）の強制
高性能なサーバーを使う
最後に。

.htaccess

まずはサーバー側の処理速度にメスを入れます。

具体的には［.htaccess］ファイルを用意して「文字コードの指定」や「キャッシュ」や「圧縮」などの処理を施します。

圧縮

いわゆる「gzip」と呼ばれる圧縮のテクニックで、ウェブサイトを構成するあらゆるファイルをデータ圧縮することで、転送量を減らすことができます。

以下のコードを［.htaccess］に記述しています。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
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 application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
</IfModule>

キャッシュ処理

続いてはキャッシュ処理の指定。
同じく、以下のコードを［.htaccess］に記述します。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 days"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>

あらかじめ文字コードを指定

通常は<head>タグの先頭の方で <meta charset="UTF-8"> などと文字コードを指定します。
しかし、そもそも文字コードはHTTPレスポンスヘッダで指定する方がより望ましいので、［.htaccess］で先に記述しています。

AddDefaultCharset utf-8

この辺りの詳しいノウハウは過去記事でも紹介しているので参考にどうぞ。

文字コードに関する警告への対処方法 : https://on-ze.com/archives/2740

なお［.htaccess］はセキュリティ上、極めて重要なファイルになります。
必ずパーミッッションが「604」または「606」であることを確認してください。

画像の圧縮

続いては画像の圧縮です。

ウェブサイトにおける表示速度の遅延は、多くの場合は画像データの容量肥大が原因です。
ここでの主な解決策は４点。

画像は必ず圧縮したものをサーバーにアップロードする
jQueryプラグインまたはZeptoプラグインなどによる『画像の遅延読み込み』を行う
CDNを利用する
画像をインライン化する

画像は必ず圧縮したものをサーバーにアップロードする

画像ファイルの圧縮にはウェブサービスの［TinyPNG］を利用しています。

TinyPNG : https://tinypng.com

圧縮したい画像ファイルを放り込めばいいだけなので簡単ですね。

jQueryプラグインまたはZeptoプラグインなどによる『画像の遅延読み込み』を行う

続いては『画像の遅延読み込み』を行います。

これはjQueryプラグインの［Lazy Load］が有名ですね。
他にはWordPressプラグインの［Unveil Lazy Load］や、超軽量のJavaScriptライブラリ［Echo.js］が便利です。

Lazy Load Plugin for jQuery
Unveil Lazy Load
Echo.js

オンズのウェブサイトでは用途に合わせて使い分けています。

画像をインライン化

簡単な画像はbase64にエンコードしてHTMLやCSSに直接埋め込んでいます。

この方法を用いると単純にリクエストを減らすことができるのでモロにレンダリングの高速化に繋がります。

オンズのウェブサイトのコードを読んでいくと随所で以下のようなコードが記述されています。

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

これがbase64にエンコードしてインライン化された画像です。

ちなみに上記の data-URI の画像のコードは、透明化されたgif画像で、現在最も容量の小さい74文字。画像遅延読み込みの Lazy Load 系のプラグインなどでも代替画像としてよく利用されるものです。

CDNを利用する

サイトのリソースのうち、特に容量が大きいファイルはCDNを利用して配信します。
ここで言う「特に容量が大きいファイル」とはjQueryの本体ライブラリと画像ファイルがメインですね。

今までjQueryの本体ファイルを自前のサーバーに置いて管理していましたが、今回から Google API にホストされているものを使うことにしました。
以下のHTMLコードを使えばOKです。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

また同様に、埋め込みで使っていたフォントの一部を Google Fonts に切り替えました。

Google Fonts : https://www.google.com/fonts

これだけでも随分と表示速度が速くなりました。

画像のCDN配信には様々な方法がありますが、最も簡単なのはWordPressプラグイン［Jetpack］の機能の１つ［Photon］を使うこと。
それ以外では有料の［amazon web service］と［Cloud Flare］などの選択肢があります。

レンダリングをブロックする要素に関して

特にWordPressで構築しているサイトでは、プラグインを導入するのと比例して、自動的に読み込まれる JavaScript や CSS ファイルが多くなっていきます。
これらのスクリプト及びスタイルシートは「レンダリングブロックリソース」として扱われ、そのファイルを読み込んでいる間は描画がストップしてしまします。

解決策として、すべての CSS を１つにまとめて、また JavaScript のほうは <body>〜</body> 要素の最下部で読み込むようにしています。

JavaScriptを非同期で読み込む。

JavaScript を <body>〜</body> タグの最下部に設置したら、さらにそのスクリプトを非同期で読み込ませるようにします。

これは<script>タグに「defar」属性または「async」属性を追記することで可能になります。

一例を挙げると次のとおり。

<script src="//example.com/sample-01.js" async="async"></script>
<script src="//example.com/sample-02.js" defer="defer"></script>

なお、jQuery本体ライブラリを非同期で読み込むとプラグインが正常に動作しなくなるので注意が必要です。

HTML、CSS、JavaScript を縮小する

各ファイルから余分な改行やタブを取り除きます。
これは［GTmetrix］で診断した際に「Minify HTML」「Minify CSS」「Minify JavaScript」の各項で圧縮したデータを自動で生成してくれるので、それを利用するのが最も手っ取り早いですね。

使わなくなったスタイルシートの設定なども見つけ出して、徹底的に無駄を省いています。

jQuery や CSS のセレクタの指定方法やコードの記述を最適化する

例えば jQuery のコードを書くとき。
要素を指定するために ID か CLASS のどちらかを使うことが多いと思います。

このとき、セレクタを ID にするか CLASS にするかで処理速度に大きな差が生まれます。

ID セレクタ：$('#sample');
CLASS セレクタ：$('.sample');

環境やプログラムの内容にも左右されますが、「ID セレクタ」は「CLASS セレクタ」よりも 3倍〜5倍ほど高速だという検証結果があります。

他にも、「ループを回す際は『each』より『for』を使う」とか、「同じセレクタは変数に格納する」とか。CSSでも同じように、「できるだけidやclassで指定する」など、プログラムやソースコードの書き方には高速化に効果的な様々な細々としたテクニックがあります。
すべて挙げたらキリがないので割愛しますが、この辺りは地道にコツコツ学んでいきましょう。

DNSプリフェッチによる名前解決（DNSルックアップ）の強制

外部SNSサイトなどと連携すると、多くのJavaScriptのファイルやスタイルシートやインラインフレームなどが埋め込まれます。

このときに、外部のドメイン名（ホスト名）とIPアドレスを紐づける操作（DNSルックアップ）を先に行うことを「DNSプリフェッチ」と言います。
ブラウザが実際にそのドメインにアクセスする前に、既に名前解決が完了していることになるので、読み込み時間の短縮を図ることができます。

身近な例では WordPress のプラグイン［Jetpack］の機能「Photon」を有効化したときに自動的に「DNSプリフェッチ」が使われていますね。

「Photon」を有効化した状態で headタグ内のソースを見ると、以下のようなコードが出力されているのを確認できます。

<link rel='dns-prefetch' href='//i0.wp.com'>
<link rel='dns-prefetch' href='//i1.wp.com'>
<link rel='dns-prefetch' href='//i2.wp.com'>

これが「DNSプリフェッチ」です。

GoogleのCDNからjQueryを読み込んでいるときに、次のコードを記述しておくことは極めて有効的な「DNSプリフェッチ」の例です。

<link rel='dns-prefetch' href='//ajax.googleapis.com'>

同じように Google Web Fonts を使っているなら以下のコードを記述しておきましょう。

<link rel="dns-prefetch" href="//fonts.googleapis.com">

他に、各SNSと連携して外部リソースを利用している際には次のようなコードを使います。

<!-- Facebook -->
<link rel="dns-prefetch" href="//connect.facebook.net">

<!-- Google+ -->
<link rel="dns-prefetch" href="//apis.google.com">

<!-- Hatena -->
<link rel="dns-prefetch" href="//b.st-hatena.com">

<!-- Linkedin -->
<link rel="dns-prefetch" href="//platform.linkedin.com">

<!-- Twitter -->
<link rel="dns-prefetch" href="//platform.twitter.com">

ご覧のとおり難しい記述のルールはありません。
ただし「href」で指定するURLはダブルスラッシュから記述しはじめてください。

高性能なサーバーを使う

ここまでで紹介した様々なテクニックを使って高速化を図ったとしても、性能の低いサーバーを使っていたのでは本末転倒です。

現在、オンズでは「国内最強」と謳われる「Sixcore」のサーバーを利用しています。

他のレンタルサーバーと比べると費用は高くなりますが、それに見合った性能でまったく不満はありません。

スピードはもちろんのこと、月間100万PVにも耐えられる安定性が魅力。

Sixcore : http://www.sixcore.ne.jp

また最近は当サイトもアクセス数が増加傾向にあり、今後はさらに高機能な「AWS」への移行も視野に入れています。

AWS (amazon web service) : http://aws.amazon.com/jp

とりあえず手軽にオススメできるのは「エックスサーバー」です。
こちらは比較的安価で、スピードにも定評がありますので初心者の方でも手が出しやすいのではないでしょうか。

最後に。

以上。今回は細かな点も妥協せず、徹底してスピードアップを図ってみました。
参考になるテクニックは見つかりましたか？
ぜひ実践して高速化に励んでください！

1 2

ONZE/BLOGオンズ開発ブログ

株式会社オンズのブログです