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

TwitterFacebookHatena
  • 公開：2016-6-27
  • 更新：2024-11-12
  • 文章量：8040
  • CSS

TL;DR

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

今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 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 設定方法はこちら。

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

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

フロントエンド

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 はタップイベントの遅延を無くすスマホ用 JavaScript ライブラリ。InstantClick js は、マウスオーバーを感知し、リンク先ページをロード・先読みしてクリックした瞬間高速表示する PC 用 JavaScript ライブラリ。 「InstantClick js」を試したところ、体感的に早くなったものの、SyntaxHighlighter の読み込みエラーが出たので諦めました。

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;
}

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 への移行作業を代行しますのページにて詳細を書きました。法人・個人の方もご依頼可能です。

サーバ移行の詳細を見る

Jamstack での制作を依頼する

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