網站前端調校之「禁止轉譯的CSS」 | 排除禁止轉譯的資源css
網站前端載入校能優化上,可透過GooglePageSpeedInsights[1]來評估與抓出問題,還會根據待改進項目的多寡及嚴重性給予優化上的分數。最近在製作公司網站的專案,雖然沒什麼內容,但趁上線前就試著用PageSpeedInsights掃了一下。下圖是一開始的情況:啊,雖然我不是分數控,但顯示紅色驚嘆號好像不大酷。其中「啟用壓縮功能」及「使用瀏覽器快取功能」,只要調整WebServer的設定,啟用壓縮及快取功能即可。公司是用Nginx,看來根本沒打開,我就隨手設定了一下(keyword:nginxgzip、cache)。但我非Server專業,就不班門弄斧囉,請自行...
網站前端載入校能優化上,可透過 Google PageSpeed Insights[1] 來評估與抓出問題,還會根據待改進項目的多寡及嚴重性給予優化上的分數。
最近在製作公司網站的專案,雖然沒什麼內容,但趁上線前就試著用 PageSpeed Insights 掃了一下。下圖是一開始的情況:
啊,雖然我不是分數控,但顯示紅色驚嘆號好像不大酷。
其中「啟用壓縮功能」及「使用瀏覽器快取功能」,只要調整 Web Server 的設定,啟用壓縮及快取功能即可。公司是用 Nginx,看來根本沒打開,我就隨手設定了一下(keyword:nginx gzip、cache)。但我非 Server 專業,就不班門弄斧囉,請自行參考相關說明文件。
而「清除前幾行內容中的禁止轉譯 JavaScript 和 CSS」這項中,列出了在目標網站的 <head> 標籤中、以 <link> 方式載入的 .css 檔案。雖然說明寫的是中文,但有種似懂非懂的感覺…
您的網頁含有 2 項禁止轉譯 CSS 資源,對網頁的轉譯作業造成延遲。
網頁的前幾行內容完全無法在下列資源載入完成之前轉譯。請延後載入或以非同步方式載入禁止轉譯資源,或是將這些資源的重要部分直接嵌入 HTML。
針對下列網址為 CSS 傳送進行最佳化處理:http://xxxx/application.csshttp://xxx/index.css
若情況允許,可直接採用 Google 的 PageSpeed 模組[2],相關的解決方案都「傳便便」了,這篇文章接下來的篇幅可能幫不上什麼忙啦,哈哈。
不過針對其他情況(Server 環境、職掌權限等等),或是像我 – 想靠自己實作解決這問題的小小前端,就繼續往下看吧 🙂
禁止轉譯的資源(Render Blocking Resources)禁止轉譯到底是什麼呢?可能看一下原文比較容易了解。轉譯的原文是 render,但我覺得似乎翻作「繪製」比較讓人容易了解。(雖然這段過程的確要經過轉譯、建構再繪製,但這邊就不討論翻譯問題了 :P)
在此「禁止轉譯」便是網頁的繪製被阻塞(Ren...