snowpack@2.11.1がリリースされました。今回のUpdateに@snowpack/plugin-optimizeという新しいプラグインが追加されています。

今回はこのプラグインの使い方と、このプラグインに備わっている<link rel="modulepreload">の自動挿入について紹介します。

少し前の話になりますが、Igalia Welcomes A11Y Project Campaignという記事で、オープンソースのコンサルタント会社であり、ブラウザー開発に携わっているIgaliaがブラウザーの新機能の実装に関するクラウドファンディングを実施していることを知りました。

これに関するIgaliaでのニュース記事がこれまでにいくつか書かれています。

• Introducing Open Prioritization
• Open Prioritization Project Status

少し情報が断片的であり、1つのURLにまとまったものが書かれていないため、いくつかのURLにある情報をつなぎ合わせてみると、

• クラウドファンディングのページはOpen Prioritization
  • Open Collectiveを利用
  • 6つの機能を対象としている（後述）
• アナウンス（開始）されたのは7月13日
• 期間は90日とする

となります。対象としている機能は、

WebKit/Safariに対するもの

:focus-visible疑似クラス (Bug 185859)

HTML inert（Bug 165279）

CSS containment（Bug 172026）

Firefoxに対するもの

CSS d Path (SVG) （Bug 1571119）

lab()色関数表記（Bug 1352757）

Chromeに対するもの

:not()疑似クラス（Issue 580628）

なお機能の後の括弧では、該当すると思われる各ブラウザーのバグレポートを挙げています。

振り返ってみると、ユーザーとしてのブラウザーにおける新機能の実装の要望というのは曖昧ともいえるもので、例えばChromiumではStarを付けることで実装者の後押しになるらしいと耳にしたことがありますが、実際どの程度の効果があるのかはわかりません。 それと比較すると、今回のクラウドファンディングの実験は、資金さえ集まれば、その機能を実装してくれるというわけです。より直接的であり、魅力的だと個人的に感じています。

ということで、筆者も:focus-visibleにPledgeしてみました。自分の名前とメールアドレス、金額さえ入力してしまえばよいので、やや拍子抜けではありました。

クラウドファンディングが成立するのかはわからない面はありますが、興味があるという方は参加を検討されてみてはいかがでしょうか。

10月にリリース予定のGoogle Chrome 86でLighthouse v6.2が実装されます。

Google Chrome 85にはLighthouse v6が搭載されていますが、そのバージョンからAuditsが新たに5つ追加される予定です。今回は、追加予定のAuditsのうちPerformanceに関連するAuditsを3点ご紹介します。

みなさんは普段、CSSの:nth-child()を使用しているでしょうか？
とても便利な疑似クラスですが、仕様を把握していないと想定した要素にスタイルが当たらず、いたずらに時間を消費してしまうことも少なくないでしょう。

ですが、今回ご紹介する:nth-child()の「of」フィルターを使用すれば、そのような事態を回避できるようになるかもしれません。

デザインをもとにページ実装する際、写真やアイコンなど多くの画像を使用することがあると思います。
そんなとき、高解像度対応のため画質が粗くならないように解像度に気を付けたり、表示パフォーマンスを向上させるために画像サイズを圧縮させたりと、1つの画像を書き出すにも手間暇がかかります。

そこで、その画像群を出力せずにCSSで実装できたらどうでしょう。画像を読み込まない分パフォーマンスの向上が期待できますし、どれだけ拡大しても粗くなりません。
今回は、CSSグラデーションを用いたグラデーション・図形の表現方法のご紹介と、画像での実装とサイズを比較した結果をお見せします。

Googleが発表した「Core Web Vitals」、すでにその言葉を聞いたことがある方は多いかもしれません。では「Chrome User Experience Report（以下、CrUX）」はご存じでしょうか？

CrUXはBigQueryに保存されているPublic Google BigQuery projectとPageSpeed Insightsのデータを組み合わせて、ページごとの定量的な評価をひとまとめにしたビッグデータです。Google Cloud Platform（GCP）のプロジェクトを作成すれば、だれでも、さまざまなサイトのデータを参照できます。

CrUxからは2020年8月現在、Core Web VitalLCPsを構成する3つの指標（LCP、CLS、FID）にFCPを加えた4つの指標に関するデータを得ることができます。あくまでPageSpeed Insightsで得られた範囲のデータであるという前提のもとですが、CrUXを利用すればCore Web Vitalsとして定義されている指標に関するフィールドデータを計測できるということになります。また、今後は「UX Report」という名の通り、ロード時のパフォーマンスに関する指標だけでなく、UXに関連した指標も今後追加される予定のようです。

CrUXのデータを参照するには4つの方法が存在します。今回はその中から7月に発表されたCrUX APIを使ってデータを参照する方法を紹介します。CrUX APIはRESTfulなAPIですので、指定のURLへリクエストを送ることができれば、あとはお好みの環境で実行することができ、返却されたレスポンスデータをどう使うかも自由にカスタマイズすることができます。BigQueryの操作やSQLに慣れていない方にはおススメです。

※ CrUX APIから得られるデータは直近28日間までとなっています。それよりも過去のデータを参照したい場合はBigQueryを使用しましょう。

Snowpackはフロントエンド開発環境を構築するためのビルドツールです。

Snowpackには、単体でCreate Snowpack App（CSA）と呼ばれる各開発環境のスターターセットが用意されています。今回はCreate Snowpack Appのひとつであるapp-template-lit-elementを利用して、かんたんなWeb Componentsを作成する手順を紹介します。