タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

prplに関するyahihiのブックマーク (3)

  • PRPL パターンを使用して即時読み込みを適用する  |  Articles  |  web.dev

    Google uses AI technology to translate content into your preferred language. AI translations can contain errors. PRPL は、ウェブページの読み込みとインタラクティブ化を高速化するために使用されるパターンを記述する頭字語です。 遅れて検出されたリソースをプリロードします。 できるだけ早く初期ルートをレンダリングします。 残りのアセットを事前キャッシュに保存します。 他のルートやクリティカルでないアセットを遅延読み込みします。 このガイドでは、これらの手法がどのように連携し、独立して使用してパフォーマンスを向上させるかについて説明します。 Lighthouse でページを監査する Lighthouse を実行して、PRPL 手法に沿った改善の機会を特定します。 Ctrl+Shif

  • 🌏 Hello World! Progressive Web-Blog!! ― ウェブボウズ

    🔥 2022年にサイトの作りを変えまして、もう現状はこの記事の限りではありません。もしこちらの記事の実装を参照されるのであれば こちらのブランチ を参照ください。 これで何度目の挑戦でしょうか。記憶する限り、2年ぶり10度目くらいのブログでございます。会社のパイセンの@ymotongpooさんは12年もご自身のブログを継続されており、日々コンテンツとその作業に耐えうるだけの筋肉を増やし続けられているのを横目に、私はといえば過去に1年以上続いた書きものは日記も含めて一切なく、ブログはというと思い返してみれば2004年ごろのライブドアブログから始まり、辞めては乗り換え辞めては乗り換えを繰り返してきた挙句、最終的にはJekyllいじったあたりでさっぱり音信不通になったのが2年前。並びに、筋肉事情に関して申し上げると、最後にジムに行ったのも気づけば1年半が経っており、会員権が腐り始めている小太り

    🌏 Hello World! Progressive Web-Blog!! ― ウェブボウズ
  • PWAを支える技術とPRPLパターンの実装 - embryo

    この記事はトレタ Advent Calendar 2017の11日目の記事です。 dev.toで最近話題になったPWA実装ですが、今日はそのPWA設計パターンの1つであるPRPLを実践するために必要な技術スタックとその実装方法についてまとめました。 PRPLパターンとは Googleが提唱するPWAの設計パターンの1つです。 PRPL パターン  |  Web  |  Google Developers (P)ush: HTTP/2 Pushを用いて初期表示に必要なリソースを配信します (R)ender: 最小限の初期描画を行い、インタラクティブな状態にします (P)re-cache: ServiceWorkerを用いて事前に他のルートのリソースをキャッシュします (L)azy-load: ユーザー操作に合わせてオンデマンドにリソースの配信と生成を行います これらの頭文字をとってPRPLと

    PWAを支える技術とPRPLパターンの実装 - embryo
  • 1