確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開

• 作成：2016/06/27
• 更新：2016/08/01
• WordPress >

レンタルサーバでの運用を止め、VPSに移行し、Apacheの制約から開放されるため軽量・高速なNginxに変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社HPとコムテブログに行った高速化への手順を全公開します。

エンジニア速報は Twitter の@commteで配信しています。

今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社HPはこちら。

PCは96点、アナリティクスとメインのCSSを外せば100点が出そうでしたが断念。

Pingdomでは97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。

なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらのVPS 4G（SSD 4G）をチョイス。コーポレートサイトなら2Gくらいでもよいですが、ブログをガンガン更新するなら4Gほど欲しいところですね。リージョンは東京でOK。

バックエンド

常時 SSL、HTTP/2

会社HPのみ常時SSL（コムテブログはお問い合わせページのみ）に変更しました。

最近SSLについてお問い合わせされるお客様が増えてきたのもあり、さすがにこのご時世「会社HPがhttpだとユーザーの心証に影響するのでは…」と思い、常時 SSL（全ページ）にしました。

セキュリティも強化したし、HTTP/2にしようと思ったのですが、小規模なトラフィックで採用するのはどうかと思い一旦保留中。ですが、高速化のために知っておいたほうがいいことを少しメモします。

時代はHTTP/2です。高速化にあたっては、HTTP/2対応が最も効果的です。
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides

HTTP/2はグーグルによるSPDY（スピーディー：サイトのロード時間を短くする技術 ）を改良したもので、同時アクセスに強く、処理が単純でコンパクトになり、レスポンスタイムが速くなる可能性があります（遅くなる場合もあるそうです）。特に一度に多数のリソースをダウンロードするようなサイト（画像を大量に読み込むような作りなど）に効果が出ます。

一方、HTTP/1.1で効果的だったCSSスプライトやファイル結合・ドメインシャーディングなどで容量が大きくなると逆効果になる場合があるとのこと。

多くのウェブブラウザはHTTPS でのアクセスにおいてのみ、HTTP/2 を有効化する公算が高くなっています。このため、HTTPS の方が HTTP よりも高速である、という状況は今後とも続くと考えられます。
Kazuho's Weblog: なぜHTTPSはHTTPより速いのか

HTTP/1.1が一つの通信で行ったり来たり繰り返すのに対し、HTTP/2では一つの接続で複数の処理を行えます。

こちらはhttpとhttpsの速度がどれだけ違うか計測したもの。10倍以上違いますね。

HTTP vs HTTPS — Test them both yourself

httpsが早いというよりも、HTTP/2が早いということになります。多くのブラウザにてHTTPSでHTTP/2を対応しているので、常時HTTPSのサイトで使わないと意味がないです。

ちなみにブラウザの対応状況は以下です。ほとんどのブラウザに対応しています。

コムテブログの方は備忘録みたいなものなので、現在問い合わせページのみsslに対応ですが、タイミングをみて全ページsslに変更予定です。

*部分的にSSL対応させても、他のページがurl混在（httpsとhttpどちらも表示可能）となった場合は、httpsからhttpにリダイレクトさせておきましょう。

ともあれSPDYを使って速くなることも遅くなることもあるとのことなので、HTTP/2は少し様子見します。

次世代Webカンファレンス「HTTP2」レポート #nextwebconf ｜ Developers.IO

証明書に関しては、リーズナブルなRapid-SSLあたりでよいかと思います。

nginx

nginxはサーバのファイルを高速配信するように設計されていて、消費メモリが少なく処理が軽いし、ロードバランサー（負荷分散装置）などの機能があります。元々は沢山の同時アクセスを処理できるようなサーバを作る目的で開発されたそうです。

会社HPがApacheなので、コムテブログの方はApacheの制約から開放されるべく軽量・高速なNginxに変更。

nginxの高速化施策はこちらを行いました。

• gzip圧縮の設定
• モジュール ngx_brotli（圧縮率向上）
• リバースプロキシ、proxy cacheの設定（サーバ負担軽減）

初期設定は、こちらが一番分かりやすいです。

【nginx】【超高速】 WordPress のウェブサーバーを nginx にして、プロキシキャッシュを使ってパフォーマンスをとても向上させるまでの試行錯誤です！【Apache からの卒業】 – oki2a24

設定方法はこちら。

• nginxパフォーマンスチューニング〜静的コンテンツ配信編〜 - Qiita
• Nginx + WordPress proxy cache篇 « サーバーワークス エンジニアブログ
• 新しい圧縮アルゴリズムBrotliをnginxで試す - Qiita
• さくらVPS + nginx に無料で独自ドメインとSSLを設定する - Qiita

phpはPHP 7に。あとはAPC（アクセラレータ）でPHPの処理を高速化。データをキャッシュディレクトリに保存することで次回アクセス時にキャッシュを利用し高速表示します。

PHP 7では互換性を維持しつつ、従来のPHP 5と比べて2倍以上の性能向上やメモリ使用量を低減するなど、大きな改善が実現されます。
「PHP 7」登場。10年ぶりのメジャーバージョンアップで実行速度はPHP 5の2倍以上に、PHPの生みの親が語る。PHPカンファレンス2015（前編） － Publickey

• CentOS7 + PHP7 + nginx + php-fpm の環境構築 - Qiita
• centos6.4 + PHP5.3 + php-fpm + APC + nginxを構成したときのメモ | KentaKomai Blog

フロントエンド

gzip

2016-06-30追記：管理者権限があるのならhttpd.confに書くのがよいです。

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
</ifModule>

有効期限

有効期限は以下を先ほどのhtaccessにこれを追記。

ExpiresActive On
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/x-javascript "access plus 10 days" 
ExpiresByType application/javascript "access plus 10 days" 
ExpiresByType application/x-javascript "access plus 10 days"

CSS / Auditsで未使用のセレクタを見つける

gulpであれば、gulp-uncssを使うと余分なCSSを消してくれますが、jsで付与するクラス等を除かないと不具合が出たり、完璧ではありません。

少々面倒ではありますが、Chromeの開発者ツール（F12）で、Audits>Reload Page...のRunを押し計測を開始し、Remove unused CSS rulesで、現ページの使ってないセレクタを見つけることが出来ます。

他のページでも、そのセレクタが使われてないか調べて、どのページも使ってないようであれば削除します。

firefoxのプラグイン「Dust-Me Selectors 」も、同じように不要なセレクタをコメントアウトした状態でダウンロードできます。

HTTP/1.1で効果的とされている改行削除とか空白削除は体感的には気休め程度な気もしますし、よく考えたらファイル結合はメンテナンス性も悪いし、面倒な感じがするかもしれませんが、高得点を狙うなら以下も行う必要があります。

• ファイル数を削減、gulpで圧縮、head内に
• @importの削除
• ファイルを統合してCSSは一つだけにする
• gulp-uncssで未使用のセレクタを削除

JavaScript

お馴染みのこれ。

• ファイル数を削減し、中身を圧縮する
• body閉じタグ前へ移動
• 非同期で読み込む
• インライン化（htmlに直接記述）
• スマホ用。スクロール・タッチイベントを減らす

システムフォントを使う

google fontsを外してシステムフォントに変更。google fontsを外すとPageSpeed Insihtsで飛躍的にスコアが上がりますが、物足りない感じのフォントに。ちなみにフォントは以下のようにショートハンドで指定。

html {
  font-size: 62.5%;
}
body {
  font: 1rem/1.5 "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

font-sizeは62.5%にしておくと計算しやすくなります（10px = 1rem、12px=1.2rem）。

fontのショートハンドは10pxで、line-height: 1.5;という意味です。

体感速度を速めるライブラリ

体感的にもスピードアップさせるならこちらの２つ。

• [スマホ] FastClick
• [PC] InstantClick

FastClickはタップイベントの遅延を無くすスマホ用JavaScriptライブラリ。InstantClick jsは、マウスオーバーを感知し、リンク先ページをロード・先読みしてクリックした瞬間高速表示するPC用JavaScriptライブラリ。

「InstantClick js」を試したところ、体感的に早くなったものの、SyntaxHighlighterの読み込みエラーが出たので諦めました。

• FastClickを使った体感応答時間の短縮テスト - Qiita
• 2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo

SVGスプライト

アイコンフォントは、Unicodeの読み上げ問題（スクリーンリーダーで読み上げられない）や、アイコンが四角形（豆腐）になるという問題などがあると言われてきました。

そういったリスクを回避する目的もありますが、ロゴとアイコンをまとめて管理したいこともあってSVGスプライトを導入しました。

SVGはRetinaのような高解像度のスクリーンでもロゴやアイコンを綺麗に表示できます。またJavaScriptで操作しCSSで制御可能というメリットがあるし、アイコンを増やす時は、symbolとCSSを追記するだけなので管理も楽ですね。軽量化のためには不要なレイヤーやパスを消しておきます。

SVGスプライトはCSSスプライトのように座標で制御せず、use要素を使います。use要素から、xlinkのsymbolのidを参照し表示させます。例えば、IcoMoonを使ったFecebookのアイコンだと以下。

body前に＜symbol＞~＜/symbol＞を追記。symbol要素にはid（参照）とviewBox（アイコンサイズ）が指定されてます。

<symbol id="facebook" viewBox="0 0 15 15">
<title>facebook</title>
<path class="path1" d="M11.156 0.469h-1.781c-2.016 0-3.375 1.359-3.375 3.469v1.594h-1.828c-0.141 0-0.281 0.141-0.281 0.281v2.297c0 0.141 0.141 0.281 0.281 0.281h1.781v5.859c0 0.141 0.141 0.281 0.281 0.281h2.391c0.141 0 0.281-0.141 0.281-0.281v-5.859h2.156c0.141 0 0.281-0.141 0.281-0.281v-2.297c0-0.094 0-0.141-0.094-0.234s-0.141-0.094-0.234-0.094h-2.156v-1.266c0-0.656 0.141-1.031 1.031-1.031h1.219c0.141 0 0.281-0.141 0.281-0.281v-2.156c0.047-0.141-0.094-0.281-0.234-0.281z"></path>
</symbol>

呼び出したい箇所にIDが書かれた以下を記述。

<svg class="icon facebook"><use xlink:href="#facebook"></use></svg>

あとは、cssで大きさと色を変えます。色はfillで指定、大きさは普通にwidth/heightを指定すれば良いです。

svg.icon.facebook {
  width: 25px;
  height: 25px;
}

li:hover svg {
  fill: #289dcc;
}

• IllustratorとIcoMoonでSVGスプライトのラクラク設定！ | Webクリエイターボックス
• Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方 – Rriver
• IcoMoon SVGスプライトツール

WordPress / scriptはフッターに移動

これもおまじないみたいなものですね。CSSはhead上部で呼び出しますが、JavaScriptは基本的にheadで読み込まず、できるだけbodyの下部で読み込むようにしたいので、function.phpに以下のように記載。そうすると後からJavaScriptの処理をさせるので体感的にユーザーが遅く感じにくくなります。

パラメーターをtrueにすることでwp_footer()で読み込まれます。trueでbody終了タグの前、falseでhead前。

// trueでbody終了タグの前、falseでhead前
wp_enqueue_script(
'common-js',
get_template_directory_uri() . '/js/common.js',
array(),
NULL,
true
);
wp_enqueue_script( 'common-js' );

WordPress / header内の不要なコードを削除する

WordPressのバージョン情報や、Windows Live Writer用のURLなど全く必要ないので、remove_actionをfunctions.phpに以下を追記。Embedは任意で。

// 不要なコードをまとめて削除
// WordPressのバージョン情報
remove_action('wp_head', 'wp_generator');
// ブログ投稿ツール用
remove_action('wp_head', 'rsd_link');
// デフォルトURLの表記
remove_action('wp_head', 'wp_shortlink_wp_head');
// Windows Live Writer用
remove_action( 'wp_head', 'wlwmanifest_link' );
// Embed WPのブログカード。他サイトのアイキャッチ画像や抜粋自動埋め込み
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

WordPress / 特定のプラグイン.cssをトップページなどで外す

例えばamazonJsなんかのプラグインのCSSは、single.php以外では必要ないので、以下の記述で外します。パラメーター（wp_deregister_styleの中）は、登録したスタイルシートの名前を記述するので、以下の例だとプラグインフォルダの中でソースコードに記述されている「amazonjs.css」か「wp_enqueue_style」で検索して見つけます。

// 記事以外 amazonJs.cssを消す
add_action( 'wp_print_styles', 'amazon_deregister_styles', 100 );
function amazon_deregister_styles() {
if ( ! is_single()) {
    wp_deregister_style( 'amazonjs' );
    }
}

以上、サイト高速化の手順でした。サーバの引っ越しについてはレンタルサーバからVPSへの移行作業を代行しますのページにて詳細を書きました。法人・個人の方もご依頼可能です。

サーバ移行の詳細を見る