コピペ一発Simplicity高速化のGoogle PageSpeed Insightsでの測定結果

Simplicityのサイト上に「コピペ一発でSimplicityを結構高速化する方法」の記事を見つけました。

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。 高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。 たったこれだけのことですが、かなりの高速化が図れます。 例、Simplicit

この高速化は、.htaccessに、ブラウザキャッシュとリソース圧縮の設定を追加する手法です。設定コードをコピーし、.htaccessにペーストするだけで高速化が実現できるとのこと、是非、導入したい!と思いました。

先週から、AdSenseの広告を掲載を開始して表示スピードも落ち気味となっており、パフォーマンスの改善もしたいと思っていたところでした。

スポンサーリンク

高速化設定前の表示スピードパフォーマンス

高速化の設定を行う前に、Google PageSpeed Insightsで、本サイトのトップページのURLを入力して、スピードを測定してみました。

PageSpeed Insightsとは

Google PageSpeed Insights は、Googleが提供するスマホやパソコン向けのページの表示パフォーマンスを測定するツールです。測定するページのURLを入力して、実行するとモバイル(スマホ)とDesktop(パソコン)それぞれのスピードスコアが表示されます。スコアはポイント制で、満点は100点です。改善すべき項目、改善を検討する項目も表示されます。

ページのコンテンツ量によってもスピード(スコア)が異なるため、トップと投稿の二つのページで計測を行いました。

モバイル・ホームページでのスコア

スコアは46でした。やはり少し遅めです。

高速化前モバイルホームページのスコア

[高速化後のスコアへ

パソコン・ホームページでのスコア

デスクトップのスコアは、57でした。モバイルよりは良いですが、やはりもう少し良いスコアが欲しいです。PageSpeed Insightsでは、改善すべき点が多い(スコアが低い)場合は、点数表示の枠の色が赤になります。

高速化前パソコンホームページのスコア

[高速化後のスコアへ

モバイル投稿ページのスコア

投稿ページのスコアはさらに低い42でした。測定したページ(AdSense ページ単位の広告の特徴と設置の仕方)は、文字数もあり、画像も多く使われています。

高速化前モバイル投稿ページのスコア

[高速化後のスコアへ

パソコン投稿ページのスコア

パソコンでのスコアも低いスコアでした。

高速化前パソコン投稿ページのスコア

[高速化後のスコアへ

PageSpeed Insightのスコアは、サイトによっても異なります。人気の高いサイトでも、スコアは低いところも比較的良く見かけます。スコアが低い、表示が遅いと絶対ダメだと言うことではありません。しかし、サイトの表示スピードは、早いほうが良いに越したことはありません。一般的な目安としては、最低でも50点はあった方が良いと個人的には思います。

改善項目

モバイル、パソコン共に以下の様なことが表示スピード向上のための改善項目として表示されました。

改善すべき項目

  • Leverage browser caching (ブラウザのキャッシュを活用する)
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content (最初に表示される画面での画面描写の障害となるJavaとCSSのスクリプトを削減する)
  • Enable compression (圧縮を有効にする)

改善を検討する項目

  • Optimize images (画像を最適化する)
  • Reduce server response time (サーバーの応答時間を短くする。)
  • Minify CSS (CSSを縮小/軽量化する)
  • Minify JavaScript (Javaスクリプトを縮小/軽量化する)
  • Minify HTML (HTMLを縮小/軽量化する)

.htaccess 設定による高速化

Simplicity高速化の記事でご紹介されているThought is freeさんの解説ページを拝見しました。

現在の当ブログのトップページの GTmetrix の解析結果です。 改訂前の記事から、かなり点数落ちてますが、 原因は、Google Adsense 貼り始めたからですw (以前は貼ってなかった) ...

公開して下さっている.htaccessのコードには、設定内容についての解説コメントも加えられていました。以下、参照致します。

  • Keep-Alive を設定
  • MIME Type 追加
  • プロクシキャッシュの設定(画像とフォントをキャッシュ)
  • ブラウザキャッシュの設定
  • Gzip圧縮の設定

上記、PageSpeed Insightsの測定後の改善項目に対応している様な内容に思えます。

早速、るなさんのご公開して下さっている高速化設定コードをコピーし、.htaccessのファイルに追加しました。

.htaccessのファイルは非常に重要なファイルなので、編集する前には必ず、ファイルをダウンロードしたり、複製してファイル名を変更しておくなどのバックアップを行うことをお勧めします。

注意点

注意事項:

この方法は、サーバーのソフトがApacheでないと利用できません。ご利用のレンタルサーバーの仕様をご確認下さい。Wikipediaの解説ページ: Apache サーバー

高速化設定後の表示スピードパフォーマンス

上で紹介した同じページを、PageSpeed Insightsで測定を行いました。

モバイル・ホームページでのスコア

高速化設定後のスコアは、69になりました。設定前のスコアと比べると、23ポイントもアップしました!!

高速化後モバイルホームページのスコア

パソコン・ホームページでのスコア

スコアは81に上がりました!! 高速化前と比べると24ポイントも増えています!

高速化後パソコンホームページのスコア

モバイル投稿ページのスコア

スコアは63です。高速化前のスコア42から21ポイント上昇しました!

高速化後モバイル投稿ページのスコア

追記: 本サイトをAMP対応にしました。同じページをPageSpeed Insightsで測定した所、スコアが83に上昇しました。(AMPページでのスコア)
サイトをAMP化! 通常ページとAMPページの表示スピード比較
AMPは、Googleが推進するモバイル端末(スマホ)用にウェッブページを瞬時に表示させるプロジェクトです。2016年の後半から、モバイル端末でのGoogle検索結果にAMPページが加えられて表示され...

パソコン投稿ページのスコア

スコアは高速化前の50から76に大幅に上昇しました!

高速化後パソコン投稿ページのスコア

感想

文字通りコピペ一発でパフォーマンス(スピードスコア)が大幅にアップしました。実際にページを表示してみても、早くなったことが体感できます。

この様な素晴らしい高速化の情報、コードを公開してくださったThought is freeのるなさんとご紹介くださったSimplicityのわいひらさんへの感謝の気持ちでいっぱいです。

るなさん、わいひらさん、本当にありがとうございました!!

スポンサーリンク
コピペ一発Simplicity高速化のGoogle PageSpeed Insightsでの測定結果
この記事をお届けした
Blogging Lifeの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする