[WordPress高速化基本編]基礎的な高速化の知識をあなたに

初めまして、ココナラで今までに300件以上の高速化を担当してきましたkamata4649と申します。

今回は高速化基本編としてデザインにこだわり過ぎると速度低下に繋がる内容に関してとその回避方法について解説したいと思います。

AutoptimizeやLazy Loadを使っても速度があまり上がらない...

という方には効果がある内容かと思われますので最後まで見ていただければ幸いです。

※記事の内容は更新がある場合があります

Google Fontsは絶対に使ってはダメ！

多くのブログなどのサイトではGoogle Fontsを使っているかと思われます。このフォントは読み込む際に日本語フォントを複数のファイルに分けて読み込んでいます。これは容量が大変大きく、サイト全体の容量を遥かに上回る容量になることが多いです。

画像を遅延読み込みしようとも、Google Fontsの容量が多すぎて意味をなさなくなります。

フォントは基本的にはブラウザの基本フォントや有料の軽量フォントを使うことがSEO的にベストとなっています。

FontAwesomeの速度的影響

FontAwesomeは便利さとこのフォントの数によって多くのユーザーがいますが、数が多くその容量もCSSとwoffやSVGを含め100KB近くの容量があります。またこのフォントをCDNで読み込む場合はCDNサーバーの性能にも依存するため速度低下に繋がる場合が多いです。

そのため使うフォント、使わないフォントを「IcoMoon」を使ってサイトで使うアイコン、使わないアイコンを分けて使用すべきです。

設定に関しては少しの知識が必要になります。

知識がなく手軽に高速化をしたいと感じるのであれば無効にするのもありです。

自作の小さなアイコンはPNGやJPGではなくSVGで読み込む！

上のような自作の簡単な小さなアイコンはPNGなどだと容量が数キロバイトになりますが、SVGだとこの容量を90%以上軽量化できるので細かいところを自分でカスタマイズしたいというときはSVGを使ったアイコンを使いましょう！

JPGとPNGの違いとは？

JPGは実写の写真など、3次元のものに向いています。

PNGはアニメなどの2次元のものに向いています。

これを間違って使用してしまうと莫大な容量を使ってしまいます。もし自分のサイトを見て間違って使っているのであれば画像を変換し圧縮してみましょう！

・デザインをこだわり過ぎるあまり手軽なGoogle Fontsを使っていませんか？これは大幅に速度に影響を与えるため一度オフにして速度の違いを確認してみましょう！

・本当にそのFont Awesomeは必要ですか？自分でカスタマイズしたいときはIcoMoonを使って軽量化をしましょう！

・そのアイコンSVGで使ってますか？

・JPGとPNGを間違って使っていると圧縮しても意味がなくなってしまいます！

サイトのコンテンツ量で速度が低下する？

コンテンツ量の増加で速度に大幅に影響することは基本的にありません、しっかりとデータベースのゴミを削除することによって今までの速度を保てることがほとんどです。

「記事数が増えて遅くなった！？」というのは基本的に読み込み速度に影響はせず、同時接続にかかわるCPU性能に依存することが多いです。

基本的に長期的にサイトを運用して速度が低下したときはサイトのデザインを何回も変更しその間に問題があったか、Google Adsenseやアナリティクスなどが問題になっていないか、Google MAPやFaceBook、Twitterが原因じゃないか、これらのことを考え直さないといけません

サーバーの影響は？

遅すぎるサーバーを使うともちろん速さには影響を大幅に与える場合がありますが、エックスサーバーとConoha WINGを比べて目に見える差が果たして出るのか、これはNoでサイトのデザインに依存することがほとんどです、Conoha WINGとエックスサーバーに変更して体感できるほどの差はないかと思われます。実質的には管理のしやすさで選ぶべきかと思われます。（管理画面の読み込み速度は若干の影響があります）

HTMLの容量は削減すべき

Lazy Loadを使っても、遅延読み込みさせても解決できないHTMLの容量問題、これはCSSやJava Scriptをインライン読み込みさせているサイトで多く起きる問題です。このHTMLの容量が膨大になると最初に文字が表示されるまでの時間が大幅に遅くなります。

Autoptimizeのインライン化は場合によっては遅くなってしまうため判断しながら使用してください。