ページスピードを改善(高速化)するために重要な3つのポイント【初心者向け】

Googleは、モバイルにおけるサイトの利便性向上をとても重視しています。

2016年6月、Google のモバイルフレンドリーアルゴリズムの中に、新たに「ページスピード」に関するアルゴリズムが追加されました。

ページスピード とは、

ウェブページが、ブラウザに表示される速度のことを言い、早く表示される「軽い」サイトが良いサイトであり、逆に、いつまでたっても表示されない「重い」サイトは、良くないサイトですよ!

ということですね。

そして、2018年3月には、Googleは『モバイルファーストインデックス』の開始を発表しました。

これからは、真剣にモバイル最適化や、ページスピードの向上に、力を入れなくてはいけない時代になりました。

 

ページスピード高速化のポイント

ページスピードを上げるためには、いくつかの要素がありますが、2018年の夏現在、高速化のポイントになってくるのが、

① サーバー選び

② サイトのテーマ選び

③ サイトのAMP対応

の3つだと思います。

この3つがダメだと、どんなに高速化を施しても、限界があります。

逆にいうと、この3つをしっかりと抑えておけば、モバイルサイトの高速化に関しては、ある程度、大丈夫ということになります。

それでは、3つの中でも、最も重要な サーバー選び から順番にみていきましょう。

サーバー選び

サーバー選びに関しては、少し前までは、エックスサーバーが人気で、私がサーバーをレンタルしはじめたときも、エックスサーバーにしておけば間違いない!というような風潮がありました。

いまでも エックスサーバーは、人気のサーバーのひとつですが、最近では、mixhost のほうが人気が高いようです。

mixhost については、人気ブログの 寝ログ より引用させてもらうと、

・サーバーの基本性能(ピュアSSD 採用等)による高速化
LiteSpeedサーバー 利用によるプログラム処理の高速化
HTTP/2 を利用した通信の効率化による高速化(QUICにまで対応)

引用:https://nelog.jp/mixhost

ということで、とにかく早い みたいです!

 

現在、私も mixhost へのサーバー移転を、真剣に検討しています。

mixhost について、詳しくは、 寝ログ 『 恋に落ちるレンタルサーバーMixHostに惚れた理由に詳しく書かれています。

恋に落ちるレンタルサーバーMixHostに惚れた理由
MixHostのレビューです。長年レンタルサーバーをいくつも使ってきましたが、その中で最もおすすめできるのはMixHost(ミックスホスト)だと僕は思います。とにかく格安で使えて高性能・高速・高安定、ここまでコストパフォーマンスの良い国内レ

どれだけサイトの高速化をやったところで、肝心のサーバーが遅かったら、まったく意味がありません。

 

以下のサイトから、実際のページスピードを計測できます。

PageSpeed Insights

私のサイトは、90台前半と、少し遅いです。

要因はいくつかありますが、

「最適化についての提案」の中に

サーバーの応答時間を短縮する

という提案が、一番目に表示されていました。

サーバー mixhost だったら、90台後半のスコアが出るかもせれません。

 

しかし、私のように、すでに、別のサーバーを利用している人は、サーバーの移転という、ちょっと面倒な作業が発生します。

サーバー移転が、自分でできればいいのですが、人にお願いする場合、それなりのお金もかかることになります。

ですので、

これから新規でサーバーを借りようと思っている人は、 mixhost にしておいたほうがいいでしょう。
 

サイトのテーマ選び

テーマには、有料で購入するテーマと、無料で配布されているテーマとがあります。

有料のほうが、いいように思いますが、無料のテーマのなかにも、素晴らしいテーマがたくさんあります。

そして、テーマにも、早いテーマと遅いテーマがありますので、デザイン性やカスタマイズ性も大事ですが、通常のサイトでも、高速化された早いテーマを選んでおいたほうが有利です。

また、AMP対応のことを考えると、やはりシンプルな無料のテーマでいいのではないかと思います。

どんなに頑張って、どんなにデコレーション(重たく)したところで、AMPページでは、削ぎ落とされてシンプルに(軽く)なってしったら、いろいろ(時間・労力・お金)がムダになってしまう可能性もあります。

*経験者は、語っちゃいます(笑)

 

ということで、

シンプルで、しかも無料で、なおかつ優れたテーマとしては、

先程紹介した 寝ログ を運営している「わいひら」さんが無料で公開している Simplicity というテーマがあります。

私も利用させてもらっている、お気に入りのテーマです

そして、Simplicity の後継版となる Cocoon が公開され、これが凄い!と評判です。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

WordPressテーマ「Cocoon(コクーン)」を作成しました。

以前公開した Simplicityの後継となるテーマです(※後釜ということで完全な互換性はないです)。

新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。

また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。

元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出てきたというのもあります。

こういった複合的な理由から、今回作成したのが無料テーマCocoonです。

出典:https://wp-cocoon.com/

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。

見た目はシンプルですが、初めての方でも感覚的に使えるように、便利な機能を織り込んで作りました。

また、100%GPLテーマなので自由にご利用いただけます。

出典:https://wp-cocoon.com/

もちろん、Simplicity は、今でも良いテーマです。

私も使わせてもらっていますし、先程から紹介している 寝ログ も Simplicity が使われています。

しかし、

これから、新規でブログを立ち上げたという人は、今後のアップデートのことも考えると、Cocoon を選んでおいたほうがいいと思います。
テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

テーマに関しては、サーバーと違って、簡単に変更することができますので、

Simplicity ⇔ Cocoon

と、両方とも試して見ることもできます。

 

サイトのAMP対応

最後に、今後は、モバイルサイトの高速化にあたって、「AMP (Accelerated Mobile Pages)」への対応を、避けて通ることはできないでしょう。

「AMP(Accelerated Mobile Pages)」とは、モバイル端末でウェブページを高速表示するためのプロジェクト、もしくはフレームワーク(AMP HTML)のことを指します。

サイトのAMP対応 についても、さまざまな情報がネット上にありますので、調べすぎても余計に分からなくなることがあります。

また、その情報が、いつのものなのかによっても、設定が変わってくる場合がありますので、注意が必要です。

情報の更新日は、しっかりとチェックしたほうがいです。

1〜2年前の情報は、役に立たないことも多いですし、AMPエラーの原因にもなりかねませんので、十分に注意が必要です。

 

多くの場合は、AMPプラグインを使うことによって、AMP対応(AMPページを作成)することができます。

しかし、

先程紹介した Simplicity や Cocoon を利用した場合は、プラグインを使わなくても、ダッシュボードの設定画面から、簡単に設定することができます。

 

● Simplicity の場合
外観 < カスタマイズ < AMP(β機能)< AMP有効化 にチェック!

● Cocoon 
の場合
Cocoon設定 < AMP設定  < AMPの有効化 < AMP機能を有効化する にチェック!

 

両テーマとも、ダッシュボードの設定画面から、

「AMP有効化」・「AMP機能を有効化する」 にチェックを入れるだけですので、非常に簡単です。

以下は、 Cocoon の設定画面です。

 

 

詳しくは、わいひらさんが、丁寧に解説してくれています。

テーマをAMP対応する方法
Cocoonテーマの投稿・固定ページをAMP化してモバイル端末での表示を速くする方法です。

 

ただし、AMPの仕様は非常に厳しく、設定でチェックを入れても、AMPエラー になってしまうと、修正が必要になります。

しかし、この修正が初心者には、なかなか難しいのですね。

メッセージも英語表記だったりしますので余計です。

以下は、わいひらさんのコメントです。

ただ、AMPの仕様自体非常に厳しいものです。

なので、以下のような場合は、Google Search Consoleなどで「AMPエラー」が出る可能性があるのでご了承ください。

・AMP対応していないプラグインを使用している
・入力フォームなどがあるページ
・プラグインをインストールしすぎていてCSS量が多すぎるページ
・どうしても、エラー対応できないページは、投稿管理画面から「AMP表示しない」を有効にして対応してください。

 

AMPエラーの原因は、さまざまですが、シンプルに立ち上げたばかりのブログであれば、よほど変なことをしない限り、成功すると思います。

注意点として、AMPに対応していないプラグインがありますので、どうしても使いたいプラグインがある場合は、APM対応しているプラグインの中から選ぶ必要があります。

しかし、Cocoonには、始めからさまざまな機能が組み込まれていますので、余計なプラグインは入れないように、本当に最低限のプラグインだけを厳選して使うようにしましょう。

Google AMP テストで試してみて、以下のように表示されれば、AMP対応は成功です。

 

 

AMP テスト - Google Search Console

 

ただし、

アフィリエイトしたい場合は、これだけでは、AMPページに広告は表示されません。

じつは、サイトのAMP対応そのものよりも、広告対応のほうが大変だったりします。

それについては、別の記事で解説できればと思っています。

おわりに

以前から、ブログを運営されている人にとっては、

・ 無料ブログ → WordPress

・ 常時SSL化( http:// → https:// )

・ テーマ変更( Simplicity → Cocoon など)

・ AMP対応

・ サーバー移転(エックスサーバー → mixhost など)

…などなど、その都度、

試行錯誤をしながら、大変な思いをして、多くの時間と労力とお金を使ってきたことと思います。

ブログの運営経験が長い人ほど、その傾向が強いと思います。

しかし、

これからブログを立ち上げる人は、簡単に、全部を右側の状態で始めることができます。

 

つまり、私のように

やたら設定にかける時間が長すぎて、肝心の記事がまったく書けない!

という本末転倒なことを、しなくてもいいということです。

非常にうらやましい限りです。

 

ブログは、記事を書いて更新してなんぼです!

設定にかける時間を最低限に抑え、どんどん記事を書いて、世の中の役に立ちましょう!

最後は、自分に向けてのメッセージになってしまった感があります(笑)

 

この記事は、ブログ経験者には、まったく役に立たないと思いますが、これからブログを始めたい人、最近ブログを始めたばかりの人にとっては、少しは役に立てたなら嬉しいです。

そして、わいひらさん には、いつも感謝しています。ありがとうございます!


今回も、ご覧いただき、ありがとうございました。


コメント