css選擇器及權重計算，如何提升網站的打開速度？

網站速度優化如何影響轉化

緩慢的速度確實會扼殺轉化。實際上有47％的消費者希望網站在兩秒鐘或更短的時間內加載完畢， 而40％的消費者會放棄耗時三秒或更長時間的頁面。

這意味著如果您的網站加載時間超過三秒鐘，那么您將失去幾乎一半的訪問者，甚至無法訪問他們。

僅此一項就對您潛在的轉化帶來了巨大的打擊。然而對于決定留下來的訪問者，緩慢的加載時間可以阻止他們將來返回。在一項調查中，有79％的客戶表示他們不會返回效果不佳的網站。

最好的例子之一是沃爾瑪提高網站速度后的轉化率和收入提高。在最初的分析中，他們發現轉換的訪問者收到的頁面加載速度是未轉換的訪問者的兩倍。這表明頁面越快，訪問者進行購物的可能性就越大。

在網站速度優化結束時，沃爾瑪報告了以下結果：

網站速度每提高一秒鐘，轉化率就會提高2％。每提高100毫秒，他們的增量收入就增加了1％。

在另一項研究中，加載時間與轉化率之間的關系表明 ，加載時間僅增加一秒鐘，轉化率就會降低25％。那我們來看看如何提升網站的打開速度？

最小化HTTP請求

根據Yahoo的說法，網頁加載時間的80％ 用于下載網頁的不同部分，例如圖像，樣式表和腳本。

這些元素中的每個元素都會發出HTTP請求，因此頁面上的組件越多，頁面呈現所花費的時間就越長。

最小化您的請求的第一步是弄清楚您的站點當前有多少，以用作基準。如果您使用的是Google Chrome瀏覽器，則可以使用瀏覽器的開發人員工具查看您的網站發出了多少個HTTP請求。

右鍵單擊要分析的頁面，然后單擊“檢查”，然后單擊“網絡”選項卡。（如果看不到“網絡”標簽，則可能需要通過將左側邊框拖動到左側來展開“開發人員工具”側邊欄。）

“名稱”列顯示頁面上的所有文件，“大小”列顯示每個文件的大小，“時間”列顯示加載每個文件需要多長時間。

在左下角，您還將看到該網站發出的請求總數。減少此請求數量將加快您的網站速度，瀏覽文件并查看是否有必要。

縮小并合并文件

現在您已經知道您的網站發出了多少請求，接下來就可以減少該請求。最好的入門指南是HTML，CSS和JavaScript文件。

這些是非常重要的文件，因為它們決定了網站的外觀。它們還會增加您的網站在用戶每次訪問時所發出的請求數量。您可以通過“縮小”并合并文件來減少此數量。這樣可以減少每個文件的大小以及文件的總數。

如果您使用模板化的網站構建器，這尤其重要。這些使構建網站變得容易，但有時會創建混亂的代碼，從而大大降低您的網站速度。

縮小文件涉及刪除不必要的格式，空格和代碼。由于每段不必要的代碼都會增加頁面的大小，因此消除多余的空格，換行和縮進非常重要。這樣可以確保您的頁面盡可能的簡潔。

組合文件確實是聽起來很容易解決的問題。如果您的站點運行多個CSS和JavaScript文件，就可以將它們組合為一個文件。

當涉及到您的網站時，精益求精是更好的選擇。頁面上的元素越少，瀏覽器使頁面呈現所需的HTTP請求就越少-加載速度就越快。

對CSS和JavaScript文件使用異步加載

縮小并合并了一些文件后，您還可以優化它們在頁面上的加載方式。

可以通過兩種不同的方式加載CSS和JavaScript之類的腳本：同步或異步加載。

如果您的腳本是同步加載的，則它們會按照在頁面上顯示的順序一次加載一個。另一方面，如果腳本是異步加載的，則其中一些腳本將同時加載。

異步加載文件可以加快頁面的速度，因為當瀏覽器加載頁面時，頁面從上到下移動。

如果到達非異步的CSS或JavaScript文件，它將停止加載，直到完全加載該特定文件為止。如果該文件是異步文件，則瀏覽器可以繼續同時加載頁面上的其他元素。

推遲JavaScript加載

延遲文件意味著阻止其加載，直到其他元素加載完畢。如果推遲使用較大的文件（例如JavaScript），則確保可以立即加載其余內容。

如果您有HTML網站，則需要在</body>標記之前放置一個外部JavaScript文件的調用，該文件如下所示：

如果您網站的速度尚未達到您想要的速度，那么這可能是一個可以持續進行的目標。但是當您進行本文中列出的更改時，您可以繼續測試您的網站并提高排名，用了以上這些方法后，肯定速度會提高不少。

如何學好SEO？

1.合理內鏈結構

外鏈不是SEO的核心，最為重要的就是網站內容，而內鏈就好比一張蜘蛛網一樣，起著連接和傳遞網站系統化內容的作用。所以，內鏈設置必須注重合理、呼應，避免重復、堆積，這樣更利于搜索引擎的友好度，從而提升收錄和抓取。

2.好域名+穩定的服務器+打開速度

域名必須要好，好的域名主要是指域名中包含關鍵詞或者企業名稱，最好簡短易記。其次，就是老域名和新域名的區分，當然老域名更利于優化。域名只是影響優化的一小部分，而網站服務器的穩定性和打開速度卻是極為重要的一部分。數據調查顯示，通常一個打開速度較慢的站點會減少60%的流量，而且網站一旦出現服務器異常，打不開，直接就會造成收錄困難。建網站用top域名，易收錄。

3.有規律的更新維護

高質量的原創內容是重中之重，而高質量的標準取決于可讀性、稀缺性、價值性三個方面。所以，大家在更新網站內容的時候要把握好這幾點，高質量的原創內容一直是網站用戶和搜索引擎喜歡的，完善解決一些文章未完成的細節問題再發布，搜索引擎會認為你的文章更有價值。

4.美觀+有邏輯性的排版和布局

只有滿足了用戶的瀏覽及感官體驗，才能達到所謂的用戶體驗和粘度。但是美觀并不代表就一定有酷炫的功能和風格，因為JS、FLASH等特效方式的渲染力雖大于圖片，但是搜索引擎是抓不到，對搜索引擎來說是不友好的。所以，在保證美觀、邏輯性的排版布局的同時，JS等特殊效果盡量少用。要注意字體大小，運用圖文并茂的方式，排版整潔，搜索引擎也會根據頁面的整潔度給予好的評分。

5.標簽的合理利用

標簽是優化常用的一個標簽，在單頁面優化中，它的存在也是對頁面優化起到了很大的促進作用，在最能突出頁面內容的地方加上 會讓搜索引擎優先抓取，然后在一層一層往下面抓取，會讓搜索引擎更好的了解該頁面的核心內容，但一個頁面只能有一對 ，一定要使用合理。

6.三大標簽TDK

網站首頁title的寫法：網站標題或者網站標題_服務詞或者產品詞；

網站頻道頁title的寫法：頻道名稱_網站名稱；

網站文章頁title的寫法：文章標題_頻道名稱_網站名稱；

這種寫法符合重要的內容放在title前面，權重從左到右依次遞減的規則。

總結：在企業進行國內市場向國外市場轉型的重要階段，外貿SEO的重要性就凸顯而出，可以通過提升網站權重使網站在搜索引擎上獲得較好的排名。

css怎樣去除i標簽的默認樣式？

重寫i標簽的樣式，設置權重。

讀書筆記如何進行web前端性能優化？

提起Web前端性能優化的問題，前端開發人員非常熟悉，對于一個網站而言，即使內容和功能再優秀，如果用戶需要花費很久的時間才能打開，這樣遲早會消耗用戶的耐心，并最終失去用戶。

那如何才能優化前端性能？歸納為三步

一、關鍵資源字節數

字節數也就是通常說的減少資源文件（js、css、image、video...）的大小。

1、壓縮

前端使用uglify混淆壓縮

后端開啟gzip

對圖片進行壓縮，使用壓縮比例更高的格式（WebP）

2、緩存

強緩存（http狀態碼：200），不用請求服務器直接使用本地緩存，協商緩存（http狀態碼：304），使用時先請求服務器若被告知緩存沒過期則使用本地緩存，不用下載資源，使用localstorage對數據進行存儲。

3、針對首屏優化

對非關鍵資源延遲加載、異步加載，減少首屏資源大小

二、關鍵資源連接數

1、合并請求

使用http2.0的多路復用合并請求配置combo，在無法使用http2.0的情況下作為一種合并資源請求的手段。

2、減少圖片請求數

使用spite圖，使用svg-symbol。

3、針對一些場景采用css、js內聯的方式。

4、使用強緩存減少了一次服務器請求。

5、非關鍵資源延遲、異步加載，減少了首屏資源連接數。

三、關鍵渲染路徑

1、bigpipe分塊輸出

這里主要是因為要完成一整個頁面的輸出后端需要處理很多個任務，我們可以將這些多個任務進行分塊，誰先完成誰就先輸出，最終通過JS回填的方式輸出DOM節點，這種方式主要解決了直出頁面阻塞的問題。

2、bigrender分塊渲染

常規的手段就是采用前端模板渲染頁面，針對首屏時間主要減少了首次構建DOM樹時的節點數

3、針對reflow，repaint，composit路徑處理。

4、涉及到動畫時關于layer的概念render layer、graphics layer。

5、css放在頭部、js放底部避免阻塞DOM樹的構建，關于css、js的位置對于頁面渲染的影響大家可以關注下相關的文章。核心：css資源不會阻塞DOM樹的構建但會阻塞DOM的渲染，JS會阻塞DOM樹的構建，CSS會阻塞JS的執行。

以上就是針對Web前端性能優化歸納出的解決方案。更多Web前端學習資料，關注“武漢千鋒”微信公眾號領取。