使用 rel=\"preload\" 加速您的網站

在提升網站效能方面，每一毫秒都很重要。減少關鍵資源載入時間的最有效方法之一是使用 HTML 連結 rel="preload" 屬性。在這篇文章中，我們將深入探討預先載入的工作原理、何時使用它以及它如何顯著改善網站上的使用者體驗。

什麼是rel="預載"？

rel="preload" 屬性可讓您告訴瀏覽器在頁面渲染期間需要某些資源之前開始下載它們。透過這樣做，您可以確保更快地取得字體、樣式表或腳本等關鍵資源，從而減少頁面完全渲染所需的時間。

簡單地說，您向瀏覽器提醒哪些文件對於流暢的體驗很重要。

為什麼要使用預載？

大多數 Web 效能最佳化都專注於減少載入資源所需的時間。當字體、CSS 或 JavaScript 檔案等關鍵資源直接影響頁面顯示和運行速度時，預先載入特別有用。

預先載入的作用如下：

• 減少渲染阻塞：透過預先載入關鍵 CSS 或字體，可以避免頁面在顯示內容之前等待載入這些資源的渲染阻塞問題。
• 改進首次內容繪製 (FCP)： 預先載入可確保更快下載重要資源，從而提高向使用者顯示第一個視覺內容的速度。
• 更好的使用者體驗： 載入速度更快的頁面感覺反應更快，並增強了整體使用者體驗，特別是對於字體或英雄圖像等資源密集型資產。

文法和用法

讓我們從如何使用 rel="preload" 的基本範例開始。下面是一個簡單的 HTML 片段，示範了預先載入自訂字體：

<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

在此範例中：

• href指定資源的 URL。
• as 表示資源類型（例如字體、圖像、腳本）。
• 類型幫助瀏覽器理解文件的確切格式（對字體有用）。
• 從不同網域載入資源時需要 crossorigin。 瀏覽器看到此標籤並知道儘早下載字體，即使使用該字體的 CSS 尚未應用。

預先載入不同類型的資源
您可以預先載入對於呈現頁面至關重要的各種類型的資源。讓我們來看一些常見的例子：

1。預載字體
字體通常是初始頁面載入緩慢的主要原因。預先載入它們可確保在內容呈現後立即正確設定文字樣式，從而防止出現無樣式文字 (FOUT) 或出現不可見文字 (FOIT)。

<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">

2。預先載入樣式表
應預先載入控制頁面佈局的關鍵樣式表，以確保瀏覽器盡快呈現頁面。

<link rel="preload" href="/css/main.css" as="style">

3。預先載入腳本
如果您有用戶互動所需的 JavaScript，預先載入它可以幫助減少腳本執行的延遲。

<link rel="preload" href="/scripts/main.js" as="script">

4。預載圖片
應預先載入大圖像，尤其是首屏使用的圖像，以確保用戶在獲取圖像時不會看到空格或圖像佔位符。

<link rel="preload" href="/images/hero.jpg" as="image">

使用 rel="preload" 的最佳實踐

雖然預先載入是一個強大的工具，但您應該謹慎使用它。以下是一些最佳實踐：

1. 僅預先載入關鍵資源：預先載入所有內容實際上會減慢您的網站速度。堅持初始頁面渲染所需的資源。

2. 對外部資源使用跨網域：從不同網域預先載入資源時，請務必包含 crossorigin 屬性。這可確保您的資源可以正確獲取，而不會出現 CORS 問題。

3. 確保正確的快取處理：預先載入的資源應該是可快取的，以防止冗餘的網路要求。這可以減少伺服器和用戶瀏覽器的負載。

4. 不要預先載入所有內容：過度預先載入可能會對瀏覽器造成不必要的壓力，從而導致效能下降。僅預先載入關鍵渲染路徑所必需的資源。

Example of Using rel="preload" on Your Website
Here’s a full example of how you can integrate rel="preload" in a typical web page:

    
    
    

    
    <link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/scripts/main.js" as="script">
    <link rel="preload" href="/images/hero.jpg" as="image">

    
    


    

        
Preload Example
        
    

    

In this example, we’ve preloaded the essential assets that will immediately impact how fast the page renders, like fonts, stylesheets, and images.

When Not to Use rel="preload"

While preload is powerful, it’s not a magic solution for all resources. Here are a few cases where you might want to avoid using it:

Non-Critical Resources: Don’t preload assets that aren’t essential for the initial rendering of your page.

Unpredictable Resources: If certain assets are conditional or depend on user interaction (like below-the-fold images or deferred JavaScript), it’s best to let the browser fetch them when needed.

Conclusion
Using rel="preload" is a simple yet effective way to speed up your website by telling the browser to fetch critical resources as soon as possible. By focusing on preloading essential assets like fonts, stylesheets, and images, you can reduce load times and enhance user experience.

The key takeaway: preload only what’s critical, and your website’s performance will significantly improve. Give it a try on your next project and see the difference it makes!

以上是使用 rel=\"preload\" 加速您的網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！