Browser-level image lazy loading for the web | Articles | web.dev
You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature: Lazy-loaded images load as the user scrolls through the page. This page walks through the details of implementing lazy-loading in the browser. Why browser-level lazy loading? According to the HTTP Archive, images are the most-r
Datadog と Lighthouse を利用した WebPerf の継続的計測
こんにちは。ものづくり推進部、フロントエンドエンジニアの武田です。 今日は Datadog, Lighthouse を使ったクライアントパフォーマンス計測に取り組んでいる、というお話です。 mediba では webpagetest を使った定期実行と計測を以前から行っています。 DataStudioとGASでWebPagetestの計測結果をグラフ化するuknmr/gas-webpagetest紹介記事: gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する1 での取り組みをベースにし、clasp で GAS のソースコード管理・デプロイを実現するための仕組みや webpagetest Lighthouse test と連携したメトリクスの取得まで網羅したものが 2 になります。 今回は少し webpagetest とは趣向を変えて Lighth
Yahoo!ショッピングで実践！表示速度カイゼン10選 〜 Web編 〜｜Yahoo!ショッピング公式
こんにちは！ Yahoo!ショッピングのひらやま（@rhirayamaaan）です。 インターネットを使っていると、いろいろなページにアクセスしますよね。 ただ、ページにアクセスしたときに、なかなかページが表示されないと、めちゃくちゃイライラしませんか？ 私はします！ 実際に、ページ表示速度が速くなるだけで、そのサービスのカイゼンにつながるという話はよく聞く話です。 上記の記事にこんな言葉がありました。 スピード・イズ・ゴッド。スピード・イズ・ジャスティス。家訓にしたいレベルの標語ですね。 これはもう本当におっしゃる通りです。 Yahoo!ショッピングでも実際に速度のカイゼンをすると、サービスのカイゼンにつながっています。 なので今回は、Yahoo!ショッピングが実施した 10 個ものカイゼン策を出し惜しみせず紹介しちゃいます！ 1. 遅い API と直列な API を使う箇所を非同期化
Optimizing Performance With Resource Hints — Smashing Magazine
Many performance optimizations can be made when we can predict what users might do before they actually do it. Resource Hints are a simple but effective way that web developers can help the browser to stay one step ahead of the user and keep pages fast. Think of them as a way for the developer to tell the browser about what’s likely to happen in the future so that the browser can factor that into
Native image lazy-loading for the web!
April 6, 2019 In this post, we’ll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here’s a sneak preview of it in action: <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> We are hoping to ship support for loading in ~Chrome 75 and are working on a deep-dive of the feat
アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog
こえのブログは「声で書くブログ、声で聴くブログ、声で観るブログ」をコンセプトに書き手、読み手双方にバージョンアップしたブログを提供するアメブロの新機能です。 投稿者は端末に向かって喋るだけで、その音声が活字化されブログとして公開できます。閲覧者は活字化された文字を通常のブログと同じように読めるほか、音声を聴きながらでもコンテンツ消費できます。 モバイル端末、テレビ端末やスマートスピーカーなどの普及により、今後ますます増えると予想される利用形態に対して、それぞれに適した形でコンテンツを提供できるように挑戦しています。 この記事では、技術的な側面を中心にこえのブログを紹介します。 こえのブログは、文字でも音声でもコンテンツ消費できるのが特徴です。読者の方へのメッセージや質問に回答など利用法は様々です。龍玄としさんやクロちゃんさんなど著名人の方の声も聴けます。 できる限りサーバーにアクセスしない
Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word) — Smashing Magazine
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter. This guide has been kindly supported by our friends at LogRocket, a service t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend