Simplicityのサイト上に「コピペ一発でSimplicityを結構高速化する方法」の記事を見つけました。
https://wp-simplicity.com/simplicity-speed-up/
この高速化は、.htaccessに、ブラウザキャッシュとリソース圧縮の設定を追加する手法です。設定コードをコピーし、.htaccessにペーストするだけで高速化が実現できるとのこと、是非、導入したい！と思いました。
先週から、AdSenseの広告を掲載を開始して表示スピードも落ち気味となっており、パフォーマンスの改善もしたいと思っていたところでした。
高速化設定前の表示スピードパフォーマンス
高速化の設定を行う前に、Google PageSpeed Insightsで、本サイトのトップページのURLを入力して、スピードを測定してみました。
PageSpeed Insightsとは
Google PageSpeed Insights は、Googleが提供するスマホやパソコン向けのページの表示パフォーマンスを測定するツールです。測定するページのURLを入力して、実行するとモバイル（スマホ）とDesktop（パソコン）それぞれのスピードスコアが表示されます。スコアはポイント制で、満点は100点です。改善すべき項目、改善を検討する項目も表示されます。
ページのコンテンツ量によってもスピード（スコア）が異なるため、トップと投稿の二つのページで計測を行いました。
モバイル・ホームページでのスコア
スコアは46でした。やはり少し遅めです。
［高速化後のスコアへ [fa class=”fa-arrow-down”]］
パソコン・ホームページでのスコア
デスクトップのスコアは、57でした。モバイルよりは良いですが、やはりもう少し良いスコアが欲しいです。PageSpeed Insightsでは、改善すべき点が多い（スコアが低い）場合は、点数表示の枠の色が赤になります。
［高速化後のスコアへ [fa class=”fa-arrow-down”]］
モバイル投稿ページのスコア
投稿ページのスコアはさらに低い42でした。測定したページ（AdSense ページ単位の広告の特徴と設置の仕方）は、文字数もあり、画像も多く使われています。
［高速化後のスコアへ [fa class=”fa-arrow-down”]］
パソコン投稿ページのスコア
パソコンでのスコアも低いスコアでした。
［高速化後のスコアへ [fa class=”fa-arrow-down”]］
改善項目
モバイル、パソコン共に以下の様なことが表示スピード向上のための改善項目として表示されました。
改善すべき項目
- 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さんの解説ページを拝見しました。
http://thk.kanzae.net/net/itc/t2286/
公開して下さっている.htaccessのコードには、設定内容についての解説コメントも加えられていました。以下、参照致します。
- Keep-Alive を設定
- MIME Type 追加
- プロクシキャッシュの設定（画像とフォントをキャッシュ）
- ブラウザキャッシュの設定
- Gzip圧縮の設定
上記、PageSpeed Insightsの測定後の改善項目に対応している様な内容に思えます。
早速、るなさんのご公開して下さっている高速化設定コードをコピーし、.htaccessのファイルに追加しました。
注意点
[fa class=”fa-exclamation-triangle”] 注意事項：
この方法は、サーバーのソフトがApacheでないと利用できません。ご利用のレンタルサーバーの仕様をご確認下さい。Wikipediaの解説ページ： Apache サーバー
高速化設定後の表示スピードパフォーマンス
上で紹介した同じページを、PageSpeed Insightsで測定を行いました。
モバイル・ホームページでのスコア
高速化設定後のスコアは、69になりました。設定前のスコアと比べると、23ポイントもアップしました！！
パソコン・ホームページでのスコア
スコアは81に上がりました！！ 高速化前と比べると24ポイントも増えています！
モバイル投稿ページのスコア
スコアは63です。高速化前のスコア42から21ポイント上昇しました！
https://www.blogging-life.com/amp-vs-std-page-speed-comparison/
パソコン投稿ページのスコア
スコアは高速化前の50から76に大幅に上昇しました！
感想
文字通りコピペ一発でパフォーマンス（スピードスコア）が大幅にアップしました。実際にページを表示してみても、早くなったことが体感できます。
この様な素晴らしい高速化の情報、コードを公開してくださったThought is freeのるなさんとご紹介くださったSimplicityのわいひらさんへの感謝の気持ちでいっぱいです。
るなさん、わいひらさん、本当にありがとうございました！！
コメントを残す（承認後表示されます）