IT / Wordpress系

「Luxeritas」導入でWordPress高速化、PageSpeed Insightsスコアを90以上に!(でもAMP化は慎重に)

GoogleSpeed Insights, WordPress, 速度改善

Google PageSpeed Insights

タローラモ君
タローラモ君

「サンキュウ!!」語呂のええ数字じゃのう!

ジローラモ師匠
ジローラモ師匠

おぬし、のんきじゃのう。これは「PageSpeed Insights」ちゅうサイトでブログの表示速度を計測した結果で、あまり褒められたものではないんじゃ。

タローラモ君
タローラモ君

師匠もせっかちよのう。ちいとばかり遅くたってええじゃろう。「人生50年」じゃ。

ジローラモ師匠
ジローラモ師匠

信長か!

・・・ところがそういう訳にもいかんのじゃ。このスコアはSEOにおける検索順位に直結してくるのじゃ。

タローラモ君
タローラモ君

えすいーおう??おう。そりゃ美味いんかのう。

Sponser’s Link

PageSpeed Insightsスコア20台からのWordpress高速化検討

新型コロナウイルスの影響ですこぶるインドアなゴールデンウィークを過ごす中で、長い間ダラダラと続けてきた当ブログ(Wordpress)の表示速度問題にも少しテコ入れをしなければな、と思い立った訳ですが、手を入れる前にGoogleが提供する「PageSpeed Insights」で計測した結果が上のキャプチャです(モバイルモード)。これはまだ良い方で、ページによっては20台なんてのもザラにありました。

不要なプラグインを削除したり色々小手先で改善を試みたものの有意な改善結果は得られず、かといって安易にプラグインでAMP (旧称: Accelerated Mobile Pages)化するとサイトデザインが崩れかねない上、既存のテーマやプラグインとの競合で収拾が付かなくなる・・・

ということで検討し始めたのが、思い切ってAMP対応テーマに載せ替える方法でした。

で、結論から言うと、現在はモバイルモードでも80以上、PCモードでは概ね90を超えるスコアを達成出来ています(まだまだ全然ですが、元が酷かったので^^;)。

さらにもう一つ結論を申し上げると、上記のスコアを達成するにあたりAMP導入は見送っています。

では経緯を詳しくご紹介したいと思います。

Sponser’s Link

WordPressテーマ、Luxeritasを導入

「Wordpress テーマ AMP 無料」などと検索するといくつかの候補が見つかります。

  • Cocoon
  • Lion Media
  • Luxeritas

と言った辺りが日本語対応テーマの中で代表的なもののようです。これらの中から最終的にLuxeritasの導入を決めた訳ですが、重視したポイントは以下のとおりです。

  • 日本語対応

これは上の三つのいずれも対応しています。実際に利用する際には英語でも良いのですが、SEO最適化の観点で日本語が配慮されている方が望ましいと考えました。実は関係ないのかも知れないですが、今回はYOASTなどで行っていたSEOメタデータ関連機能も内包したテーマを探していたので、外国語版を使っていて知らないうちに文字コードなどが悪さをしていたら良くないかなと。

  • カスタマイズ性

上記の3つの中では最もカスタマイズ性が高く、ある程度Webの知識がある人向け、という評価が多かったのがLuxeritasでした。筆者、CSSも半人前だしPHPはからっきしですが、結構手を入れるんです。

  • プラグイン不要で高速

カスタマイズやOGP、ブログカード、ショートコード等のツール、SEOなど出来るだけ多くの機能がテーマに内包されていて、別途プラグインを導入する必要がないもの。それ自体が表示速度にも直結します。

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ
Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に表示するための仕組みを満載した、無料の WordPress テーマです。
Sponser’s Link

Luxeritas導入の結果、プラグインを大幅に断捨離できた

上記の通りLuxeritasの中に多くの機能が内包されていたため、表示速度の遅延に繋がるであろう多くのプラグインを削除する事が出来ました。導入してすぐに削除出来た主な(かつ重めの)プラグインは(メモする前に消してしまったので記憶の限り)以下のとおりです。

  • YOAST SEO

Meta KeywordsやMeta Descriptionの設定、GoogleへのIndex/Noindex設定などに使っていました。Luxeritasで出来ました。また、Luxeritas自体、YOAST SEOやAll in one SEO Packとの併用を非推奨としています。

  • WP QUADS

記事やウィジェット内の好みの場所にAdsenseを挿入できるプラグイン。Luxeritasで出来ました。

  • Pz-LinkCard

記事内で内部&外部リンクをブログカード風に表示出来るようにするプラグインです。重いと評判のプラグインです。LuxeritasでCSSとショートコードベースで出来ました。

  • Autoptimize

CSSやJavascriptを最適化してくれるプラグイン。Luxeritasで出来ました。

  • Lazy Load

ブラウザでサイトを表示する際に画像を後回しで読み込ませる機能を実現するプラグイン。Luxeritasで出来ました。

他にも編集や管理時に使うプラグインも不要になって削除したものがいくつかありましたが、サイト表示速度に関係しそうなものだけでもこれだけ断捨離する事が出来ました。

タローラモ君
タローラモ君

ここの管理人はもっと先に断舎離するもんがあるんじゃなかろうかのう。腹の肉とか使っとらんカメラのレンズとか。

ジローラモ師匠
ジローラモ師匠

そんなことを言っとるとこの吹き出しコントコーナーを真っ先に断捨離されるぞよ。

タローラモ君
タローラモ君

うへえ。

Sponser’s Link

PageSpeed Insightsスコアが一気に90台に改善

まずはAMPを有効化せずに冒頭のGoogleSpeed Insightsを回した結果を御覧ください。

まずはモバイルモードです。

GoogleSpeed Insights, スコア, モバイル

なんと一気に80台まで改善!

さらにPCモード(↓)では90を超えてきました^^

GoogleSpeed Insights, スコア, PC

冒頭の39に比べると段違いのスコア!これは正直想像以上の改善でした。Luxeritasに載せ替えて要らないプラグインを削除し、テーマ内包のネイティブコードを使うことでここまで改善するのですね。

表示速度が改善すると言われるAMPに対応しなくてもこの効果です。では果たしてAMPを有効化したら・・・?実は意外な結果が待っているのですがそれは後ほどお話するとして、まずはLuxeritasでのAMP対応の方法を簡単にご紹介します。

Sponser’s Link

LuxeritasならAMP対応も超簡単&デザインもほぼ変わらず

AMP対応はLuxeritasのカスタマイズ画面で「AMP有効化」にチェックを入れるだけです。

Luxeritas, 管理画面, AMP

これだけで、AMP対応のコードに書き換えたファイルを出力してくれます。

また、デスクトップ用のデザインを作成すればAMPモードでも概ね踏襲して表示してくれるのも嬉しいところ。

下のキャプチャ、左が通常表示、右がAMP表示です。メニューのところや見出しが若干簡素化されてますが、以前のAMPプラグインによる変換のように均一的な全然違うテンプレートになったり、変に崩れたりということはありませんでした。

Luxeritas, AMP

Sponser’s Link

それでもAMP対応をやめた3つの理由

タローラモ君
タローラモ君

「3つの理由」なんぞ言いよって、ここの管理人まるでブロガー気取りじゃのう。

ジローラモ師匠
ジローラモ師匠

ブログをやっとるんじゃから文句は言えまいて。それよりそんな軽口を叩いとると、このコーナー断捨離・・・

タローラモ君
タローラモ君

サッ

さて、導入も簡単で表示も崩れず、何も考えずにAMP対応してしまったも良さそうな気もしますが、色々検討した結果AMP対応はしないことにしました。

理由1.高速化の効果がなかった(非AMPの方が速い)

もう他の2つの理由が霞んでしまうほど、これに尽きます。

上で、AMPを有効化しない状態でもGoogle PageSpeed Insightsのスコアが90を超えましたが、AMPを有効化したURLで試してみると・・・

GoogleSpeed Insights, スコア, AMP

 

え??これって数字が小さいほど良いんでしたっけ?「英検1級」みたいな?

他のURLでも試してみたのですが傾向は変わりませんでした。

正直なところはっきりとした理由は分かっていませんが、もしかすると次のAMPエラーが関係しているのかも知れません。

いずれにしても、Luxeritas単体で90前後のスコアを叩き出せるのであれば、頑張ってこの60前後から更に上げたとしても大きなメリットは感じられません。

ちなみに冒頭で、「AMP (旧称: Accelerated Mobile Pages)」と、わざわざ「旧称」と書いたのですが、実は元々は正式名称は「Accelerated Mobile Pages」、略して「AMP」だったのですが、最近になって「AMP」の方を正式名称にしたようです。

これは想像ですが、もしかすると、AMP対応しても必ずしも「Accelerated」とは言えない状況が生じてきた事を当事者たちも認識してきたからでは?なんて思ったりしてます(笑)

理由2.AMPエラー対応がキリがない

AMP対応URLをGoogleにIndexしてからの数日、毎日のようにGoogle先生からお叱りを受けるようになりましたw

Google Search Console, AMPエラー

Google Search Console, AMPエラー

AMPはGoogleとTwitterが共同で策定した仕様らしいのですが、流石プロ集団、厳しいですね^^;

エラーになっているのは例えばHTMLで作成した旧サイトからコピペで移転してきた記事や、過去のプラグインが関係している記事で、Metaデータの中に仕様外の記述などがあって突っ込まれるといったケースです。

なので最初からAMP対応のLuxeritasで記事を書けばエラーは出ないと思われます。

ただ問題は、Google先生のことですからまたすぐに仕様を変えたりすると思うんです。それでLuxeritasの提供主様がイタチごっこのようにテーマをUpdateして下さればいいのですが、それがいつまでも続く事は期待しない方がよいでしょう。

理由3.複数のデザインを維持管理していくのが大変

上の方で、Luxeritasの長所としてAMP表示にした時に元デザインを概ねキープできる、という話をしましたが、それでも細かいところで差異が出てきます。

すると、何かカスタマイズをする度にいちいち標準表示とAMP表示の両方をチェックしなければなりません。CSSですらAMPには一部制限があるので、ちょっとしたデザインの変更でも然りです。

 

もっとも2と3の理由は、表示速度が劇的に改善するのであれば頑張らないでもないんですが、理由1のような状況では、労多くしてなんとやら、です。

参考:他のブロガーさんがどうしているか見てみた

さて、仲良くさせて頂いているブロガーさんたちはどうしているのかを見てみました。

下の画面キャプチャをご覧下さい。こちらは「プジョー リフター 試乗」で検索した時の結果です。

下の方の緑の枠で囲ったのが当ブログです。この時は一時的にAMP対応してIndexされていたので、グレーの雷マークが付いています。これを見ることで、他のサイトについてもAMP対応しているかどうかを判別することが出来ます。

で、この画面、たまたま発見した貴重なキャプチャでして、最近仲良くさせて頂いている有名ブロガーさん達と検索結果トップに並ばせて頂いている実にレアな画像なのです(笑)恐らくまだ日本では正式ラインナップになっていないレア車の試乗記ということで記事自体が少ないために起こった僥倖でしょう^^;

そのブロガーさん達というのは、上の方で青で囲った「WONDERFUL CAR LIFE」のUUさん、「くるすぺ」のくるすぺさんのお二人で、お二方とも月間10万PVとか20万PVとか叩き出されてる有名ブロガーさん達なのです。

なので当然対応されているかと思いきや・・・

あれ?雷マーク、ありませんね!

そう言えば先日別の記事でも激しくお勧めさせていただいた「monogress」のまこまちさんも、AMP対応は今の所見送っているとおっしゃっていました。

ということは、必ずしもAMP対応している事がSEO上ものすごく必須という訳ではないということも何となく言えそうです(もちろんお三方のブログは内容やワーディングなどAMPで無いことを補って余りある要素が沢山あります)。

その裏付けとして、「遅くてもAMP対応していた方がSEO上有利」ということは無い旨はGoogleが公式見解を出しているようです。

【グーグル公式】AMPのインデックスについてぜひ知っておきたい10個のFAQ【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
「インデックスにかかる時間は?」「検索順位に与える影響は?」「一部のページしかSERPに出ない」「link要素はどう指定する?」などAMPに関するFAQを紹介
Sponser’s Link

結論

結論としてはこんなところでしょうか。

Luxeritas導入はWordpress高速化に効果あり。ただしAMPは慎重に。

Luxetirasの様な高速化を謳い、かつ高機能なテーマは、それを導入しただけでも、プラグインのスクリプトを読み込む必要が無くなるためかなりの高速化に繋がると言えるでしょう。

ただ一つだけ気になっているのは、将来的にもし別のテーマに乗り換えたくなった際に、テーマネイティブのスクリプトを活用した機能については引き継げないと思われるので(逆にプラグインならプラグインを残せば引き継がれる可能性が高い)、そこはその時の検討課題ですね。

 

一方AMPについては効果を十分に見極めてから導入を判断したほうが良いでしょう。

高速化自体はSEO上はもちろん、訪れてくれる方へのユーザビリティ的にも大切なことですが、「AMP」という方式が必ずしも大事、という事ではありません。

また、安易に導入してしまうと、後で戻そうと思ったときにURLが変わってしまうため思わぬ影響があるかも知れません。

 

以上、ご参考になれば幸いです^^

 

◆上で参照させて頂いたブログをご紹介!ぜひ訪れてみて下さい。

車にとどまらず興味深い切り口と惹き込まれる文章が魅力、monogress

monogress[モノグレス]  多角的自動車閑話
自動車評価とエッセイで、カーライフの愉しさと道具の持つ価値を考える、多角的自動車エッセイブログ「モノグレス」はこちらです。2024年、車を存分に楽しむための移住完了。自動車好きやドライブ好きのあつまるカフェを作る夢をコツコツと叶えながら、少...

独自の視点で車の乗り味を評価、試乗マニアのくるすぺさん

くるすぺ ~動的質感命の試乗ブログ~
独自の採点方式を使った試乗記を書いてます。モデルチェンジ情報や各種ランキングもご用意しています。

毎週の様に試乗、豊富な車種と充実したレビュー、WONDERFUL CAR LIFE

WONDERFUL CAR LIFE
年間約100台程試乗したり、触れたりしているクルマ好きが、試乗レビューと新型車の先行情報を中心に発信しています。 細かい部分にもフォーカスしていますので参考になれば幸いです。

ちなみに上の検索結果に奇跡的に登場した当ブログの記事はこちらです。こちらもお車方面の方はぜひ御覧ください。
https://10max.net/archives/12764

 

 

コメント