くり返しサイトの改善をPageSpeedで次世代フォーマットWebPを比較

アーティストでは無いのでゴリゴリっとしたサイトを作るわけでもなく。
いわゆるWebデザイナーというわけでもなく。
都合よくいろいろやってしまう人の一人です。

どちらかと言えばコーディングが得意です！と言いたいところですが、コーディングが得意とする場合の基準は謎です。
地道なアプローチをしてる人もいますので伝わればいいなと思います。


まずはくり返しサイトの改善していくにあたり、どの辺りを目指す・キープするのが良いのか？

私がHTML/CSSコーディングで意識する点は以下の優先順位でしょうか。
HTMLのタグは正しい前提で
  1. 読み込みスピード
  2. データ構造化（schema.org）
  3. W3C勧告に準拠
以前はW3Cのバリデーションチェックしてましたが、正直対応していくのが後手になりますが時間があればW3C勧告に準拠したいですね。最近は特に<link rel=""....>などややこしくて。
The W3C Markup Validation Service
https://validator.w3.org/

読み込みスピード

モバイルでの表示スピードは重要。
モバイルに最適化されたユーザー体験
https://www.thinkwithgoogle.com/intl/ja-jp/articles/ux/optimize-to-mobile/
スピードへの対応は範囲が広いと思います。環境によってはできることが限られる可能性もありますが、できることからコツコツと改善していきます。
  • CSSはインライン：ヘッダにインラインで記述すればそれだけで高スコア
  • キャッシュコントロール：サーバの設定次第
  • フォント：デザイン面と読み込みバランスのベストが見つけられていない
  • Javascript：どの程度必要か設計次第。
  • 画像フォーマット：次世代フォーマット

特に気になる次世代フォーマット WebP

少し前からPageSpeedでは次世代フォーマットを改善項目に推してきます。
そこでWebPを試してみました。
今回はAdobe PhotoshopのプラグインWebPShop を使います。
A new image format for the Web  |  WebP  |  Google Developers
https://developers.google.com/speed/webp/

WebPShop | Google Developers
https://developers.google.com/speed/webp/docs/webpshop

JPEG画像とWebP画像の比較

どちらも同じPSDファイルから書き出しましたが、WebPは書き出しからではなく別名保存となります。

ブラウザの対応状況

    主要なブラウザは表示されているかと思います。
    • Google Chrome OK
    • Firefox OK
    • Safari OK
    • Edge OK
      モバイルも対応　44.11.4.4121（昨日アップデートありアイコン変更された）

    .jpg : 最適化 : やや高画質（60）

    JPEG最適化 : やや高画質（60）
    JPEG最適化 : やや高画質（60）

    .webp : Quality（75） : Default

    WebP : Quality（75） : Default
    WebP : Quality（75） : Default
    微妙に光が当たっている部分の度合いが違いますが、それほど違いは見られませんが画像サイズを比べて驚きました。

    なんと！137KBと63KBです。
    ほぼ半分になってます。


    海外ドラマ「シリコンバレー」のように圧縮技術はホント重要だと思います。

    結果コーディングとも少し違うような話ですが、さらに画像の大きさを最適化するなど繰り返し少しずつ改善していくのです。

    これらを必要と考えるか否か？
    残念ながら切実なサイトは限られるような気がします。
    コンテンツを生み出し、制作できる能力のほうが重宝されるでしょう。
    極端な話「コーディングなど崩れなければいい」というのが現状。


    追記：2020年1月22日

    無知だった！次世代フォーマットWebP

    透過画像の書き出しも可能だった。
    右半分は透明です。

    WebPShopでの保存


    追記：2020年2月10日

    まさかのIE11 

    Internet Explorerを使ってる人はもっと少ないと思ってた。
    Desktopに限ると12%くらいのシェアがある。

    日本独自のビジネス用ソフトウェアの都合のような気がする。
    今後どのように移行していくつもりなのだろうか？
    あえて仕事増やしてるのかセコいのか遅いのか？

    Desktop Browser Market Share Japan | StatCounter Global Stats
    https://gs.statcounter.com/browser-market-share/desktop/japan

    WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ
    https://webrage.jp/techblog/pc_browser_share/

    Can I use... Support tables for HTML5, CSS3, etc
    https://caniuse.com/#feat=webp

    Frequently Asked Questions  |  WebP  |  Google Developers
    https://developers.google.com/speed/webp/faq

    最後のGoogle Developersに書いてありました。
    animation・透過対応もブラウザバージョンによって違います。
    Safariのことが一切書いていない。怖い


    関連記事