Common misconceptions about how to optimize LCP | Blog | web.dev
For this post, we used data from page navigations with a subresource image LCP in Chrome to take a look at the LCP sub-parts. We've looked at this kind of data before, but never from field data to see where real users are spending their time while waiting for a page's LCP. Like with Core Web Vitals, we took the 75th percentile (p75) of each LCP sub-part for each origin in the CrUX dataset, resulti
Now in Baseline: animating entry effects | Blog | web.dev
Now in Baseline: animating entry effects Stay organized with collections Save and categorize content based on your preferences. The post four new CSS features for entry and exit effects shared some useful features that had just landed in Chrome. Now, two of these features, @starting-style and transition-behavior: allow-discrete have become Baseline Newly Available with the release of Firefox 129.
CSS font-size-adjust is now in Baseline | Blog | web.dev
CSS font-size-adjust is now in Baseline Stay organized with collections Save and categorize content based on your preferences. The CSS font-size-adjust property lands in Chrome today, and becomes part of Baseline Newly Available. This property can help prevent shifting of your layout when fallback fonts are loaded, and ensure legibility of fallback fonts at smaller font sizes. The font-size-adjust
Interop 2024 mid-year update | Blog | web.dev
Interop 2024 mid-year update Stay organized with collections Save and categorize content based on your preferences. As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year. Where we started At the beginning of the year, Chrome had an experimental browser support score of 83. Today that score is 90, with a score for stab
How to use container queries now | Blog | web.dev
How to use container queries now Stay organized with collections Save and categorize content based on your preferences. Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there'
The CSS stepped value math functions are now in Baseline 2024 | Blog | web.dev
The CSS stepped value math functions are now in Baseline 2024 Stay organized with collections Save and categorize content based on your preferences. All major engines now support the CSS stepped value math functions— round(), mod(), and rem(). The stepped value functions all transform a given value according to another step value. The round() function The round() function takes a value to be round
Popover API lands in Baseline | Blog | web.dev
Popover API lands in Baseline Stay organized with collections Save and categorize content based on your preferences. It's happening! One of the features I am most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the Popover API. Popover provides so many awesome primitives and developer affordances for building layered interfaces
Interaction to Next Paint is officially a Core Web Vital 🚀 | Blog | web.dev
Interaction to Next Paint is officially a Core Web Vital 🚀 Stay organized with collections Save and categorize content based on your preferences. Interaction to Next Paint is now a stable Core Web Vital metric, replacing First Input Delay. Today's the day! After years of work, we're finally ready to make Interaction to Next Paint (INP) a stable Core Web Vital metric. This marks a significant step
Interaction to Next Paint becomes a Core Web Vital on March 12 | Blog | web.dev
Interaction to Next Paint becomes a Core Web Vital on March 12 Stay organized with collections Save and categorize content based on your preferences. Interaction to Next Paint will officially become a Core Web Vital and will replace First Input Delay on March 12. The Web Vitals program provides metrics to help web developers measure key aspects of the user experience on the web. First Input Delay
Interop 2024 | Blog | web.dev
Interop 2024 Stay organized with collections Save and categorize content based on your preferences. Following on from the success of Interop 2022 and Interop 2023, we are excited about the opportunity to collaborate once again with all key browser vendors and other relevant stakeholders. Our shared objective is to enhance interoperability between web platforms, thereby simplifying the work of deve
Custom Element Best Practices | Articles | web.dev
Custom Element Best Practices Stay organized with collections Save and categorize content based on your preferences. Custom elements let you construct your own HTML tags. This checklist covers best practices to help you build high quality elements. Custom elements allow you to extend HTML and define your own tags. They're an incredibly powerful feature, but they're also low-level, which means it's
Baseline 2023 | Blog | web.dev
Baseline 2023 Stay organized with collections Save and categorize content based on your preferences. Baseline is coming to caniuse.com! In this post, learn about the integration and discover some of the features that became part of Baseline in 2023. With the new definition of Baseline, there are two stages in a feature's lifecycle: when it becomes newly available, and then when it becomes widely a
CSS subgrid | Articles | web.dev
CSS subgrid Stay organized with collections Save and categorize content based on your preferences. CSS grid is a very powerful layout engine, but the row and column tracks created on a parent grid can only be used to position direct children of the grid container. Any author defined named grid areas and lines were lost on any other element than a direct child. With subgrid, track sizing, templates
Security headers quick reference | Articles | web.dev
This article lists the most important security headers you can use to protect your website. Use it to understand web-based security features, learn how to implement them on your website, and as a reference for when you need a reminder. Security headers recommended for websites that handle sensitive user data: Content Security Policy (CSP) Trusted Types Security headers recommended for all websites
読み込み時間の高速化
Overview最新の Web エクスペリエンスを構築する際に高速化を行い、高速化を維持するためには、測定、最適化、監視が重要となります。パフォーマンスの高いサイトではパフォーマンスの低いサイトに比べてユーザーの活動がより活発になり、そしてその活動がより長く維持されるようになるため、Web ベンチャーが成功を収めるためにはパフォーマンスが重要な役割を果たします。サイトは、ユーザーの満足度を中心とした指標に重点を置いて最適化が行われる必要があります。これらの指標を確認し、パフォーマンスを向上させるために必要な正しい手順を進めるためには、(web.dev に組み込まれている) Lighthouse などのツールが役に立ちます。"高速化を維持する" ためには、パフォーマンスバジェットを設定して適用し、高速化した読み込み速度やユーザーにとっての高い使用感を維持していくために必要な制約の中でサイトの
New to the web platform in May | Blog | web.dev
New to the web platform in May Stay organized with collections Save and categorize content based on your preferences. Discover some of the interesting features that landed in stable and beta web browsers during May 2023. Stable browser releases In May 2023, Firefox 113, Chrome 113, Chrome 114, and Safari 16.5 became stable. Let's take a look at what this means for the web platform. WebGPU Chrome 1
Avoid large, complex layouts and layout thrashing | Articles | web.dev
Avoid large, complex layouts and layout thrashing Stay organized with collections Save and categorize content based on your preferences. Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn JavaScript | web.dev
Learn Performance | web.dev
Milliseconds make millions | web.dev