From b8899e350326af3e53dfad89747761c1c13a3915 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 14 Sep 2021 11:06:51 +0900 Subject: Learn 以下の文書内のリンクURLを正規化 (#2356) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正 --- .../performance/web_performance_basics/index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'files/ja/learn/performance/web_performance_basics/index.html') diff --git a/files/ja/learn/performance/web_performance_basics/index.html b/files/ja/learn/performance/web_performance_basics/index.html index 276e2f2e04..02ea575063 100644 --- a/files/ja/learn/performance/web_performance_basics/index.html +++ b/files/ja/learn/performance/web_performance_basics/index.html @@ -12,23 +12,23 @@ translation_of: Learn/Performance/Web_Performance_Basics

Best practices

Quick Wins

CSS

-

Web performance is all about user experience and perceived performance. As we learned in the critical rendering path document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.

+

Web performance is all about user experience and perceived performance. As we learned in the critical rendering path document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.

To load CSS asynchronously one can simpy set the media type to print and then change to all once loaded. The following snippet includes an onload attribute, requiring Javascript, so it is important to include a noscript tag with a traditional fallback.

@@ -45,13 +45,13 @@ translation_of: Learn/Performance/Web_Performance_Basics

Javascript

-

Avoid Javascript blocking by using the async or defer attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.

+

Avoid Javascript blocking by using the async or defer attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.

Web Fonts

EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.

-

Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize font weight to match the web font as closely as possible.

+

Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize font weight to match the web font as closely as possible.

Icon web fonts

@@ -60,19 +60,19 @@ translation_of: Learn/Performance/Web_Performance_Basics

Tools

APIs

Things not to do (bad practices)

-- cgit v1.2.3-54-g00ecf