Elementor で構築したサイトを Lighthouseで 100 点満点
サイトを運営している方の中には、SEO を最適化して検索結果の上位になりたい方が多くいると思います.
SEO 最適化の一つに、ページの表示を速くすることが言われています.
WordPressのエレメンターサイトのパフォーマンスを上げるには、どうしたら良いのだろうか？
このサイトのトップページをLighthouseで 100 点満点 にした方法とは、どのような手法を用いたのか記してみます.
私自身、ケチな性格なので、今回の 100 点満点を取ったページには有料のプラグイン等は今の所、使ってはいません.
下のキャプチャー画像は、webブラウザ Chrome ( クローム ) のデベロッパーツールの Lighthouse で ワードプレスの高速化のプラグインを何種類も入れ替えて設定し、計測した結果です.
オール100点になると、バック ( 背景 ) が黒になるのでびっくりしました.
ただし、上のキャプチャー画像はディバイスをパソコンにした時の結果で、
ディバイスをモバイルにすると、パフォーマンスは 89 点まで下がります.
モバイルの場合は、転送速度を3Gで算出しているので、データー量が最大のネックになります.
Elementor で作るサイトはコードが多くなってしまうのでモバイル環境では、どうしても不利になります.
パフォーマンスで注目すべき最近のトレンドは、LCP ( Largest Contentful Paint ) の時間を 2.5 秒以下にすることだそうです.
Googleの調査によれば、サイトのページの離脱率を防ぐには、できれば、LCP を最低限 4 秒以下にすべきであるとされている.
Googleの推奨している AMP にする方法もありますが、せっかくのエレメンターのデザインが無駄になってしまいます.
PageSpeed Insights では95 点
ローカルに置いたサーバーからwebブラウザ Chrome ( クローム ) のデベロッパーツールの Lighthouse で 100 点満点でも、実際には、PageSpeed Insights では 95 点でした.
直近に試した方法では、最高は、98 点あたりを記録しましたが、100 点にするのは無理だったことを、先に断っておきます.
PageSpeed Insights の携帯電話のパフォーマンスは、61 点なので、合格点には程遠いところです.
最初に PageSpeed Insights で計測した時には、10 点 20 点だったことを考えると、サーバーの圧縮転送や高速化プラグイン等の導入で良くなってきた感じはあります.
また、PageSpeed Insights の計測は、ネットワークの混み具合でもパフォーマンスの点数は大きく変化するようです.
WordPress のパフォーマンスアップの原理
サーバーを直接パフォーマンスアップできるのが、良い方法かも知れませんが、今回は、WordPress の plugin プラグインを使ってみました.
パフォーマンス とは、サイトを見る人のブラウザーの表示スピードを高速にすることです.
どうすればいいのか
サイトを運営するものができることは、
- サーバーのレスポンスを上げること
- 最適化
- 通信量を減らすこと
この３点だと考えます.
１. のサーバーのレスポンスを上げるには、
- 高速なサーバーの導入
- キャッシュ戦略
２. 最適化にはCSS JS の読み込み等
- 手動でコードの最適化
- プラグインでコードの最適化
３.の通信量を減らすには
- 圧縮する
- 無駄な通信を削除する
ということになると思います.
プラグインで可能なのは、
- キャッシュ戦略
- コードの最適化
この２点になると考えます.
圧縮と無駄な通信を削除するは、意味としては、被る部分があるので、通信量を減らすにした方が良いのかも知れません.
あと、有料の CDN を使うという手もあると思いますが、キャッシュ系は、サイトが更新されてもキャッシュが更新されないということもあるので注意が必要です.
Lighthouse のパフォーマンスを上げるプラグイン
このサイトのトップページの Lighthouse のパフォーマンスを上げた方法ですが、
サーバーの設定で圧縮転送させたりしましたが、最後はズバリ、WordPress のプラグインを使用しました.
サイトによって、サーバーのパフォーマンスやネットワークの帯域等の違いがあると思いますが、WordPressでできるパフォーマンスアップの方法は、有効でした.
キャッシュ系のプラグイン WP Super Cache
WordPress のキャッシュ系のプラグインでパフォーマンス効果が高いと感じたのは、
WP Super Cache
でした.
さまざまな、オプションはありますが、「インストール」して「有効」にして、「設定」がから「キャッシング利用」に「チェック」して「ステータスを更新」するだけです.
WP Super Cache で他のたくさんのオプションがありますが、動作原理を理解して使用した方が良いと思います.
WP Supre Cache のデフォルト設定で、Lighthouse のパフォーマンスの点数を確かめてみてください.
キャッシュ系のプラグインは、ページを一度、表示させてから測定した方が良いかも知れません.
WordPress の動作がわかっている方には、キャッシュが有効だと理解できるともいますが、キャッシュとはなんだ？という方もおられると思います.
簡単にいえば、WordPress は PHP という言語で書かれていて、アクセスがあるたびに、SQL からデーターを取り出して、HTML に変換しています.
一度、HTML に変換したデーターを保存しておいて、同じアクセスがあったときに、変換した HTML を送り返せば、PHP と SQL のお世話にならなくても良いことになります.
——————
簡単に説明すると、ある会社に訪問して、問い合わせをするときに、受付のお嬢さんに会社のことを質問したら、その上司ができたが、社長に問い合わせなければ答えられないと言われ、社長の回答から上司に伝えられ、受付嬢に返事が返ってくる.
受付のお嬢さんが = Nginx
上司が = php
社長が = SQL
情報がキャッシュされるということは、受付のお嬢さんが同じ問い合わせを覚えておいて、次に同じ質問されたときに、すぐに答えが返ってくるようにすること.
———————
サーバーの CPU の負荷は減るし、良いことばかりですが、動的コンテンツの場合は、サイトの内容が変更された場合には、キャッシュされたHTML も変更される必要があるので注意が必要です.
コードの読み込みを最適化 Jetpack Boost
WordPress のプラグイン Jetpack Boost の一部の機能を使ってパフォマンスアップをしてみます.
「インストール」 「有効」にしましょう.
ダッシュボードに戻って、Jetpack Boost の設定画面に入ると、簡素な画面ですが、単純な構成に好感を持ちます.
いろいろ試してみましたが、
ON にする設定は、「CSS の読み込みを最適化」だけの方が、当サイトでは良かったです.
総合スコアも表示されるので、サイトに最適な設定が可能だと思います.
難点を言えば、スコアの再読み込みが遅い！
CSS の読み込みを最適化する 「再生性」が いつまでやってるのというくらい激遅です.
けど、効果は抜群に感じました.
このプラグイン Jetpack Boost の 「Defer Non-Essential JavaScript」 をON にすると、当サイトでは、反対に遅くなってしまいました.
「画像の遅延読み込み」も当サイトでは、効果は感じられませんでした.
メディアライブラリ画像の圧縮 WP-Optimize
画像の遅延読み込みよりも、適正な画像サイズに変更してしまう方が結果は良いと感じますが、そのようなプラグインも存在しますので試してみる価値はあると思います.
WP-Optimize というプラグインの「画像」の部分だけを使って画像の圧縮を行なっています.
WP-Optimize というプラグインをインストール & 有効 にして設定画面にして、「画像」の「画像を圧縮」にします.
「画像のダッシュボードメディアページに圧縮メタボックスを表示します。 」にチェックされていることを確認して
ダッシュボードのメディアーライブラリに移動して、どれでも良いですが、画像をクリックして右下に下の項目が表示されていれば OK です.
目的の画像を最適に圧縮しておくと、Lighthouseで測定するパフォマンスの点数は高い傾向があります.
まとめて圧縮する方法もあるのですが、
当サイトでは、途中で動作が停止してweb画面が見れなくなったので、理由ははっきりとしないのですが、サーバーを再起動させることになったので、おすすめはできないかも知れません.
「注：現在、この機能はreSmush.itのサードパーティサービスを使用しています。 この無料の画像圧縮サービスのパフォーマンスは、大規模なワークロードでは制限される場合があります。 プレミアムサービスに取り組んでいます。」と書かれていました.
圧縮は、外部のサーバーで行なっているようなので、動作は遅いですが、自分のサイトの動作が圧縮によって低下しないところは、良いところかも知れません.
圧縮転送プラグイン
サイトの高速化には、圧縮転送という方法がありますが、
当サイトでは、WebサーバーのNginx で gzip on の設定がされているので、プラグインでの圧縮はしておりません.
もしも、圧縮転送されていないのであれば、
圧縮系のプラグインで激早になる可能性が高いので、オススメですね.
プラグインによる WordPress の高速化 のまとめ
WordPress ( ワードプレス ) の高速化は、SEO ( Search Engine Optimization ) 検索エンジン最適化にも影響すると言われているので、このElementor ( エレメンター ) で構築したサイトにも高速化を実施してみました.
今回は、たくさんのプラグインによる実験と試行錯誤をの繰り返し、Lighthouse で 100 点満点を記録したところで、一度、報告することにしました.
しかし、このプラグインの組み合わせが、今の所、たまたま、最高のパフォーマンスを発揮したわけです.
サイトによって、異なる結果になるかも知れませんが、このプラグインの組み合わせで、高速化を実現できれば、エレメンターサイトがさらに発展できるのではないかと考えています.
でも、大きな問題は、モバイル環境の高速化の敷居は高いかもしれませんね.
google のモバイル、携帯端末でのオススメは、AMP化することのようですが、エレメンターの場合は、有料で AMP のプラグインを導入するしかないのかもしれません.
また、サードパーティーのコードが足を引っ張っているので、あれこれと対策をしてみましたが、結局は、どうでもいいやと、今のところ、諦めてしまいました.
