サイトをいい感じにカスタマイズしていくためのテクニック方法をわかりやすく解説。
WebP(ウェッピー)画像にすることで、JPEGの50%程度のファイルサイズに軽量化が可能です。唯一の欠点は、Safariブラウザで見られないこと。
AMPのamp-imgタグをWebP対応ブラウザ以外用に記述することもできます。
このページでは、可能な限り高速化できる方法としてAMPページにもWebP画像を使う方法を紹介していきます。
WebP形式の画像は、画像編集ソフトのGIMPで作成しています。
以前書いた GIMPで写真をwebp保存したらファイルサイズがJPEGの1/3に軽量化 の記事も実際に作ったWebPやJPEG2000のサンプル画像も比較用に掲載してありますので、参考になるかもしれません。
Webページの表示速度の高速化には、ページの読み込みデータサイズを全体的に低減させる必要があります。
表示速度を速くするのは、最新のSEOでも必須要件となっています。現状では、表示速度の高速化のためにはGoogle AMPに対応させるのが一番の近道でもあり、昨日を著しく制限したページにはなりますが高速表示が可能になります。
そんなAMPページでも、やはり画像サイズを小さくすることは必要で、解像度と圧縮という非常に難しい問題を抱えています。WebPは、従来画像の軽量化によく使われているJPEG画像よりも50%程度は軽くなります。
こちらのサンプルをご覧ください。JPEGとWebPを比較すると、ファイルサイズがかなり小さくなっていることがわかります。
↓こちらが、JPEG画像。64KB
↓こちらは、WebP画像。35KB。
○ Chrome,Firefoxは表示されます。
× Safari、IEは表示されません。
注記してあるとおり、WebP画像はSafariブラウザでは表示されません。最新のブラウザにしてもiOS、つまりiPhoneのSafariからは見ることができないわけです。
seotech.clickのアクセスも約70%はiOSとなっています。ちなみにiPhoneユーザのほとんどが標準ブラウザのSafariを使っているためか、ブラウザの比率もSafariが69%と非常に高くなっています。
これが、現状WebPだけを採用することができない理由です。残念ながら、Webサイト製作者の方々のほとんどが、表示の高速化→画像の軽量化→WebPがいいらしい→調べるとSafariが非対応→結局WebP使えない、となっている模様です。
一応、これに対応することも可能です。AMPの画像タグamp-imgでもWebPとJPEGの2種類を記述して非対応ブラウザに対処することも可能です。
AMPページで画像表示をする際には、amp-imgタグを使用することになっています。これは厳密なルールで、従来のimgタグが1つでも入っているとAMPチェックサイトでは、エラーとなってしまいます。
WebP画像のみを表示させるには、以下の記述で。これは従来どおり。
<amp-img
src="sampleimage.webp"
alt="サンプル画像1"
height="187"
width="250"
layout="fixed"></amp-img>
上の記述だと、ChromeやFirefoxなら表示されるのですが、Safariはムリ。非対応ブラウザに対応させるのは、以下の記述で。
<amp-img alt="サンプル画像1"
width="250"
height="187"
src="sampleimage.webp"
layout="fixed">
<amp-img alt="サンプル画像1"
fallback
width="250"
height="187"
src="sampleimage.jpg"
layout="fixed"></amp-img>
</amp-img>
これで表示させると、WebP対応ブラウザならWebPを、非対応ならJPEGを表示してくれます。
ただ、これだけの記述を画像1枚1枚にしていくのは、かなり手間となります。画像も2種類準備しないといけないわけでして。
それが必要な場合には、手間をかける意味もありますが、現状そこまでの必要性を感じていない方が多いと思います。もし、どうしてもということであれば、上のような記述をするのが良いかと思いますが、seotech.click内でも残念ながら一部の画像のみWebPを使っていますが、ほとんどの画像はJPEGで十分と感じています。
今ご覧いただいているこのページも、GoogleのPageSpeed Insightsで100点が取れています。
表示速度に関してのページなので、高速な表示を目指すとGoogle AMPの採用となり、WordPressも不採用となります。
ただ、ページスピードのスコアは100点が取れます。さらなる高速化として、提案されるのが、次世代フォーマットでの画像配信。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます
ダウンロード時間の短縮化とデータ使用量を抑えることができると、ページ閲覧者のさらなる高速表示化と運営者側の転送量の低減とメリットは多いのですが、それより前に画像フォーマット乱立と非対応をなんとかしてほしいというのが本音です
画像フォーマットの乱立は、JPEG、GIF、PNG、TIFF、ビットマップと今現在もありますが、せめてブラウザ側で表示可能なフォーマットを統一させてほしいものです。
JPEG2000とJPEG XRは、アップル+マイクロソフト陣営が進めています。WebPは、Google陣営が進めています。単純にこれらの覇権争いでしかないのですが、両方が足を引っ張り合ってしまって、どちらの画像形式も普及しないという状態が10年ぐらい続いているはずです。
今後もこのWebP対JPEG2000問題は続いていく見込みです。ブラウザシェアと今後の展開から見ると、若干WebPが有利に見えますので、seotech.click内ではWebP形式を採用しています。
iPhoneからのアクセスを考えるとSafariから見られるようにしてもらえると一番ありがたいのですが。
WebPがSafariで見られない=iPhoneユーザのほとんどが見られないことになります。画像サイズは軽量化できますが、AMPの画像タグの記述が増えてしまうのは、サイト製作者は当然敬遠します。
現状では、WebP対応は急ぐ必要はありません。もし、必要なら一部分のみ対応させることで若干の高速表示が可能となります。
例えばアイキャッチ画像やページ上部のみ対応させるなどで、PageSpeed Insightsのスコアも少しですが上がります。WebPは魅力があるのですが、今の所導入は様子見が吉ではないかと思います。
WordPressに関しては、表示を高速化するためにはAMPを導入したいところですが、プラグインを導入してもトラブルが発生することが多いので、今の所おすすめしません。
WebP画像をWordPressでも使いたいという点は理解できますが、今の所ものすごく手間がかかりますし、プラグインを新たに追加しないといけないことを考えるとおすすめはできません。
また、非対応ブラウザで表示した際の表示できないトラブルも発生しやすく、こちらも様子見が吉ではないかと思います。
手っ取り早く表示速度を高速化したいなら、サーバーをSSD搭載の高速なところに引っ越ししてしまう方法。
WordPressでも引っ越し専用のプラグインもありますし、最近ではうまく引っ越しできることが多くなっています。
格安のレンタルサーバーでもSSD採用のところが増えていますが、seotech.clickでも月額500円以下で使えるサーバーを使っています。
スターサーバーなら、ライトプラン月額200円(MySQL 1個)、スタンダードプラン月額400円(MySQL 10個)と格安です。格安ですが、SSD採用サーバーなので、表示速度は超高速です。
このページでPageSpeed Insights 100点を取った際もスターサーバーでしたが、サーバーの反応に関してはWordPressのサイトでも表示速度は速いと感じています。
単純に手間をあまり掛けずに高速化するなら、レンタルサーバーの引っ越しが一番お手軽で、おすすめです。
→スターサーバー
以上、【AMPページでWebP画像で最強高速化!!】PageSpeed Insights 100点獲得 でWebP画像を表示させる方法を紹介してみました。
今のところ、WebPを採用するメリットはあまりありませんが、もし今後表示の高速化などで必要になれば、その際には画像をWebPにしてみると良い解決法となるかもしれませんね。
■更新履歴
2019/8/30 記事を公開しました。