使用html和css技巧提升網(wǎng)站加載速度

加載時間每增加一秒（0-5 秒之間），網(wǎng)站轉(zhuǎn)化率平均就會下降 4.42%。頁面加載時間的前五秒對轉(zhuǎn)化率的影響最大。

通過更改html和css文件可以提高網(wǎng)站的頁面加載速度,本文現(xiàn)在就來介紹一下怎么實現(xiàn)。

延遲加載資源

延遲加載是一種縮短關(guān)鍵渲染路徑長度的策略，這是減少頁面加載時間的一種方式。

把css分割成多個文件

css文件越小越好,這樣渲染就能更快.通過分割css文件,把一些不需要在首頁渲染的css單獨(dú)抽離出來,后續(xù)訪問到在進(jìn)行請求加載.

可以通過使用media類型來加載:

比如說這是個完整的css,包含了網(wǎng)站的全部css

<link rel="stylesheet" href="styles.css" />

設(shè)置print(打印預(yù)覽模式/打印頁面),

<link rel="stylesheet" href="print.css" media="print" />

移動屏幕:

<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

平板:

<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 1080px)" />

適配手機(jī)屏幕的不同方向:

<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通過將 CSS 分離到多個文件中，主要的渲染阻塞文件（在本例中為 styles.css）要小得多，從而減少了渲染阻塞的時間，就能大大提高了頁面加載速度。而其他設(shè)了媒體查詢,只有符合條件時才會進(jìn)行渲染.

css中的font-display屬性

應(yīng)用于@font-face規(guī)則時，font-display屬性用于定義瀏覽器如何加載和顯示字體文件，允許在字體加載或加載失敗時以一個備選方案顯示文本。這通過使文本可見而不是出現(xiàn)空白屏幕來提高性能，但缺點(diǎn)是會出現(xiàn)無樣式的文本。

@font-face {
  font-family: "nunito", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

html中img標(biāo)簽

通常我們只需要展示屏幕可見范圍內(nèi)的圖片,其他并不需要第一時間加載渲染,在不可見的img標(biāo)簽中添加loading="lazy"以便僅在需要時加載圖像。這會大大降低頁面加載速度。

<img src="my-logo.png"  loading="lazy" />

選擇正確的圖像格式

將圖像設(shè)為.webp格式。web推薦將其作為網(wǎng)絡(luò)圖像格式標(biāo)準(zhǔn)。

與 PNG 相比，WebP無損圖像的尺寸[小 26%`](https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results) 。在同等SSIM質(zhì)量指數(shù)下，`WebP` 有損圖像比同類 `JPEG` 圖像[小 `25-34%`](https://developers.google.com/speed/webp/docs/webp_study)。動畫 `WebP` 圖像均支持有損、無損和透明，與 `GIF` 和 `APNG` 相比，它可以提供更小的尺寸。

WebP 與 PNG 圖像格式對比

WebP 與 JPEG 圖像格式對比

通過所有這些測試，證明即使在有損之后，webp 圖像的壓縮程度也會更高，因此會大大降低頁面加載速度！

還可以檢查圖像格式 .avif，在少數(shù)情況下它比 .webp 更好，但它是市場上的新格式（于 2019 年發(fā)布），但是還沒有多少瀏覽器支持 .avif 格式.

使用元素作為圖像

• 用于根據(jù)不同media條件裁剪或修改圖像（例如，在較小的顯示器上加載具有太多細(xì)節(jié)的圖像的簡單版本）。
• 在不支持 webp 格式的情況下提供替代圖像格式。
• 通過加載最適合查看者顯示的圖像來節(jié)省帶寬并加快頁面加載時間。

如果要為高 DPI (Retina) 顯示提供更高密度版本的圖像，在<source>元素上使用srcset。這使瀏覽器可以在數(shù)據(jù)保存模式下選擇較低密度的版本，并且我們還不需要編寫明確的media條件。

<picture>
  <source srcset="my-logo.webp" type="image/webp" media="(min-width: 600px)" />
  <source srcset="my-logo.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
  <source srcset="my-logo.webp" type="image/webp" /> 
  <img src="my-logo.png" alt="KOUSTAV" loading="lazy" />
</picture>

渲染圖像

由于圖像是異步加載的，并且在第一次繪制后繼續(xù)加載，如果在加載之前未定義它們的尺寸，則可能會導(dǎo)致頁面內(nèi)容的回流。例如，當(dāng)文本通過圖像加載而被推向頁面時。因此，設(shè)置width和height屬性至關(guān)重要，以便瀏覽器可以在布局中為它們保留空間。

對于任何background-image，設(shè)置一個background-color值非常重要，以便在圖像下載之前覆蓋的任何內(nèi)容仍然可讀。

代碼壓縮

從代碼中刪除所有不必要的字符以減小大小。不需要的空白字符（如空格、換行符、制表符等）和注釋將也刪除。

使用CodeBeautify、CSS Minifier等縮小工具來縮小 HTML 和 CSS 文件。這些將有助于為我們的網(wǎng)站提供更好的頁面加載速度。文章來源地址http://www.zghlxwxcb.cn/news/detail-601716.html

到了這里，關(guān)于使用html和css技巧提升網(wǎng)站加載速度的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！