這是一個關于幫助、改進和優化前端技術的故事,這對前端人員來說是一個非常有用的知識。主要內容包括清理代碼、壓縮圖片、壓縮外部資源等方法。這些方法將顯著提高您的網站的速度和整體性能。
一、清理HTML文檔。
HTML,即超文本標記語言,幾乎是所有網站的支柱。HTML將標題、子標題、列表等文檔結構格式帶到網頁上。圖表甚至可以在最近更新的HTML5中創建。
HTML很容易被網絡爬蟲識別,所以搜索引擎可以根據網站的內容在一定程度上實時更新。寫HTML的時候,要盡量簡潔有效。此外,在HTML文檔中引用外部資源時,還需要遵循一些最佳的實踐方法。
1.適當放置CSS。
Web設計師喜歡在創建風格表之前在網頁上建立主要的HTML骨架。這樣,網頁中的風格表通常放在HTML后面,接近文檔的結尾。然而,建議將CSS放在HTML的上部和文檔頭中,以確保正常的渲染過程。
該策略不能提高網站的加載速度,但它不會讓訪問者長時間觀看空白屏幕或無格式文本(FOUT)。如果網頁上的大部分可見元素已經加載,訪問者更有可能等待加載整個頁面,從而帶來前端的優化效果。這就是知覺性能。
2.正確放置Javascript。
另一方面,如果JavaScript放置在head標簽或HTML文檔的上部,則會阻止HTML和CSS元素的加載過程。這種錯誤會增加頁面加載時間,增加用戶的等待時間,讓人感到不耐煩,放棄訪問網站。但是,您可以將JavaScript屬性放置在HTML底部,以避免此問題。
此外,使用JavaScript時,人們通常喜歡用異步腳本加載。這將阻止HTML中script>標簽的呈現過程,如文檔中間的情況。
雖然HTML是網頁設計師最值得使用的工具之一,但它通常與CSS和JavaScript一起使用,這可能會減慢網頁瀏覽速度。雖然CSS和JavaScript有利于網頁優化,但使用時也要注意一些問題。使用CSS和JavaScript時,避免嵌入代碼。因為當您嵌入代碼時,將CSS放置在樣式標記中,并在腳本標記中使用JavaScript,這將增加每次刷新網頁時必須加載的HTML代碼量。
二、優化CSS性能。
CSS,即級聯風格表,可以從HTML描述的內容生成專業整潔的文件。很多CSS需要通過HTTP請求(除非使用內聯CSS)引入,所以要努力去除繁瑣的CSS文件,但要注意保持其重要特征。
如果使用CSS將插件和布局風格保存在不同的文件中,訪問者的瀏覽器每次訪問都會加載大量的文件。雖然HTTP/2的存在減少了這個問題,但加載外部資源仍然需要很長時間。要了解如何減少HTTP請求以大大縮短加載時間,請閱讀WordPress性能。
此外,許多網站管理員錯誤地使用@import指令在網頁上引入外部風格表。這是一種過時的方法,可以阻止瀏覽并平行下載。link標簽是最好的選擇,它也可以提高網站的前端性能。更重要的是,通過link標簽要求加載的外部風格表不會阻止并行下載。
三、減少外部HTTP請求。
在許多情況下,網站的大部分加載時間來自外部HTTP請求。外部資源的加載速度因主機提供商的服務器架構和位置而異。減少外部請求的第一步是簡要檢查網站。研究您網站的每個組成部分,以消除任何影響訪問者體驗的組成部分。這些組件可能是:
1.不必要的圖片。
2.JavaScript代碼無用。
3.css過多。
4.多余的插件。
去除這些多余的成分后,整理剩余的內容,如壓縮工具、CDN服務和預獲取(prefetching),這些都是管理HTTP請求的最佳選擇。此外,減少DNS路由搜索教程將教你如何逐步減少外部HTTP請求。
事實上,我們似乎需要大量的精力來進行前端優化。我相信這個應用程序指南中的一些技巧可以幫助你大大提高網站的加載速度。一般來說,網站加載得越快,用戶體驗就越好。因此,提高網站速度是前端優化的必要工作內容。