株式会社花雪の藤原です。
ワードプレス（WordPress：以下WP）を使用したサイトは基本的に表示が遅い事が多く、モバイルで閲覧した際の速度に関しては特に如実に速度が遅い問題。
1秒高速化される毎に10％の売上向上なんて話もあり、なるべく高速化させたい。でもPHPとかよくわからない…
そんな風に頭を悩ませている方、多いのではないでしょうか。
そこで今回は、専門知識が無くてもWordPressサイトを軽量化する方法を解説いたします。
サイトの表示速度を確認してみよう
Googleが提供するモバイル・PCそれぞれの速度測定と問題点の解析をしてくれるサービスです。
あまり正確な結果が出ない速度計測サイトではあるので、神経質になり過ぎず結果をやんわり受け止める感じでOKですが、検索サイトと言えばGoogleですので、Googleの言う事はなるべく聞いておきたいところ。
Googleと、Yahoo!の提供するサイト測定サービスの機能を両方使用し、サイトパフォーマンスを測定するサービス。
ここでC判定以上を取っていればそこまで問題はないと思われます。
高速化のために、どんなサイトでも気を付けておくべき「軽量化の基本」
2-1. 画像の軽量化
基本中の基本、画像の軽量化についての解説です。
WEB関係に長く続けている人ほど忘れがち？陥りがちなんですが…
今あなたが使ってるソフトを使用した画像の書き出し。
信用しすぎてませんか？
確かにプロ御用達のソフトかもしれません。
ですが、実はもっと軽く画像を書き出してくれる方法、ソフトウェア以外に…あるんです！！！
なんと！それはブラウザ上で変換してくれる無料サービスなのです。
弊社がおすすめするのは以下の2つのサイト。
安心安全のGoogle提供のサービスです。
画像の圧縮率は低めですが、ただただ使いやすいのと、他のサービスに無いフォーマットも扱っているのでここぞという時に使える良いサービスです。
「Squoosh」のメリット
- 変換可能なフォーマットが豊富
- 圧縮以外の変更も可能
- オリジナル画像と画質を比較しながら圧縮できる
- 画像をアップロードしないで変換できるのでセキュリティばっちり！
「Squoosh」のデメリット
- 複数ファイルの変換が出来ない
- ※コマンドライン版なら可能
面倒ならここで変換すれば、とりあえず軽くはなる！
サムネなど小さい画像をひたすら軽くしたい場合におススメ。
「iLoveIMG」のメリット
- 圧倒的な圧縮率
- 1GBまでなら無料でまとめて複数のファイルを変換できる
- 日本語対応
「Squoosh」のデメリット
- セキュリティが不安
- 画質の仕上がりはそれなり
- 時間帯により変換できない場合がある
2-2. ページ毎の内容量
エンドユーザーになるべくクリックさせず目的のコンテンツを見せる。
それもとても大事なサイト作りの気配りです。
ですがそれが為に陥りがちな1ページに内容詰め込み過ぎ問題。
内容を詰め込むと1ページ内へ掲載する画像も多くなりがち。
LPを作るわけではないので内容は簡潔に。細かくなるようなら別ページに分けてリンクを設置する。
当たり前の事のように感じますが意外と見落としがちな点です。
ご自身のページを今一度見直してみるのも良いかもしれません。
2-3. 画像をなるべく使用しない
SNSアイコンやボタンに設置しているメールアイコン等を画像で設置していませんか？
そんなアイコン等をWebフォント化し高解像度にも対応しながら軽量化する方法を2種ご紹介します。
アイコンをWEBフォントとして読み込むアイコンフォント
どんなサイトでも使われる基本的なアイコンデータをWebフォントとして提供しているサービス。
提供サイトはいくつかありますが代表的で使いやすいもの2点紹介。
Googleが提供するアイコンWebフォントのサービスです。
他のサービスより導入が簡単なのが特徴。
Webアイコンフォントと言えばここ！
無料版・有料版がありますが、無料版で十二分の充実っぷりです。
いくらでも拡大縮小可能な画像形式SVG画像
アイコンフォントよりもっと効果的なSVG
SVG形式の画像は、所謂ベジェ曲線をWEBで閲覧できる形式にしたもので、写真などには向かず、ご自分の会社のロゴを使用する場合などにも利用できる、図形に特化したとても便利な画像形式です。
アイコンを無料で配布しているサイトなら、大抵SVG形式のデータも用意しているはずなので、特にソフトの導入も必要なく利用できる画像形式です。
ただし、WPに対応させるにはPHPの修正や別途プラグインが必要となります。
詳しくはこちらの記事をご参照ください。
WPでSVGが使えるようになるプラグイン
・WP SVG images
・↑の使用方法
2-4. 画像の表示サイズを固定
色々な媒体でのレイアウト崩れ防止の対応を考えますと、パーセント指定やCSSでの可変サイズに頼りがちです。
が、画像を設置する際にはPXで縦横の画像サイズを固定してしまう方が画像の読み込み速度が速くなります。
ページ読み込み速度があまりにも遅くて困っている場合などは、画像のサイズ固定を一度お試しください。
2-5. Webフォントの使い方
オシャレな有料フォントがAdobeやGoogleのお陰で使い放題となっている昨今。
ついついサイト全体に使用したり色々な種類のフォントを多用してしまい、サイトが遅くなってしまう結果に…
そうならないために、以下のポイントをチェックしてみましょう
オシャレな有料フォントがAdobeやGoogleのお陰で使い放題となっている昨今。
ついついサイト全体に使用したり色々な種類のフォントを多用してしまい、サイトが遅くなってしまう結果に…
そうならないために、以下のポイントをチェックしてみましょう
フォントの使用箇所を限定する
説明文等の細かい文字を使用する箇所にはWebフォントではなく、システムフォントをfont-familyにて指定する。
動作が軽くなるのはもちろん、見出しやコピー、ボタン等の「注目させたい箇所」のみにWEBフォントを使用する事で、視線誘導を図れるので注目させたい箇所にWebフォントを使用すると良い効果が得られるでしょう。
使用フォントの書体を2種類に絞る
フォントの書体が多ければ多いほど読み込みに時間がかかりますので、書体は
見出し用+英数用
の2種類程度に絞る事をお勧めします。
フォントの種類が多いとどこに注目させたいのか散漫なデザインに陥りがちなので、種類を絞って効果的に見せる意図もあります。
自分のWebサーバーにフォントをアップロードする
CDNで速いとうたわれているWEBフォントですが、実は仕様変更によりボトルネックになりがちです。
手間はかかりますが、Webフォントを自分のサーバーにアップロードして使用する「セルフホスティング」方式にするのも速度改善への一歩です。
アップロード方法等はこちらをご参照ください
使わない文字は取り除こう。
Webフォントのサブセット化
「おそらく使わないだろう」という文字を削除し、必要な文字だけに集約したフォントファイルを表示させるテクニックです。
こちらは自サーバーにWebフォントをインストールしていて、見出しなどの限られた場所にしかWebフォントを使用しない場合にのみ使用できます。
詳しい説明はこちらをご参照ください
2-6. レンタルサーバーの見直し
WEBサーバーの運営会社自体は良くても、格安プランに飛びついてみたら速度制限があるなどの落とし穴がある場合もございますので、今一度ご利用のWebサーバーの見直しをしてみても良いかもしれません。
不要なプラグインを消す
便利なＷＰだからこそ、色々なプラグインを入れて放置したりしていませんか？
特に有効にはしてるけど必要なのか不明なプラグインなどは読み込み速度低下の原因になっていることがありますので以下のチェック項目をご確認ください。
- 有効にしていないプラグインは削除する
- 最初から入っているけど何かわからないプラグインは「プラグイン名 使い方」で検索して不要なものは削除
- 調べてわからないものはいったん「無効」にして動作チェックして必要かどうかを調べよう
おススメWP高速化プラグイン
弊社が利用してWP高速化に効果のあったプラグイン4種をご紹介。
環境によっては効果が無いもの・ファイルが破損する場合もございますので、ご利用の際にはご注意ください。
日本語対応の代表的なキャッシュ系プラグイン。インストールから設定までの解説はこちらをご参照ください。
※キャッシュ系プラグインは複数のインストールをすると不具合の原因になりますので避けてください。
特に設定の必要が無く、有効にするだけでサイトで使用しているCSSやJavascriptファイルを一つにまとめ圧縮する事で読み込みを高速化します。
プラグインを多数使っているサイトにおススメです。
JPEGやPNGやGIF画像などをGoogleが開発しているWebP（ウェッピー）形式に変換してくれるプラグイン。
WebPは従来の画像形式よりも20%～30％軽くなると言われているファイル形式です。
こちらのプラグインでは、設定すればWPに投稿されているメディア・他プラグインで使用されている画像なども変換対象にしてくれるナカナカのツワモノ。
プラグインの細かい設定などについてはこちらをご参照ください。
「Fast Velocity Minify」と同じくCSSやJavascriptファイルを一つにまとめ、WEBフォントも含め圧縮する事で高速化を図ります。
日本語対応ですが設定項目が多数ありますので「Fast Velocity Minify」で効果が出なかった場合に使用することをおすすめします。
細かな設定などはこちらをご参考ください。
まとめ。
掘り下げれば、まだまだ対処法のあるWP高速化ですが、そこまで専門知識が無くても導入できる対処法を解説させていただきました。
専門知識無くしては、なかなか最高速！とまではいけませんが、サイトの表示速度を０.１秒も削れば、コンバージョンレートは大いに上がると言われていますので、この記事を読んだ期に、少しでも速いサイトを目指してみてはいかがでしょうか？
