Webサイト高速化の改善ノウハウが溜まったので知見をまとめた

2018年1月7日2020年4月3日

一時期、webサイトの高速化にハマってました。

自作WPテーマでanalyticsで-1点の99点をとったでござる

満足! pic.twitter.com/z2cJYkkkWC

— 上谷 亮太 (@the_Glutenfree) 2017年9月2日

このサイトは、自作したWordpressテーマを使っています。これを作っているときに高速化にハマりました。このサイトのスピードは最終的にこんな感じに。

※計測ツール：PageSpeed Insights | この点数が高いほど早い。

（いまは別のテーマを使っています。）

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fuetani33.net&tab=mobile

スピードをあげるだけならもっといけるんですが、テーマの改造しやすさ・利便性を考えるとこうなりました。アナリティクス入れるだけで、-1点になるので100点で運営するのは事実上不可能ですね。

高速化で色々とノウハウを培ったので、今日はそのwebサイトの高速化について。

Q：お前のサイト本当に早いの？

A：早いです！

自信を持って答えます。PageSpeed Insightsを使って色んなサイト測るとわかるんですが、30〜50点ぐらいのサイトを多く見ます。ちょっと対策して50〜70点。本気でやって80点以上かなと。

※追記：記事書いたときは自作テーマだったのですが、今は別のテーマ使っています。ルクセリタスがすごすぎて、、汗

https://www.kantei.go.jp/

と言う具合に、少なくとも遅くはないのは伝わるかなと。

Webサイトを高速化するのにポイントは3つ

高速化のポイントは大まかに3つあります。

• html/css/jsのファイルソース側での対処
• 画像をできるだけ軽くして、不用意に大きな画像を使わない
• gzip圧縮・キャッシュを有効化

ここがめちゃくちゃ重要です。特に画像が一番重いので、画像に気を使うだけでWebサイトはかなり高速化されます。WordPressなら、画像をアップロードする前に必ず軽量化しましょう。プラグインのEWWW Image Optimizer？あれそこまで軽量化されてない気がするので、Tinypngで軽量化が一番軽くなるなと。軽量化しすぎて画質が怪しくなりますが。

html/css/jsのファイルソース側で高速化

いわゆるコーディング・フロントエンド側での対処について。

ソースを圧縮して1つにまとめる

いわゆる軽量化。圧縮して記述量を短くした方がファイルの容量が軽いので、スピードも早くなります。jqueryのプラグインを見ると〇〇.min.jsと言うのがあったりしますよね？あれはこれに配慮しているわけです。

また、css・jsは1つのファイルにまとめましょう。というのも1つの外部ファイルを読み込む時にhttpリクエストと言うものが発生しています。httpリクエストが1つ増えればサーバーへの通信回数が1回増えます。そこで時間がかかるので、css・jsで複数ファイルがあれば1つのcss・jsにまとめた方が早いのです。

• gulpなどのタスクランナーで自動で圧縮ファイルを出力するようにする
• sassを使い、圧縮してcssを生成するようにする（cssのみ）
• Prepros・CodekitなどのGUIコンパイラーを使う

あたりかなと。エックスサーバーやmixhostならサーバー側の機能で1つにまとめて圧縮できるようです。エックスサーバーならmod_pagespeedでしょうか？当サイトは、エックスサーバーですが、サーバーに負荷をかけたくないのでmod_pagespeedは使っていません。全部手動でやってます。

なお、私はPreprosを使っています。シンプルで使いやすく無料でwin・macで動作するので導入ハードルがかなり低めです。gulpは環境作るのがめんどくさい・・・。

css・jsは非同期読み込み

普通にcssやjsを読み込むと、読み込みが終わるまでブラウザに何も表示されません。ですが、非同期読み込みをすればcss・jsを読みこまなくてもページが表示されます。レイアウトに重要でないcss・jsは非同期読み込みでやると高速化します。

cssの非同期読み込みのやり方

loadCSSと言うjsのプラグインを使うか、以下の記事のソースコードがいいかなと。

» CSS の非同期読み込みで Web サイト高速化 | Thought is free

個人的には、高速化のためにプラグインを1ついれるのは本末転倒な気がするので、Thought is freeの方のソースを使わせてもらうのがいいと思います。

jsの非同期読み込みのやり方

こっちは簡単です。読み込む時に、ansyc・deferをつけてあげましょう。

<script src="myscripts.js" async></script>

<script src="myscripts.js" defer></script>

ansyc・deferそれぞれ意味が違います。

• ansyc：複数のソースがansycだったら順番がランダムで読みこまれる
• defer：書かれた順番に読みこまれる（上の方から読む）

ソースを1つにしてしまえばどっちを使っても問題ないのかなと。

なお、このサイトは、jsだけ非同期で読み込んでいます。なぜなら、css全て非同期にするとレイアウトガタガタの状態で表示されてしまうので、それは避けたいなと。

完璧にやるなら、cssでhtmlへインラインで骨組みを読み込み、残りを非同期読み込みさせます。このテーマは日々改造しているので、メンテナンスが面倒になることを避けたいので、cssは非同期読み込みにしていません。

画像をできるだけ軽くし、適切なサイズで

一番の削減ポイントです。画像を適切なサイズできっちり軽量化させましょう。

軽量化は、Tinypngを使ってます。無料で使えてブラウザで完結し、かなり圧縮してくれます。

海外のツールって動物のキャラクター多いと思うの僕だけですか？それも微妙に可愛くない・・・。

Q：適切なサイズって？

A：Webサイトで表示される大きさよりも大きい画像を使わないこと。

WordPressだとよくありますが、表示されているサイズよりも大きな画像を使っている場合があります。これがPageSpeed Insightsで一番怒られます。笑

なので、適切なサイズの画像を使うように心が目ましょう。サイズが大きいならアップロード前にリサイズを。

僕はTh-makerXでリサイズしてます。ドラッグアンドドロップの簡単操作なので、最強におすすめします。※Mac専用アプリ

なお、Th-makerXは画像の軽量化も一緒にできる優れものです。Macなら使って損しません。

gzip圧縮・キャッシュを有効化

最後です。人によっては聞きなれない言葉かもしれません。

ブラウザでサイトを開くとき、スマホやパソコンにサーバーからデータが送られてくるのですが、そのデータをgzipで圧縮して送信することができます。だから、圧縮したデータの方が早く読み込めるよねという話。

キャッシュは聞いたことがあるはず。過去に読み込んだサイトのデータをブラウザ常に保存して、同じサイトならそのキャッシュからデータを引っ張ってくることです。

これの設定は、レンサバなら.htaccessから行います。

私はエックスサーバーなのでエックスサーバーの場合の.htaccessを記載します。もともとあった記述の下に追加で加筆しています。

ここへ編集するときは、必ず元のバックアップを取るように。

.htaccessの記述間違えるとサーバーが真っ白になってしまうので、不安ならエンジニアにやってもらいましょう。

WordPressブロガーの場合：素人ができることは少ないので、サーバーの機能かプラグインを利用しよう

WordPressでブログをやっている素人の人は、自分でできることがかなり少ないです。

• サーバーの機能を利用する
• 高速化のプラグインを使う

サーバーの機能は、mixhostかエックスサーバー限定ですので、プラグインを使う方法が現実的かなと。

ですが、一番高速化するならエンジニアに頼んでテーマやデータを調整してもらうの最強です。