令和元年6月29日

ブログテーマをJINからAMPに変更したら読込が爆速になりました

タイトルの通りです。

この度(っていうほど記事数ないですが…)このブログに使用しているテーマを有料のJINというテーマからオリジナルのAMP導入テーマにしたらサイトスピードが爆速になりました。

今回はそのテーマ替え理由と結果を報告しようとおもいます。

ブログにおいて読込の速さは最大の武器

ユーザーがブログを読む場合、コンテンツが充実していることはもちろんですが、その次に求めされるのはやはりページの読込の速さだと思います。

見たい記事のリンクを踏んだ後、読込までに10秒以上も掛かってしまうとユーザーにとっては入口の段階ですでにストレスを抱えてしまいマイナススタートとなってしまいます。

amazonでは実際にデータとして、読み込み時間が0.1秒減るごとに売上が1%増加するというデータを発表しています。

GoogleのSEOでも上位表示の条件の一つにページの読込速度を入れている辺り、どれだけ大手がページの読込の速さに重きを置いているかが分かると思います。

ですので、今回はユーザーにストレスを与えないページの最速ロードを掲げAMPの採用と相成りました。

読込が早い。それだけで有名になります

阿部 寛のホームページ】というウェブサイトが「読込速度が爆速!」「通信制限が掛かってても関係なしに早い」と一躍有名になりました。

この例からも分かるとおり、ウェブサイトの表示が早い。というのはそれだけで強力なブログへの求心力となり得ます。

とすれば、やらない理由はありません。

そもそもJINというWordPressテーマについて

「JIN」とは有償のWordpressテーマです。

購入するだけでリンク先のようなキレイなデザインのブログが一発で再現できます。

しかも、カスタマイズで色やレイアウト等の細かい設定の変更が可能なので、すこし弄るだけで簡単にオリジナルのブログが構築できてしまいます。

私もWEBサイト制作を仕事にしている人間なので、コードやデザインのノウハウはある程度わかっているのですが、それでも「ほしい!」と思えるぐらい完成されたテーマでした。

少し本題とズレますが、私は結構な完璧主義で自分でブログを構築すると「あれもこれもカスタマイズしたい!」という欲求が爆発してしまい何時まで経ってもブログが完成しないという最悪の悪循環が発生してしまいました。

結果的に、今回はオリジナルテーマとして公開することができたのですが、過去すでに私は4,5度自分のブログの制作に失敗しているんです。

その時に「やっぱり有償のテーマを買おう!」と決意して買ったのがこの「JIN」でした。

今はテーマを変えてしまったのでJINの制作者には少し申し訳ない気持ちなのですが、JINが素晴らしいテーマであることは変わっていませんので今でも人に自信をもって進められるWordPressテーマです。

WordPressをAMP対応しました。結果結果スコア100点!

AMP対応の結果、Google公式のサイトの読込速度の計測ツール「 PageSpeed Insights 」で100点のスコアを叩きだすことが出来ました!

これだけでもAMP対応をした価値は大いにあることが分かります。

(追記:現在はAdsenseを入れた為、少しスコアが下がってしまいましたが、それでも高パフォーマンスをキープしています)

JINを使用していた時のスコアはこちら、決して遅くはないですが、やはりGoogleのAMP相手には分が悪いです。

※この結果がブログに悪影響を与えるわけではないので、JINがよくないテーマ。という結果になるわけではありません

AMPとは

AMP(Accelerated Mobile Pages)」とは、モバイルページの表示速度を上げる為、GoogleとTwitterが共同で開発したフレームワークです。

細かく解説すると難しいので、ここでは「ページロードがすっごく早くなるシステム」と認識していればOKです。

親元のGoogleが開発しているだけあって、上の文でも挙げたとおりページの読込効果は絶大です。

しかし、読込スピードを上げる代償として様々な制約が生まれます。

下記が特に分かり易いAMPサイトの制限内容です。

  • 一部HTMLタグの使用不可
  • jsは使用不可
  • CSSはインラインでのみ記述可能だが50kbまで

参考までに、HTMLフレームワークで有名な「Bootstrap」の組込に使うbootstrap.min.cssは138kbあります。

余裕でオーバーしてますね(笑) つまり実質Bootstrapは使用できません。
※機能制限版では使用できる可能性あり

結論として、やはり速いは正義

AMP組込には上記制限の関係により、どうしてもデザインが簡素になりやすくなるというデメリット(←ここはなるべく抑えました)がありますが、それを補って余りある恩恵も同時に存在するので、私としては導入して大大満足でした。

実際にどうやってWordpressにAMPを導入したのかはまた別記事を紹介したいと思いますので、もしAMP導入に興味があれば続報をお待ちください。

最後まで読んでいただきありがとうございます。
今回の記事が気に入ったら、是非下記ボタンよりシェアをよろしくお願いします。