需要幫助有更快的網站加載

Question

我有一個新的網站的一部分...讓我們稱之爲英雄，加載在一秒鐘之內。次要內容動態加載每個帖子的縮略圖（有100個）需要花費一分鐘才能加載。

我想有一個第二下優先化內容（英雄內容）負載，原樣，但隨後，才把，加載輔助內容 - 只有經過主內容（主人公）是滿載。

我使用的是WP平臺，自定義英雄節和網格FX插件調用該次要內容。

在做這個網站加載速度更快任何幫助，不勝感激！

謝謝！

Answer 1

，我不會感到驚訝，如果已經有處理這個給你一個插件，但它的聲音非常相似，我面臨一個網站的情況下，我最終想出了以下解決方案。

基本上有兩個因素讓工作變得很慢：首先，服務器查詢數百個帖子，然後，然後瀏覽器必須獲取所有這些縮略圖。因此，有兩個不同的東西，你可以優化：

第1步：查詢 第一 - 爲@EdCottrell指出的 - 你可以批量加載這些圖片或者您也可以使用AJAX通過admin-ajax.php請求更多的職位;這將返回一個JSON對象，然後可以使用該對象爲圖像URL創建一組包含數據屬性的元素（然後將在步驟2中使用它）。要做到這一點所需的步驟相當長，因爲我們在這裏涵蓋兩個不同的主題，所以可能會更簡潔，指向this article，其中詳細介紹了它。簡而言之，你會：

1. 使用wp_localize_script()到正確的路徑admin-ajax.php傳遞給你的JS
2. 在你的JS檢測時，你的英雄元素被加載，然後讓更多的職位AJAX請求：此實際上是對功能的調用...
3. ...這將首先檢查您是否具有相關權限。
4. 假設你有一個有關的職位和他們的縮略圖執行查詢的權限，你會然後再返回它作爲一個對象
5. 如果成功，JS再處理對象，創建一些元素（一些諸如< div> S）將圖像加載到。

步驟2：裝載圖像 而不是一次全部圖像簡單地加載 - 其可以是慢 - 當該元件處於實際上鑑於可以裝載它們。您可以使用相當輕量級的unveil.js插件來完成此操作。假設您添加在步驟1中的data-thumbnail-src數據屬性它看起來是這樣的：

$('.post-preview').one('unveil', function() { 
    var src = $(this).attr('data-thumbnail-src'); // Get the src from the data-attribute 
    $(this).attr('src', src); // Adding the src causes the image to load 
} 

注意，上面留下了爲簡潔的幾個問題，如HTML有效性（圖像需要東西作爲src屬性）和圖像尺寸，但它應該是一個很好的起點。