PageSpeedInsightsの評価を上げてサイト表示速度を早くする!比較的シンプルで簡単な方法

こんにちは!!

サイトの表示速度を早くするため、いろいろ摸索中のアラサー女子です(*^^*)/

参考記事はこちら。

運営するサイトの読み込み速度が遅いと感じたときにやるべきこと・やったほうが良いこと
こんにちは!! マイペースにポントピ更新中のアラサー女子です(*^^*) 最近、自分のサイトを開く度に、読み込み速度が遅いと感じるよ...
Simplicityとロリポップ!ど素人でも出来たコピペでカンタンにサイト表示を高速化する方法が神
前回、ページの読み込みが遅くなったという記事を書きました。 最適化案の中に、「ブラウザのキャッシュを活用する」という項目があり、方...



現在の状況

上記を実践した2日後、PageSpeed Insightsでテストしてみた結果がこちら。

モバイル表示の最適化度

ポントピ:54/100

 

もうひとつのサイト:50/100

モバイル表示の最適化についての提案

どちらのサイトも、以下同文でした。

パソコン表示の最適化度

ポントピ:68/100

もうひとつのサイト:80/100

パソコン表示の最適化についての提案

ポントピだけ、「圧縮を有効にする」が残っちゃってますが、それ以外は同文でした。

ポントピ:

もうひとつのサイト:

改善対策案

これを踏まえ、ひとつずつ改善対策案を練ってみました。

実践したら、その都度追記していきます。

サーバーの応答時間の短縮について

これは、サーバーからサイトを読み込むまでに0.2秒以上掛かる場合に表示される項目です。

ポントピの場合、Google アナリティクスでサイト全体の表示速度を調べたところ、平均読み込み時間が11.73秒、

Googleが提供しているモバイル表示速度を計測するツールで調べたところ、6.0秒という結果でした。

モバイルサイトの表示速度をテストするーGoogle

もうひとつのサイトは、Google アナリティクスでの平均読み込み時間が10.14秒、

Googleが提供しているモバイル表示速度を計測するツールでの結果が、8.0秒という結果でした。

どちらも、0.2秒とは程遠い数字・・・

開くのに3.0秒以上掛かるサイトは、ユーザーの離脱率が45%以上になると言われていて、SEO的にかなりの悪影響が・・・

こちらの項目を改善するためには、使用中のサーバーをどうにかするしかないようです。

改善対策案:実践すること

サーバーのPHPを最新化するだけで、表示速度が上がることがわかりました。

参考

WordPressで表示速度を高速化する方法を、初心者の方でも分かるようにまとめました。キャッシュを活用する方法からコードを圧縮するプラグインまで。

当サイトはロリポップ!のスタンダードプランで運営中で、現在PHPは5.6モジュール版となっています。

それを、最新の7.1モジュール版にすることで、高速化を測ってみようと思います。

参考

実践したら、追記します!

追記①:実践しました!

ロリポップのPHPを最新にしてサーバーの応答時間を短縮する方法
以前、こちらの記事を書きました。 今回は、「サーバーの応答時間を短縮する」ために、使用中のサーバーロリポップのPHPを最新バージョ...

効果のほどは、こちら。

ポントピ:Google アナリティクスでの平均読み込み時間が7.95秒まで加速。

3.78秒早くなりました!!

Googleが提供しているモバイル表示速度を計測するツール(以下、モバイル計測ツールと書きます)で調べたところ、5.0秒且つ「良好」という結果になりました!!

もうひとつ運営中のサイト:Google アナリティクスでの平均読み込み時間が12.66秒となぜか2.52秒遅くなりました。

が、モバイル表示速度は6.0秒と2.0秒早くなりました。

もうひとつのサイトの方が記事数が多いため、反映に時間が掛かっているのでしょうか・・・(^^;

次なる作戦を実践し、様子を見ようと思います!!

追記②:サーバーの応答時間短縮についてのご報告

PHPのバージョンを上げたにも関わらず、PageSpeed Insightsの「最適化についての提案」には、まだこの項目は残っちゃってます。

が、応答時間は0.46秒とかなり高速に。

冒頭でも書いたように、サーバーの応答時間が0.2秒以下にならないとこの項目は消えないので、もう気にしないことにします。

実際、早くなったのは体感出来ているので(*^^*)v

CSS、JavaScriptを縮小する

サッパリ意味がわからなかったので、こちらを参考にさせていただきました。

今回は、リソースを縮小してWordpressブログを高速化する方法です。これまで、このブログには以下のような高速化を一つ一つ施してきました。 ブラウザキャッシュの設定 リソースを圧縮して転送サイズを減らす 画像を最適化(ロスレス圧縮)

改善対策案:実践すること

このプラグインを入れたことによって起こり得るリスクは特になさそうなので、導入予定です。

導入後、どの程度の効果が得られるのか楽しみです( ´ ▽ ` )

実践後、追記します!

追記:実践しました!

JavaScriptとCSSを縮小してサイトの表示速度をあげる!プラグイン「Autoptimize」設定方法
こんにちは!! サイトの表示速度を上げるため、いろいろ実践中のアラサー女子です(*^^*) 前回までに実践したのはこちらの2つ。 ...

効果のほどは、こちら。

ポントピ:Google アナリティクスでの平均読み込み時間が5.24秒まで加速。

導入前と比較して、2.71秒早くなりました!!

モバイル計測ツールで調べたところ、4.0秒に。

こちらも、1.0秒だけですが早くなりました^^v

もうひとつのサイト:Google アナリティクスでの平均読み込み時間が13.06秒と0.4秒遅くなりました・・・

モバイル表示速度は6.0秒のまま、変わりませんでした。

こちらのツールでも、速度を計測してみました。

結果、

ポントピ:パフォーマンススコアはB評価・・・

Aを目指します!!!

もうひとつのサイト:A評価でした!!!

ロード時間も2.7秒と早めの結果に・・・

これは、効果があったと言えるのではないでしょうか(*^^*)

Google アナリティクスの場合、サイト全体の平均読み込み時間が表示されるので、こちらの評価と差が出るのかもしれません。

どちらも良い評価が出たら安心出来るので、今後もいろいろと実践して高評価を目指したいと思います。

ちなみに、PageSpeed Insightsでの「モバイル最適化度」はどちらも得点がUP。

ポントピ:70/100に

もうひとつのサイト:71/100に

「最適化についての提案」は、どちらも前回と同文でした。

「パソコン最適化度」も、得点UP!!

ポントピ:76/100に

もうひとつのサイト:87/100に(高評価!)

「最適化についての提案」については、もうひとつのサイトのクリア項目が増えているのに対し、ポントピがクリア出来ていないので、引き続き改善を目指します。

ポントピ:

もうひとつのサイト:

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

言葉の意味を理解するため、こちらを参考にさせていただきました。

参考

Googleの「PageSpeed Insights」でWebページの表示速度を測定した結果を受けて、これまでに「圧縮を有効にする」「ブラウザのキャッシュを活用する」「画像を最適化する」の、3つの対策をおこなってきました。今回は、「JavaScript、CSSを縮小する」について対処していきたいと思います。

どうやら、こちらも上記プラグイン「Autoptimize」で改善出来そうです。

ただ、設定するにあたり細心の注意が必要のようなので、ひとつひとつ実践していき、最も効果のある設定を探りたいと思います。

画像を最適化する

記事が増えるにつれて、記事中に使用する画像も比例して増えるので、これがサイトを重くしている原因のひとつになっているようです。

改善対策案:実践すること

当サイトには、すでに画像を自動で縮小してくれるプラグインを入れています。

WordPressを高速化!EWWW Image Optimizerで画像を圧縮して記事の表示を早くする手順
わたしは、サイトをWordPressで運用していますが、記事が増えるにつれて画像も比例して多くなってきました( ´▽`;画像のファイルって、...

導入時に設定済みですが、うまく機能していない可能性もあるので、再度設定を見直してみようと思います。

追記:実践しました

「画像を最適化」してPageSpeedInsightsの評価を上げる!EWWW Image Optimizerを見直してみた
こんにちは!! サイトの表示速度を上げるため、日々お勉強中のアラサー女子です。 今回は、PageSpeed Insightsで指摘を...

結果、「最適化についての提案」に項目は残っちゃってますが、指摘されていた画像数は減りました。

効果はあったと思われます(*^^*)v

圧縮を有効にする

WordPressが重くなる要因のひとつとして、考えられるのがプラグインの利用です。

中でも、人気記事をかっこよく表示してくれる「WordPress Popular Posts」が、サイトを重くしている要因になるのだそう・・・

改善対策案:実践すること

当サイトも導入しているプラグインなのですが、サイトを軽くするため、停止してみることも検討中です。

他にも、不要だなと思うプラグインを停止またはアンインストールするなど、プラグインの見直しも視野に入れて、高速化の方法を探っていきたいと思います。

追記:「WordPress Popular Posts」の設定を変更しました!!

「WordPress Popular Posts」停止する前に試してみて!サイト表示速度を早くする設定方法
こんにちは!! サイトの表示速度を上げるため、いろいろと摸索中のアラサー女子です(*^^*) 今回は、サイトを重くすると有名なプ...

結果、かなりの効果が得られました。

<PageSpeed Insights:最適化テスト結果>

ポントピ:モバイル

もうひとつのサイト:モバイル

ポントピ:パソコン

もうひとつのサイト:パソコン

「最適化についての提案」では、ポントピ:パソコンで中々消えなかった「圧縮を有効にする」が消え、残すところ改善項目は4つになりました。

ただ、「修正方法を表示」を開くと、それぞれ指摘されている項目数が減っているので、効果は実感出来ます。

また、これ以上どうしようもない項目もあるので、あとは出来るものだけをひとつずつ修正していこうと思います!!

<GTmetrix:サイト表示速度テスト結果>

ポントピ:A評価!!!

もうひとつのサイト:A評価!!!

<Googleモバイル計測ツール:モバイルでの表示速度テスト結果>

ポントピ、もうひとつのサイト共に同じ結果に。

テストする時間帯によっても変わると思いますが、両サイトとも圧倒的に表示速度が早くなっています。

これは、嬉しい限り(*^^*)v

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

キャッシュの意味は、こちらを参考に。

キャッシュとは?古いウェブサイトが表示され続けるなどする理由の多くにキャッシュが残っている、という状態があります。なぜキャッシュが残っていると最新の状態が表示されないのか、その理由とクッキーとの関係を簡単に説明しています。

改善策として、こちらを実践済みです。

Simplicityとロリポップ!ど素人でも出来たコピペでカンタンにサイト表示を高速化する方法が神
前回、ページの読み込みが遅くなったという記事を書きました。 最適化案の中に、「ブラウザのキャッシュを活用する」という項目があり、方...

が、「最適化についての提案」に残ってしまっているので、他の方法を調べてみました。

結果、プラグインを導入すると効果があるとわかりました。

改善対策案:実践すること

わたしが使用中のテーマ、Simplicityの開発者であるわいひらさんは、キャシュプラグインの使用を推奨されていません。

先日メールで、以下のような報告をもらいました。 特定のページで時々PC向け記事がモバイル向け記事として表示される これは、Wordpressプラグインにファイルを生成するタイプのものがありますが、そういったプラグインが悪さをしているとい

「W3 Total Cache」ならOKかなと思いましたが、やはりエラーが出たようで、推奨はされていません。

W3 Total Cache+エックスサーバー環境で500エラーが出たときのリカバリー方法の一例です。

効果はあるようなので、気にはなっていました。

が、不具合が出たとき、きちんと対処出来る自信がないため、リスクが高過ぎると判断し、諦めようとしたそのとき!

こちらの記事を発見!

Wordpressのページキャッシュプラグインの導入としては、最も入りやすいかと思われる「WP Fastest Cache」プラグインのインストール方法や、設定方法の紹介です。

いろいろと調べた結果、こちらのプラグインならリスクは低そう・・・

モバイル表示に効果を出したい場合は有料となってしまうとのことですが、最適化案のいろいろなことに効果がありそうなので、導入を検討しています。

こちらの記事も参考にさせていただきました。

今回は、キャッシュ系プラグイン『WP Fastest Cache』について解説していきます!!キャッシュ系のプラグインはあれこれ使ってきましたが、個人的にはこれがベストプラグインです。

実践したら、追記します!

追記:キャッシュプラグインの導入はやめました!

現時点で、数字的に効果が見られているので、リスクが高いとされるキャッシュプラグインの導入はやめました。

今後、どうしても必要になったとき、再度検討することにします。

一気にやるのは大変!焦らず、ひとつひとつ

サイト表示速度が遅いということは、せっかくページを訪れてくれようとした閲覧者をイライラさせ、離脱させます。

離脱率が高いサイトは、Googleさんからの評価が下がり、SEO的に悪影響を及ぼします。

そうなると、検索結果で表示される回数が減り、比例して収益も下がります。

正に、悪循環・・・(;゚Д゚)

魔のトライアル・・・

そう考えると、早く改善しなくちゃ!!!と焦る気持ちもありますが、焦って間違えて画面真っ白!なんてことになったら元も子もありませんので(^^;

ここは慎重に、丁寧に、確実に検討しながら、実践していきたいと思います。

追記をお楽しみに(*^^*)/

PageSpeedInsightsの評価を上げてサイト表示速度を早くする!比較的シンプルで簡単な方法
この記事をお届けした
ポントピの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク







役に立ったらからシェア♪

気になるからフォロー♪

関連記事



トップへ戻る