WordPressサイトのパフォーマンス改善計画

Shimane WordPress Meetup #6のLTでお話しした内容です。先日大阪で開催されたWebパフォーマンスについてのセミナー内容を参考に、自分のサイトのパフォーマンス改善を行なったので、その結果を紹介しています。

Transcript

1. WordPress サイトの パフォーマンス改善計画 まりえ @marieeeep Shimane WordPress Meetup #6
2. まりえ｜mariweb @marieeeep Webサイト制作 ECサイト制作（主にモール系の構築） 印刷物 動画制作ちょこっと 大阪府枚方市のフリーランスWebデザイナー 自己紹介
3. Webパフォーマンス、気にしてる？
4. Webパフォーマンス改善 やってみました！
5. 今回パフォーマンス改善したサイト
6. パフォーマンス改善したサイト mariwebの事業サイト
7. Webパフォーマンス改善セミナー きっかけ スタッフとして開催した 具体的な方法を学ぶことができたので、 さっそく実践したくなった
8. きっかけ 特に今回の内容は、Kiteさんのお話 WordPress でも大丈夫！ 実例で見るウェブパフォーマンス改善 を参考に実践しました！
9. 改善前の計測結果
10. 改善前の計測結果 Lighthouseの結果
11. 1. サーバー見直し
12. 1. サーバー見直し エックスサーバーに移行 契約が古くてモジュール版が使えず CGI版のPHPしか使えない FastCGIが使えるようになった ＊モジュール版と同程度の速さ
13. 1. サーバー見直し エックスサーバーは高速＆安定 PHP7.2が使える オールSSD（ディスクの読み込み速度が48倍以上） メモリ256GB（共用サーバーにおける最高のスペック） 最新のハイスペックCPU ＊さくらインターネットはPHP7.3 nginx（大量の同時アクセス処理に最適化）
14. 2. 脱プラグイン
15. 2. 脱ブラグイン 不要なプラグインの整理、自分で書けるものは自分で書く 使っていないのに停止している状態で放置しているプラグインがあったので、アンインストール。自作で対応 できそうなものは脱プラグインを行なった。 特にCSSやJSが読み込まれるプラグイン、データベースのレコードをたくさん使うようなプラグインを削 除。 例）関連記事、人気記事など
16. 2. 脱ブラグイン 脱プラグインの成果 プラグイン数 データベースレコード数 15 個 削減 98.4 % 削減
17. 3. 画像関係
18. Autoptimize というプラグインを使用。 プラグインでは背景画像の対応はできないので、個別に対応が必要。（非対応のブラウザに注意） いろいろ方法があるが、今回は Lozad.js というものを使用した。 Google も推奨している、Intersection Observer APIというのを使ったライブラリで、とても軽量。 3. 画像関係 オフスクリーン画像の遅延読み込み WebPに対応
19. 4. CSSの読み込み制御
20. 4. CSSの読み込み制御 function mytheme_dequeue_scripts() { if ( is_home() || is_front_page() || is_archive() ) { wp_dequeue_style( 'wp­block­library' ); wp_dequeue_style( 'wp­block­library­theme' ); } } if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_scripts', 99 ); } Gutenbergを使っていないフロントページやアーカイブページでは、関連するCSSを読み込まないように 制御。JavaScriptも同様に制御ができる。
21. 5. 非同期読み込み
22. async, deferがついていないスクリプトに defer を付与する。 5. 非同期読み込み スクリプトの非同期読み込み function add_defer_to_scripts( $tag, $handle ) { if ( ! preg_match( '/\b(async|defer)\b/', $tag) ) { return str_replace( 'src', 'defer src', $tag ); } return $tag; } if ( ! is_admin() ) { add_filter( 'script_loader_tag', 'add_defer_to_scripts', 10, 2 ); }
23. 6. キャッシュ
24. 通常WordPressは、PHPとMySQLを使ってHTMLを作り上げるがそこに時間がかかる。 WP Super Cache というプラグインを使用して対応。 6. キャッシュ ページキャッシュ サーバーキャッシュ エックスサーバーはサーバーキャッシュの機能が使えるため、ONに変更。2分間、サーバーでキャッシュを 保持する。
25. 最終結果
26. 最終結果 Lighthouseの結果
27. Webパフォーマンス改善で ユーザーに快適な体験を
28. Thank you !