5種增強核心Web生命力的方法

埃德溫·圖嫩

埃德溫(Edwin)是戰略內容專家。 在加入Yoast之前,他花了多年時間在荷蘭領先的網頁設計雜誌上磨練自己的技能。

5種提升核心網路生命力的方法5種提升核心網路生命力的方法

「只要我能揮舞一下魔杖就能擁有一個超快速的網站!」 這可能也讓您大吃一驚,對嗎? 優化站點速度和用戶體驗是一項繁重的工作,而且技術上非常複雜,而且速度非常快。 大多數網站所有者或管理人員都需要迅速與開發人員聯繫以完成工作。 現在,新的Core Web Vitals指標為您提供了更多見解和針對要解決的問題的指示。 讓我們看一下您可以做的五件事,以提高您的Core Web Vitals分數。

目錄

首先,免責聲明

看,沒有一件事可以保證解決一個特定的問題。 您必須從更廣泛的角度來優化網站。 許多小的修補程序組成了不錯的結果。 因此,儘管我將為您提供五項您可以在此處進行的工作,但這遠沒有確定的餘地。 甚至Google都說,許多因素共同作用才能得出分數,因此很難確定如果這樣做,分數就會上升。

Google真正為您提供的是洞察力是什麼在減慢速度,哪些因素正在損害用戶體驗。 許多工具還提供有關如何修復問題的建議。 Web.de/措施,例如,它沒有做深入的研究,但是確實可以使您了解特定修復程序的影響。

5種方式來提升您的核心網路活力5種提高核心網路活力的方法」 src =「 https://seotradenews.com/wp-content/uploads/5-ways-to-boost-your -core-web-vitals.jpg「 class =」 wp-image-2620286Google的Web.dev/measure工具可讓您了解修補程序可能產生的影響

Google即將發布的頁面體驗更新

我們發布了幾篇有關Google頁面體驗更新的文章(將於2021年某個時候發布),因此,如果您需要更多背景信息,可以從這裡開始:

您或您的開發人員可以做的五件事

多年來,人們一直在談論 站點速度用戶體驗。 但是,儘管有大量關於如何優化站點的資料,但是將這些知識付諸實踐卻很困難。 在過去的幾個月中,Google在明年的頁面體驗更新方面再次將速度放在了首位。 為了幫助您為此做好準備,它開發了一些工具,可為您提供見解和大量文檔供您閱讀。

對於很多問題,建議並沒有真正改變太多。 歸結為儘快將主要內容提供給用戶。 運行測試以了解您的網站的性能,嘗試確定修復的優先順序並開始使用! 在下面,您會發現舊的和新的混合方式可以增強您的網站。

優化圖像

我將從一個古老的老歌開始這個列表:優化圖像。 您可以為網站做的最重要的事情之一就是正確優化圖像。 是的,我們說了一百萬遍,但是我們要再說一遍:去做。 主頁或目標網頁上的一幅未經優化的大圖片可能會傷害您。 大圖像通常是 最大含量的塗料(LCP) 對於任何給定的網站。 確保通過快速載入來給您的訪客適當的歡迎!

我們有一篇熱門文章 圖片搜索引擎優化 描述如何使該圖像快速載入。 但簡而言之,請確保按所需大小投放並壓縮得很好。 有很多工具可以幫助您做到這一點。 就個人而言,我喜歡得到的結果 squoosh.app。 不要認為您需要保持如此大的解析度,以便在最常見的屏幕上使該圖像清晰。

還要嘗試採用WebP之類的現代格式。 這些格式可以以較小的尺寸提供高質量的圖像。 WebP支持良好 甚至蘋果公司也加入進來! 即將發布的Safari 14(在MacOS和iOS上)都將支持WebP。 是的,新的基於Chromium的Microsoft Edge瀏覽器也支持WebP。

CMS還是一個可以幫助您改善載入圖像的工具。 WordPress 5.5將於八月到期,將支持圖像的延遲載入。 這意味著它將僅載入出現在屏幕上的那些圖像,而其餘部分則在用戶與該屏幕進行交互時載入。 這告訴瀏覽器僅在需要時才載入大圖像。

另一個常綠站點速度建議是使用 CDN,但是您知道也可以將CDN專門用於圖像嗎? 一個 圖片CDN 使您可以更好地控制自己的服務方式以及它們的外觀。 由圖像CDN推送的圖像在其URL中獲得了一串屬性,該屬性告訴瀏覽器該圖像應如何表現。

通過為圖像等指定空間來穩定載入

新指標之一是 累積布局偏移,或簡稱CLS。 這樣的一個例子是,當移動頁面看起來已準備就緒,並且僅當您想按一個按鈕時,內容就會移動並且載入緩慢的廣告會顯示在該位置。 這經常發生,並且是用戶感到沮喪的主要原因之一。 現在,雖然優化您的CLS並不一定會使頁面更快,但可以確保頁面感覺更快。

CLS是由CSS中沒有尺寸的圖像引起的。 也可能是由於廣告和嵌入沒有尺寸或動態注入的內容引起的。 如果未正確指定尺寸,則這些元素在載入過程中往往會略微跳動,使其顯得生澀且不穩定。 這也可能是由於在現有內容之上插入了新內容。 除非經過用戶的明確交互,否則不要這樣做。

防止CLS的方法之一是在CSS中添加圖像的寬度和高度。 這樣,瀏覽器將為該圖像保留可能比文本晚顯示的空間。 現在,混蛋將消失,因為瀏覽器知道將在適當的時候添加一些內容。 如果您想快速出現,可以考慮添加某種低解析度的佔位符。

因此,只需確保您的圖像設置了正確的寬度和高度屬性。 當然,您也可以使用常規響應圖像來執行此操作。 只要確保對所有尺寸都使用相同的寬高比即可。

多雲的天空下的山

為了應付跳躍的廣告或注入的內容,請同時為它們保留空間。 最後,您的CLS可能會下降一點。

加速您的伺服器以減少載入時間

伺服器響應請求的速度越快越好。 使該伺服器更快地響應可以直接改善許多站點速度指標。 在複雜的站點上,伺服器忙於處理請求以及提供文件和腳本,因此最好對那些流程進行優化。

優化伺服器包括幾個部分。 首先,升級您的託管計劃。 不要在託管上有所顧忌。 選擇一個以合理的價格提供良好性能的產品。 此外,還有如何設置伺服器的事務-使用最新版本的PHP! —以及您選擇了什麼硬體。 如果發現缺少硬體,也許應該升級硬體。 另外,您需要研究資料庫的工作方式,看看是否可以進行改進。 使用類似的工具 查詢監控WordPress插件 以便持續分析您網站上的查詢。

您還可以研究伺服器如何將文件推送到客戶端。 有幾種方法可以增強該過程,例如,使用鏈接rel = preload或HTTP / 2伺服器推送。 這些是更高級的解決方案,可讓您微調伺服器對請求的響應方式。 同樣,CDN在這裡可以創造奇蹟。

查看關鍵的CSS以便更快地載入摺疊內容

當瀏覽器載入頁面時,它必須獲取HTML,呈現它,獲取CSS,呈現它,獲取JavaScript,呈現它,等等。 載入網站所需的文件越多,文件越大,則網站載入的速度就越慢。 通常,當瀏覽器忙於做事時,它無法在後台載入內容。 某些元素阻止了該過程。 所謂的渲染阻止JavaScript和CSS會影響一切。

由於CSS載入較晚,因此通常需要一段時間才能在屏幕上顯示某些內容。 通過將設計的關鍵部分(出現在摺疊上方的部分)移出CSS主文件,並將其內聯到代碼中,可以更快地在屏幕上顯示某些內容。 再次解決此問題並不能使您的網站更快,但可以使其顯示更快。 都是為了獲得這一王牌用戶體驗。

要獲得一組關鍵的CSS,您可以從多種工具中進行選擇,也可以手動完成。 此外,您可以使用WordPress緩存插件,例如 WP火箭。 WP Rocket有一個簡單的按鈕,稱為「優化CSS交付」。 激活它有助於消除阻止渲染的CSS並增強網站的負載。 當然,WP Rocket還做其他很酷的事情,例如最小化CSS和JavaScript並推遲JavaScript的載入。

改善第三方腳本的載入

對於許多站點,速度緩慢也來自外部。 例如,如果您的網站依賴廣告腳本,那麼您基本上就掌握在廣告提供商的手中。 您只能希望他們提高廣告效果。 如果他們的廣告載入速度真的很慢,那麼也許是時候找到其他提供商了。

如果您發現第三方腳本會使您的網站變慢,則應該調查一下。 問問自己,我真的需要那個特定的廣告嗎? 這些腳本的價值是什麼? 可能有一個不同的選擇,它對您的伺服器進行了優化和減輕了壓力。 也許嘗試一下?

如果可能,您可以自己嘗試託管腳本。 這樣,您就可以更好地控制載入過程。 如果無法做到這一點,請查看是否可以更快地對其進行預載入。

至少,請確保非同步載入腳本或將其推遲到最後一刻。 這樣,瀏覽器可以在獲取和運行外部腳本之前先構建頁面。 如果要載入的腳本很重要,請使用非同步,例如分析腳本。 您可以將defer用於不太重要的資源。 有很多 有關優化第三方腳本的文檔

提升核心網路活力:所有小改進

隨著即將到來的頁面體驗更新,Google再次將網站速度和用戶體驗放在了首位。 我們一直從整體上著眼於SEO-有很多移動的部分,您應該對所有這些部分進行工作以建立最佳的站點。 儘管上面提到的技巧可以幫助您提高得分,但您確實應該這樣做才能為訪問者提供更好的體驗。

資源

相關文章