新聞資訊  快訊  焦點  財經  政策  社會
互 聯 網   電商  金融  數據  計算  技巧
生活百科  科技  職場  健康  法律  汽車
手機百科  知識  軟件  修理  測評  微信
軟件技術  應用  系統  圖像  視頻  經驗
硬件技術  知識  技術  測評  選購  維修
網絡技術  硬件  軟件  設置  安全  技術
程序開發  語言  移動  數據  開源  百科
安全防護  資訊  黑客  木馬  病毒  移動
站長技術  搜索  SEO  推廣  媒體  移動
財經百科  股票  知識  理財  財務  金融
教育考試  育兒  小學  高考  考研  留學
您當前的位置:首頁 > IT百科 > 站長技術 > 服務器

只需三種手段,將傳統的網站的性能提高 24%

時間:2019-11-22 11:46:47  來源:  作者:

對于技術人而言,性能優化是一個亙古不變的話題。而隨著框架、語言、庫等工具的不斷演進,傳統的優化手段是否仍然適用?在創新的環境之下,又有哪些較為捷徑的優化手段?在本文中,作者將以一年前的網站為測試對象,嘗試了最新的三種手段,有效地將網站性能提高了 24%,接下來,我們將一探究竟。

只需三種手段,將傳統的網站的性能提高 24%

作者 | SwissGreg

譯者 | 彎月,責編 | 屠敏

出品 | CSDN(ID:CSDNnews)

以下為譯文:

上周末,我們提升了一年以前構建的一個網站的性能。

我們的這個網站是為瑞士的軟件開發人員提供的求職平臺,該網站的性能非常重要,原因有如下兩個:

  1. 良好的用戶體驗:既包括網站的加載時間(以及與用戶交互時間),也包括使用該網站時的快捷感。

  2. seo:在很大程度上,我們的流量依賴于google搜索,而且眾所周知Google更加偏向性能出眾的網站(Google甚至在搜索控制臺中顯示了速度報告)。

如果你在網上搜索“網站性能基礎”,就會發現很多小技巧,例如:

  • 使用CDN(內容交付網絡)提供能夠緩存一段時間的靜態文件。

  • 優化圖像尺寸和格式。

  • 使用GZIP或Brotli壓縮。

  • 減少非關鍵JS和css代碼的大小。

我們實現了很多容易達成的目標。

另外,由于我們的主頁基本上是一個可過濾的列表(用React編寫),所以我們引入了react-window,可以一次只渲染10個列表項(而不是250個)。

上述技巧幫助我們極大地提高了性能,然而在查看了速度報告后,感覺我們還有進步的空間。

因此,我們開始研究更多不尋常的方式來提升網站的速度,最終我們取得了巨大的成功!這是本周的報告:

只需三種手段,將傳統的網站的性能提高 24%

這份報告顯示,網站的整體加載時間減少了24%!

那么,為了取得這樣的成果,我們究竟做了哪些努力呢?

1. 針對JSON數據采用rel ="preload"

只需三種手段,將傳統的網站的性能提高 24%

index.html文件中加入的這一行代碼可以指示瀏覽器:在JAVAScript調用AJAX/fetch請求JSON數據前,就應該獲取這些數據。

當實際需要使用數據時,就可以從瀏覽器緩存中讀取,而不必再次獲取數據。這個技巧幫助我們節省了大約0.5秒的加載時間。

本來我們可以早點實現這個技巧,但是Chrome瀏覽器中曾經有一些問題導致重復下載。不過如今看來已經改好了。

2. 在服務器端實現超級簡單的緩存

在實現JSON預加載后,我們發現下載職位列表仍然是瓶頸(從服務器獲取響應大約需要0.8秒)。因此,我們決定研究服務器端的緩存。首先,我們嘗試了節點緩存,但是令人驚訝的是,獲取時間并沒有縮短。

值得一提的是/api/jobs端點是一個簡單的getAll端點,因此沒有改進的余地。

但是,我們決定更進一步,通過一個JS變量簡單地構建自己的緩存。如下所示:

只需三種手段,將傳統的網站的性能提高 24%

此處唯一沒有列出的是POST /jobs端點,它會刪除緩存(cachedJobs =undefined)。

如此簡單的一段代碼,就削減掉了0.4秒的加載時間!

3. 削減CSS和JS包的大小

最后我們查看了網頁需要加載的CSS和JS包的大小。我們注意到"font-awesome"這個包的大小超過了70kb。

然而,我們僅使用了其中大約20%的圖標。

我們是如何處理的?我們通過icomoon.io選擇了需要使用的圖標,并創建了自定義的精簡圖標包。

因此,節省了50kb!

以上三種不尋常的技巧幫助我們將網站的加載時間縮短了24%。甚至有報告顯示,網站的加載時間降低了43%(降低至1-2秒)。

目前我們對這些提升感到非常滿意。但是,我們相信我們可以做得更好!

如果你知道其他不尋常的技巧可以提供幫助,那么敬請在下方的評論中留言

原文:https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unusual-changes-9ei

本文為 CSDN 翻譯,轉載請注明來源出處。



Tags:網站   點擊:()  評論:()
聲明:本站部分內容來自互聯網,內容觀點僅代表作者本人,如有任何版權侵犯請與我們聯系,我們將立即刪除。
▌相關評論
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
▌相關推薦
一個網站進行優化之前,分析是非常重要的一項工作,其中包括了數據分析、關鍵詞分析、競爭對手分析等方面。良好的SEO策略需要建立在許多有效數據分析的基礎上,這樣才能夠比較完...【詳細內容】
2019-12-27   網站  點擊:(1)  評論:(0)  加入收藏
流量,是大家做站夢寐以求的東西,特別的有價值的流量。一個網站流量越多,那么就可以賺錢了,這是在各大站長心中一個永恒不變的原理。那么怎么樣提高一個網站的流量呢?接下來我們...【詳細內容】
2019-12-27   網站  點擊:(2)  評論:(0)  加入收藏
網站的種類多到讓我們眼花繚亂,不管是高端網站建設還是普通的模板建站,我們都知道網站要想運行需要放到虛擬主機或者服務器上,那么我們也面臨著如何選擇購買主機的問題。網站主...【詳細內容】
2019-12-27   網站  點擊:(2)  評論:(0)  加入收藏
一個網站,在確定好行業之后最重要的一件事就是關鍵詞的選取了。如何選擇關鍵詞,直接影響日后網站的運營成本以及流量和利潤。如何選擇關鍵詞呢?主要遵循以下三點原則:一、減法...【詳細內容】
2019-12-27   網站  點擊:(1)  評論:(0)  加入收藏
一、背景為了避免別人把未備案的域名解析到自己的服務器ip而導致服務器被斷網,需要在nginx上設置禁止通過ip訪問服務器,只能通過域名訪問。 二、解決方法如果網站只配置了...【詳細內容】
2019-12-26   網站  點擊:(6)  評論:(0)  加入收藏
很多SEO站長都知道,每當網站更新完文章內容需要提交網站地址數據。但是你知道網站在提交數據之前還需要確認一些步驟需要完成嗎?做好以下三個重要步驟,以確保提交的數據無誤,可...【詳細內容】
2019-12-26   網站  點擊:(4)  評論:(0)  加入收藏
眾所周知,網站運營的整站優化是一個相對于關鍵詞優化的概念。但是其起到的作用,所帶來的效果卻要比后者優越的多得多,您又知道嗎?那么,下面就跟著小編一起了解整站優化的幾個注意...【詳細內容】
2019-12-26   網站  點擊:(1)  評論:(0)  加入收藏
在浩瀚的網絡中安全問題是最普遍的需求,很多想要對網站進行滲透測試服務的,來想要保障網站的安全性防止被入侵被攻擊等問題,在此我們整理了下在滲透安全測試中抓包分析以及...【詳細內容】
2019-12-26   網站  點擊:(1)  評論:(0)  加入收藏
很多做運營的同學搞不清網站運營到底是做什么的?以為網站運營就是寫寫文章,發發外鏈、做做友情鏈接之類的,今天這篇文章主要揭秘網站運營技巧。目前很多同學在從事網站運營工作...【詳細內容】
2019-09-25   網站  點擊:(1)  評論:(0)  加入收藏
不得不說,互聯網真的是一個神奇的地方,隨著互聯網的發展,目前很多的企業都意識到網站建設的重要作用,紛紛的開展網站建設的業務,但是由于市場中網站數量的不斷增加,相信很多運營站...【詳細內容】
2019-12-25   網站  點擊:(5)  評論:(0)  加入收藏
域名信息的收集當我們確定了要滲透的目標,也就是知道了其域名,接下來我們需要收集域名對應的 ip,域名的whois信息、子域名等等一系列與域名相關的信息。判斷域名對應的IP:首先,我...【詳細內容】
2019-12-25   網站  點擊:(3)  評論:(0)  加入收藏
眾所周知,豐富的、高質量的網站內容會提高網站的搜索引擎排名,增加點擊量,從而給企業帶來很好品牌宣傳效果和可觀的經濟收益。然而,星宿網絡科技在為企業做網站技術服務的過程中...【詳細內容】
2019-12-24   網站  點擊:(11)  評論:(0)  加入收藏
手機因其智能化、攜帶方便、配套設施(3G、4G網絡)齊全等特性,已成為人們獲取互聯網知識的主要途徑,是人們日常生產生活密不可分的部分,也是目前最重要的智能終端設備。據工信部透...【詳細內容】
2019-12-24   網站  點擊:(3)  評論:(0)  加入收藏
代購行業發展,身邊很多人辭職做起了全職代購,可見代購的利潤空間很大。也有很多人像我一樣,有自己喜歡的工作,想做代購,但又沒有時間親自去產品產地帶貨的,海外代購網站了解一下。...【詳細內容】
2019-12-24   網站  點擊:(10)  評論:(0)  加入收藏
眾所周知,權重越高的網站,排名越靠前。然而,很多人發現網站建設中做了很長時間的網站優化,關鍵詞也天天做,但是網站排名就是上不去。這是為什么呢?網站排名不好究其根本原因就是網...【詳細內容】
2019-12-24   網站  點擊:(4)  評論:(0)  加入收藏
在眾多滲透測試中客戶想要了解攻擊溯源查找問題,我們在日常網站安全檢測過程中了解知道黑客是如何攻擊和上傳木馬并進行篡改,以及如何查找日志分析攻擊者是通過哪些腳本入口...【詳細內容】
2019-12-24   網站  點擊:(2)  評論:(0)  加入收藏
做自媒體,發文章,配圖也是很重要的。好的配圖不僅能增加文章的可讀性,并且能給用戶非常良好的閱讀體驗。 但是呢,給文章找配圖對很多新人來說,也是一個大難題:花1個小時寫了一篇文...【詳細內容】
2019-12-24   網站  點擊:(7)  評論:(0)  加入收藏
1、加入站長平臺讓搜索引擎更快的發現你現在各大搜索引擎都有自己的站長平臺,把自己的網站加入搜索引擎提供的站長平臺,并且提交sitemap地圖索引文件到站長平臺中能夠加快搜索...【詳細內容】
2019-12-24   網站  點擊:(1)  評論:(0)  加入收藏
上一章我們說了如何優化我們的網站結構,包括TDK如何操作,H1標簽不要濫用等,如何進行關鍵詞挖掘,如何使用工具幫我們事半功倍的做站內優化,導航的優化技巧還有內容應該怎么寫比較...【詳細內容】
2019-12-24   網站  點擊:(3)  評論:(0)  加入收藏
創業維艱,所以不要創業要創富!付出了,一天見不到收入就難受的是農民工!付出了,一個月見不到收入就難受的是上班族!付出了,一年見不到收入就難受的是做生意的!付出了,五年見不到收入就...【詳細內容】
2019-09-28   網站  點擊:(1)  評論:(0)  加入收藏
最新更新
欄目熱門
欄目頭條
31选7开奖11185