青春娱乐网资源

<div id="sjwwv"></div>
<li id="sjwwv"></li>

<dl id="sjwwv"><label id="sjwwv"></label></dl>

<button id="sjwwv"></button>
  • <button id="sjwwv"></button>
    1. 首頁
    2. 網絡營銷賦能
    3. 海外營銷

    揭開JavaScript的神秘面紗:測試渲染的技巧和工具

    JavaScript有能力在網站上為用戶和搜索引擎打破很多不同的東西。

    因此,許多搜索引擎優化專業人士和數字營銷人員都不相信JavaScript作為編程語言,因為它可能對他們的網站產生負面影響。

    JavaScript和渲染經常存在一種神秘的氣氛,這只會增加這種不信任感。

    這就是為什么我編寫本指南的目的是為了準確地解釋如何測試網站上的JavaScript是否正確呈現……或者不是。

    如果您想深入了解一些關鍵術語和概念,然后再深入了解JavaScript審核的詳細信息,請務必先查看此JavaScript基礎知識指南。

    您需要測試的JavaScript問題
    任何JavaScript審核的主要優先事項始終是找到阻止用戶和搜索引擎無法查看內容的關鍵問題。

    為了能夠確定JavaScript可能會損害您網站的性能,您需要將分析重點放在回答以下問題上:

    頁面可轉換嗎?
    Google只能索引它可以呈現的內容,但其他搜索引擎根本無法呈現JavaScript或索引它生成的內容。

    重要的是測試是否阻止了JavaScript驅動的頁面進行索引,以及是否在不進行渲染的情況下立即提供關鍵內容。

    對頁面加載速度有何影響?
    擁有緩慢呈現的頁面會對用戶體驗產生負面影響,并且還會阻止搜索引擎抓取它們。

    未呈現和呈現內容之間是否存在差異?
    Google有一個雙波索引流程,這意味著它在最初抓取頁面后的第一波索引HTML內容。

    具有需要呈現的JavaScript的頁面將添加到隊列中,以便在幾天,幾周或一個月之后呈現。

    谷歌的兩波索引圖
    如果初始索引的HTML中顯示的內容與頁面呈現后的日期內容之間存在差異,則會產生問題,因為Google將收到有關該頁面的沖突信號。

    如何在設備和瀏覽器之間進行渲染?
    由于視口,CPU和其他因素的差異,渲染將受到影響,具體取決于所使用的設備。

    瀏覽器還具有不同的渲染功能,并使用不同的渲染引擎。這就是為什么重要的是測試您的網站如何在各種環境中呈現,以反映您的用戶將在其中瀏覽的內容。

    這些問題的答案將為用戶和需要解釋和使用它的搜索引擎是否可以訪問您的網站內容提供強有力的見解。

    用于測試JavaScript的工具
    現在我們已經介紹了要測試的主要JavaScript渲染問題,讓我們來研究一些可以幫助您進行分析的不同工具。

    1. URL檢查工具
      Google Search Console中的網址檢查工具會顯示有關Google是否能夠對網頁進行抓取和編制索引的信息。

    該工具顯示有關阻止對頁面編制索引的問題的詳細信息,包括無法加載的資源和無法處理的JavaScript。

    URL檢查工具截圖
    突出顯示URL檢查工具的功能: 實時JavaScript控制臺消息。

    URL檢查工具還允許您運行URL的實時測試,其中顯示了Google遇到的實時JavaScript警告和錯誤,這可能會阻止您的頁面內容被查看和編入索引。

    該工具的這一部分對JavaScript調試特別有用。

    URL檢查工具JavaScript控制臺錯誤截圖
    2.移動友好測試
    移動友好測試的一個好處是,您不需要使用Google Search Console帳戶就可以像使用URL檢查工具一樣使用它。任何人都可以用它來測試他們的頁面如何在移動設備上呈現

    此工具可以準確顯示Google如何使用智能手機用戶代理呈現網頁。它還顯示JavaScript錯誤和阻止的資源,可以阻止搜索引擎訪問您網站的內容。

    適合移動設備的測試截圖
    突出顯示適合移動設備的測試功能: 呈現頁面HTML快照。

    雖然呈現頁面的屏幕截圖僅顯示了折疊內容,但HTML部分顯示了整個頁面的呈現代碼,使您可以準確查看Googlebot智能手機能夠查看和索引的輸出代碼。

    適合移動設備的測試HTML快照

    1. PageSpeed Insights
      Google的PageSpeed Insights工具結合使用來自Lighthouse的實驗室數據和Chrome用戶體驗報告中的字段數據來記錄網頁的速度和效果。

    它還包含許多JavaScript報告,顯示如何通過減少JavaScript執行時間,縮小JavaScript等來改進頁面。

    PageSpeed Insights截圖
    突出顯示PageSpeed Insights: The Opportunities 部分的功能。

    此工具通過修復每個問題,按照可以節省多少時間整體頁面加載的優先順序排列機會列表。

    這是一個查找JavaScript問題的好地方,這些問題會顯著增加需要解決的頁面加載時間。

    PageSpeed Insights的“機會”報告截圖

    1. Diffchecker
      使用Diffchecker,您可以對其呈現的代碼并行執行頁面原始源代碼的分析。這允許詳細比較頁面內容在呈現后如何更改。

    Diffchecker截圖
    要開始使用Diffchecker,請嘗試復制頁面的源代碼并將其粘貼到原始文本 框中。

    查看頁面源截圖
    源代碼截圖
    然后復制同一頁面的outerHTML并將其粘貼到“ 更改的文本”框中。

    檢查元素截圖
    阻止對您的Google廣告進行欺詐性點擊。
    自動保護您的廣告免受競爭對手,僵尸程序,點擊服務器場和其他形式的點擊欺詐。設置簡單。開始免費試用。

    復制outerHTML截圖
    然后按Find Difference 以查找兩組代碼。

    突出顯示Diffecker的功能:刪除 和添加摘要。

    該工具提供了有關在渲染后對頁面進行了多少刪除和添加的頂級數據,然后必須深入查看詳細信息并并排分析兩個頁面版本。

    這可以立即指示渲染后頁面的變化程度。

    Diffchecker刪除和添加截圖

    1. WebPageTest
      WebPageTest報告頁面上的不同資源以及每個資源加載所需的時間。它將頁面的加載時間分解為處理頁面所需的不同階段和事件,例如腳本,解析和繪制。

    這為處理JavaScript所涉及的不同階段以及哪些階段引發最大問題提供了有用的見解,使您能夠發現性能瓶頸和模式。

    WebPageTest截圖
    突出顯示WebPageTest的功能: 請求映射。

    WebPageTest中的Request Map是我在很長一段時間內在速度測試工具中遇到的最喜歡的功能之一。

    它可視化在頁面上發出的所有不同請求,映射它們之間的依賴關系,并顯示每個資源的加載時間和相對大小。

    圓圈越大,需要為該特定資源下載的數據字節越多,對整體頁面權重的貢獻越大。

    此請求映射中的綠色圓圈是一個JavaScript文件,它是整個頁面上最大的資源:

    WebPageTest’請求地圖’截圖
    默認情況下,請求映射由資源主機進行顏色編碼,但是,您可以將簡單參數?group = mimeType添加到URL的末尾,而不是按資源類型進行顏色編碼。

    WebPageTest請求按類型參數排序的排序地圖
    這使得對JavaScript資源加載時間進行抽樣檢查的過程變得更加快捷和簡單。

    按資源類型截圖排序的WebPage測試請求圖

    1. Chrome DevTools
      如果您使用Chrome作為主瀏覽器,請確保使用Chrome DevTools的JavaScript測試和調試功能。DevTools dock有各種各樣的報告,例如性能監控,網絡條件,JavaScript錯誤等等。

    此工具使用許多不同的瀑布圖和時間線圖來繪制加載時間和資源的文件大小。

    例如,“ 性能” 選項卡顯示加載,編寫腳本,呈現和繪制頁面所花費的時間總結。注意橙色和紫色的尖峰,因為這些顏色分別與腳本和渲染有關。

    Chrome DevTools性能截圖
    Chrome DevTools性能截圖
    另一個很好的可視化可以在網絡 選項卡中找到,它顯示了運行的腳本和順序,以及顯示為紅線的加載事件。

    這很重要,因為加載事件是Google完成渲染并獲取HTML快照的時刻。在此之后運行的任何腳本都很有可能被Google看到。

    Chrome DevTools Network瀑布截圖
    您還可以使用 Chrome DevTools中的設備模式來模擬不同設備上的渲染。

    Chrome DevTools設備模式截圖
    其他瀏覽器還通過自己的開發人員工具(如Firefox,Opera和Safari)提供JavaScript調試功能。您無需使用Chrome即可獲得重要的呈現洞察力。

    突出顯示Chrome DevTools的功能: 覆蓋率報告。

    此報告顯示頁面上未使用的JavaScript代碼,因為它顯示實際執行的JavaScript總數與總共加載了多少。這為用戶訪問您的內容所必需的代碼提供了寶貴的見解。

    1. DeepCrawl
      雖然上面提到的其他工具在逐頁的基礎上提供了詳細的見解,但DeepCrawl(我在DeepCrawl工作)可以用來在網站的所有不同頁面上呈現JavaScript,就像Google一樣。 。

    此工具允許您大規模地測試和監視渲染,并向您顯示搜索引擎是否可以對JavaScript生成或管理的鏈接和內容進行爬網和索引。

    DeepCrawl設置截圖
    突出顯示DeepCrawl的功能: 自定義腳本注入。

    DeepCrawl具有自定義JavaScript功能,允許您在爬網時將代碼注入網站。此方法意味著您可以添加,更改或刪除DOM(文檔對象模型)中的元素以測試呈現的影響。

    您可以使用自定義腳本注入從Chrome收集速度指標,檢查正在使用的框架,iframe和腳本以及位置,查找外部文件等。

    DeepCrawl自定義JavaScript屏幕截圖
    結論
    無論您是初次使用JavaScript測試還是多年來一直在與JavaScript問題作斗爭,希望您已經學到了一些可以嘗試的新功能,并將其添加到您的審核流程中。

    要涵蓋使用這些工具測試和調試JavaScript的所有不同方法,這是一項挑戰。大多數樂趣來自于自己嘗試并發現每個新標簽和報告中的內容。

    確保您的網站繼續在搜索中執行的關鍵是繼續抓取,監控和測試JavaScript錯誤和瓶頸。這是保持領先地位的最佳方式,或者至少保持領先!

    免責聲明:本文僅代表作者個人觀點,與窮思筆記網無關。其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,并請自行核實相關內容。

    發表評論

    登錄后才能評論

    聯系我們

    18217712232?

    在線咨詢:點擊這里給我發消息

    郵件:572693986@qq.com

    QR code
    青春娱乐网资源