タグ

ブックマーク / web.dev (3)

  • Service Worker のライフサイクル  |  Articles  |  web.dev

    Service Worker のライフサイクル コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Service Worker のライフサイクルは、最も複雑な部分です。その目的やメリットがわからなければ、戦闘を仕掛けてくるかもしれません。しかし、その仕組みを理解すれば、ウェブ パターンとネイティブ パターンの長所を組み合わせて、シームレスで邪魔にならないアップデートをユーザーに配信できます。 ここでは詳細を説明しますが、各セクションの始めに、知っておくべきことのほとんどを箇条書きで示します。 インテント ライフサイクルの目的は次のとおりです。 オフラインファーストを可能にする 現在の Service Worker に影響を与えることなく、新しい Service Worker が準備を整えられるようにします。 スコープ内のページが、全体にわたって同じ Serv

  • クリティカル レンダリング パスのパフォーマンスを分析する  |  Articles  |  web.dev

    クリティカル レンダリング パスのパフォーマンスを分析する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 クリティカル レンダリング パスのパフォーマンスのボトルネックを特定して解決するには、よくある問題をよく理解しておく必要があります。ここでは、実践的なガイドに沿って、ページの最適化に役立つ一般的なパフォーマンス パターンの抽出にお役立てください。 クリティカル レンダリング パスを最適化すると、ブラウザはページを可能な限り早く描画できるようになります。ページの読み込みが速いほど、エンゲージメントが高まり、閲覧ページが増え、コンバージョン率が向上します。訪問者が空白の画面を表示する時間を最小限に抑えるには、どのリソースをどの順序で読み込むかを最適化する必要があります。 このプロセスをわかりやすく説明するために、まずは最もシンプルなケースから始めて、リソ

    bleu-bleut
    bleu-bleut 2017/05/26
    クリティカルリソース:初回のレンダリングをブロックするリソース。JavaScriptにasyncつけてDOMの構築を早くしても要素の幅とかが取得できなければ早くするメリットがない気がする。
  • The amazing powers of CSS  |  Articles  |  web.dev

    The amazing powers of CSS Stay organized with collections Save and categorize content based on your preferences. Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible: a[href = ""] { background: red; color: white; font-size: x-large; } Check out the live example at jsFiddle You can also style absolute links dif

    bleu-bleut
    bleu-bleut 2012/08/14
    最後のstyleやscriptタグの中を表示させるチップは面白いなぁ。スニペットのページでうまく使えないかな。
  • 1