| 來源：公眾號《前端全棧開發者》（ID：by-zhangbing-dev）
在當今世界，JAVAScript框架每周都會出現，其他一切都會隨之改變，這很容易讓人陷入困境，并懷疑你的網站是否以最佳狀態執行。哪些做法要保留，哪些要放棄。我讀到過，使用 implementation x 可以幫助提升性能。但另一個帖子提到要不惜一切代價避免使用它——真相是什么？
使用html（最終構成我們的內容），我們可以輕松完成工作。它不會像JavaScript頁面那樣頻繁地更改。但是，這里提到的某些方面——有時甚至是大多數——經常被忽略，這確實會損害你的網站。最終，它驅使最終用戶離開。
在進入這些步驟之前，先做一個站點報告。不管是Lighthouse還是別的什么。然后，在應用此處提到的所有內容后再取一個。你會有一個很好的對比，它到底有什么不同。
因此，下一次編寫HTML時，請牢記以下10個最佳實踐。
1.編寫有效且可讀的DOM
第一個聽起來有些明顯。但我想在這里提一下我經常遇到的類似問題：
- 全部小寫：很多時候，我看到基礎結構寫的都是大寫，例如 <HTML> 或 <BODY>，甚至更糟的是，整個HTML本身。每個標簽都應該是小寫的，所以請不要在HTML標簽中使用任何大寫。
- 縮進是可讀性的關鍵：使用它。否則，你的文檔會顯得很平淡，里面的一切都會顯得很雜亂。增強可讀性也意味著可以減少開發時間。
- 自動關閉標簽曾經是強制性的。但是使用HTML5，它是可選的，完全由開發人員決定。要么在所有標簽上使用它，要么根本不使用它。這里的關鍵是保持一致。當然，不要忘記關閉常規標簽。
- 避免過度使用注釋：除非你有一個構建系統，或者你使用的是模板引擎，否則這些真的會增加你的HTML文件的體積。反過來，這也會拖慢你的初始頁面加載速度，會讓你的用戶等待。最終，讓他們離開。
- 組織DOM：始終考慮是否需要額外的div或額外的元素。嘗試只創建絕對必要的元素，并使用語義HTML元素而不是div來劃分頁面的大部分。其他地方也一樣，如果可以，請始終使用HTML5語義元素。它可以幫助搜索引擎知道頁面上哪一部分很重要，哪一部分不重要。記住，要時刻問自己，你是否真的需要那里多出來的div。把多余的東西處理掉。
2.不要使用內聯樣式和腳本
否則你的文檔很快就會變得雜亂無章，無法閱讀。總是使用外部樣式表。另外，盡量避免在css文件中使用 import 語句，它們會產生額外的服務器請求。
你還應該將它們捆綁在一起以減少請求數量。對于大型bundle，你可以利用域分片的優勢，將它們分割為2-4個更小的塊。
內聯JavaScript也是如此。除了可讀性問題，這將使你的文檔變得更重、更難維護。
3.內聯關鍵CSS
我們討論了為什么不應該內聯CSS。現在我們來討論一下為什么你應該這樣做。考慮將關鍵的CSS放在頂部，這樣，用戶可以更快地看到頁面的第一部分。僅內聯關鍵CSS，僅此而已！
關鍵CSS指的是渲染頁面頂部所需的最小CSS集，即用戶在登陸你的網站時首先看到的CSS。
此外，請記住，鏈接標簽的順序可能會重寫規則，所以要小心放置它們。如果你有用于重置或第三方庫的單獨文件，請先放置這些文件，然后放置其余文件。
4.將腳本標簽放在底部
將腳本標簽放在文檔的底部。從官方的角度來說，腳本標簽是活在 head 里面的，但如果我們把它們放在文檔底部，就在正文標簽關閉之前，我們就可以延遲它們的下載。這樣我們的文檔就可以先加載到dom中，展示給用戶，然后再請求腳本。
之所以這樣，是因為瀏覽器會逐行從上到下解釋你的文檔。當它到達 head 并遇到 script 標簽時，它將向服務器發出請求以獲取文件。如果它是一個巨大的文件，它將繼續加載，用戶將只看到一個空白頁面，因為它仍在加載頭部。因此，將它們移到底部。這樣，在加載腳本標簽的內容之前，將加載正文的所有內容。作為回報，我們可以誘使用戶相信我們的頁面正在快速加載。你也可以在你的腳本標簽中添加一個 defer 標簽，以確保HTML被優先加載。
5. 照顧無障礙
你是否知道，根據世界衛生組織的說法，世界人口的15％患有某種殘疾？超過10億人可能會在使用你的網站時遇到問題。如今，我們網站上的互動非常頻繁，可訪問性很容易受到沖擊。花一些時間用 aria 屬性裝飾復雜的UI元素。這帶來了對輔助技術的支持，因此你可以覆蓋更多的受眾。
6.對圖片使用alt標簽
alt標簽為圖像指定替代文本。所以萬一因為某種原因不能顯示圖片，就會顯示這段文字。當你的圖片缺少alt標簽時，搜索引擎是不喜歡的，會因此降低你的頁面排名。
7.每頁一個h1
每頁僅使用一個 h1。將最重要的文字放在此處，以描述頁面的內容。比如你的博客文章或文章標題。每個頁面使用多個 h1 標簽不一定是個好主意，也不建議這樣做，因為它可能會損害你的搜索引擎結果，這有助于搜索引擎正確地索引你的網站。另外，這是W3C規范中定義的，反正你的頁面內容應該由一個標簽來描述，所以每頁只保留一個 h1。
8.正確使用title和meta標簽
為你的頁面使用一個標題和適當的描述性元標簽。這些由你的本地搜索引擎人員負責，并用于為你的網站建立索引，因此，通過為他提供有用的信息來幫助他。始終使用meta視口標簽，以便根據設備的屏幕尺寸顯示你的網站。此外，還可以考慮使用open graph 標簽，將你的網站鏈接變成社交媒體平臺上的豐富內容。
9.壓縮
一旦你完成了一切，你準備讓你的網站上線，壓縮它。你可以使用第三方庫，特殊程序或稱為構建工具的工具，甚至可以使用在線應用程序。這將使你的文檔更小，從而加快頁面加載速度。要進一步執行此步驟，請在服務器端啟用brotli或gzip壓縮。它會對頁面速度產生巨大影響。
10.驗證你的HTML
最后但并非最不重要的一點是，始終驗證你的HTML。驗證器可以發現缺陷或錯誤的代碼，從而消除它們。你可以使用w3c validator。在這里，你可以在上線前通過URL驗證你的網站，通過上傳，或者你也可以通過直接輸入驗證。
比這更好的是，如果你能在提交代碼之前，設置一個自動檢查此類問題的linter。
按照這10個簡單的步驟，將幫助你加強你的HTML，讓你的網站排名更高，帶來更多流量，同時也從優化步驟中使其更快。也會導致更多的用戶互動。最后，它不僅會授予你更多的訪客，而且會有更多的快樂訪客。而這才是最重要的。感謝你花時間閱讀本文，祝你優化愉快！
