簡體   English   中英

刪除渲染阻止Javascript

[英]Remove Render Blocking Javascript

我嘗試使用Google PageSpeed Insights檢查我的網站速度有多好! 但它在移動版本中顯示錯誤。 Google建議我刪除阻止渲染的javascript,以使我的網站在移動設備上看起來更好。 我已經在下面寫下他們到底對我說了什么。

您的頁面有1個阻止腳本資源和3個阻止CSS資源。 這會導致頁面渲染延遲。

如果不等待以下資源加載,則無法呈現頁面上的首屏內容。 嘗試延遲或異步加載阻塞資源,或直接在HTML中內聯這些資源的關鍵部分。 刪除阻止渲染的JavaScript:

 https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 

優化以下CSS交付:

 http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900 https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa 

如果您編寫的頁面依賴於在加載時使用jquery,則刪除它意味着您將不得不重新編寫大量代碼,以節省大約10毫秒的加載時間?

打開瀏覽器的調試器,查看“網絡”選項卡,然后重新加載頁面。 您應該能夠決定建議的優化是否值得(我建議這樣做不值得)。

我在使用Javascript時遇到了類似的問題。 確保在源Java之后的代碼中放置type =“ text / js”。 像這樣: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>

否則,您需要進入服務器並對htcaccess文件進行調整。

Heloo Nazmul,也許您應該將問題編輯為“如何刪除在Blogger中使用Render Blocking Javascript的默認JS和CSS?” 可能會很長,但我認為您的問題就是這樣。 按照我的步驟:

  1. <head>更改為&lt;head&gt;
  2. 如果您的Internet服務提供商提供了一些笨拙的JS和CSS,請在</head>之前添加<!-- </head> --> </head>
  3. </head>更改為&lt;!--<head/>--&gt;
  4. <!-- </body></html> -->之前添加<!-- </body></html> --> </body></html>

關於DOM的工作,如果您仍然感到頭疼,我將為您提供示例空白博客模板。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    &lt;head&gt;
        <meta charset='utf-8'/>
        <style/>
        <b:skin><![CDATA[]]></b:skin>
    <!-- </head> -->
    &lt;!--<head/>--&gt;
    <body>
        <b:section class='header' id='header' showaddelement='yes'/>
        <a href="https://klikada.com"><h1 style="color:blue;font-family: monospace">klikada.com</h1></a>
        <b:section class='main' id='main' showaddelement='yes'/>
        <b:section class='footer' id='footer' showaddelement='yes'/>
    <!-- </body></html> -->  
    <style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM