initial commit

2 files changed, 254 insertions, 0 deletions

diff --git a/files/zh-tw/learn/performance/index.html b/files/zh-tw/learn/performance/index.html
new file mode 100644
index 0000000000..9cd34ae5a9
--- /dev/null
+++ b/files/zh-tw/learn/performance/index.html
@@ -0,0 +1,124 @@
+---
+title: Web performance
+slug: Learn/Performance
+tags:
+  - CSS
+  - HTML
+  - HTTP
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+  - Web Performance
+translation_of: Learn/Performance
+---
+<p>{{LearnSidebar}}{{draft}}</p>
+
+<p class="summary">Building websites requires HTML, CSS, and JavaScript. To build websites and applications people want to use, which attract and retain users, you need to create a good user experience. Part of good user experience is ensuring the content is quick to load and responsive to user interaction. This is known as web performance, and in this module you'll learn all you need to build performant websites.</p>
+
+<p>Web performance is the objective measurement and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions. Is the scrolling smooth? Are buttons clickable? Are pop-ups quick to open up, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and <a href="/en-US/docs/Web/Performance/Time_to_interactive">time to interactive</a>, and subjective experiences of how long it felt like it took the content to load.</p>
+
+<p>Many features impact performance including latency, application size, the number of DOM nodes, the number of resource requests made, JavaScript performance, CPU load, and more.  It is important to minimize the loading and response times, and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.</p>
+
+<p>Web performance involves measuring the actual and perceived speeds of an application, optimizing where possible, and then monitoring the performance, to ensure that what you've optimized stays optimized.</p>
+
+<p>There are tools, APIs, and best practices that help us measure, improve performance, and monitor performance. We'll look at these too in the course of this module.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>While knowing HTML, CSS, and JavaScript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance.</p>
+
+<p>Several of the introductory modules below do not require programming knowledge, though an understanding of HTML is needed for the HTML and performance module, an understanding of CSS is needed for the CSS and performance module, etc. We recommend that you work through our introductory modules first, starting with <a href="/en-US/docs/Learn/Performance/What_is_web_performance">what is web performance</a> first. The introductory modules provide an overview of web performance. The first three should be considered required reading whether you are a developer or project manager. The tech topic focused modules are more appropriate for developers using these technologies.</p>
+
+<p>The advanced modules delve deeper into topics overviewed in the introductory modules and provide overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.</p>
+
+<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before proceeding with this topic. However, doing so isn't absolutely necessary.</p>
+
+<h2 id="Introductory_modules">Introductory modules</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
+ <dd>This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></dt>
+ <dd>
+ <p>More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual p<span style="letter-spacing: -0.00278rem;">age load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</span></p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Basics">Web performance basics</a></dt>
+ <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTML_Performance_Features">HTML performance features</a></dt>
+ <dd>Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images and video</a></dt>
+ <dd>The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further. In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.</dd>
+ <dt>Responsive Images</dt>
+ <dd>While optimizing images is vital to high-performance media-rich user experiences, ensuring that images are sized appropriately for the devices that download them is especially important. In this article, we'll discuss the role of native browser features such as the &lt;picture&gt; element and the srcset attribute in efficient image delivery, and how you can use them with confidence.</dd>
+ <dt>Alternative media formats</dt>
+ <dd>When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.</dd>
+ <dt>Web font performance</dt>
+ <dd>An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
+</dl>
+
+<h2 id="In_this_section">In this section</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Advanced_Modules">Advanced Modules</h2>
+
+<dl>
+ <dt>Populating the page</dt>
+ <dd>An HTTP request is made and, hopefully, a few seconds later, the site appears. Displaying the content involves executing JavaScript, possibly modifying the DOM, calculating styles, calculating layout, and finally rendering the content, which involves painting and compositing, and can involve GPU acceleration on a separate thread.</dd>
+ <dt>Performance bottlenecks</dt>
+ <dd></dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Understanding_latency">Understanding latency</a></dt>
+ <dd>
+ <p>Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, and how to measure and improve latency.</p>
+ </dd>
+ <dt>Understanding bandwidth</dt>
+ <dd>
+ <p>Bandwidth is the amount of data (measured in Mbps or Kbps) that can be sent per second. This article explains the role of bandwidth in media-rich internet applications, how it can be measured, and how you can optimize applications to make the best use of available bandwidth.</p>
+ </dd>
+ <dt>HTTP/2 and you</dt>
+ <dd>
+ <p>The transport layer—that is, HTTP—is utterly essential to the functioning of the web, and it has only been relatively recently that it has seen a major update in the form of HTTP/2. Out of the box, HTTP/2 provides many performance improvements and advantages over its predecessor, but it also changes the landscape. In this article, you'll learn what HTTP/2 does for you, and how to fine-tune your application to make it do go even further.</p>
+ </dd>
+ <dt>The role of TLS in performance</dt>
+ <dd>
+ <p>TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it's still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiling with the built-in profiler</a></dt>
+ <dd>Learn how to profile app performance with Firefox's built-in profiler.</dd>
+ <dt>Reading performance charts</dt>
+ <dd>Developer tools provide information on performance, memory, and network requests. Knowing how to read  <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a> charts, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call trees</a>, traces, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame charts</a> , and <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">allocations</a> in your browser developer tools will help you understand waterfall and flame charts in other performance tools.</dd>
+ <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">CSS and JavaScript animation performance</a></dt>
+ <dd>Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS and JavaScript-based animations.</dd>
+ <dt>Analyzing JavaScript bundles</dt>
+ <dd>No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know <em>what</em> you're using, as well how to detect if there are duplicated scripts between bundles in your app.</dd>
+ <dt>Lazy-loading JavaScript with dynamic imports</dt>
+ <dd>When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.</dd>
+</dl>
+
+<dl>
+ <dt>Controlling resource delivery with resource hints</dt>
+ <dd>Browsers often know better than we do when it comes to resource prioritization and delivery—but they're far from clairvoyant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/dns-prefetch">DNS-Prefetch</a></dt>
+</dl>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance">Optimizing Startup Performance</a><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance"> </a></li>
+</ul>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/zh-tw/learn/performance/多媒體/index.html b/files/zh-tw/learn/performance/多媒體/index.html
new file mode 100644
index 0000000000..cbd3d8e23a
--- /dev/null
+++ b/files/zh-tw/learn/performance/多媒體/index.html
@@ -0,0 +1,130 @@
+---
+title: '多媒體: 圖像跟影片'
+slug: Learn/Performance/多媒體
+translation_of: Learn/Performance/Multimedia
+---
+<p>媒體，換句話說就是圖像跟影片，平均占了網站超過70%的下載流量。以下載的效能來考慮的話，減少媒體數量和檔案大小是一個簡單可以實現的目標。 <span class="seoSummary">這篇文章聚焦在優化圖像跟影片來改善網站的效能。</span></p>
+
+<div class="blockIndicator note">
+<p>這是一篇進階的在 web 上優化多媒體的介紹，包含基本的原則還有技巧，想了更多的話，可以看  <a href="https://images.guide">https://images.guide</a>。</p>
+</div>
+
+<h2 id="為什麼要優化你的多媒體">為什麼要優化你的多媒體</h2>
+
+<p>對於平均的網站, <a href="https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367">51% 的頻寬消耗來自圖像, 而影像則是 25%</a>，所以我們可以說處理和優化你的多媒體是很重要的。</p>
+
+<p>你必須考慮流量的使用. 很多的人都是使用流量有限制的上網方案， 或是用多少付多少的上網方案，也就是根據用了多少 MB 來付費。這樣的問題不是只發生在新興國家的市場. 在 2018 年, <a href="https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf" rel="noopener">英國仍有 24% 在使用「用多少付多少」的方案</a>。</p>
+
+<p>你還需要考慮記憶體的問題，因為許多移動設備的 RAM 都有限。有一件很重要的事你必須要記住，下載的圖像是被儲存在記憶體裡的。</p>
+
+<h2 id="優化圖像傳送">優化圖像傳送</h2>
+
+<p>儘管是頻寬的最大消耗者，但因為圖像是非同步載入的，所以訪問者可以在下載的同時看到頁面。因此，它們對<a href="/en-US/docs/Learn/Performance/perceived_performance">感知性能的影響</a>遠低於許多人的預期。 然而，圖像在內容中很常被使用，因此，重要的應該是讓訪問者盡快地看到它們，以獲得良好的體驗。</p>
+
+<h3 id="載入策略">載入策略</h3>
+
+<p>對於大多數網站來說，最大改進之一是將不在視窗裡的圖像做 lazy-loading ，而不是在初始頁面載入時就全部下載下來，不管訪問者是否之後會往下滾動查看它們。 許多 JavaScript 函式庫都可以為你實現這個功能，例如說 lazysize，並且瀏覽器的供應商也正在著手原生的 <code>lazyload</code> 屬性，然而目前還處於實驗階段。</p>
+
+<p>除了載入圖像的子集之外，接下來您還應該研究一下圖像本身的格式：</p>
+
+<ul>
+ <li>你是否正在載入最佳格式？ （見下文）</li>
+ <li>你載入的尺寸正確嗎？</li>
+ <li>你已經壓縮圖像了嗎？ (查看 <a href="https://imageoptim.com/" rel="noopener">ImageOptim</a>)</li>
+</ul>
+
+<h4 id="最佳格式">最佳格式</h4>
+
+<p>這非常值得用一個章節來介紹。因為為圖像選擇正確的格式可能很棘手。格式通常取決於圖像的用途：</p>
+
+<ul>
+ <li><strong>Progressive JPEG</strong>—不需要移動卷軸就能看到的網頁圖像。</li>
+ <li><strong>WebP / JPEG-XR / JPEG2000</strong>—往下移動卷軸才能看到網頁圖像。</li>
+ <li><strong>PNG / WebP</strong>—有透明度的圖像。 </li>
+ <li><strong>SVG</strong>—向量圖, 圖示 (備註： SVGs 比 icon fonts 還要好得多！).</li>
+</ul>
+
+<p>優先在不需要移動卷軸就能看到的網頁區域使用 Progressive JPEG 的原因是因為它們會逐漸地進行渲染（因此得名），這意味著用戶可以先看到低解析度的版本，然後再逐漸地變得清晰。而不是從頂部一行一行的以最高解析度來載入圖像，或甚至只有在完全下載好後才顯示。</p>
+
+<h4 id="控制下載圖像的優先級別（和順序）">控制下載圖像的優先級別（和順序）</h4>
+
+<p>將最重要的圖像更早地呈現在訪問者面前，可以改善感知性能。</p>
+
+<p>第一件要確認的事情是，你的前景圖像標籤 <code>&lt;img /&gt;</code> 跟你定義在 CSS 裡 <code>background-image</code> 的背景圖像 — 前景圖像比背景圖像被賦予更高的優先級別。</p>
+
+<p>其次，通過採用優先級別提示，你可以在圖像標籤中添加<code>importance</code> 屬性來進一步控制優先級別。輪播是一個在圖像上使用優先級別提示的例子，它的第一個圖像的優先級高於其他的圖像。</p>
+
+<h3 id="渲染策略">渲染策略</h3>
+
+<p>由於圖像是非同步載入的，並且會在第一次渲染後繼續載入，因此，如果在載入之前未定義尺寸的話，則可能會導致頁面內容的重新編排。比如說，當圖像載入時，文字內容可能會被擠壓到下面。所以， 很重要的是，定義 <code>width</code> 跟 <code>height</code> 或是新的 <code>intrinsicsize</code> 屬性。</p>
+
+<p>對於任何的背景圖像，設置 <code>background-color</code> 的值非常重要，因為在圖像下載之前，它能讓上面的內容是能夠被閱讀的。</p>
+
+<h2 id="優化影像傳送">優化影像傳送</h2>
+
+<p>為了確保您不會將不必要的大文件發送給用戶，最好<a href="#compress"> 壓縮所有你要傳輸的影像</a>，<a href="#omptimize">優化<code>&lt;source&gt;</code> 順序</a>, 設定 <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia#Video_autoplay">autoplay</a>, <a href="#muted">移除靜音影像的聲音</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia#Video_preload">優化影像預載</a>, 還有 <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia#Consider_streaming">考慮串流</a> 這部影像。</p>
+
+<h3 id="壓縮所有影像">壓縮所有影像</h3>
+
+<p>大多數的影像壓縮工作都包含，比較影像裡的相鄰幀，並刪除原始幀和後續幀中相同的細節。你想同時壓縮影像並將其匯出為多種影像格式, 包含 WebM，MPEG-4/H.264，以及 Ogg/Theora.</p>
+
+<p>你用來創建影像的軟體可能包含優化檔案大小的功能。如果沒有的話，那麼可以考慮幾種線上工具，像是之後篇章會討論的 <a href="https://www.ffmpeg.org/">FFmpeg</a>，他可以協助編碼，解碼，轉換，以及呈現其他神奇的功能。</p>
+
+<h3 id="優化_&lt;source>_順序">優化 <code>&lt;source&gt;</code> 順序</h3>
+
+<p>從最小到最大來排序影像的來源。例如說，給定三個壓縮影像，分別為 10 MB，12MB，以及13MB, 把最小的擺在第一個，最大的擺在最後一格。</p>
+
+<pre>&lt;video width="400" height="300" controls="controls"&gt;
+  &lt;!-- WebM: 10 MB --&gt;
+  &lt;source src="video.webm" type="video/webm" /&gt;
+  &lt;!-- MPEG-4/H.264: 12 MB --&gt;
+  &lt;source src="video.mp4" type="video/mp4" /&gt;
+  &lt;!-- Ogg/Theora: 13 MB --&gt;
+  &lt;source src="video.ogv" type="video/ogv" /&gt;
+&lt;/video&gt;</pre>
+
+<p>就順序的角度來說，瀏覽器會下載它看到的第一個影像來源，因此先讓他載入一個較小的影像。就＂最小＂的角度來說，要確認你的壓縮影響仍然看起來不會太糟。有幾個演算法可能會讓你的影像看起來像是個會動的 gif 。雖然 128 Kb 的影像可能在用戶體驗上會比 10 MB 的影像好，可是把看起來像是 gif 粒狀的影像放在內容後面，也可能會對你的品牌產生負面影響。</p>
+
+<p>查看 <a href="http://caniuse.com/#search=video">CanIUse.com</a> 來確認現今瀏覽器對於影像以及不同媒體格式的支持。  </p>
+
+<h3 id="影像自動播放">影像自動播放</h3>
+
+<p>為了確保循環播放背景影像，你需要向影像標籤裡添加多個屬性： <code>autoplay</code>, <code>muted</code>, 以及 <code>playsinline.</code></p>
+
+<pre>&lt;video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"&gt;</pre>
+
+<p>雖然屬性 <code>loop</code> 和 <code>autoplay</code> 在對於影像的循環跟自動播放很合理，可是 <code>muted</code> 屬性在行動裝置的瀏覽器裡是必須添加的。</p>
+
+<p><code>Playsinline</code> 在行動裝置裡的 Safari 是必須的，他讓影像可以在不需要全螢幕的模式下被播放。</p>
+
+<h3 id="移除靜音影像的聲音">移除靜音影像的聲音</h3>
+
+<p>如果你有一個 <code>hero-video</code> 或是其他靜音影片, 請將聲音從影像中移除。 </p>
+
+<pre>&lt;video autoplay="" loop="" muted="true" playsinline="" id="hero-video"&gt;
+  &lt;source src="banner_video.webm"
+          type='video/webm; codecs="vp8, vorbis"'&gt;
+  &lt;source src="web_banner.mp4" type="video/mp4"&gt;
+&lt;/video&gt;</pre>
+
+<p>這段 <code>hero-video</code> 代碼, 常出現在許多研討會網站以及公司的主頁， 它是個包括自動播放，循環播放和靜音的影像。它不包含任何控制選單，因此無法收聽聲音。通常它是沒有聲音的，但仍然存在音軌，因此它仍會消耗頻寬。然而，我們沒有理由將頻寬分給靜音影像的聲音。移除聲音可以節省 20% 的頻寬。這代表，如果你的影像是 10 MB，則節省了 2 MB。</p>
+
+<p>根據您的影像創作軟體，你也許可以在匯出和壓縮過程中刪除聲音。 如果沒有，那麼有一個免費的工具 <a href="https://www.ffmpeg.org/">FFmpeg</a> ，可以使用以下指令來為你完成此任務</p>
+
+<pre><a href="https://www.ffmpeg.org/">ffmpeg</a> -i original.mp4 -an -c:v copy audioFreeVersion.mp4</pre>
+
+<p><code>FFmpeg</code> 稱自己為＂用於記錄，轉換和串流音頻和影像的完整，跨平台解決方案＂。</p>
+
+<h3 id="影像預載">影像預載</h3>
+
+<p>preload 屬性具有3個可用選項：<code>auto</code>|<code>metadata</code>|<code>none</code>。預設選項是 <code>metadata</code>.</p>
+
+<p>將選項更改為 <code>auto</code> 會告訴瀏覽器自動下載整個影像。僅有在極有可能播放時才應該執行此操作，否則會浪費大量的頻寬。</p>
+
+<p><code>preload="metadata"</code> 最多可讓 3％ 的影像在頁面加載時被下載。 然後對於較大的影像來說，這可能或是大量的頻寬。</p>
+
+<p><code>preload="none"</code> 不會在播放之前下載任何的影像。 這會延遲影像的啟動時間，但能夠為播放可能性較低的影像保存大量的頻寬。</p>
+
+<h3 id="考慮串流">考慮串流</h3>
+
+<p><a href="https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-2/">串流影像讓適當的影像大小和頻寬</a> (根據網路速度) 被傳遞給用戶。 就像使用響應式圖像一樣，正確大小的影像將被傳遞到瀏覽器，從而確保用戶的快速影像啟動、低緩衝以及優化的播放。</p>