Kinstaは日常ベースで顧客対処をしている多くの代理店またはフリーランサーと協力しています。顧客またはその企業のCEOにさえ、代理店やWordPress開発者がGoogle PageSpeed Insightsの点数を上げるように頼まれるのは珍しいことではありません。Googleはこのツールを上手にアッピールしますので、多くのお客様は満点でない点数でも世界の終わりではないことを理解していません。いら立たしいことですね。そこで今日は、WordPressウェブサイトでGoogle PageSpeed Insightsで満点を取るのに役立つ工夫をいくつかをご紹介します。

Google PageSpeed Insightsの重要性

Google PageSpeed Insightsはウェブ上のベストプラクティスに基づいた推奨事項に従い、ウェブサイトをより迅速かつモバイルフレンドリにする方法をあなたも簡単に特定できるようにGoogleが作成したウェブパフォーマンスツールです。ただし、必ずしも満点を取得するばかりに集中してはいけませんのでご注意ください。WordPressウェブサイトの設定に応じて、満点を取得するのは不可能なシナリオもあります。数多くの多目的テーマまたは外部スクリプトの多いウェブサイトだと、満点を取得しようとしてもほぼ無理です。それは完全にOKです。

当社がウェブサイトの点数よりスピードを確認した方がいいと考えます。Pingdom、GTMetrix、Google PageSpeed Insightsなどのツールを使用すると、堕落させることがあります。特にそれらの多くはまだHTTP/2をサポートしていませんので。本当に重要なことは、ウェブサイトの読み込み速度が速く知覚されるパフォーマンスが最高であることを保証することです。 知覚されるパフォーマンスとは、ユーザーが感じるウェブサイトの読み込み速度のことです。

GoogleはSEO及びページ速度ランキングの要素としてPageSpeed Insightsを使用しているのでしょうか。または単純に応答速度を使用しているのでしょうか。この質問は、FDP Group LeedsのSEOによって聞かれ、検索エンジン円卓会議で議論された興味深い質問です。GoogleのウェブマスタートレンドアナリストのGary Illyes氏は、「僕なら両方を使います」と答えました。

ほとんどの場合、ウェブサイトの速度が遅ければGoogle PageSpeed Insightsでも多くの指摘事項が発生する可能性が高いです。指摘事項の多くは、純粋な応答時間と関連しています。常に100%関連しているわけではありませんが、Gary Illyes氏が言っているのは、ウェブサイトが遅くれば点数も減るということでしょう。

共有ホスティングでもKinstaでも満点を取る方法

WordPress 4.7で新しいTwenty Seventeenテーマを確認するのは楽しいと考えました。最初の一般ブログ用ではなくビジネス用のデフォルトWordPressテーマの為、興味深いですね!そこで今日は、デスクトップとモバイルの両方で満点を取得する方法を紹介します。Google Analytics、Akismet、Yoast SEOなど、多くのWordPressウェブサイトで使用されている共通のツール・サービスをインストールしました。専用のGoogle Cloudホスティングと共有ホスティング環境の違いを紹介できるように、低予算の共有ホスティングKinstaの両方で試験を実行しました。

これは小規模なウェブサイトですが、Google PageSpeed Insightsの仕組みを少しでも理解するのに役に立つでしょう。より大きくて多目的テーマの最適化については、Total WordPressテーマの最適化についての記事をご確認ください。

Google PageSpeed Insightsの満点

Google PageSpeed Insightsの満点

共有ホスティングでGoogle PageSpeed Insightsの満点を取る

まずは、人気の低予算共有ホスティング会社(Apache)を利用してTwenty SeventeenテーマとWordPress 4.7を試験しました。 SSLを設定し、下記のプラグインをインストールしました。

  • Yoast SEO
  • Akismet

または、header.phpファイルの<body>内でGoogle Analyticsを実行しています。当社が行った唯一の変更は、既定のダミーの「Hello world!」のブログ投稿に注目画像の追加でした。次にGoogle PageSpeed Insightsのテストを行い、基本設定でデスクトップでの69/100点、モバイルで58/100点を取得しました。 間違いなく改善にすべき結果ですね。その改善の方法を一緒に見てみましょう。

圧縮を有効にする警告

圧縮を有効にする警告

圧縮を有効にする

まずデスクトップから始めますが、多くの修正がモバイルにも適用されます。修正する必要のある最初のGoogle PageSpeed Insightsの指摘事項は、圧縮を有効にする警告です。

圧縮を有効にする警告

圧縮を有効にする警告

Googleによると、この異常を修正するためには、Gzip圧縮を有効にする必要があります。残念ながら、共有ホスティングのサーバでは、自動的に有効にしていませんので、手動で行う必要があります。

最新のブラウザーはすべて、すべてのHTTPリクエストに対してGzip圧縮をサポートし、自動的にネゴシエートします。 Gzip圧縮を有効にすると、転送されるレスポンスのサイズが最大90%で縮小することにより、リソースのダウンロード時間が大幅に短縮され、クライアントのデータ使用量が削減され、ページのレンダリング時間が短縮されます。

圧縮を有効にするのにいくつかの方法があります。最も簡単な方法の1つは、Gzipを有効にするキャッシングプラグインを使用することです。例えば、WP Rocketは、mod_deflateモジュールを使用して.htaccessファイルにGzip圧縮ルールを自動的に追加します。W3 Total Cacheのパフォーマンスセクションにもを有効にする機能4があります。

Gzip圧縮を有効にする2番目の方法は、.htaccessファイルを編集することです。ほとんどの共有ホスティングはApacheを使用していますので、以下のコードを簡単に.htaccessファイルに追加できます。 .htaccessファイルは、FTP経由で探せば、WordPressウェブサイトのルートにあります。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

.htaccessファイルの現在の内容の下に追加してください。下記のサンプルをご確認ください。

GZIP圧縮コードの追加

GZIP圧縮コードの追加

NGINXをご利用の方は、単純に下記を追加してください。

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Check Gzip Compressionのようなツールを使用することにより、Gzip圧縮を有効にすることで実際に何バイトの記憶空間を節約したかを確認できます。ここでは、テストのウェブサイトの節約内容の例を示します。

GZIP圧縮による記憶空間の節約

GZIP圧縮による記憶空間の節約

Google PageSpeed Insightsを再度使用すると、Gzip圧縮の警告が消えて、デスクトップの点数が69/100点から80/100点に、モバイルの点数が58/100点から67/100点に上がったことが確認できます。

GZIP圧縮後のPageSpeed Insightsの点数

GZIP圧縮後のPageSpeed Insightsの点数

画像を最適化する

Google PageSpeed Insightsの次の私的事項は、画像の最適化に関する警告です。デフォルトの「Hello world!」 ブログ投稿には注目画像がありますので、この警告が発生しています。

画像最適化警告

画像最適化警告

これは非常に重要で役に立つ警告です。HTTP Archiveによると、2016年11月には画像が一般のウェブページの総重量の訳65%を占めていました。画像を最適化することは、WordPressウェブサイトでの性能向上の最も簡単な方法の1つに違いありません。

改善方法がいくつかあります。1つ目は、画像最適化プラグインを使用することです。 プラグインはWordPressのメディアライブラリ全体を一括して最適化し、アップロード時に自動的に画像を最適化することができます。また、当社がWordPressにおける画像最適化の方法についての詳細な記事を発行しています。以下は、人気のある画像最適化プラグインの例です:

上記のプラグインを使用して問題が解決しますが、アップロードする前にAdobe Photoshop、Gimp、Affinity Photoなどのツールを使用して圧縮する方法もあります。以下には警告を出した注目画像があります。スケールダウンまたは品質を下げることにより、事前に圧縮することが可能です。画像を可能な限り小さくした方がいいです。この画像はもともと2.32 MBでしたが、スケール−ダウンかつ圧縮の後は99.38 kBになりました。CSSにサイズを変更するのを頼らなく、画像を必要なサイズでアップロードした方が最善であることを忘れないで下さい。ウェブサイトの速度が低下しますので。

Affinity Photoを使用して画像を圧縮する

Affinity Photoを使用して画像を圧縮する

Affinity Photoを使用して画像を圧縮するGoogle PageSpeed Insightsを再度使用すると、画像最適化に関する警告が消え、デスクトップスの点数が80/100点から88/100点に、モバイルの点数が67/100点から73/100点に上がったことが確認できます。ずいぶん改善してきましたね!

画像圧縮後のPageSpeed Insights

画像圧縮後のPageSpeed Insights

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

Google PageSpeed Insightsの次の私的事項は、スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除することです。実は、レンダリングをブロックしている JavaScript/CSSの件については当社が詳細な記事を発行しています。

レンダリングをブロックしている JavaScript/CSS を排除する

レンダリングをブロックしている JavaScript/CSS を排除する

ブラウザがウェブページを読み込むときに、ブラウザがそのページを完全にダウンロードし処理するまでにはJavaScriptとCSSのリソースがウェブページの表示を止めます。表示する前にダウンロードし処理する必要のあるものがいくつかあります。ただし、多くのCSSおよびJavaScriptリソースは条件付き(特定のケースでのみ適用される)ものです。また、スクロールせずに見えるコンテンツのレンダリングに不要なものもあります。ユーザーに最速のエクスペリエンスを提供するには、スクロールせずに見えるコンテンツを表示するに不要なレンダリングをブロックするものをすべて排除してください。

レンダリングをブロックしている JavaScriptについてGoogleは下記の3つの推進事項があります。

  • JavaScriptが多くない場合は、インライン化により本警告を改善できます。AutoptimizeのようなプラグインでJavaScriptをインライン化することができます。しかし、この方法は小規模のウェブサイトにしか適用できません。ほとんどのWordPressウェブサイトにはJavaScriptが十分にありますので、インライン化によりウェブサイトのスピードを遅くしてしまう場合があります。
  • 2つ目の方法は、JavaScriptを非同期にロードすることです。Async JavascriptがHTML構文解析中にファイルを本質的にダウンロードしHTMLパーサでのファイル実行を一次的に止め、ダウンロードが完了してから完了するようにします。
  • 3つ目の方法は、JavaScriptを延期することです。 延期の場合でもHTML構文解析中にファイルをダウンロードしますが、解析が完了した後にのみ実行します。また、このスクリプトタグでは、スクリプトがページに表示される順番で実行されます。非同期と遅延の違いの詳細については、こちらをご覧ください。

この例では、JavaScriptの非同期ロードにします。これを行うには、Async JavaScriptという無料のプラグインを使用します。WordPressリポジトリからダウンロードすることも、WordPressのダッシュボード内の「プラグイン→新規追加」で検索することもできます。現在のところ、9,000以上のアクティブなインストールがあり、評価は5つ星のうち4.2です。このプラグインが、WordPress wp_enqueue_script機能によりロードされたすべてのJavaScriptに「非同期」と「遅延」属性を追加します。 開発者にはプレミアムバージョンも用意されていますので、プレミアムを使うことにより非同期または延期するスクリプトを選択することもできます。

「非同期」の例

<script src="file1.js" async></script>

「遅延」の例

<script src="file1.js" defer></script>

インストール後には、設定に入りAsync JavaScriptを有効にします。

async javascript

Async JavaScript

大規模のウェブサイトではスクリプト除外機能が便利です。またはプラグインのプレミアムバージョンを取得することも便利です。この例では必要ありませんが、多くのJavaScriptのあるウェブサイトの場合は、そのすべてを単純に「非同期」または「遅延」に設定すると異常が発生する可能性が高いです。 その場合は、できることを使ってトラブルシューティングする必要があります。

スクリプト除外機能

スクリプト除外機能

プラグインを使用したくない場合は、その他の選択肢がいくつかあります。例えば、functions.phpファイルに次のコードを追加する方法があります。

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

プラグインなしで非同期または遅延を追加する方法については下記の記事も是非ご確認ください。

Google PageSpeed Insightsを再度使用してみたら、レンダリングをブロックしている JavaScriptが修正され、CSS配信を最適化する警告しか表示されません。

CSS配信を最適化する警告

CSS配信を最適化する警告

ご覧のとおり、最初に最適化する必要のあるCSSはGoogleのフォント(fonts.googleapis.com)です。 CSSは、ウェブフォントからのCSSを含め、レンダリングブロッキングの基本設定があります。これを修正するには、無料のDisable Google Fontsプラグインをインストールします。プラグインの作者のMilan Dinićが最近、新しいTwenty SeventeenテーマのLibre Franklinフォントを追加してくれました。プラグインをインストールすると、Googleフォントが当たり前のことに壊れます。従って、Google Fontsに向かい、埋め込みコードを手動で取得します。今回は、Twenty Seventeenテーマにデフォルトで含まれているフォントを選択しました。

<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
埋め込みしたGoogleフォント

埋め込みしたGoogleフォント

その後、footer.phpファイルの</body>タグの直前に追加する必要があります。注意:そうすると、FOUTというものが発生します。FOUT(Flash Of Unstyled Text)は、スタイル未指定のテキストのちらつきです。一方、レンダリング問題が改善されます。FOUTがあなたのウェブサイトの訪問者にとっては受け入れられるユーザーエクスペリエンスであるかをご自分で判断する必要があります。 GoogleのWeb Font Loaderを使用することも可能です。

WordPressフッターのGoogleフォント

WordPressフッターのGoogleフォント

Google PageSpeed Insightsを再度使用すると、CSS配信の最適化に関する警告がたった1つが残っています。それはstyle.cssファイルです。

CSS配信最適化クエリ文字列の警告

CSS配信最適化クエリ文字列の警告

これを修正する最も簡単な方法の1つは、Frank Goossens氏によって開発されたAutoptimizeという無料のWordPressプラグインを使用することです。

Autoptimize WordPressプラグイン

Autoptimize WordPressプラグイン

このプラグインはかなり軽量で、正確にいうと176 KBです。現在のところ、400,000以上のアクティブなインストールがあり、評価は5つ星のうち4.5です。このプラグインは、スクリプトの連結と圧縮の対応、Expiresヘッダーの対応、スタイルをヘッダーへ、またはスクリプトをフッターへ移動することができます。 それに、上記使用されていたAsync JavaScriptプラグインと完全に互換性があります

プラグインのインストール後、設定をクリックし「Optimize CSS Code」を選択します。次に、詳細タブをクリックし、「Aggregate inline CSS」と「Inline All CSS」を有効にします。ご利用のテーマにより、インライン化しない方がいい場合もありますので、ご注意ください。大規模のウェブサイトは、インライン化するとが悪影響を受けることがあります。その場合は、Google PageSpeed Insightsの指摘事項を無視した方が良いでしょう。また、HTTP/2では連結によりウェブサイトが遅くなることがあります。

CSSコードの最適化

CSSコードの最適化

また、HTMLコードの最適化オプションも有効にすることをお勧めします。

HTMLコードの最適化

HTMLコードの最適化

Google PageSpeed Insightsで再度確認すると、スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除するメッセージが表示されなくなりました! また、その下に記載され、まだ触っていないCSSを圧縮する指摘も直りました。デスクトップの点数は88/100点から92/100点に、モバイルの点数は73/100点から89/100点に上がりました。近いですね。

JSとCSS最適化後のPageSpeed Insightsの点数

JSとCSS最適化後のPageSpeed Insightsの点数

ブラウザのキャッシュを活用する

Google PageSpeed Insightsの次の指摘事項は、ブラウザのキャッシュを活用する警告です。 WordPressに関係するブラウザのキャッシュを活用する警告の改善については、当社の詳細な記事をご確認ください。

ブラウザのキャッシュを活用する警告

ブラウザのキャッシュを活用する警告

ブラウザのキャッシュを活用する警告が発生する最も一般的な理由は、ウェブサーバーに適切なヘッダーがないことです。上記のスクリーンショットでは、内部スクリプトのすべてに有効期限が指定されていない警告が発生したことがわかります。キャッシングでは、Cache-ControlヘッダーとExpiresヘッダーの2つの主要な方法が使用されます。Cache-Controlヘッダーはクライアント側のキャッシュをオンにし、リソースの最大有効期間を設定しますが、Expiresヘッダーはリソースが無効になる特定の時点を指定するのに使用されます。

少し無駄ですので、両方のヘッダーを追加する必要はありません。Cache-Controlは2つうち新しい方で、通常はこれが推奨されますが、GTmetrixなどの一部のウェブパフォーマンスツールがまだまだExpiresヘッダーを確認します。ただし、これらはすべて例に過ぎません。ファイルの種類、有効期限などを変更することもできます。以下にいくつかのオプションを示します。本チュートリアルでは単純に、共有ホスティングのApacheにExpiresヘッダーを追加することにしました。

NginxでCache-Controlヘッダーを追加する

NginxではCache-Controlヘッダーを追加するには、サーバーコンフィギュレーションのサーバーの場所またはブロックに次のコードを追加します。

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

NginxでExpiresヘッダーを追加する

NginxではExpiresヘッダーを追加するには、サーバーブロックに次のコードを追加します。この例では、ファイルの種類に基づいて異なる有効期限を指定する方法を確認できます。

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

ApacheでCache-Controlヘッダーを追加する

ApacheではCache-Controlヘッダーを追加するには、.htaccessファイルに次のコードを追加します。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

ApacheでExpiresヘッダーを追加する

ApacheではExpiresヘッダーを追加するには、.htaccessファイルに次のコードを追加します。

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

以前はGzip圧縮を有効にしたことを覚えていますでしょうか。Expiresヘッダーを追加した後の.htaccessファイルの今の姿が下記のとおりになります。どのように見えるかを示しています。 Expiresヘッダーを単に圧縮ブロックの下に挿入します。

Expiresヘッダーのコード

Expiresヘッダーのコード

Google PageSpeed Insightsのテストを再度実行すると、ブラウザのキャッシュを活用する警告の下に、Google Analyticsのスクリプトしか残っていません。これはGoogle独自のスクリプトなので、皮肉なことですね。問題は、下記のスクリーンショットにも確認できるように、アセットのキャッシュ時間が短く(2時間と)設定されていることです。どの理由でも変更を行う場合は、すべてのユーザーができるだけ早く変更内容を取得できるようにこの設定になっています。しかし、Google Analyticsスクリプトをローカルにホスティングすることでこの設定を回避することができます。ただし、Googleはこの方法をサポートしていませんのでご了承ください。

Google Analyticsでブラウザのキャッシュを活用する

Google Analyticsでブラウザのキャッシュを活用する

Daan van den Bergh氏が作成かつ開発した、WordPressウェブサイトでGoogle AnalyticsをローカルにホスティングすることができるComplete Analytics Optimization Suiteという無料のプラグインがあります。

ダウンタイムまたはWordPressの異常に悩んでいますか。Kinstaは時間を節約するために設計されたホスティングソリューションです!当社のフィーチャーをご確認ください。
WordPressプラグインCAOS

WordPressプラグインCAOS

Complete Analytics Optimization Suiteは、WordPressリポジトリからダウンロードすることも、WordPressダッシュボードの「プラグイン」の「新規追加」でも検索してダウンロードすることもできます。 現在のところ、このプラグインには、10,000以上のアクティブなインストールがあり、評価は5つ星のうち5です。このプラグインを使用すると、Google AnalyticsのJavaScriptファイル(analytics.js)をローカルにホスティングし、wp_cron()を使用して更新もできます。その他の機能には、例えば訪問者のIPアドレスの簡単な匿名化、調整した直帰率の設定、スクリプト(ヘッダーまたはフッター)の配置設定などがあります。

プラグインをインストールし、Google AnalyticsのトラッキングIDを入力すると、Google Analyticsに必要なトラッキングコードがWordPressウェブサイトに追加され、analytics.jsファイルがダウンロードかつサーバーに保存され、wp_cron()のスケジュールスクリプトを使用して更新も定期的にされます 。また、フッターにロードするように設定することをお勧めします。 注意:このプラグインは他のGoogle AnalyticsのWordPressプラグインと一緒に使用できません。

ローカルのGoogle Analytics

ローカルのGoogle Analytics

Google PageSpeed Insightsのテストを再度実行すると、ブラウザのキャッシュを活用する警告が完全に消滅したことがわかります! デスクトップの点数は92/100点から97/100点に、モバイルの点数は89/100点から96/100点に上がりました。もうすぐですね!

ブラウザのキャッシュを活用する警告の修正後のPageSpeed Insights

ブラウザのキャッシュを活用する警告の修正後のPageSpeed Insights

サーバーの応答時間を短縮する

Google PageSpeed Insightsの次の改善するべき指摘事項は、サーバー応答時間を短縮する警告です。この異常は主に低予算の共有ホスティングプランを使用している場合に発生します。サーバーは遅くて、それがGoogleも知っています。したがって、本件を改善するにはデータ処理を高速化する為のキャッシングを実装する必要があります。素晴らしいキャッシングプラグインが数多くありますが、この例ではKeyCDNのチームが作成した無料のCache Enablerプラグインを使用します。

WordPressプラグインCache Enabler

WordPressプラグインCache Enabler

現在のところ、Cache Enablerには30,000以上のアクティブなインストールがあり、評価は5つ星のうち4.6です。静的なHTMLファイルとWebPのサポートを生成することによりウェブサイトをより速くするWordPress用の軽量キャッシングプラグインです。有効にするなどの設定はありませんので、単にインストールしておくことでご利用できます。このプラグインは、上記に使用されたAsync JavaScriptプラグインとAutoptimizeプラグインと完全に互換性があります。さらなるスピードのご希望の方はPHPをバイパスする高度なスニペットも追加した方が良いでしょう。

GoogleのPageSpeed Insightsのテストを再度実行すると、サーバーの応答時間を短縮する警告が完全になくなりました。デスクトップの点数は97/100点から99/100点に、モバイルの点数は96/100点から99/100点に上がりました。ギリギリですね!

応答時間改善後のPageSpeed Insights

応答時間改善後のPageSpeed Insights

通常、Kinstaでは「サーバの応答時間を短縮する」指摘事項は発生しません。しかし、プラグインからの遅いデータベースクエリ、フレームワーク、ライブラリ、リソーススタベーションあるいはメモリースタベーションといったサーバーの応答を遅らせる要因が数多くあることを頭に入れておいた方がいいです。お客様はその要因を特定できる為には当社がNew Relic利用します。

JavaScriptを圧縮する

Google PageSpeed Insightsの最後の私的はJavaScriptを圧縮することです。

JavaScriptを圧縮する警告

JavaScriptを圧縮する警告

本件を修正するには、単にAutoptimizeプラグイン設定に戻り、JavaScriptコードの最適化オプションを有効にします。キャッシュプラグインが実行されているの為、結果を確認できるようにキャッシュをクリアする必要があります。

JavaScriptコードの最適化

JavaScriptコードの最適化

完了です!低予算の共有ホスティングでもWordPressのTwenty Seventeenテーマの点数をデスクトップ・モバイルとも69/100点から100/100点に改善しました。

Google PageSpeed Insightsで満点!

Google PageSpeed Insightsで満点!

下記はモバイルの点数です。モバイルを触る必要が全くなくて、デスクトップを改善しただけで、モバイルの方も改善しました。

モバイルでもGoogle PageSpeed Insightsで満点!

モバイルでもGoogle PageSpeed Insightsで満点!

Pingdomでの点数の改善前と改善後の結果もあります。

PageSpeed Insightsに沿った最適化の前のスピードテスト

共有ホスティングの最適化が行われる前のPingdomの速度テストの結果です。

PageSpeed Insightsに沿った最適化の前のスピードテスト

PageSpeed Insightsに沿った最適化の前のスピードテスト

PageSpeed Insightsに沿った最適化の後のスピードテスト

共有ホスティングの最適化が行われた後のPingdomの速度テストの結果です。

PageSpeed Insightsに沿った最適化の後のスピードテスト

PageSpeed Insightsに沿った最適化の後のスピードテスト

KinstaでGoogle PageSpeed Insightsの満点を取る

2つ目のテストウェブサイトは、1つ目と全く同じコンフィギュレーションです。単に別のドメインにあります。Kinstaサーバ(NGINX)上で実行されているTwenty SeventeenテーマとWordPress 4.7を試験しました。 SSLを設定し、下記のプラグインをインストールしました。

  • Yoast SEO
  • Akismet

または、header.phpファイルの<body>内でGoogle Analyticsを実行しています。当社が行った唯一の変更は、既定のダミーの「Hello world!」のブログ投稿に注目画像の追加でした。次にGoogle PageSpeed Insightsのテストを行い、基本設定でデスクトップでの73/100点、モバイルで63/100点を取得しました。 上記の共有ホスティングと比較すれば、多くの警告が発生しないことが興味深いです。その警告は例えば、

  • 圧縮を有効にする (Kinstaではすべてのサーバーに対してGzipが有効にされている為、有効にする必要がありません。)
  • サーバーの応答時間を短縮する(Kinstaは最初から高速です。最適化をしなくてもGoogleの許容可能なパラメータの範囲内です)
  • Expiresヘッダー (Kinstaではサーバーレベルでキャッシュヘッダーが有効にしてある為、有効にする必要はありません。)
マネージドWordPressホスティングでのPageSpeed Insights

マネージドWordPressホスティングでのPageSpeed Insights

Kinstaでは、上記と同じ指摘事項の一分しか改善する必要がありません。

Kinstaではステップの数は最初から少ない為、満点を取るのに上記の時間の半分以下しかかかりませんでした。

KinstaでPageSpeed Insightsの満点!

KinstaでPageSpeed Insightsの満点!

モバイルの点数はこちらにあります。

KinstaでモバイルでもPageSpeed Insightsの満点!

KinstaでモバイルでもPageSpeed Insightsの満点!

Pingdomでの点数の改善前と改善後の結果もあります。

PageSpeed Insightsに沿った最適化の前のスピードテスト

Kinstaの最適化が行われる前のPingdomの速度テストの結果です。Kinstaの改善前のウェブサイトは、改善前の共有ホスティングよりも200ms以上速いことにが興味深いです。

PageSpeed Insightsに沿った最適化の前のスピードテスト

PageSpeed Insightsに沿った最適化の前のスピードテスト

PageSpeed Insightsに沿った最適化の後のスピードテスト

Kinstaの最適化が行われた後のPingdomの速度テストの結果です。

PageSpeed Insightsに沿った最適化の後のスピードテスト

PageSpeed Insightsに沿った最適化の後のスピードテスト

追加のページスピード改善

本チュートリアルでは、Google PageSpeed Insightsのための最適化だけをご紹介しました。実際には、以下を実施することによりさらに読み込み時間の改善ができます。

それに、当社のウェブサイト速度最適化の初心者向けガイドには、さらに多くの工夫をご紹介します。

まとめ

本チュートリアルの目的は、Google PageSpeed Insightsの警告の意味と改善方法をより詳しく説明することです。この内容をよく理解していただくと、紹介した戦略のいくつかを大規模のウェブサイトに適用することができます。もちろん、大規模のウェブサイトだと満点を取得するのはほぼ無理ですが、取得しなくてもOKです! どうしても取得したいなら、頑張らないといけません。当社のアドバイスはあなたができるスピード改善策を全部実施することです。そうすると必ず結果が出ます。本当に重要なのは、あなたのウェブサイトのスピードと知覚されるパフォーマンスであることを忘れないでください。点数に夢中にならない方がいいです。

共有ホスティングとKinstaのWordPress用微調整されている環境の違いも興味深いです。当社のスピードが基本設定のままでも共有ホスティング会社の最適化後のスピードより速いです。あなたの時間の価値を考えた方がいいでしょう。基本設定のままでも速いものをお探しのあなたならKinstaのマネージドホスティング環境が対応できます。

次回、お客様に点数を向上するように頼まれたときに上記の最新の工夫を覚えておきましたので、対応できますね。重要なポイントが見逃されていると感じている方は是非コメントを残し、教えてください。今後GoogleのPageSpeed Insightsを使用して大規模なケーススタディを行いますので、お楽しみください。

18
シェア