100点以上を目指すWEBサイト表示の高速化アイデア16選
ページ表示の高速化
WEBサイト管理人なら誰もが悩ましい問題だろう。
SEOに良い！となり、Googleが点数化するものだから必死。
点数を上げる商売をする人もいる始末。
高速化の手法をまとめたい。
※画像を小さくとか当たり前のは省く
１、外部CSS・jsは一つにまとめる
複数の外部CSSを一つにまとめると速くなる。
読み込むファイル数が多いほど遅くなる。
どんなに軽いファイルでも一定の時間がかかるものです。
そのため、一つにまとめた方が圧倒的に速い。
特にjsは複数読み込ませている人が多い。
jsもcssと同じで下に追加すれば統合できます。
複数のCDNから読み込ませている場合、自分のサーバーに統合して置こう。
※サーバーの負荷を減らしたいならCDNを使う
２、gzipを可能な限り利用する
cssやjsはgzipという形式に圧縮して送信できます。
圧縮するとサイズが4分の1くらいになるので、読み込みが劇的に速くなる。
gzipはWEBページ高速化の基本中の基本。
これもあるので、js等はできるだけ１つにまとめてgzipしたい。
レンサバは「高速化機能ON」にするとgzipになるはずです。
そのため、基本的には特に何もしなくていい。
VPSの場合は自分で設定する必要があるので、完璧に設定を。
Nginxなら「gzip static」でさらに速くなります。
Nginxはgzip staticで高速化！設定方法・圧縮方法を解説
３、jsから脱却する
ほんとにそのjs必要？と整理整頓する。
例えば、jQueryを止めて普通のjsだけにする。
PHPでできることはPHPでやる。
プラグインじゃなくて自作する、などなど。
jsで無くても実現できることが多い。
目次の作成、lazyloadもjsを使わずできる。
極めるならアクセス解析も自作した方がいい。
プログラミングができると速くできる。
高速化にプログラミングは必須です。
４、SSL処理をなるべく速い方式にする
VPSの場合、自分でSSL処理方法を選ぶことになる。
SSLの処理は複雑で、いろいろな暗号方式があります。
強度が高い暗号は処理も重たい。
したがって、高速化のためには強度が低い暗号を使います。
レンサバは設定ができないためどうしようもないですが、
VPSで自分でやる場合はしっかり調べて設定を。
５、ファーストビューにlazyloadを使わない
最初に表示される画像はlazyloadをoffに。
ワードプレスの場合は自動的に「loading=”lazy”」を付与されますが、
最初に見える画像にも付与されてしまうのが問題。
これがまた遅いのです。
そして、地味に対処が難しい。
自動付与は止めて手動にするとか、プログラミングでなんとかする。
自分のサイトに合わせた調整となるので頑張るしかない。
６、画像の形式をwebpにする
jpegやpngはwebpにするだけでサイズが半分くらいになる。
これはワードプレスならプラグインがあるので簡単。
簡単ながら抜群に効果があります。
ファイル数が倍増してしまうのだけが難点。
プラグインを使わないなら、
ファーストビューの画像だけwebpにするのが楽。
関連：【PHP imagewebp】ワードプレスのアイキャッチ画像をwebpに変換する方法を雑に解説
７、gif画像を活用する
全体的に白くて色数が少ない画像はgifが軽い。
白色・黒色は容量がほぼ増えないのがgifです。
白背景に文字を入れるような画像はwebpよりgifの方が軽い。
当サイトのアイキャッチ画像がそれです。
したがって、なんでもwebpというのはダメ。
モノクロアイコンなんかはgifの方が軽いので使い分けよう。
８、関数をできるだけ使わない
PHPの関数処理は最低限に
ワードプレスは関数を多用するので、積み重なるとけっこうな時間に。
関数なんて使わなくても実現できることがほとんどです。
あらかじめ変数にしておいてそれを利用する、などなど。
９、ifの順番を最適化
一番確率が高いやつだけを単独で判別する。
例えば、ワードプレスの記事ページを高速化する場合、
ifは「single」を最初に単独で判別します。
それだけでわずかながら確実に速くなる。
１０、サムネイルを統一する
アイキャッチ画像を記事一覧のサムネイルにしない。
記事一覧はアイキャッチ画像＆記事タイトルにすることが多いですが、
一つ一つ別画像なので読み込み負荷が大きい。
全部同じ画像なら一瞬です。
ここはデザイン的問題がありますが、
可能であれば当サイトのようにカテゴリ別にアイコンを使うことをおすすめ。
１１、ファーストビューに画像をできるだけ置かない
理想的にはファーストビューは文字だけ。
PC表示の場合は難しいですが、スマホは簡単です。
ロゴ画像もアイキャッチ画像なんて入らない。
lazyload対策に目次を長くして距離を置く。
これだけでファーストビューは爆速です。
やりすぎではある。
１２、ページを短くする
HTMLの容量はそら少ないほうがいい。
長いページ（HTMLが多い）ほど読み込みは遅いです。
記事が長くなるのは仕方がないとして、記事一覧などは短くしたい。
5記事だけ表示する、記事一覧はajaxで読み込むなどしよう。
スマホ表示の場合はサイドバーを表示しないなど、
デザインの振り分けも考えたい。
１３、CSSのID・class名は短くする
文字の分だけ容量が増える。
HTMLの容量もCSSの容量も増える。
長いclass名ほど無駄なものはない。
また、できるだけ親要素だけで対応させたい。
ついでに改行も無くしておこう。
なお自分はここまではやりすぎとやっていない。
あともちろん、CSSは少ない方がいい。
処理が速くなる書き方などもあるので、ググってみてほしい。
１４、jsの使わない関数等は削除する
jsがわかる人は必要な分だけ残して、他は削除したい。
だいたい、使わない不要なコードだらけなものです。
使うものだけ残すと容量が半減以下になったりする。
これでgzipをすると容量は激減。
暇だったjsを眺めて削除作業をしよう。
１５、必要なページだけ必要なものを読み込む
使わないCSS・jsを読み込むのは止めよう。
ワードプレスのプラグインを使うと、だいたいは全ページ読み込まれます。
これがかなり遅くなるので必要なページだけ読み込むよう修正したい。
フックでこれができるようになっています。
詳しくはこちらの記事を参考に。
「Highlighting Code Block」を使う記事だけCSSを読み込む方法
１６、htaccessはシンプルにする
設定ファイルでの処理が多いほど重たくなる。
リダイレクトやbot判別など、処理があるほど時間がかかります。
かなり高速ではあるのですが、速度を追求する人は必要最低限の設定だけにしよう。
特にNginxは多量に書いてしまいがちなので注意。
こちらもifの順番は意識。
一番可能性の高いやつ、速くしたいやつを最初に判別します。
最後に
最終的にはやはり、システムを軽くすること。
動的にページを表示するならば、ワードプレスはどうしても遅いです。
自分がやっているような自作ブログシステムにするのが良い。
重たいシステムで無理に頑張るのではなく、軽いシステムに乗り換えよう。
サーバーに関しては、エックスサーバー以上は無いと考えていい。
VPSとか専用サーバーよりもはるかに高性能です。
このブログもVPSにしてから劇的に遅くなった。
したがって、エックスサーバーで自作ブログシステムが最強です。
当ブログも以前はそうやっていました、こちらの記事も是非。
