ページスピードを改善(高速化)するために重要な3つのポイント【ワードプレス・ブログ】

ブログ
この記事は約10分で読めます。

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

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

 

ページスピード とは、

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

ということですね。

 

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

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

   

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

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

① サーバー選び
② サイトのテーマ選び
③ サイトのAMP対応

の3つだと思います。

 

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

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

 

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

PageSpeed Insights

 

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

サーバー選び

サーバー選びに関しては、少し前までは、「Xserver(エックサーバー)」が人気でした。

私がレンタルサーバーを借りはじめたときも、

「Xserver(エックサーバー)にしておけば間違いない!」

というような風潮がありました。

 

いまでも「Xserver(エックサーバー)」は、人気のサーバーのひとつですが、最近では、「MixHost(ミックスホスト)」の人気が高いようです。

 

「MixHost(ミックスホスト)」は、人気ブログの「寝ログ」より引用させてもらうと、

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

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

ということで、早いさを売りにしています。

現在は、私も「Xserver(エックサーバー)」の他に、「MixHost(ミックスホスト)」も契約しています。

サーバーの移転も、検討していますが、面倒で進んでいません…

 

「MixHost(ミックスホスト)」について、詳しくは、 寝ログ 『 恋に落ちるレンタルサーバーMixHostに惚れた理由に詳しく書かれています。

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

 

「寝ログ」の運営者は、このブログのテーマ「Cocoon」も開発している「わいひら」さんです。

 

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

これから新規でサーバーを借りようと思っている人は、 「MixHost(ミックスホスト)」にしておいたほうがいいかもしれません。
 

サイトのテーマ選び

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

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

 

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

 

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

どんなに頑張って、どんなにカスタマイズ(重たく)したところで、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」の親テーマと子テーマのダウンロードページです。

 

おそらく、いちど「Cocoon」を使ってしまうと、「Simplicity」には戻れません。

「Cocoon」であれば、必要な「プラグイン」も大幅に減らすことができるし、やたらと「CSS」をイジる必要もありません。

 

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

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表示しない」を有効にして対応してください。

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

 

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

 

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

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

 

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

 

 

AMP テスト - Google Search Console

 

ただし、

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

 

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

広告のAMP対応については、ここでは書きませんが、ちょっと面倒かもしれません。

 

そのため、

広告を多用する場合は、敢えて、今は「AMP化」しないという選択もアリだと思います。
 

おわりに

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

・ 無料ブログ → WordPress
・ 常時SSL化( http:// → https:// )
・ テーマ変更( Simplicity → Cocoon など)
・ AMP対応
・ サーバー移転(Xserver → mixhost など)

…など、

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

ブログの運営経験が長い人ほど、その傾向が強いかもしれません。

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

 

つまり、

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

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

 

ブログは、記事を書いて更新しなくては、意味がありません。

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

コメント

スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました