概要説明
クリエイター、プログラマー向けの高速化対応になります。使用しているテーマやカスタマイズされている内容によって具体的な修正対応が変わってくるためWordPressでのサイト制作に慣れている方用の説明と致します。
スキルチェック
- WordPressサイトのバックアップを行うことができる
- バックアップからの復元を行うことができる
- FTPクライアントにてサーバーに接続してファイル更新ができる
上記の対応が行えるかをご確認ください。下記の内容はエラーになった場合でも自分でサイトの復旧が行えるという方向けです
PageSpeed Insightsを使用してパフォーマンス確認
PageSpeed Insights にて高速化対応を行っているサイトの診断を行ってください。
PageSpeed Insights – 適切なサイズの画像
サイト上で表示している画像の大きさと実際の画像のサイズの大きさが違う場合の警告になります。
例 ) サムネイル画像を 高150px : 横150px で表示しているにも関わらず元画像が 高1024px : 横1024px といった場合です
管理画面のメディア設定画面にてサイトで使用している画像のサイズを各種設定しています
サイズ設定を変更した後にアップロードされた画像は設定したサイズで画像が作成されますが、既存の画像については設定サイズが摘要されません。プラグインを使用して一括でリサイズを行います
Regenerate Thumbnails プラグインを使って登録済みサムネイル画像を一括リサイズ
Regenerate Thumbnails プラグインを使って既存サムネイル画像を一括でリサイズします。
画像サイズを変更するプラグインは「EWWW Image Optimizer」「Imagify」など他にもいろいろ有名なものもあるのですが今回はサムネイルに限った内容のため「Regenerate Thumbnails」を採用しています。
元画像には修正を加えない（何度でもリサイズを行えます）、サムネイル画像のみのリサイズを目的としているため操作画面がシンプルということで「Regenerate Thumbnails」をよく使っています。
「ツール」メニュー内に「Regenerate Thumbnails」からリサイズを行います。操作としてはメディア設定ページでサムネイルの画像サイズを変更し「Regenerate Thumbnails」ページでボタンをクリックするだけでサムネイルが一括で再生成されます。
PageSpeed Insights – 第三者コードの影響を抑えてください
自サイト内に置いていないjsなどのスクリプトの呼び出しを見直す必要があります。
アクセス解析や広告用のコードは自サイト内にはおけないのですが、機能面で使用しているライブラリについては自サイト内に設置したほうが高速化が行なえます。
サイトに寄って使用しているライブラリが違うため、ソース・Chromeのデベロッパーツールにて外部サイトのライブラリを使用しているかを確認してみましょう。
自サイト内にライブラリ設置が難しいものは外部javascriptファイルの遅延対応を行うことでページの表示を高速化することが可能です。
<script type="text/javascript" src="sample.js" async></script>
HTMLの解析とは関係なしに、非同期で読み込ますことを指定するための記述。この処理が終わらなくてもページの表示処理を進めることができるようになります
PageSpeed Insights – 最初のサーバー応答時間を速くしてください
ページのリクエストからWordPressでのHTML生成までに時間がかかっていますという内容です。WordPressでの処理を見直してもこの警告が消えない場合はサーバー自体のスペック不足の可能性があります。
広告、SNSなどの掲載を必要最低限にしてみる
ページ表示の遅延の原因が広告表示、RSSフィード表示、X（tiwtter）、Instagramの埋め込みが原因ということが結構あります。一旦外部の情報を表示させる処理を止めてみてどのくらいページ表示速度に影響を与えているを確認してみましょう。
トップページでは必要ない、この機能はなくても良いというものがその中であれば無効化させることでページ速度を高速化することができます
WordPress標準の機能で使用していないものを停止させる
部分的なデータのキャッシュ機能を組み込む
人気ランキングやカスタマイズした処理内で実行に時間がかかる部分を一時的なDBキャッシュを使用して高速化を行います。
特に人気ランキングや外部のコンテンツを取得しに行くような処理(file_get_contents)で効果的です。
Chromeデベロッパーツールを使ってページ表示時間を確認
ページ表示の速度という表現についてですがWordPressの実行時間、htmlを生成してからDOMの解析、画像・css・scriptなどを読み込みするまでの処理の時間とフェーズがいくつかあります。 ChromeデベロッパーツールのNetworkタブを表示させるとこちらの内容がまとめて確認することができます。
F12 または Ctrl + Shift + i
command + option + i
サンプル画像の場合はページを表示させるために37のファイルをリクエストしており、ページ表示で使用しているリソースの容量が1M、キャッシュを使用せずに今回読み込みを行った容量が385k、WordPressがHTMLを生成するのに455ms時間がかかり、最終的に925msでページが表示できましたという内容になります。
| DOMContentLoadedFinish |
WordPress側の処理の実行時間 |
|---|---|
| Finish |
ページ要素が全て表示されるまでの実行時間 |
自動更新処理+定期実行処理を停止させる
ページにアクセスのあった際に定期実行処理、自動更新の処理が行われているため実行タイミングを変更することでページ表示を高速化させます。
最後に
- CSSで使っていない記述があれば削除
- Javascriptで使っていない記述があれば削除
- プログラム側で不要な処理は削除
- Webフォントを使用している場合はフォントの変更を検討
- ページ内のコンテンツ内容の見直し、表示画像サイズの変更の検討
- オリジナルで実装しているプログラム、テーブル定義の設計が正しいかを見直す
などなどまだまだ細かい部分はいくつもありますが。
わかり易くお伝えきる内容として今回までの内容にて高速化対応についての説明は終わりに致します。
