掃描關注網站建設微信公眾賬號

微信二維碼

當前位置:濟南網站優化 > 技術洞察 > 觀點 > ?谷歌SEO中4個快速提升網頁速度的方法

?谷歌SEO中4個快速提升網頁速度的方法

時間:2020-01-11?10:25:24?文章來源:網頁速度優化?文章作者:?谷歌SEO排名?

我們大多數人都進行了站點速度審核,或者看到其他人進行了審核。這些對于SEO效果及業務確實很有幫助,但是我經常發現它們的關注范圍很狹窄。通常,我們使用眾所周知的工具來拋出一堆東西,然后從那里深入研究。但是,如果我們進行更深入的研究,通常還有其他辦法可以提高站點速度。我經常看到很多機會,這些機會從未在站點速度審核中涵蓋。大多數網站速度的提高都是一系列微小變化的結果,今天我們網站排名優化將會介紹一些如何快速提升網頁打開速度的辦法。

圖像優化的另一個角度

1. 考慮使用SVG優化PNG圖片

我最近正想預訂幾張《冰雪奇緣2》的電影票陪家人觀看,因此登陸了此頁面。它使用三個SVG圖像作為傳輸圖標:

SVG圖像是矢量圖像,因此非常適合圖標之類的東西。如果您的圖像顯示為PNG,則可能會要求設計師提供原始SVG,因為這樣可以節省大量時間。盡管并非總是更好,但使用SVG可以節省60%的文件大小。在這種情況下,這些圖標每個大約為1.2k,因此它們很小。他們可能會在站點速度審核的雷達范圍內高速飛行(Page Speed Insights或GTMetrix都根本不會在此頁面提及這些圖像)。我們可以通過Jake Archibald的SVG壓縮工具運行它們,這是一個很棒的免費工具,在較大的SVG上,它可以發揮很大的作用。該工具將它們壓縮到1240字節到630字節之間,而沒有任何質量損失,這是一個不錯的比率。

2. 內聯圖像

GTMetrix提出了有關內聯少量CSS或JS的建議,但未提及內聯圖像。圖像也可以內聯,有時這可能是正確的方法。如果您認為即使很小的圖像文件也需要完整的往返行程(這可能會對速度產生非常實際的影響),即使對于小的文件也可能需要很長時間。該站點未使用HTTP2,因此等待時間很長,然后映像(1.2kb)需要近600ms的時間加載(沒有HTTP2也意味著這會阻止其他請求)。這些圖像共有三個,因此它們之間可能會對頁面速度產生真正的影響。但是,我們現在將它們壓縮到每個只有幾百個字節,并且SVG圖像實際上是由標記組成的,類似于HTML:

實際上,您可以將SVG標記直接放入HTML文檔中!如果我們對所有三個傳輸圖像都執行此操作,則從服務器發送到我們的瀏覽器的此頁面的壓縮HTML將從31,182字節增加到31,532字節,所有3個圖像僅增加了350字節!

讓一讓,JavaScript!HTML可以處理此問題!

網站速度 seo

如今,搜索網站優化時常如此,由于提供了一種現成解決方案的JavaScript庫的盛行,我發現JavaScript被用于沒有它就可以實現的功能。更多的JS庫意味著更多的下載空間,可能需要更多往返服務器中其他文件的往返時間,進而增加JavaScript執行時間和成本。通常我們會給開發人員提供較差的摘要或說明,而這些摘要說明無法指定有關性能的任何內容,而只能指定功能。他們通常時間不多,因此很容易最終就丟掉一些東西。但是,就可以使用HTML或CSS實現的功能而言,已經取得了許多進步。讓我們看一些例子。

1. 帶有搜索的組合框

如今,具有文本搜索選項的下拉框是相當普遍的界面元素。我最近碰到的一篇文章描述了如何使用Select2 Javascript庫制作這樣的列表:

這是一個有用的UI元素,可以為您的用戶提供幫助。但是,Select2庫中有一個JavaScript庫,而JavaScript庫又依賴于某些CSS和JQuery庫。這意味著要進行三次往返來收集一堆大小不一的文件:

jQuery-101kb

Select2 JavaScript-24kb

Select2 CSS-3kb

對于網站速度而言,這不是理想的選擇,但是我們可以肯定值得這樣做,以便為用戶提供簡化的界面。但是,實際上可以通過HTML數據列表元素立即使用此功能:

這允許用戶搜索列表或自由鍵入他們自己的響應,從而提供相同的功能。此外,它在智能手機上具有本機界面!您可以在此Codepen中看到這一點。

2. 詳細信息摘要

LonelyPlanet有一個漂亮的網站,我正在看有關西班牙的頁面,該頁面具有“閱讀更多”鏈接,大多數網絡用戶都會熟悉:

就像我看到的幾乎所有此實現一樣,他們都使用JavaScript庫來實現此目的,這又帶來了很多開銷。但是,HTML有一對稱為詳細信息和摘要的內置標記,它們專門用于實現此功能。免費且以HTML格式原生提供。無需任何開銷,需要屏幕閱讀器的用戶可以更方便地訪問,同時還可以向Google傳達語義。可以使用CSS以各種靈活的方式對這些標簽進行樣式設置,并重新創建我在那里看到的大多數JS版本。

網絡調整

每次瀏覽器必須從服務器收集資源時,它都必須通過Internet發送消息并返回。它的速度受光速的限制。這聽起來像是一件荒謬的事情,但它意味著即使很小的請求也會增加頁面加載時間。如果您沒有找到上面的鏈接,我的解釋HTTP2的帖子將更詳細地討論此問題。我們可以采取一些措施來幫助縮短這些請求的距離或減少所需的往返次數。這些稍微有點技術性,但是可以取得一些真正的勝利。

1. TLS 1.3

TLS(或SSL)是用于保護HTTPS連接的加密技術。從歷史上看,在瀏覽器和服務器之間進行了兩次往返來設置該加密-如果用戶距服務器50毫秒,則每個連接200毫秒。請記住,Google歷史上建議將傳遞HTML的目標時間定為200毫秒(在最近的更新中,這似乎有些放松),您在這里浪費了很多時間。最近定義的TLS 1.3標準將該過程從兩次往返減少到一次,這可以節省用戶最初連接到您的網站的寶貴時間。向您的技術團隊咨詢有關遷移到TLS 1.3的信息;不支持該功能的瀏覽器將毫無問題地回退到TLS 1.2。所有這些都在幕后,而不是任何形式的遷移。沒有理由不這樣做。如果您使用的是CDN,那么只需打開CDN即可簡單。您可以使用此工具來檢查已啟用的TLS版本。

2. QUIC / HTTP 3

在過去的2-3年中,我們已經看到許多站點從HTTP 1.1遷移到HTTP 2,這是一個幕后升級,可以真正提高速度。緊隨其后的是,出現了一對新興的標準,稱為QUIC + HTTP / 3,可進一步優化瀏覽器與服務器之間的連接,從而進一步減少所需的往返行程。對這些功能的支持才剛剛開始變得可行,但是如果您是CloudFlare的客戶,則可以在今天和未來6個月內啟用Chrome和Firefox,以實現對它們的支持,您的用戶將獲得更快的速度。

3. 超級路由

當用戶連接到您的網站時,他們必須從任何位置打開到您的服務器(或CDN)的網絡連接。如果您將互聯網想象成一系列道路,那么您可以想象它們需要跨這些道路“開車”到您的服務器。但是,這意味著擁塞和交通堵塞。事實證明,一些大型云公司擁有自己的私家路,這些私家路的坑洼更少,流量減少并且速度限制得到改善。如果只有您的網站訪問者可以訪問這些道路,他們可以更快地開車!

對于CloudFlare,他們通過其Argo產品提供此訪問權限,而如果您完全使用AWS,則可以使用其Global Accelerator。這樣一來,對您網站的請求就可以利用其專用網絡并提高速度。如果您已經是客戶,兩者都是非常便宜的。如果您使用CDN,則其中許多此類好處都非常容易獲得。如果尚未使用CDN,則應該使用CDN。CloudFlare是一個不錯的選擇,如果您使用的是AWS,那么CloudFront也是如此。如果您更像是專業人士,那么它們是可配置性最高的。

讓CSS做更多

上面我談到了HTML如何具有內置功能,您可以利用這些功能來節省對“本地滾動”解決方案的依賴,從而需要更多的代碼(和瀏覽器方面的處理)來實現。在這里,我將討論一些CSS可以為您做同樣的例子。

1. 重用圖像

通常,?谷歌網站優化會發現在整個頁面中的多個位置使用相似圖像的頁面。例如,LOGO上不同顏色的變體,或指向兩個方向的箭頭。作為唯一資產(無論它們多么相似),每個都需要單獨下載。盡管這些映像文件很小,但它們仍需要往返才能從服務器獲取。我們很容易使用CSS的轉換功能在兩個方向上使用一個圖像。

2. 互動(例如菜單和標簽)

通常,導航元素(如菜單和選項卡)是用JavaScript實現的,但是這些也可以用純CSS完成。

3. 動畫制作

CSS3在CSS中引入了許多強大的動畫功能。通常,它們不僅比JavaScript版本快,而且還可以更加平滑,因為它們可以在操作系統的本機代碼中運行,而不必執行相對較慢的Javascript。CSS動畫可以以相對較低的性能成本為頁面添加很多字符。

小結

希望您發現這些示例本身很有用,但是我想說的更廣泛的一點是,我們所有人都應該嘗試更多地考慮站點速度。特別重要的是減少服務器所需的往返次數;即使是小型資產也需要一些時間來獲取,并且可能會對性能(尤其是移動設備)產生顯著影響。

上一篇:刪除百度快照需要多久入口在哪等問題解答

下一篇:網站被黑(百度)快照有什么作用?

文章關鍵詞
google
GoogleSEO
?谷歌SEO
?谷歌
?谷歌優化
網頁速度
百宝世嘉彩票 山东11选5走势图 全家靠一个人赚钱税这么高 GTA5地堡买来怎么赚钱 火焰棋牌 亿客隆彩票官网 麻将赌博怎样才能赢钱 江苏11选5开奖分布走势图 12126期足彩即时比分 双色球大奖得主 在家开什么公司最赚钱 广西快乐十分 排五百个位差计算公式 那些捕鱼达人能赚钱吗 广东11选5彩乐乐 手机棋牌游戏排名 北单比分现场直播