ウェブパフォーマンスの基礎

あなたのウェブサイトが可能な限りのパフォーマンスを発揮すべき理由はたくさんあります。以下に、各トピックの詳細情報を提供するためのリンク付きのベストプラクティス、ツール、API の簡単なレビューを示します。

Best practices

Start with learning thecritical rendering path of the browser. Knowing this will help you understand how to improve the performance of the site.
Usingresource hints such asrel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload
Keep the size of Javascript to aminimum. Only use as much Javascript as needed for the current page.
CSS performance factors
UseHTTP/2 on your server (or CDN).
Use a CDN for resources which can reduce load times significantly.
Compress your resources usinggzip,Brotli, andZopfli.
Image optimization (use CSS animation, or SVG if possible).
Lazy loading parts of your application outside the viewport. If you do, have a backup plan for SEO (e.g render full page for bot traffic); for example, by using theloading attribute on the<img> element
It is also crucial to realize what is really important to your users. It might not be absolute timing, butuser perception.

Web performance is all about user experience and perceived performance. As we learned in thecritical 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.

html

<link  rel="stylesheet"  href="/path/to/my.css"  media="print"  onload="this.media='all'" /><noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>

The downside with this approach is the flash of unstyled text (FOUT.) The simplist way to address this is by inlining CSS that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. These styles will improve perceived performance as the CSS does not require a file request.

html

<style type="text/css">  // Insert your CSS here</style>

Javascript

Avoid Javascript blocking by using theasync ordefer 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. Optimiizefont weight to match the web font as closely as possible.

Icon web fonts

If possible avoid icon web fonts and use compressed SVGs. To further optimize inline your SVG data within HTML markup to avoid HTTP requests.

Tools

Learn to use theFirefox Dev Tools to profile your site.
Pagespeed Insights can analyze your page and give some general hints to improve performance.
Lighthouse can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility.
Test your page's speed usingWebpagetest.org, where you can use different real device types and locations.
Try theChrome User Experience Report which quantifies real user metrics.
Define aperformance budget.