WordPressがもっさりとしすぎていたため、いろいろと検証してみました。
画像の最適化などいうほど変わりませんね。。WebPもios13は対応していません。画質を取るか速度を取るかのトレードオフになってしまいます。
だから、まず改善すべきはJavaScriptです。JavaScriptが原因になっていることがほとんどです。
個人的にテーマはこのサイトも含めてCocoonを使っているサイトが多いですが、sangoやswell、jinも同じでしょう。
目次
WordPressが重い原因と改善【CocoonのJavaScript編】
Cocoonは高速化設定である程度最適化されているため、記事などに埋め込んだものが原因になりやすいです。
今回、最も効果があったのはTwitter系です。
PageSpeed Insightsが劇的に改善するTwitterのタイムライン
サイドバーにタイムラインを表示している場合、そのウィジェットを削除すると、
PCもモバイルもPageSpeed Insightsが劇的に改善します。
<a class="twitter-timeline" data-height="500" data-theme="light"
data-link-color="#2B7BB9"
href="https://twitter.com/account?ref_src=xxx">
Tweets by name</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>- モバイル 37→77
- PC 53→99
このサイトはこれだけでOKと思ってしまいました。。
PageSpeed Insightsが改善するツイートの埋め込み
新規ページを用意して、ツイートの埋め込みがある箇所をがっつりと削ってそちらにコピペで一時退避させます。あとから戻せばOKです。PageSpeed Insightsが改善されたらツイートの埋め込みが原因です。
このスクリプトは全削除した方がよいです。
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>少し埋め込んだ時期によってコードが違うようです。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>詳しい人は正規表現を使ってもいいですし、2回置換してもよいです。
今回、Search Regexで置換しました。使い方はこちらです。
ただし見た目が引用になってしまいます。。
1つだけ残すという方法も書いてありましたがあまりよくありません。個人的にはツイートの埋め込みが多い記事だけは次のコードを使わせてもらうことにしました。
【Twitter埋め込みした際の表示速度低下について】
— まっと | 仮想通貨ブロガー (@mattblog_crypto) October 16, 2022
以下の記事を参考に、カスタムHTMLで埋め込んだツイートの下にJSのタグを追記すれば改善します。
僕はこれで表示速度が48→83に改善しました。
最後の「/* Your code… */」はコメントアウトされないので、削除すればOK。https://t.co/9afGBrAOSJ
↑このツイートはあえて引用のままにしています。リンク先のコードを挟むと見た目がついて元通りになります。
そのまんま拝借しました。ありがとうございます。
たぶん元ネタはこちらで公式のコードを改変した形になりますかね。
Cocoonの場合、投稿のカスタムJavaScriptに埋め込めばいいだけなので楽です。
多少重たくなるので、画像ツイートじゃなければこのコードもいらないかな。
あとはできるだけツイート数を減らす、記事を分割すると軽くなります。
どこまで許容できるかは各々違うかもなので自分の落とし込みどころを決めるとよい気がします。
WordPressが重い原因と改善【Cocoonの画像系】
画像は減色、圧縮することがおすすめです。意外と背景などが原因になりますね。
Google PageSpeed Insightsモバイルでは100kbpsを超えていると、結構もんだいになりやすいです。個人的にもともと圧縮していたため、それほど致命的ではありませんでした。
ただ1200ピクセルはアイキャッチだけかなという気もしました。Google砲狙いは1200なんですが、同じGoogleのPageSpeed Insightsにダメ出しをくらうジレンマを抱える感じです。
今後の記事は700に戻そうかなっと。
次世代フォーマットはGoogleが作ったWebPですが、iOS13は対応しておらず14以降です。個人的にテスト的に導入しましたが、そこまで効果を感じられなかったので、しらばく保留にしました。
WordPressが重い原因と改善【レンタルサーバーを変える】
サーバーの応答までの時間もあります。
ここはレンタルサーバーを変える方法があります。
エックスサーバーの場合、新サーバー簡単移転機能があります。
「新サーバー簡単移行」機能とは、旧サーバー環境（サーバー番号がsv1～sv13000.xserver.jp)をご利用のお客様が、「データコピー」「確認」「移行」の3ステップのみでより新しいサーバー環境へ簡単に移行することができる機能です。
https://www.xserver.ne.jp/manual/man_order_servertransfer_intro.php
この機会にxserverに乗り換えるのも手ですね。
WordPressが重い原因と改善【プラグイン】
プラグインが原因になっている場合もあります。逆に高速化の手助けをしてくれるものもあります。
詳しくは以前書いたこちらの記事をみてください。
WordPressが速度が改善されたか調べる方法
GTmetrix
どのぐらい高速化をはかれたのか、速度のチェックするツールは多数でています。GTmetrixあたりが使いやすく有名です。
こちらではそれほどひどい値はでないかも。
Google PageSpeed Insight
ほかには、Google PageSpeed Insightsなどがあります。Google PageSpeed Insightsはモバイル(スマホ)とパソコンがわけて測定できるのが特徴です。Googleならではの安心感もあるかもしれません。
モバイルはかなり厳しい値がでやすいです。
ゴリゴリ削っていく感じになりやすいです。。
Test my site
同じgoogleのサービスに、モバイルサイトの速度をテストをするTest my siteがあります。PageSpeedのモバイル値が遅くても、こちらで速ければそれほど悲観する必要はないかもしれません。
PageSpeedとTest my siteは、同じgoogleのサービスでも別サービスなので結構違います。
実機でテストする際に注意すること
実機環境で体験するのが1番よいです。
高速光回線でつなぐとなんとなく大丈夫だと思ってしまうため、つながない方がよいです。
PCでやるとあまり気付かないことが多いためスマホのWifi環境や格安simでやるとよいです。光回線があっても光回線を使っている人ばかりではないので。。5GのWiMAXも早いのでNGです。
格安simなどできる限り劣悪な貧乏環境を用意しましょう。
大事なのは貧乏人になりきることです。おすすめの回線はこちらです。
Google PageSpeed Insightの各項目の対処方法
オフスクリーンの画像遅延読み込み
この項目はCocoonの高速化設定をすれば解決です。
ご参考になれば幸いです。
コメント