7種讓你的網站或部落格更快地為訪問者載入的方法

以下是一些提高你的網站速度和確保你的訪問者停留在網站周圍的重要提示。...

緩慢的頁面加載速度是一個主要原因,為什麼你的網站沒有得到應有的點擊率。

website-load-fast

由於觀眾的注意力一直處於低位,下面是一些最重要的提示,以加快您的網站,以確保您的訪問者堅持。

1減少網站的實際大小

007Ys3FFly1gosnxqwsyij30im09umz9

如果你的網站加載速度慢於3秒,人們甚至可能在主頁加載之前就放棄了它。對圖片使用錯誤的格式很容易使你的網站膨脹,並破壞原本良好的瀏覽體驗。

超過70%的移動網頁超過1MB,12%的網頁超過4MB!請記住,在良好的3G連接上下載1.5MB需要7秒鐘。最佳做法是將每個頁面保持在0.5MB以下。

瞭解JPG、PNG和GIF之間的區別,並確保使用所需的分辨率。

根據GlobalStats的數據,以下是2018年最常用的屏幕分辨率:

  • 22.55%使用360 x 640分辨率(移動)
  • 11.73%使用1366 x 768的分辨率
  • 8.26%使用1920 x 1080的分辨率
  • 4.91%使用375 x 667的分辨率(移動)
  • 2.94%使用1440 x 900的分辨率

這是超過50%的所有用戶,所以當你添加照片到你的網站時考慮這個。

2為**設計網站

根據谷歌去年對移動頁面速度的研究:

The average time it takes to fully load a mobile landing page is 22 seconds, according to a new ****ysis. Yet 53% of mobile site visitors leave a page that takes longer than three seconds to load. That's a big problem.

超過75%的移動網站需要10秒或更長時間才能通過3G進行加載,超過一半的流量是通過移動設備進行的,而且這種情況不太可能下降。所以,保持一個小的網站足跡,讓移動互聯網用戶高興,並確保他們堅持左右!

如果你使用諸如WordPress、Joomla或Drupal之類的CMS,那麼有一些插件可以幫助你的網站更便於移動。

或者,您可以使用諸如bMobilized或Duda Mobile之類的工具將您的桌面網站轉換為移動版。也就是說,通常最好設計一個單獨的網站,以確保為您的移動用戶提供最佳體驗。

您還應該考慮使用Accelerated Mobile Pages(AMP)項目提供網站的簡化版本。使用AMP頁面可以提高移動設備上的頁面加載速度。JavaScript和CSS有嚴格的指導方針,但其好處是可以衡量的。

無論你決定走哪條路線,都要確保你的移動網站是輕量級的選項。和儘量保持在每頁0.5MB的推薦值以下。

三。確保你的網站縮小

如果你是從頭開始寫自己的網站,定期編輯它。隨著項目的發展,您可能會學習更高效的做事方法,因此,確保在改進時返回代碼。

縮小並組合CSS、HTML和JavaScript。例如,如果您使用類似CDN的Cloudflare,則有一個特定的選項卡用於提高速度,其中第一個選項是自動縮小。如果您使用****者(如Squarespace或Weebly),這可能是默認情況下為您完成的。

Cloudflare Auto Minify opti***

確保你測試你的網站後,啟用任何組合或縮小你的網站的資源。嘗試不同的選項,看看什麼是最適合你的網站,因為有些功能可以打破與Minify啟用。

4避免在不需要時加載腳本

必須在需要之前加載幾個JavaScript文件,這將不必要地降低整個頁面的速度。您可以使用ChromeDev工具檢查正在加載的內容。如果可以,請避免從第三方服務器加載腳本。

請求這些將進一步降低您的加載速度,並可能帶來安全風險。儘可能將它們保存在網站服務器上。

您可以使用defer或async來延遲特定JavaScript文件的加載,以減少訪問者設備上的壓力並提高頁面的加載速度。或者,對於小腳本,可以將JavaScript直接內聯到HTML文檔中。

Async將告訴瀏覽器在下載JavaScript文件的同時繼續解析HTML。文件完全下載後將發生暫停。

同時,defer會告訴瀏覽器在瀏覽器解析完整個HTML文檔後執行JavaScript文件。

默認情況下,瀏覽器將在提取和執行任何JavaScript文件時暫停解析HTML文件。

在HTML文檔中內聯JavaScript將有助於減少瀏覽器在顯示頁面之前必須下載的文件數量。您可以通過在腳本標記之間添加任何外部JavaScript文件的內容來內聯JavaScript。

您可以安全地在Google Analytics、Facebook像素和其他分析和錯誤報告工具上使用延遲和異步,而不影響頁面的功能。

最後,考慮一下你網站上運行的跟蹤代碼、分析、額外功能和廣告是否必要。儘可能使用更輕量級的選項,如果它們不能為您或您的訪問者增加任何價值,則將其廢棄。

5使用緩存和cdn

007Ys3FFly1goyi48u8lnj30im09p3z7

內容交付網絡(CDN)將您的站點複製到全球的服務器上,並通過將訪問者連接到地理位置更接近他們的服務器來減少數據的傳輸時間。靜態內容也將由CDN的服務器緩存和交付。

Cloudflare可能是您最熟悉的CDN,但Akamai和Amazon CloudFront是成熟的替代方案。

請確保您還利用瀏覽器緩存來提高網站的加載速度,以便重複訪問。瀏覽器緩存的工作原理是將這些文件從服務器下載到用戶的設備上。

在進一步的頁面查看或訪問中,這些文件將從用戶的設備本地加載,而不是從外部服務器請求它們(取決於文件的過期日期)。

6去掉不必要的插件

插件只能在必要時使用。這是真的,無論你使用Wix,Weebly,WordPress,或Squarespace或其他任何東西。任何你可以通過添加簡單的CSS而不是插件來完成的功能,你應該。在Squarespace上使用代碼注入,在WordPress中使用CSS自定義程序,在Wix上使用自定義CSS。

插件可能會導致服務器上的CPU或內存緊張,這可能會減慢甚至阻止網站加載。

如果您使用WordPress,很可能您沒有使用它的所有內置功能。用像Clearfy這樣的插件禁用這些。

始終考慮您正在使用的插件。如果您在JetPack等插件中使用的功能很少,請考慮完全刪除它們,並用做同樣工作的更輕的插件來替換它們。

7服務器設置,以加快您的網站

服務器延遲會對頁面加載速度和頁面排名產生很大的負面影響。

Google建議第一個字節的時間(TTFB)為1.3秒或更短。這是設備在最初聯繫服務器後開始下載頁面之前的最長延遲。也就是說,平均頁面的TTFB超過2秒,遠高於他們的推薦值。

共享主機通常是造成這種情況的原因,但是您可以配置一些設置來提高服務器響應時間。

  • 使用與您的網站兼容的最新版本的PHP。最新版本(php7.2)有巨大的速度改進。
  • 打開“保持活力”
  • 啟用HTTP/2
  • 利用HTTP嚴格傳輸安全(HSTS)
  • 將備份設置為在夜間完成

如果你的網站是用WordPress**的,確保你使用的主機是專門用WordPress託管的,比如Bluehost。這將確保服務器設置是專門為WordPress性能配置的。

調整完畢?現在測試你的站點

ThinkWithGoogle mobile test results

既然您知道了理想的頁面加載時間、大小和第一字節時間(TTFB),那麼您如何知道自己的目標呢?

以下是我們最喜歡的一些在線工具,用於測試您的網站:

  • varvy.com網站:這些工具將測試您的桌面和移動頁面的速度和性能,併為您提供如何改進網站的寶貴指南
  • 谷歌PageSpeed洞察:最近更新,谷歌PageSpeed工具將測試你的速度,並給你改進建議
  • GTmetrix:一個提供可操作建議的好工具
  • WebPageTest:在不同的設備、操作系統和位置上測試您的網站
  • Pingdom:一個非常流行的工具,類似於WebGetTest,具有更好的界面

你可以用上面的鏈接測試你的移動站點,也可以用ThinkWithGoogle移動測試(由WebPageTest提供支持)。結果將給你具體的提示,你可以改善,與估計加載時間減少,如果你遵循提示。

推薦的最佳實踐是不斷變化的,因此在進行改進時,請定期檢查頁面速度。

為了更深入地瞭解你的網站是如何運行的,記得在Google和Bing上驗證你的域名。

  • 發表於 2021-03-22 14:24
  • 閱讀 ( 60 )
  • 分類:程式設計

你可能感興趣的文章

4種不用去網站就可以登入facebook的酷方法

...、基於web和瀏覽器的Facebook應用程式以及桌面通知服務,讓你無需訪問網站本身就可以訪問自己喜愛的社交網路。 ...

  • 發佈於 2021-03-11 21:54
  • 閲讀 ( 48 )

7個標誌你應該升級你的免費網站到一個高階服務

... 偶爾達到你的極限也許是可以的,但是如果它讓你的網站訪問者感到不安,或者趕走了流量,或者發生得越來越頻繁,那麼這肯定是你需要一個付費計劃的訊號。 ...

  • 發佈於 2021-03-15 00:02
  • 閲讀 ( 54 )

建立個人網站的15個最佳無編碼模板

... 時髦的訂婚讓你有空間上傳愚蠢的照片,隨意新增你的故事,還包括你排練晚餐和儀式所需的所有細節以及地圖。如果你的風格比傳統和經典更有趣和樂觀,試試這個。 ...

  • 發佈於 2021-03-15 02:18
  • 閲讀 ( 39 )

用wordpress建立你的部落格:終極指南

...收集的最佳WordPress託管提供商。找一個WordPress的主持人,讓你的錢得到最好的回報。 ...

  • 發佈於 2021-03-21 12:15
  • 閲讀 ( 47 )

7個免費工具,用於實時網站訪問者跟蹤

...意:任何訪問你的站點的人都可以看到實時提要。如果這讓你不舒服,就不要用這個工具。 ...

  • 發佈於 2021-03-21 16:05
  • 閲讀 ( 43 )

為您的部落格或網站下載天氣小部件的7個最佳網站

... 要獲得更多關於你部落格的幫助,看看這些讓你的WordPress部落格流行的技巧,看看為你的訪問者量身定做的網站的免費IP地理定位API。 ...

  • 發佈於 2021-03-21 16:56
  • 閲讀 ( 48 )

為什麼kinsta管理的wordpress主機對每個人都很好

... Kinsta的託管WordPress主機是一個很好的機會,讓你的網站更上一層樓。每月只需支付30美元的基本包裹,這是一個你應該認真考慮的機會。 ...

  • 發佈於 2021-03-22 09:54
  • 閲讀 ( 47 )

什麼是hsts,它如何保護https免受駭客攻擊?

...站將被硬編碼到Chrome更新的未來版本中。它確保所有訪問你的HSTS網站的人都能在Chrome的更新版本中保持安全。 ...

  • 發佈於 2021-03-22 16:41
  • 閲讀 ( 49 )

ipapi如何幫助您構建更智慧的網站

你想開啟你的網站嗎?最好的方法之一就是利用訪問者的IP地址提供的資訊。 ...

  • 發佈於 2021-03-22 21:55
  • 閲讀 ( 53 )

完整的inmotion網站託管審查為初學者

需要一個地方來託管你的網站嗎?找到一個網路主機,無論你是一個新的經營網站或尋找一個新的家你的網站,往往是困難的。有這麼多的主機和主機選擇,研究合適的主機可以減緩你的行動,甚至完全推遲。 ...

  • 發佈於 2021-03-23 17:13
  • 閲讀 ( 68 )