ここ数日、特定の記事へのアクセスが急激に伸びてサイト全体が重たいというのもあったのですが、何よりも投稿時に503エラーやらInternal Server Errorが出るなどのトラブルも続いていました。また、1年間いろいろなプラグインの追加や削除、テーマの改造などを繰り返した結果として、Google PageSpeed Insightの点数がモバイルで50点まで下がってるのが判明。
サーバープラン変更で転送量増やしたり、リソース増やすという力技も良いのですが、そもそもスピード低下は検索エンジンのSEO的に最悪の事です。という事で色々チューンしてみました。
目次
改善後の値
PageSpeed Insightの値
色々改善してみた結果としては、以下の図の通り。
モバイルで93点、デスクトップで99点まで改善する事ができるようになりました。レスポンスが非常に軽快になり、503エラーが低減しました。また、ページビューの観測比較をしてみた所、同じ曜日の先週、先々週との比較で49%増まで改善しました。
サイトスピードを放置してると色々損しますよという良い事例でした（機会損失したり、直帰率が増えたり様々）。
図：デスクトップの値はほぼ改善
図：モバイル側も大幅に改善しました
サーバリソースの低減
色々と改善してみた結果、ページビューは増加してるにも関わらず、同日先週比で相当数低減することが出来ました。
サーバ転送量で先週比で1.48GB減（27%改善）、CPU使用率では先週比で84分減（34%改善）しました。サーバ契約転送量は上限が決まっているので、上位の契約プランに変更せずにだいぶ余裕を確保することが可能になりました。
図：CPU使用率が減ることでレスポンスが改善
図：サーバ転送量が減ることでコスト節約
実施した改善策
プラグインの断捨離
全体のうち、6割改善効果があったのはプラグインの断捨離。すでにもうWordPress公式には掲載されていない古いプラグインを、後継のプラグインに変更したり、より軽量な別のプラグインに切り替えたり。改善の為にあえて追加したプラグインもありますので、減らせば良いというわけじゃないという点がなかなか難しいポイントでした。
現在はだいたい28個のプラグインを使っています。プラグインの選定は慎重に。
プラグインの削除と入れ替え
削除したプラグインは以下の通り
- WordPress Related Post — 廃止されてたので、Yet Another Related Posts Pluginに入れ替え
- ARI Fancy Lightbox — CSS関係で引っかかってたので、Responsive Lightboxに入れ替え
- JetPack by WordPress — 廃止。これを止めるだけで、72点まで改善。
- Crayon Syntax Highlighter — 古すぎたので、後継のUrvanov Syntax Highlighterに入れ替え
- Google Site Kit — 最悪でした。入れただけで25点まで下がりました・・・速攻で削除
特にJetPackはNGでした。期待してた機能は他のプラグイン追加で対応させて、前述の数値を叩き出せてるので、メリットゼロ確定。古いプラグインは別のものに差し替えただけで、点数がわずかですが改善しています。
統計解析はもともとGoogle Analyticsを入れてるので、そちらで十分すぎるくらい把握できています。
代替プラグインの追加
Jetpackで担当させていた機能は他で代替させています。今回以下のプラグインを新たに追加して対応させました。前述のRelated Postのようにすでに代替させていたものもあります。
- Google XML Sitemaps — Google Search Console登録用のsitemap.xml生成プラグイン
- SEO SIMPLE PACK — SEO対策部分を対応。Analyticsコードの追加ウェブマスターツール認証なども担当
WordPress統計情報の代替
Google Analyticsでの代替
JetPackを使う目的の1つだったWordPress統計情報。SlimStat Analyticsのような強力な統計解析を入れても良いのですが、今回の目的のウェブサイト軽量化には反するものになってしまいます。せっかく上げたPageSpeed Insightの値を大幅に落としかねません。
しかし、1つを除いて殆どはGoogle Analyticsで代替出来てしまいます。トラッキングコードはSIMPLE SEO PACKで簡単に追加ができるので、導入自体で躓くことは少ないと思います。AndroidアプリのAnalyticsで閲覧もできるので、むしろ統計解析が楽になりました。主に代替させたものは
- 訪問先ページのカウント – ページビュー数でのランディングページで代替
- 参照元ウェブサイト – ページビュー数での参照元で代替
- 訪問時検索キーワード – ページビュー数での上位のキーワード
Google Tag Managerでの代替
ただ１つ問題が。Google Analyticsでは、離脱ページはわかっても、離脱先つまりクリック先が取得は出来ません。ウェブサイトにたくさん貼られてる外部のリンクの参照数は、Google Tag Managerでトリガーを作成し、WordPressにGoogle Tag Manager for WordPressを導入して、登録し、Google Analyticsへと連結が必要です。
結構複雑な作成手順が必要なので、こちらのサイトを参考に作り、コンテナを作り、コンテナIDをプラグインで登録しました。PageSpeed Insightへの影響は殆ど有りませんでした。
結果として、WordPress統計情報の一つである離脱先のリンクの情報を、Google AnalyticsにTag Managerを使って連結する事が出来ました。これで全ての統計情報を代替出来ました。
キャッシュの改善
これまで、ウェブページの最適化ではWP-Optimizeのみを使っていました。データベースのクリーニングの実施、ページキャッシュ、画像の圧縮が主な役割ですが、後半2つを別のプラグインに担当させて最適化を図りました。これで大体、1割くらい改善しています。
- AJAX Thumbnail Rebuild — 投稿した画像のサムネイルの最適化。普段は停止。
- Disable and Remove Google Fonts — Google Fontの参照はPageSpeedにとってマイナスです。
- EWWW Image Optimizer — 投稿した画像の一括圧縮を行います。無駄にバカでかい画像は縮小するに限ります。
- WP Fastest Cache — 有名なキャッシュ系のツール。ページキャッシュとCSS, JSの圧縮ではOptimizeより効果が高かったです。
データベースクリーニングだと、Optimize Database after Deleting Revisionsを使うのも効果があります。
Plugin Load Filterの導入
地味に効果の高かったのが、このPlugin Load Filterの導入。実は、WordPressのプラグインは導入し有効化すると、編集画面でしか使わないものであっても、プラグインとしては通常のページでも負荷が発生するようで、編集画面でしか使わないものは、ページの側ではオフにするように設定するのが、このプラグイン。
ただし、Google XML Sitemapのようにページと編集画面両方で使うものをページの側でオフにしてしまうと、Googlebotがsitemap.xmlを読みに行けなくなってしまうので、慎重にオンオフをセットしましょう。自分が編集画面のみオンにしてるものとして
- TinyMCE Advanced
- Classic Editor
- Disable Gutenberg
などなど。編集系プラグインばかりです。
functions.phpの改造
各Wordpressのテーマに同梱されているfunction.phpに直接記述をしてみて、若干改善効果があったものがありました。以下ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
//プラグインIDを指定し解除する function dequeue_plugins_style() { wp_dequeue_style('wp-block-library'); } add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999); //google fontsを停止 add_action( 'wp_enqueue_scripts', 'remove_wp_open_sans' ); function remove_wp_open_sans() { wp_deregister_style( 'Droid-Sans' ); wp_register_style( 'Droid-Sans', false ); } //ブロックエディタを無効化 add_filter('use_block_editor_for_post', '__return_false', 10); //XMLRPCを無効化 add_filter('xmlrpc_enabled', '__return_false'); //Dashiconを無効化 if(! is_user_logged_in()){ add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style('dashicons'); } } //ハートビートAPIを無効化する function stop_heartbeat() { wp_deregister_script('heartbeat'); } add_action( 'init', 'stop_heartbeat', 1 ); // ヘッダーで読み込まれるスクリプトをフッターに移動 function my_init_action() { remove_action('wp_head','wp_print_head_scripts',9); add_action('wp_footer','wp_print_head_scripts',5); remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('admin_print_scripts', 'print_emoji_detection_script'); remove_action('wp_print_styles', 'print_emoji_styles' ); remove_action( 'wp_head', 'wp_generator' ); remove_action( 'wp_head', 'wlwmanifest_link' ); remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); } add_action('init','my_init_action'); //jsにasync属性を付与 if (!(is_admin() )) { function add_async_to_enqueue_script( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; if ( strpos( $url, 'jquery.min.js' ) ) return $url; if ( strpos( $url, 'jquery-colorbox-wrapper-min.js' ) ) return $url; if ( strpos( $url, 'jquery.flexslider.min.js' ) ) return $url; return "$url' async charset='UTF-8"; } add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 ); } //サムネイルを生成 function add_thumbnail_size() { add_theme_support( 'post-thumbnails' ); add_image_size( 'thumb-a', 672, 672, true ); add_image_size( 'thumb-b', 492, 492, true ); add_image_size( 'thumb-c', 216, 216, true ); add_image_size( 'thumb-d', 672, 286, true ); add_image_size( 'thumb-e', 38, 38, true ); } add_action( 'after_setup_theme', 'add_thumbnail_size' ); |
劇的に改善というわけではないのですが、いくつかPageSpeed Insightで引っかかってた項目がこれでクリア出来ました。また、自分が今使ってるテーマは、一部でGoogle Fontsを導入していたので、function.phpにてそのラインをコメントアウトしました。
Adsenseコードの遅延読み込み
ブログがある程度軌道に乗って、サーバ代やドメイン代をAdsenseから広告収入を得て・・・と考えると、導入するのがGoogle Adsense等ですが、この時、AdsenseのJSコードをそのまま導入してしまうと、JSの読み込みがボトルネックとなって、かなりPage Speed Insightのスコアを落としてしまいます。
85点くらいのスコアが場合によってはこのコードだけで45点以下にまで落ちたりします。これがページの数だけ全て下がるのでかなり堪えます（特にモバイル側のスコアが下がります）。そこで、このAdsenseのコードを遅延読み込みに変えて上げるとスコアが一気に改善します。
- コードのうち、「<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js“></script>」については削除もしくはコメントアウトする
- WordPressのテーマの場合はfooter.phpの一番下、Bodyよりも上のエリアに以下のコードを追記して保存する。このコードはこちらからお借りしました。
- キャッシュ系のプラグインを入れてるのであれば、一度全てパージをして再キャッシュする
- これでAdsenseコードが遅延読み込みされるようになり、画面のロード時間が飛躍的に上がります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> //<![CDATA[ //lazy load ads -> https://blog.zdienos.com/2019/03/mempercepat-loading-blog-yang-terpasang-iklan-google-adsense.html var lazyloadads = false; window.addEventListener("scroll", function() { if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) { (function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyloadads = true; } }, true) //]]> </script> |
その他
これは契約サーバによる所が大きいですが、このサーバの場合、国外IPアドレスフィルタが、WAFとは別に用意されています。WAFは攻撃に対しては効果は高いのですが、コメントスパムのような厄介な連中を防げるわけではないので、国外IPアドレスフィルタは非常に効果的です。
特に中国・ロシアあたりからの無駄なアクセスはリソース消費の原因になり、503エラーを頻発させた上に、スパムがじゃんじゃん届きます。Akismetプラグインである程度防げるといっても、実際に問い合わせフォームからたくさん、要らないお手紙が届きました。国外からの概ねのアクセスを遮断することも少ない資源を活用する上では重要です。
※サーバレスポンスの悪化は当然、PageSpeed Insightの点数を下げる大きな要因になります。
関連リンク
- GTmetrix
- The response is not a valid JSON response. (Google Site Kit) #316
- Site Kit by Googleで認証エラーが出たときの対応方法（エックスサーバー編）
- 便利だけどWordPressを重くするプラグインまとめ
- Jetpackでいらない要素を読み込まない方法（スピード改善）
- Google Fontsを使う限りPage Speedは上がらない
- pagespeedに使われていないはずのgooglefontsがレンダリングを妨げるリソースの除外としてでてくる
- WordPress が自動挿入する Google Fonts API の head tag を remove してパフォーマンスを向上させる
- WordPressのレンダリングを妨げるリソースを除外する方法（CSSとJavaScript）
- Largest Contentful Paint
