TATSUの食べたり作ったり節約したり

IKEAやコストコのお買い得食品を使った食べたものとか作ったものとか、1からシリーズとか。息子のおもちゃレビューの記事など綴っています。

AMPって何?モバイルサイトを表示高速化するには?

こんにちは!

TATSUです。



この度Googleからお知らせが届きまして、あなたのサイトがどのくらいの速度で表示されてるかご存知ですか?
的な通知。
Googleが運営しているので安心なんですが、なんでしょう?これ

「モバイルサイトの読み込み速度とパフォーマンスをテストする」
というツールらしいんですが、名前そのままw

モバイルサイトの読み込み速度とパフォーマンスをテストする


すでにブログを使っている方ならご存知かと思いますが
ホームページってPCサイトとモバイルサイトが存在しますよね。

ブログサイトを使っていれば自動的にPCサイトとモバイルサイトの振り分けはしてくれているので、
別々にサイトを作らなくてよくなっています。
もちろんPC用のデザインとモバイルサイト用のデザインとで細かく分けて設定はできますよね。

モバイルサイトでPC用のサイトを表示すると見辛くてしょうがないですよね。


いまやこのご時世ほとんどのかたがスマホタブレットなどを持っている時代。

私のこのブログも7割近くがスマホからのアクセスです。

例えばそのスマホからのアクセスで、サイトの読み込み速度が遅ければ開く前に閉じちゃいませんか?

このアクセスにかかる時間が3秒ぐらいまでが耐えられる時間だそうです。
5秒以上掛かっていると半数はサイトが開く前にサイトを離れてしまうそうです。
Googleはこんなことまで調べることができるんですねぇ。


このサイトの表示スピードも重要な検索順位に関係してくるということなので
少しでも表示速度はあげられた方がいいですよね!

そのサイトの表示速度とかをチェックしてくれる便利なサイトがこちら。

モバイルサイトの読み込み速度とパフォーマンスをテストする - Google


Googleの正規サービスなので安心して任せられますね。

【 モバイルサイトの読み込み速度とパフォーマンスをテストする】のサイトの使い方


こちらのサイトにアクセスするとこんな表示が出てきます。



f:id:a8t20321:20180208172141j:plain



ここに自身のサイトのURLを貼り付けるだけ!


そうするとチェックが入って調べてくれます。


f:id:a8t20321:20180208172153j:plain


1分ほどって書いてありますが、結構時間かかりました。



f:id:a8t20321:20180208172216j:plain



あと2年で世界の70%近くが3Gぐらいの速度に落ちるって結構やばいですね。
日本は30%に入っているんでしょうか?


f:id:a8t20321:20180208172232j:plain

長いチェックが終わるとサイトの評価をいただきます。




f:id:a8t20321:20180208172320j:plain




幸いトップクラスの表示速度だそうです!



結果を送ることも可能。
1時間ぐらいでGoogleからテストの結果メールが届きました。



f:id:a8t20321:20180208172334j:plain



モバイルサイトの処理速度は十分です!

との評価をいただきました!

簡単にチェックできますね。

AMPってなに? モバイルサイトの読み込み速度を上げるには?


でも実際にここで速度が不足してた場合はどうすればいいのでしょうか?


改善すべきところをGoogleがチェックしてくれているので
ここを修正すればいいんでしょう!

でも何言ってんのかさっぱりわかんない!


十分ですという評価はいただいていますが、要改善になっている項目もあるんですが
Java Scriptをいじるとかどうとかを書いてあるんですがちょっと大変そう。

私ははてなブログで書いているのでそこのjavaをいじるのにはちょっと勇気がいる…。


で、最後の項目にあったAMPでページの読み込み速度を高速化しましょう!
との記載。


何度かみたことはあるんですが、よくわかっていないこのAMP


もともともGoogleが中心となって導入したようで

Accelerated Mobile Pages

の頭文字を取っています。


モバイルでのウェブサイトの閲覧を高速化することを目的としたオープンプロジェクト

だそうです。

オープンプロジェクトということは基本的に無料で使えるってことですよね?
じゃあ私も導入!!

っていうほど甘いもんじゃないみたいです。

仕組みはウェブページのhtml情報をあらかじめキャッシュしておいて、読み込む速度を大幅に削減するという方法を取っているようです。
なのでGoogle側にキャッシュを残しておくことによって読み込み速度を上げる!とい形になっているんですね。


じゃあそれをどうやって導入すればいいんでしょうか?


幸い私ははてなブログを使っているのではてなブログの詳細設定から
AMPの設定ができるようになっています。
ただし2018年2月現在はベータ版になっているのでご注意を。


これで私のサイトはAMPを導入したことになっていますが、他のブログを使っている場合はどうすればいいんでしょうか?


ここのところは改めて調査したいと思いますので
後日記載できればと思います。


でもとりあえずなんだか一安心。