修復Google PageSpeed消除以上折疊內容中的渲染阻止JavaScript和CSS
解決渲染阻止Javascript和CSS
Google PageSpeed [1]測試“在折疊內容中消除渲染阻止JavaScript和CSS”提議您在HTML完全加載後提供網站的JS和CSS文件 - 因此，不要暫停HTML加載下載它們。
[1]-PageSpeed Insights – developers.google.com渲染阻止腳本定義：在解析完整的HTML DOM之前加載的腳本。例如，標頭或內容中包含的腳本，而沒有任何特定說明，瀏覽器可以將腳本加載延遲到HTML繪製之後。在首屏內容中消除渲染阻止的JavaScript和CSS：展示如何修復它
- 擁有外部系統為您優化網站
- 使用CDN可以代表您執行所有可能的優化，包括以下三個必要的優化，以解決消除渲染阻塞資源的問題：
- 推遲加載Javascript文件
- HTML加載後加載CSS
- 使用WordPress插件
要消除消除渲染阻塞的資源，有很多優化措施是必要的，並且可能需要您自己進行繁瑣的工作–此外，您還必須不斷尋找Chrome LightHouse和Google PageSpeed中包含的新測試以及其他頁面速度測試。
由於該問題與DOM有關，因此不存在消除htaccess代碼中的渲染阻止資源的解決方案，DOM意味著網站內容以及加載所包含資源的順序，例如Javascript和CSS，但不僅如此。這些不能在Htaccess中觸發，而只能在HTML DOM內容中觸發。
如果您解決了台式機的這些問題，那麼您將同時消除移動設備的渲染阻止資源，因為兩者完全相同！
Did you know that you can even have all these steps executed automatically for you by using an external 站點速度加速器 technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!
推遲加載Javascript文件
為了推遲加載JS文件[2]，您可以將async或defer指令添加到腳本鏈接。異步不會保證它們以相同的順序加載 - 因此，如果您有多個腳本應該一個接一個地運行，則延遲優先保證序列：
[2]-刪除阻止渲染的JavaScript | PageSpeed見解|優秀的開發人員– developers.google.comHTML加載後加載CSS
為了在完整的HTML傳輸完成後加載CSS，Google建議[3]將這段代碼添加到HTML的末尾，例如頁尾關閉標記之後和正文關閉標記之前：
[3]-優化CSS交付| PageSpeed見解|優秀的開發人員– developers.google.com為了優化您的網站，刪除未使用的CSS代碼也是一個好主意，如果您在Web設計中沒有知識，則可以繁瑣的操作。如果您自己尚未創建網站主題，則可以更願意使用外部系統代表您的頁面上的未使用的CSS代碼，例如Ezoice Leap，例如他們的驚人網站的新（和完全免費）版本速度加速器。
通過Google網站速度測試！
這使我能夠通過Google PageSpeed [1]測試在網站上消除以上折疊內容中的呈現屏蔽JavaScript和CSS（以及利用瀏覽器緩存[4]），從移動設備上的分數上升到51圖1）到72（圖2），並從桌面上的59（圖3）增加到79（圖4）。
[4]-修復htaccess中的Google PageSpeed槓桿瀏覽器緩存-國際SAP /網絡顧問Yoann Bierling-www.ybierling.com
如何消除WordPress中的渲染阻塞資源
要消除WordPress中的渲染阻止資源，必須安裝一個插件，如JetPack。
然後，轉到必須是管理員的選項，然後轉到JetPack選項>寫入>性能和速度>選中啟用站點加速器，加快映像加載時間，加快靜態文件加載時間，並啟用延遲加載圖片。
這將消除WordPress中的渲染阻塞資源，並通過允許JetPack優化您的圖像並從其全局服務器網絡提供圖像和靜態文件（如CSS和JavaScript）來加快頁面加載速度。
如何消除WordPress上的渲染阻止JavaScript和CSS
此外，請不要忘記通過使用延遲加載功能關閉屏幕上的加載圖像。雖然它曾經困難並且需要外部庫以關閉屏幕加載圖像，但現在在HTML5中可以本地可能存在！
要在網站上實施延遲加載圖像，只需將懶惰的值添加到網站圖像的裝載量，而最近的瀏覽器將理解只有在顯示它們時應請求和加載這些圖像，這意味著用戶滾動到圖像佔位符。
<img src=”SRC” alt=”ALT” loading=”lazy”></img>最重要的是，延遲加載也適用於IFRames，並且是消除來自網頁的渲染封鎖資源的重要實現。
一旦渲染阻止資源在主內容之後有加載指令，就意味著HTML DOM，您將在Google Lighthouse測試中獲得很多積分，頁面速度見解測試或Google Core Web Vitals。
有外部系統為您優化網站
您是否知道您實際上可以代表您解決所有Google PageSpeed問題，而無需註冊網站即可進行除註冊免費試用和更改DNS之外的大量工作？
使用Ezoic平台的Site Speed Accelerator技術，所有常見的Google PageSpeed問題都將通過其係統解決，這將成為您的網站和訪問者之間的中介。他們將為您優化網頁，然後再將其顯示給訪問者。
只需在Ezoic平台上免費註冊一個試用版即可自己嘗試變綠，這將使您的網站在幾天之內達到頁面速度優化的最高標準：渲染下一代Webp圖像，通過刪除未使用的CSS來優化CSS和JavaScript和JS，延遲加載圖片，調整圖片大小，緩存您的網站頁面，優化字體，預連接到所有包含的網站等等。
不需要信用卡-您要做的就是免費註冊並嘗試一下。另外，如果您的網站通過展示廣告獲利，除了使您的網站變得更快之外，它們還可以通過機器學習和先進的人工智慧來優化廣告，從而使您的收入比使用Google AdSense的收入高出幾倍。
常見問題
- 如何在折疊內容中消除渲染障礙JavaScript和CSS？
- 為了消除對折疊內容的渲染鍵盤JavaScript和CSS，您應該確保在HTML滿載後加載網站的JS和CSS文件。這意味著不暫停HTML加載過程下載這些文件。您可以使用異步或延期屬性推遲JavaScript文件，對於CSS，您可以使用特定的代碼在HTML之後加載它。像 Ezoic這樣的外部優化系統也可以自動處理。
- Web開發人員如何解決Google PagesPeed的建議，以消除渲染障礙JavaScript和CSS？
- Web開發人員可以通過使用異步加載JavaScript來縮小JavaScript和CSS文件來優化其站點，將關鍵CSS直接插入HTML，並推遲非臨界CSS和JavaScript文件的加載。實施這些策略可以顯著改善加載時間和頁面分數。
完美的Chrome Lighthouse得分：會發生什麼？
Yoann Bierling是一家網絡出版和數字諮詢專業人員，通過技術專業知識和創新產生了全球影響。熱衷於賦予個人和組織在數字時代蓬勃發展，他被迫取得出色的成果，並通過創建教育內容來推動成長。
