WordPressで表示速度の高速化をするためにやっている事、導入したプラグインなどをまとめたページです。
キャッシュ系のプラグインなど導入する記事もありますが、サーバーの環境、テーマ、他のプラグインとの相性などもあるので、自己責任でお願いします。
サイトの表示速度を調べるには？
サイトの表示速度をチェックできるサービスは色々ありますが２つだけ紹介しておきます。
- GTmetrix
- PageSpeed Insights
GTmetrix
GTmetrixはサイトの表示にかかる時間を計測してくれるサイトです。
URLを入力して「Analyze」をクリックすると表示速度が計測できます。
■PageSpeed Score
Googleのサイト速度計測サービスの「Page Speed」 のサイト評価。
■YSlow Grade
Yahooのサイト速度計測サービスの「YSlow」 のサイト評価。
- Fully Loaded Time：ページをロードするのにかかった時間の目安
- Total Page Size：サイトを表示するのに必要なデータのサイズ
- Requests：ブラウザとサーバーのやり取りの回数
という感じですね。
PageSpeed Insights
Googleのサイト計測サービスが「PageSpeed Insights」。
サイトのスピード計測だけでなく、改善ポイントなども指摘してくれます。
こちらも調べたいサイトのURLを入力して「分析」をクリックするだけ。
モバイルとPCのタブで成績を見る事ができます。
詳細をクリックしてみると、このサイトではレンダリングブロックつまり、サイトの読み込みを邪魔している部分を指摘してくれますのでその原因を解消する事で得点を上げる（表示速度の改善）をする事ができます。
という事でサイトの表示スピードの計測には上記２つのサイトが役立ちます。
PHPのバージョンを最新にして表示速度アップ！
サーバーのPHPのバージョンを確認して最新にしておきます。以前はPHP5が標準でしたが、現在はPHP7。
例えばPHP7はPHP5とくらべて実行処理速度が大幅に改善されました。
という事で高速化するならPHPのバージョンは確認しておくと良いです。
PHPのバージョンを新しいものに切り替えると古いプラグインなどはエラーが出るものがありますので、代替えプラグインを探してみて下さい。
エックスサーバーはサーバーパネルからPHP設定
推奨と書かれているものを選択しておけばOKです。
ロリポップはユーザー専用ページからPHP設定
こちらも最新のものを選択しておきます。
ブラウザのキャシュを利用する
ブラウザのキャッシュを設定しておく事で表示速度は早くなります。
簡単に言うと１つのページを表示するにはたくさんのHTML、CSS、画像などを読み込む必要がありますが、一度表示したものをそのまま保存しておいて次の訪問者にも保存したものを見せたらいいのでは？という感じです。
この設定だけでかなりスピードは違ってきます。
キャッシュ系プラグインの設定でブラウザのキャッシュとかファイルの圧縮など機能が重複する部分がありますので注意。
⇒PageSpeed Insightsで指摘された「ブラウザのキャッシュを活用する」への対策と解決方法
WordPressの表示速度を上げるために使っているプラグイン
現在高速化のために入れているWordPressプラグインです。
- EWWW Image Optimizer
- Unveil Lazy Load
- WP Fastest Cache
- Autoptimize
EWWW Image Optimizer
サイト表示の高速化をする場合に欠かせないのが画像の圧縮です。特にWordPressの場合はサムネイル画像をいろいろな場所で利用したりします。
関連記事や人気記事、最近の記事等にもサムネイル使ったりしますよね。それからもちろん記事本文中に使う画像。これらの画像はサイトの表示速度を遅くする原因の１つにもなります。
しかし画像がないとやっぱりさびしいサイトになりますので画像は圧縮して利用しましょう。過去にアップロードした画像、それからこれからアップロードする画像を自動で圧縮してくれるプラグインです。
⇒画像を一括で圧縮できるプラグイン「EWWW Image Optimizer」
Unveil Lazy Load
画像の読み込みを遅らせてくれるプラグインです。
一度に全ての画像を読み込むのではなく、スクロールで見える範囲にきたタイミングで読み込みますのでその分表示速度が早くなります。
このプラグインは特に設定画面もありません。インストールして有効化したらOK。
「WP Fastest Cache」と「Autoptimize」
WP Fastest Cacheはキャシュ系のプラグインですが、HTML、CSS、JSの圧縮、結合させる機能もあります。ただしモバイルページは守備範囲ではないので、圧縮や結合は「Autoptimize」にお任せする作戦です。
⇒WordPressキャッシュプラグイン【WP Fastest Cache】の設定方法。「Autoptimize」との併用で高速化
レンダリングをブロックしているJavaScriptをフッターに移動させる
元々WordPressに装備されているJavaScriptがレンダリング（読み込み）を邪魔しているのでヘッダーからフッターへ移動させました。
JavaScriptをフッターに移動させるプラグインもあるのですが、不具合があったり更新が止まってしまったら怖いのでfunctions.phpへの記述で対応しました。
⇒レンダリングをブロックしている JavaScriptをフッターに移動させる
ソーシャルボタンを自作して高速化
TwitterやFacebook、はてなブックマークなどのソーシャルボタンが重くて読み込みに時間がかかるのでアイコン画像をWEBフォント（アイコンフォント）にしてボタンも自作してみました。
icomoonという外部サイトからアイコンフォントをダウンロードしてWordPressにアップしたのですが、最近は「Font Awesome」を標準装備しているテーマも多いので、そちらを使った方が簡単かもしれません。
以上WordPressの表示速度高速化のためにやっている施策でした！
コメント