WordPress初心者がGoogleのPageSpeed Insightsで100点を取る方法

2017年12月27日


WordPress超初心者で使い方もなれていない状態でもGoogleの提供するPageSpeed Insightsで100点になった方法をここでは説明したいと思います。これがいい方法かもわかりませんが、取りあえず100点にする為に行った事を順番で説明します。(この記事の上から順番でやって行きました。)

GoogleのPageSpeed Insightsとは

Googleの提供するPageSpeed Insightsは、WEBサイトページの速度に関するパフォーマンスを計測して、スコア付けや、改善方法を提案してくれるサービスです。ブログを見てくれる人が表示速度が遅いと、見ずに帰ってしまう事もあります。

そういった事を改善するのは、ブログ開設初期でやっていた方が楽だと思います。その為にPageSpeed Insightsである程度、高評価であるほうが色んな意味でも、訪問者にストレスを与えないサイト作りになるので、あらゆる点で有利だと思います。

以下はPageSpeed InsightsについてGoogleからの引用です

Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します。URL を 2 回(モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ)取得します。

PageSpeed のスコアの範囲は 0~100 ポイントです。スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します。なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります。
PageSpeed Insightsについて

PageSpeed Insightsで100点にする手順

ここから超初心者HTMLやCSSなどについても全く知識が無いので、この方法が後でどういう不具合があるかはわかりませんのでご注意ください。本当にど素人で玄人の人が見れば笑うかもしれないのでご了解ください。

エックスサーバーで独自ドメインを取得してWordPressでブログを始めた

今まで無料ブログでは何度かブログをしていましたが、独自ドメインを取って、少し真剣にやってみたく、さらにWordPressでブログを始めたかったので、一連の流れが簡単そうだったエックスサーバーと契約し独自ドメインを取得し、WordPressを自動インストールして、ブログを始める手順を取りました。

一連の流れは本を一冊購入したので比較的簡単に行えました。そこで以前、無料ブログをやっていた時からPageSpeed Insightsは知っていましたが、その時はもう点数はボロボロでした。WordPressでブログを始めるならそれも改善したいと色々見て、まず良いテーマは無いか探しました。

WordPressテーマをLuxeritas(ルクセリタス)にする

WordPressのテーマは色々なものがあり、初心者ではどれがいいのかイマイチ分からず、購入した本のテーマを取りあえず使いましたが、レイアウト的にもイマイチでしたし、PageSpeed Insightsの点数も初期段階ではそれほど高くもありませんでした。

そんな中、ネットで色々探していた時に、WordPressテーマでLuxeritas(ルクセリタス)を見つけました。特徴としてはSEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPressテーマという事で、こちらのテーマを選ばせて頂きました。

上記の、ページで詳し内容やダウンロード後の設定方法も載っていますので、ぜひご参考下さい。こういったものを作って頂いている事に感謝したいと思います。本当に有難うございます。

高速化用 htaccessをサーバーに追加する

テーマをダウンロードした後は先ほどの以下のように進めました。

1.ワードプレス管理画面の左メニューより【Luxeritas】をクリック

2.【高速化用 htaccess】タグをクリック

3..htaccess に以下の記述を “追記” してください(上書きは不可)と書かれている以下のソースを全てコピー

 

 
4.エックスサーバーのサーバーパネルにログインして【.htaccess編集】をクリック

 

 
5..htaccessを編集するドメインを選択

6..htaccessの編集を選択して記述を消さずにに【#ENDWordPress記述を消さずそれ以下にコピーしたソースを張り付け

 

 

*私はエックスサーバーで対応出来ましたが、各サーバーによって変わるかもしれません。また、無料ブログ等の場合の方法は分かりません。

 

jQueryの読み込み方法・Javascriptの設定

細かい内容はLuxeritas Themeで見て頂ければと思いますが、ここでは私や行った設定の画面です。

 

CSSの設定

 

 
*ウィジェット用のCSSは特段点数に影響が無かったので省略しますが、いらないものはチェックを外せばいいと思います。

圧縮・高速化の設定

 

 

AMPの設定

 

PageSpeed Insightsで100点

上記を上から順番にやっていったらPageSpeed Insightsでモバイル・パソコン共に100点という結果になりました。

 

 

 
但し、ここからブログをやって行くならば、色んなプラグインや広告も入ると思います。この点数はあくまで初期で、まだ投稿も少ない状況下だからこそと言う点が大きいと思います。PageSpeed Insightsで100点になっている時のプラグインや広告の有無やその他については以下の通りです。

Google Analyticsを設置していない

Google Analytics等のアクセス解析は入れていない状況です。Google Analyticsを設置すれば1点ほど減点されるようです。Google Analyticsを設置した状況でのPageSpeed Insightsで100点は今の段階ではよくわかりません。

Google AdSense等の広告を設置していない

Google AdSense等の広告を設置すれば、どうも点数が下がるようです。そのあたりの改善点も現時点ではわかりませんでした。基本的に入れてもサイドバー1個、記事下2個程度入れても、減点は2・3点であると思います。

WordPressでインストールしたプラグイン

PageSpeed Insightsで100点になっている時のプラグインは以下の通りです。
・Category Order and Taxonomy Terms Order(カテゴリ等の並び替えが出来る)
・EWWW Image Optimizer(WordPress 内の画像のファイルサイズを縮小)
・IP Geo Block(悪意あるアクセスからサイトを守る)
・Simple Page Ordering(固定ページ等をドラッグ&ドロップで並び替えや階層移動)
・TinyMCE Advanced(ビジュアルエディター)
・WebSub/PubSubHubbub(投稿時に、自動でGoogle等にPush通知)
・WordPress Ping Optimizer(投稿時だけping 送信する)
・WP Multibyte Patch(日本語版WordPressのマルチバイト文字の取り扱いに関する不具合の強化・修正)
・WP-Optimize(投稿リビジョン等を最適化してくれる)
・XML Sitemap & Google News feeds(sitemap.xml を自動生成)

各プラグインの細かい説明は省略します。

各記事の点数は下がる可能性が大きい

各記事では、画像も多かったりし色々な要素で点数が下がる事が多いと思います。このブログのURLで計測すれば100点でも、各記事のURLで計測すれば点数は下がる可能性も大きいみたいです。特にこのブログではTOPページでは各記事が折りたたまれた状態で並ぶので、特段減点も無いようですが、この記事だけを見れば、どちらも95点で、画像を最適化するようにとの指摘がありました。

初心者なのでまだまだ分からない点が多いので、このあたりはどうすればいいか、検討しながらやって行きたいと思います。


ブログを始めて行けば、私も無料ブログは経験があるので、記事が増えたり、サイドバーに何か設置したり、WordPressの場合はプラグインが豊富なようで、多く入れてしまったりして、段々とPageSpeed Insightsでの点数は下がると思います。

ただ、普段から気にして時折でも訂正しておけば、100点は維持できなくても、まあ85点以上の合格点ラインを維持するようにはしてみたい所です。ここでの100点はかなり条件があるので、広告無し、解析無しでは面白みも無いと思います。

ずっと100点は無理なので、減点しそうな広告や解析は先に入れて95点くらいで維持できれば十分なような気がします。