PageSpeed Insightsで高得点を獲得してWEBサイトを改善する

PageSpeed Insightsとは

Googleが提供する計測ツールです。モバイルやPCページの実際のパフォーマンスを測定して改善方法を確認できます。特に名前の通り、WEBページ読み込み速度が得点方式で確認できます。

PageSpeed Insightsとは

PageSpeed Insights測定ツール

新型コロナ感染が起こる以前にGoogleのセミナーに参加しました。「ページ表示速度」の改善を強く強調していたことを覚えています。インターネットで検索するユーザーが使用する媒体は、PCよりもモバイル)スマホ)が多くなった現在、特にスマホの表示速度を改善することは大切なことです。そのための測定ツールとしてGoogleが提供しているのがPagespeed Insightsです。

せっかく内容が充実したコンテンツを作成してもページ表示速度が遅いためユーザーの滞在時間は少なくなり、その結果検索エンジンからは内容の低いページとして判断されてしまいます

なぜWEB制作会社はPagespeed Insightsの重要性を顧客に伝えないのか

現在のような2500ピセルの画像、多様なCSS、jQueryなどを多く使うWEB制作で、このGoogleの指標をクリアするのは、制作以上に工数がかかります。「仮に製作費が50万円だとした場合、Pagespeed Insightsの最低化モアで含めると費用は100万円でもきびしくなる」と言う理由で、Pagespeed Insightsを封印しています。

Googleで「Pagespeed Insights」と検索するとブログのみでWEB制作会社はほとんど表示されません。ブログの記事も説明するのみで具体的にどう改善するかは書かれていませんでした。それらのブログをPagespeed Insightsで計測するとスマホ速度は標準がやっとの結果でした。

ニアメディアは特殊な方法でPagespeed Insightsをクリアします。

2008年ごろは、他の制作会社と同様にWordpressのテーマや無料プラグインを組み合わせて實生の良いものを提供する方法をとっていました。しかし、これにより多くの失敗を経験して学びました。使用したテーマが廃止になり、バージョンアップで動作しなくなったり、無用のプラグインに脆弱性があり、ハッカーにハッキングされたりしました。

現在は、これらの失敗からテーマにしてもプラグインにしても出所が確かな会社であることを確認して採用するようにしました。よく参考にするのが、Envato Marketです。ここには多くのツールが豊富にあり、世界中のWEBデザイナーやコーディネーターがそれぞれのツールを評価しています。英語力がないと活用が困難ですが、韓国、ベトナムなどアジア諸国の国ですら活用しています。英語が苦手な日本のみあまり活用していないのが実情です。

Pagespeed Insightsの改善もEnavatoから情報を入手できました。

 

次世代フォーマットWebP画像フォーマットに画像を変換する

まずクリアしなければならないのは画像の圧縮です。当然ですが、ホームページには可能な限りきれいな画像をアップします。ファインモード(圧縮率が低いため画質を優先するモードです。)で写真を撮り、ブログやコンテンツでそのまま使用するとページの開きは遅くなります。

WebP画像フォーマットはGoogleが提案する画像圧縮フォーマットで画像の視覚的質を落とさずにサイトへのアクセス負荷を軽減できます。問題は、jpegやpng画像をどうやってWebPフォーマットに変換するかです。ソフトを使って一つ一つ画像を変換してからWEBサイトにアップするのはかなり面倒です。

ニアメディアではプラグインImagifyを使用してすべて自動で行っています。下記は画像アップ先フォルダー内です。アップしたjpegやpng画像に対応するWebPフォーマット画像が自動で作成されているのがわかります。

webp3

Imagifyの設定

Optimization WEBP Format (WebPフォーマットの最適化)欄でチェックを入れます。これだけです。

imaagify

また、一括圧縮で画像自体をすべて圧縮します。これでGoogle Pagespeed Insightsの画像フォーマットはほぼクリアできます。

imaagify2

WP-ROCKETプラグインを導入する

このプラグインは有料ですが、ニアメディでは2018年より導入して検証してきました。初期の段階ではいろいろ問題がありましたが、バージョンアップで改善され、安定した結果を得られるようになりまいた。Envatoで購入したFlatsomeテーマとの互換性もよく、Flatsome自体このプラグインは推奨しています。

ImagifiとWP=ROCKET、それにFlatsomeテーマの導入で、ニアメディアサイトの検証結果は下記の通り高得点を得ています。

PageSpeed Insghtsのモバイル検証結果

smart

PageSpeed InsghtsのPC検証結果

pc

Pagespeed insightsをクリアできるショッピングカートはWooCommerceだけ?

Shopify、Makeshop、Base等、ASP型ショッピングカートを検証しましたが、標準点を取れたのはShopifyだけでした。特にスマホサイトの表示速度がかなり低い数値になります。

5G時代がくればさほど問題ではないかもしれませんが、まだ時間がかかると思います。一方で、WordPressで動作するWooCommerceの場合、Pagespeedに対応するプラグインが豊富にあります。

YouTube動画を見る

WooCommerceのことなら

WooCommerceが動作しない、プラグインが設定できないなどが原因であきらめてしまう方がいらっしゃいます、Wordpressはパソコンと同じで、古いバージョンのまま何年も使っていると動作しなくなることがあります。

ニアメディアでサポートできることでしたら、低料金でお見積もりいたします。

よくある質問 お問い合わせ お見積もり

関連投稿