はてなブックマーク

TOP > Core Web Vitalsで計測した表示速度とコンバージョン率の密接な関係。リアルなデータを紹介するよ！ Core Web Vitalsで計測した表示速度とコンバージョン率の密接な関係。リアルなデータを紹介するよ！ Core Web Vitals PageSpeed Insights SEO 表示高速化 「Webの表示が遅いとコンバージョン率が下がる」は本当？ 海外大手の事例はよく耳にします。頭でも理屈はわかります。 でも、「自分のサイトについてその証拠を見たことがある」という方はほとんどいないはずです。ある意味で都市伝説でした。 ところが今回、このブログを題材に表示速度とコンバージョン率の関係を明らかにして、改善による効果と費用を計画できるデータを計測できました。 「結局、速度改善でどのくらい収益増が見込めるの？ どのくらいまでコストをかけていいの？」という本質的な課題に

Core Web Vitalsを意識したスライダーのライブラリ選定と指標改善のためのチューニング Core Web Vitals Lighthouse PageSpeed Insights 表示高速化 UIとしてはアンチパターンと言われがちなスライダー(カルーセルやスライドショーとも呼ばれますが、今回はスライダーで統一)ですが、ファーストビューの「にぎやかし」として根強い人気があり、Web制作の現場でよく遭遇します。 大きな画像を何枚も読み込み、それをJavaScriptで制御するのは聞いただけでも重い機能です。2021年から検索順位に関係すると言われるCore Web Vitalsや、PageSpeedスコアといったフロントエンドパフォーマンス指標にも明らかに影響がありそうです。 ライブラリの種類が多いことも悩みの種です。今回、フロントエンドパフォーマンスの観点からはどのライブラリを選ぶ

TOP > WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし WebP Safari 14 で次世代画像フォーマットWebPへの対応が発表されました！ Safari 14 Beta Release Notes | Apple Developer Documentation かれこれ20年近く延々と続いた次世代画像フォーマット戦争に、WebPがついに終止符を打ちそうです。 WebPは、私の感覚としては現在のWeb画像のデータサイズを半分以下に削減できます。しかも主要なJpeg、PNG、GIF(アニメーション)をすべてカバー。Web画像のスタンダードは、一気にWebPに流れていくでしょう。 実は2016年に

TOP > PageSpeed InsightsとLighthouse。よく似てるツールの違いを比較表でチェック！ PageSpeed InsightsとLighthouse。よく似てるツールの違いを比較表でチェック！ Lighthouse PageSpeed Insights さくらインターネットさんのさくらのナレッジで、GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門という記事が公開されています。すでにご覧の方も多いと思います。 入門といいつつものすごい情報量で、Lighthouse(とPageSpeed Insights)が生成するレポートの読み方が丸わかりです！ ところで、このLighthouseとPageSpeed Insightsはよく似たツールなので、混乱されている方もいるかと思います。 違いや共通点を比較表にまとめてみました。 Lighth

WebP公式のPhotoshopプラグイン WebPShop登場 WebP WebP開発チームによるPhotoshopプラグイン WebPShopが公開されました。 PhotoshopでWebPの読み書きができるようになります。 WebPShop  |  WebP  |  Google Developers 手元のPhotoshopで試してみたのでその手順を紹介します。 ダウンロード GitHubから一式ダウンロードして展開します。 webmproject/WebPShop: Photoshop plug-in for opening and saving WebP images インストール PhotoshopのアプリケーションフォルダにあるPlug-insフォルダにプラグイン本体をコピーまたは移動するだけです。 macOSでは bin/WebPShop_0_2_1_Mac_x64/We

指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合 B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合 PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上

WebPに関する10の誤解~5分で正しく理解するWebP WebP Web画像最適化 表示高速化 「WebPって聞いたことはあるけど...」という方に向けてまとめてみました！ 多くのWebサイトで画像を半分以下に軽量化できる優れたフォーマットですが、まだまだ知名度が低い状態にあります。曖昧だった理解をスッキリさせるためにご参考ください。 ※ 以前、Qiitaに投稿した記事のアップデート記事です。 1. ✖ ウェブピーと読む → ⭕ ウェッピー 標準的な発音はウェッピー (Weppy)とされています。 2. ✖ Googleの商用技術である → ⭕ オープンソース 特許技術ではなく、BSDライセンスに基づくオープンソースプロジェクトです。 3. ✖ Chromeしか対応していない → ⭕ Android、Edge、FirefoxもOK 2018年の後半から2019年にかけてWindowsの標

WebPってなに？Googleが作った新しい画像フォーマットは、軽くてアルファチャンネルもサポート！表示高速化するなら検討してみよう！ WebP Web画像最適化 表示高速化 Webで利用できる画像の種類はいくつかあります。Webで使えるというと、端的にいうとWebブラウザで表示できるかどうか、ということになるかと思います。 (2019年2月追記) こちらの記事でWebPの利用と、Googleのページスピード測定ツール PageSpeed Insights の関係を検証しました。平均 +3.2ポイント、最大 +22.6ポイントのスコア改善につながりました。 WebPは、軽くてキレイでアルファチャンネルをサポートする新しい画像フォーマット WebPの開発は、Googleが行なっています。まずは、WikiPediaをみてみましょう。 Webp - WikiPedia ウェブサイトのトラフィック

TOP > カンタンにページで読み込まれる画像がわかる！Google Chromeのデベロッパーツールの「Networkパネル」を使ってみよう！ カンタンにページで読み込まれる画像がわかる！Google Chromeのデベロッパーツールの「Networkパネル」を使ってみよう！ 画像軽量化AI LightFile 表示高速化 東京は４年振りの積雪でしたね！白銀に包まれる都会はなかなか見ることができないので、幻想的な感じでしたね！ さて、今回はGoogle Chromeをお使いの方であれば、今みているウェブページでどのくらいの画像が読み込まれているのかを調べる方法です。フロントエンドの表示にこだわる方は、ぜひぜひ試してみましょう！ Google Chromeのダウンロード Chromeを利用していない方は、まずはダウンロードしましょう。 Google Chrome Google Chrome

正式版になった日本語Google Fontsは表示の高速化を期待できる 表示高速化 先月、Google Fontsに正式に追加された日本語フォントが表示の高速化が期待できるよさげな仕様になっています。 Google Fonts (日本語で絞り込み) 日本語Webフォントを自社のWebサーバーから配信していたり、Google Fontsの日本語フォント早期アクセスを利用しているサイトは乗り換えを検討しましょう！ Webデータ肥大化の伏兵Webフォント たいていのWebページで最も多くの容量を占めているのは画像ですが、最近は画像より日本語Webフォントの方が重たいというサイトも増えてきました。 日本語フォントはご存じの通り、文字の種類がとても多いので相当なデータ量になります。Webページの表示高速化にはWebフォントへの考慮も重要です。 無造作に配信すると4.3MB！ 人気のNoto Sans

TOP > ウェブパフォーマンスをモニタリングするCalibreは、ファーストビューの様子を動画でキャプチャしてくれるのがイイ！ ウェブパフォーマンスをモニタリングするCalibreは、ファーストビューの様子を動画でキャプチャしてくれるのがイイ！ 表示高速化 ウェブパフォーマンスの計測ができるツールもいろいろとありますが、今回はCalibreというツールをご紹介します。かんたんな設定方法や、どんな画面が見えるのかなど、気になる方はぜひご参考に！設定は手順通り進めればかんたんにセットアップできます。 注目すべきは、スナップショットが動画ということ。画面が表示される様子を、動画で見ることができます。 Calibre | Build better, faster products Calibreのトップページ。World-classという表現が良いですね。 設定は本当に簡単です。サイト側に何かを