サイトの表示速度を改善!Google測定で効果がすぐ確認できる!

   

サイトの表示速度を改善!Google測定で効果がすぐ確認できる!


Googleの提供する「PageSpeed Insights」で、
サイトの表示速度を測定してみると ... 散々な結果が!


でも、これが現状のサイト状態です。

測定結果の「数値」もそうなんですが、
各詳細を表示してみると、「修正項目」が実に多い。


「修正方法」が表示されているんですが、
何をどうやって修正したらいいのやら・・・(汗)。



僕のサイト(WordPressブログ)の
サイト表示速度を改善してみた、簡単な対策方法を紹介します。


今回行なった、簡単にできる「3つ」の方法だけで、
Googleの測定結果で、すぐに効果が確認できたので、
あなたのサイトの「表示速度改善」の参考に、ぜひ一読してみてください♪


サイトの表示速度とGoogle「PageSpeed Insights」

Webサイトの表示速度は、ユーザーの利便性はもちろんのこと、
Google検索エンジンの表示順位にも、大きく関わっています。


Google社による『Webサイトのパフォーマンスの基準』については、
サイト速度検証ツール「PageSpeed Insights」で明確にされています。

その中でも、サイトの表示速度に関しては、
「速度に関するルール」で、以下の10項目が挙げられています。

【速度に関するルール】

  • リンク先ページでリダイレクトを使用しない
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソースを圧縮する
  • 画像を最適化する
  • CSS の配信を最適化する
  • 見える範囲のコンテンツを優先する
  • レンダリングを妨げる JavaScript を削除する
  • 非同期スクリプトを使用する


Google「PageSpeed Insights」で測定

Googleの「PageSpeed Insights」を使用すると、
現状のサイト表示速度の測定結果とともに、
すべての端末で、ウェブページの読み込み時間を短くする方法の提案が表示されます。


では実際に、
「表示速度の対策がなされていない状態」で、測定してみましょう♪


サイト表示速度の改善前の「Google PageSpeed Insights測定結果」


ご覧のとおりです w。

改善前なので、まぁ当然と言えば当然なんですが・・・(汗)。


サイト表示速度が遅い原因を改善

サイトの表示速度が遅い原因改善するために、
今回行なったのは、簡単にできる「3つ」の方法だけです。


このたった3つの対策だけで、
表示速度がどれぐらい改善され、Googleの測定結果に反映されるのか!?


「CSS配信の最適化」の改善対策

まずは、CSS配信の最適化の改善対策として、
WordPressのプラグイン『Autoptimize』をインストールして有効化!

「Autoptimize」は、簡単に複数のファイルをまとめて圧縮してくれて、
HTML・JavaScript・CSSファイルを縮小・最適化することで、
ページ表示速度が遅い原因の、改善を図るプラグインです。


ちなみに、Autoptimize Settingsの設定では、

  • HTML Options(Optimize HTML Code?)
  • JavaScript Options(Optimize JavaScript Code?)
  • CSS Options(Optimize CSS Code?)

の項目にチェックを入れ、キャッシュをクリアして設定反映させています。


「圧縮を有効にする」の改善対策

続いて、『WP Fastest Cache』をインストール!

この「WP Fastest Cache」は、WordPressのキャッシュ系プラグインですが、
キャッシュ機能の他にも、HTML・CSS・JavaScriptの圧縮や結合ができます。


代表的なキャッシュプラグイン「W3 Total Cache」は、高性能なんですが、
初心者が使いこなすには相応の技術知識が必要で、トラブルも多いようです。

その点「WP Fastest Cache」は、初心者でも手軽に使えるので、
キャッシュプラグインの利用に慣れていない場合は、特におすすめです!



インストールして有効化したら、『設定』で 言語を「日本語」にして、

  • キャッシュ: 有効にする
  • Preload: Create the cache of all the site automatically
  • ログインユーザー: ログインユーザーに対してキャッシュを表示しない
  • 新しい投稿: 投稿や固定ページが公開されたときに全てのキャッシュファイルをクリアする
  • HTML の圧縮: HTML を圧縮してページサイズを小さくする
  • CSS の圧縮: CSS ファイルを圧縮する
  • CSS の結合: CSS ファイルを結合してHTTPリクエスト数を減らす
  • JS の結合: JavaScript ファイルを結合してHTTPリクエスト数を減らす (header)
  • Gzip 圧縮: サーバーから送信されるファイルをGzip圧縮する
  • ブラウザキャッシュ: ブラウザキャッシュを利用してロード時間を短縮する

の項目にチェックを入れて変更を保存し、
『キャッシュの有効期限』は、「6時間毎に1回」に設定しています。


サーバーの拡張モジュールで高速化対策

サイトの表示速度を改善!Google社の開発の拡張モジュール「mod_pagespeed」


そして最後は、サーバーの高速化ツール、
Google社の開発の拡張モジュール『mod_pagespeed』をインストール!

これは、WordPressをインストールしているサーバー、
つまり、ブログを格納している「レンタルサーバー」にインストールします。


この「mod_pagespeed」は、
Google社の開発・提供している Apache拡張モジュールです。

「Apache」には、機能を拡張させるモジュールがあり、
そのなかの1つとして、Google 社の開発したのが「PageSpeed Module」です。



mod_pagespeedは、
「サイトを閲覧する人がブラウザで体感する表示速度を向上させる!」
といった目的のもので、サーバーの処理を軽快にするものとは違う様です。

そのためなのか、サーバーへの負荷が若干かかるみたいです。

『mod_pagespeed設定』機能は、
Google社により開発された拡張モジュール「mod_pagespeed」を使用し、
サーバー側でWebサイトの画像、キャッシュ、JS/CSSなどの最適化処理を実施する機能。

この機能を利用すると、Webサイトアクセス時に発生する無駄な通信を削減し、
Webサイト表示速度の向上を図ることが可能となる。



「主な最適化処理」としては、

  • 画像の最適化・圧縮・リサイズ
  • CSS や JavaScript ファイルを連結、縮小、またはHTML へのインライン化
  • キャッシュの有効期間の延長、ドメインシャーディング、ドメインの書き換え
  • JavaScript と画像の遅延ロード など ...

他のプラグインとカブる機能がありますが、
表示崩れなど、見た目の異常は特になさそうないので、現状は「ON」の状態です。


ちなみに、僕が利用しているエックスサーバーでは、
モジュールのインストールはもちろん、
「ON」「OFF」の設定変更が、ワンクリックでできるので超便利です。d^^


Google測定結果は?サイト表示速度の改善効果

さて、これで先ほど測定した、
Google「PageSpeed Insights」の測定結果は、どうなったのか!?


サイト表示速度の改善後の効果!「Google PageSpeed Insights測定結果」


  • 【評価数値】
    モバイル速度「48/100」 / パソコン速度「61/100」だったのが、
    モバイル速度「72/100」 / パソコン速度「88/100」にUP!

  • 【リソース】
    「スクロールせずに見える ~~ ブロックしている JavaScript/CSS を排除する」で、
    レンダリングをブロックするスクリプトリソースが 15 個CSSリソースが 13 個 だったのが、
    スクリプトリソース が 1 個CSSリソースが 5 個 に減少!

  • 【圧縮】
    修正を考慮だった項目「圧縮を有効にする」は、『ルールに合格』に!



まだまだ、改善の余地があるとは思いますが ...
たった3つの簡単な対策で、まずまずの効果が確認できたので、
今回の「表示速度改善」は、とりあえず これでOKとしておきます。d^^;



あなたのサイトの「表示速度改善」の参考にしてみてください♪


トラブル等については、一切の責任を負いかねますので、
ご了承の上、あくまで「自己責任」で、インストール・設定などを行ってください。





【追記】
その後、たまに PC表示が崩れる場合が確認されたので、
現在は、プラグイン「Autoptimize」を無効化しています!






プラグイン  ,


お疲れさまでした。
最後まで読んでいただき、ありがとうございます。

タメになったら、シェアしてください。 めっちゃテンション上がります!


PRIDE(プライド)購入特典!『PRIDE実践術!~虎の巻~』


「ブログでは決して触れられない内容」を、初心者にもわかりやすく解説した、 PRIDE購入者のための『PRIDEノウハウで失敗しない実践マニュアル』が完成!


@弐代目 BZ流 成功の法則!
PRIDE実践術!~虎の巻~- 副業で月収15万円への近道 -


PRIDE(プライド)と 購入特典の「詳細」をみる



PRIDE』+『PRIDE実践術!~虎の巻~』で 継続的な安定収入!!

PRIDE(プライド)ノウハウによる「資産構築型トレンドアフィリエイト」で、
失敗や回り道せずに『本当の意味で資産となるブログサイトを作る!』ために、
ぜひ、このオリジナル特典『虎の巻』を片手に、すぐにでも実践してください!

(※ PRIDE購入者様への「オリジナル購入特典」としてのみ入手可能です。)


【購入者特典をしっかり受け取る方法】


『ご購入の前にクッキーを確認ください!』

クッキーが有効になっていないと、特典をお渡しすることができなくなりますので、
特典を確実に受け取るために、クッキーなどが有効になっているかご確認ください。

クッキーが有効か確認する

※パソコンのクッキー設定方法は、クッキーの確認・設定方法 でご確認ください。



決済画面で下記の表示が確認できると、特典を受け取ることができます。

PRIDE(プライド)購入特典!『PRIDE実践術!~虎の巻~』の受け取り方法
※表示されていない場合は、購入後に特典を受け取る事ができませんので、
お使いのパソコンの「クッキー設定を有効にする」必要があります。


購入者特典付き「PRIDE」ご購入はこちら




人気記事ランキング!

ご購入者(教材・ツール)「豪華特典プレゼント」一覧! 1
ご購入者(教材・ツール)「豪華特典プレゼント」一覧!

商材を購入してくれた方に、このページに掲載している豪華特典を全部プレゼント致します!! また『PRIDE(プライド)』をご購入の方は、「PRIDE購入者オリジナル特典」として、@弐代目 BZ流 成功の法則『PRIDE実践術!~虎の巻~』も併せて受け取ることができます!

PRIDE(プライド)教材の購入特典!『PRIDE実践術!~虎の巻~』 2
PRIDE(プライド)教材の購入特典!『PRIDE実践術!~虎の巻~』

PRIDE(プライド)ご購入のオリジナル特典として、失敗や回り道せずに『本当の意味で資産となるブログサイトを作る方法』を、PRIDEを実践した経験から一冊にまとめました!この購入特典では「ブログでは触れられない内容」を中心に、初心者にもわかりやすく解説しています。

トレンドブログでロングテールキーワード?!資産ブログの作り方! 3
トレンドブログでロングテールキーワード?!資産ブログの作り方!

トレンドブログと資産ブログは、対極に位置しています。しかし、実際に僕が行なっているのは、ロングテールキーワードによる『資産構築トレンドブログ』です!その戦略の概要と、ヒントを教えちゃいます♪ まずは、トレンド・キーワード・資産ブログについて、把握しておきましょう。

ブログアフィリエイト初心者が稼ぐ方法!教材やツールは必要か?! 4
ブログアフィリエイト初心者が稼ぐ方法!教材やツールは必要か?!

アフィリエイトに限らず、ビジネスで収入を得るには、必ずビジネスモデル(稼ぐためのノウハウ)が存在しています。「初心者がブログアフィリエイトで稼ぐ方法」と、それに纏わる「有料の教材やツール」についてです。アフィリエイトで稼ぐために、容量の教材やツールは必要なのか?!

WordPressブログテーマのおすすめは?アフィリならコレ! 5
WordPressブログテーマのおすすめは?アフィリならコレ!

いざ、WordPressブログテーマを購入!と思っても、どのテンプレートを選んだら良いのか?せっかく有料テーマを買うのだから、SEO効果を期待したいし、ましてや「失敗はしたくない」!『アフィリエイトブログに最適で、おすすめのWordPressテーマ』を紹介します。

キーワードツールのおすすめは?アフィリエイトに最適なのはコレ! 6
キーワードツールのおすすめは?アフィリエイトに最適なのはコレ!

アフィリエイトで重要なキーワード選びには、時間をかけて慎重に行う必要があります。
その際の手助けになるばかりか、時間短縮もできてしまう『キーワードツール』! 思わぬお宝キーワードを探し出す「アフィリエイトに最適で おすすめのキーワードツール」について紹介します。

  あわせて読みたい関連記事

WordPress プラグインJetpackの設定・連携の方法!
WordPress プラグインJetpackの設定・連携の方法!

よく使う機能がまとめて使用できるWordPressの公式プラグイン「Jetpack」。 便利なんですが、利用するためには「WordPress.comアカウントとの連携」が必要です。『JetpackプラグインをWordPressに設定・連携する方法』を紹介します。

【WordPressプラグイン】おすすめ記事をブログに自動表示!
【WordPressプラグイン】おすすめ記事をブログに自動表示!

ブログの滞在時間を延ばす方法として、おすすめ記事(関連記事)を表示することは有効な手段の1つです!ユーザービリティーの向上はもちろん、内部SEOの対策としても効果があります。そんな「おすすめ記事」を自動表示できる、便利なWordPressのプラグインを紹介します。

WordPressでスマホに対応する方法!SEO対策をチェック!
WordPressでスマホに対応する方法!SEO対策をチェック!

Googleのアルゴリズム更新(2015年4月)で、PCとモバイルの検索が別々になりました。スマホ用SEO対策として、まずは『スマホ対応ラベル』をチェックしてみましょう♪対応できていない場合のための『WordPressでスマホに対応する2つの方法』を紹介します!

WordPressでカテゴリの順番を変更!おすすめのプラグイン
WordPressでカテゴリの順番を変更!おすすめのプラグイン

投稿記事をテーマごとにグループ分けできて、ブログ運営する上で便利な「カテゴリ機能」! WordPressブログでは簡単に設定できるんですが、カテゴリの順番を変更することができません。 今回は、カテゴリの表示順を並び替えるための、おすすめのプラグインを紹介します。

WordPressプラグイン!おすすめの便利な無料プラグイン一覧
WordPressプラグイン!おすすめの便利な無料プラグイン一覧

今まで実際に使ってみた中で『おすすめのWordPressプラグイン』を厳選し、8つの種類に分類!各プラグインの便利な機能の説明付きで目的別一覧にしていますので、欲しい機能を探しやすくなっています。無料で使用できるので「プラグイン選び」の際の参考にしてみてください♪