2010-01-14 107 views
2

我正在尋找加快我的js加載時間的最佳方法。加快網站加載速度

問題是,我正在使用一個非常大的網站,使用jQuery框架,發生了什麼是因爲該網站也加載,Facebook連接,addthis共享,谷歌分析和另一個跟蹤代碼,jquery延遲幾秒鐘,以及日曆等特定元素剛剛出現,我的用戶抱怨事情需要很長時間。

我在google chrome上做了一個測試,平均加載時間是4s。這太多了。

我已經在做縮小,並從谷歌加載jquery UI/Jquery。什麼是最好的方法來解決這個問題?

+1

你運行YSlow來查看最大滯後發生在哪裏? – 2010-01-14 14:00:28

+0

我跑YSlow,我有一個F級,所以我會嘗試一些建議。 – matthewb 2010-01-14 14:16:42

+0

請嘗試[谷歌的速度測試](https://developers.google.com/pagespeed/),它可以有效地查明究竟是什麼減慢網站 – Eruant 2011-10-13 08:20:42

回答

1

通過組合圖像和腳本以及css來減少http調用,並且還可以爲您的靜態圖像和css使用Content Delivery Network。

0

您不可能對外部腳本的加載時間做更多的事情,所以您可以做的是更改頁面中事件發生的順序,以便在有外部腳本後加載初始化頁面。

腳本以串行方式加載和執行,因此如果您在源代碼中更改其順序,您還可以更改它們加載的順序。

而不是使用jQuery中的ready事件,你可以把你的初始化代碼內嵌在網頁中,之後的所有內容,但身體的結束標記之前。這樣,當腳本運行時,您想要訪問的元素將被加載,並且您可以將外部腳本放在初始化代碼的下面,以使它們在之後加載。

0

微小的技術變化(例如服務於Google的JS,縮小等等)只會讓你感到滿意。

似乎你只是有很多動態的東西在你的頁面上進行。你有沒有建立你的內容的異步方式?一種選擇可能是放置佔位符而不是外部內容,並且異步加載它,因此當所有腳本加載並準備就緒時,您只需將標記放入佔位符即可。

這會創建更好的用戶體驗,而不是整個頁面等待10秒,它將在2秒後遞增加載(並且在10之後仍然完全加載)。

+0

我有很多jquery插件,實際上,10是推薦的它是結合在一起的,你應該在這種情況下做什麼或者做什麼? – matthewb 2010-01-14 14:17:50

0

除了尤瓦的回答一些可能會或可能不會給您帶來的速度增益選項:

  • 外部庫的加載時間的東西超出你的控制。嘗試儘可能晚地包含它們,並且在頁面加載後動態更好地包含它們。這樣,如果谷歌分析或Facebook有另一個垃圾郵件,你的網頁不會停滯。

  • 從Google加載jQuery不一定更快。考慮將jQuery,jQuery UI和儘可能多的自己的JS放在一個文件中,將它們縮小並gzip,並讓服務器在可能的情況下提供gzip版本。 請注意這裏,速度的增加在很大程度上取決於用戶緩存的內容以及緩存的位置。如果他們的緩存中已經有Google的jQuery,這種技術可能會使頁面加載速度變慢。

最重要的是,經過一些優化後,您可以進行實驗。如果通過深層鏈接直接訪問頁面,或者您可以通過以前的「着陸頁」將一些JS或CSS(甚至圖像)走私到她的緩存中,則必須瞭解您的普通用戶在緩存中的內容。

+0

謝謝,聽起來不錯,雅其facebook和谷歌分析,鎖定了一切,我想將jquery放在底部,但一些功能做文件寫入。 服務器已經gzip代碼,只有很多來自jquery的插件,我應該把它們合併在一起。 – matthewb 2010-01-14 14:35:55

0

確保您以gzip/deflate加密格式傳送您的內容。將多個JavaScript文件合併到一個文件中,這有助於減少http請求的數量。

P.S.這裏有一個測試工具來檢查是否配置壓縮: http://www.gidnetwork.com/tools/gzip-test.php