WordPress支持近40%的網站，這多虧了它讓所有人都可以免費發(fā)布內容的承諾。與高級插件和主題相結合，它可能是構建吸引人的、獨特的、功能豐富的網站的終極工具，無需任何編碼或設計經驗。

然而，你確實為這種體驗付出了代價，WordPress和它的第三方產品并不總是為了性能而構建——無論是頁面加載時間還是SEO。

圖像優(yōu)化是一個特別大的問題。圖片是影響頁面權重最大的因素之一，而且每年都在顯著增長。所以，雖然圖片對美化你的網站頁面至關重要，但它們也是減慢速度的最大因素之一。

在圖像優(yōu)化方面，WordPress+Elementor帶來的東西很少。WordPress核心現(xiàn)在提供了響應式語法和延遲加載。Elementor本身也只有現(xiàn)成的響應式語法。然而，這些都是圖像優(yōu)化的基本技術，只會帶來最小限度的改進。

這意味著，雖然Elementor可以很容易地設計漂亮的WordPress頁面(使用大量創(chuàng)造性利用的圖片)，但在性能方面，你可能要付出代價。但是別擔心。我們將向您展示如何顯著提高web性能超過30分的評分工具，如谷歌的PageSpeed Insight。

為什么用ImageEngine優(yōu)化你的元素圖像?

通常，圖像cdn使用各種技術使圖像有效負載盡可能小，并更快地提供圖像內容，同時最小化視覺影響。ImageEngine在這方面沒有什么不同。

首先，ImageEngine，當在自動模式下使用時，將應用以下web性能工具推薦的所有優(yōu)化，如谷歌的PageSpeed Insight。例如:

適當大小的圖像- ImageEngine會根據(jù)用戶設備的屏幕大小自動調整圖像的大小與質量的比例。ImageEngine支持Retina設備。

有效編碼圖像-應用不同的壓縮率取決于用戶設備的PPI。例如，ImageEngine可以在PPI更高的設備上更積極地進行壓縮，而不會失去視覺質量。

下一代格式轉換-自動轉換圖像到最佳的下一代格式根據(jù)瀏覽器，設備，或操作系統(tǒng)。ImageEngine可以將圖像轉換為WebP或JPEG-2000以及gif轉換為MP4或WebP。AVIF也可采用手動指令模式。

帶不必要的元數(shù)據(jù)

雖然這些特性是大多數(shù)圖像cdn的標準特性，但ImageEngine對于WURFL設備檢測的使用是獨特的。這使ImageEngine能夠更深入地了解訪問網站頁面的用戶設備及其圖像。通過使用屏幕大小、分辨率、PPI等，ImageEngine可以做出更智能的決定，即如何在保持視覺質量的同時減少圖像負載。

這就是ImageEngine標榜自己為“智能的、設備感知的”圖像CDN的原因，也是它可以減少圖像負載多達80%(如果不是更多的話)的原因。

ImageEngine還提供了專有的CDN服務來加速圖像傳輸。CDN由20個全局定位的pop組成，帶有內置的設備感知邏輯。這允許你在不同的區(qū)域交付圖像內容更快，同時也提供圖像直接從緩存與~98%的命中率。

ImageEngine還支持Chrome的保存數(shù)據(jù)設置。如果有人有一個較慢的連接或已激活此設置，ImageEngine將自動壓縮圖像負載更多，以在較慢的連接上提供更好的用戶體驗。

如何使用ImageEngine與WordPress和Elementor

如果你正在使用WordPress和Elementor，那么你可能希望盡可能少地花時間在開發(fā)和其他技術上。幸運的是，ImageEngine是一個高度簡化的工具，它幾乎不需要任何努力就可以與WordPress站點集成或維護。

假設你已經有一個使用Elementor的WordPress網站，以下是使用ImageEngine的一步一步的說明:

去ImageEngine。注冊一個30天的免費試用。

為ImageEngine提供你想要優(yōu)化的網站的URL。

創(chuàng)建一個帳戶(或注冊你現(xiàn)有的谷歌，GitHub，或ScientiaMobile帳戶)。

為ImageEngine提供提供圖像的當前來源。如果你像往常一樣上傳圖片到你的WordPress網站，那就意味著你要再次提供你的WordPress網站地址。

最后，ImageEngine將為您生成一個ImageEngine交付地址，優(yōu)化后的圖像將在此提供服務。這通常采取的形式是:{randomstring}.cdn. imeng .in。您可以從儀表板上將送貨地址更改為更有意義的地址。

現(xiàn)在，要在你的WordPress網站上設置ImageEngine:

轉到WordPress儀表盤，轉到插件->添加新。

通過ImageEngine搜索“Image CDN”插件。當你找到它，安裝并激活插件。

進入設置->鏡像CDN。這是ImageEngine插件儀表板。要配置它，你需要做的就是:

a.復制你從ImageEngine上面得到的收貨地址，并將其粘貼到“收貨地址”字段。

b.勾選“啟用ImageEngine”框。

這是字面上的。你在WordPress/ element頁面上使用的所有圖片現(xiàn)在應該通過已經優(yōu)化的ImageEngine CDN提供服務。

ImageEngine很大程度上是一個“設置后就忘記”的工具。它將在自動模式下提供最佳結果，無需用戶輸入。但是，您可以從儀表板覆蓋ImageEngine的一些設置，或者通過使用URL指令來操作圖像。

例如，你可以調整圖像的寬度為300px，并通過改變src屬性將其轉換為WebP:

但是，只有在必要時才使用它，因為這樣做會限制ImageEngine在不同條件下的適應性。

你能期待什么樣的改善?

讓我們看看使用圖像CDN來改善頁面加載時間能得到什么結果。

為此，我使用Elementor主題創(chuàng)建了兩個相同的WordPress頁面。一個頁面完全依賴于WordPress和Elementor，而另一個頁面我安裝并設置了ImageEngine。這個頁面有一些圖庫和全尺寸圖片:

這些頁面使用了許多高質量的圖像，你可能會在專業(yè)攝影畫廊、攝影博客、庫存照片網站、大型電子商務網站等上找到這些圖像。然后，我使用Chrome內置的Lighthouse審計工具運行頁面性能測試，選擇代表每個頁面平均結果的分數(shù)。

為了更徹底，我測試了手機和桌面的性能。然而，我關注的是移動結果，因為這些展示了更多的圖像CDN的響應能力。移動流量也占據(jù)了互聯(lián)網流量的大部分份額，似乎是搜索引擎未來的重點。

那么，首先，讓我們看看沒有ImageEngine的頁面的移動分數(shù):

正如你所看到的，交付大量的圖像內容肯定是一場斗爭。谷歌顯示，53%的手機用戶放棄加載時間超過3秒的頁面。因此，很明顯，當涉及到用戶體驗和保持流量時，這個頁面有主要的關注點。

桌面版的表現(xiàn)要好得多，但仍有很多不足之處:

在深入研究放緩背后的原因時，我們可以發(fā)現(xiàn)以下問題:

大多數(shù)問題都與圖片的大小和重量有關。如您所見，Lighthouse標識了3.8 MB的有效負載，而整個頁面的總圖像有效負載接近40 MB。

現(xiàn)在，讓我們先看看ImageEngine可以通過移動端分數(shù)來改善這些問題:

所以，正如你所看到的，比起標準的WordPress/Elementor頁面有了30個點的重大改進。加載圖像的時間在關鍵的核心web關鍵指標上減少了大約80%，如FCP, LCP和整體速度指數(shù)。

事實上，我們剛剛到達FCP的關鍵3個里程碑(當它最初加載時，頁面可見區(qū)域上最大的元素)，這創(chuàng)造了頁面已經完成加載的印象，并將幫助你保留大量的移動流量。

臺式機的得分也高得多，并且在關鍵性能指標上有進一步的改進。

如果我們看到性能問題仍然存在，我們會發(fā)現(xiàn)圖像幾乎完全不受關注。我們還設法將初始3.8 MB的有效載荷降低到大約1.46 MB，減少了62%:

使用WordPress和WordPress插件的一個不幸的副作用是，由于所有額外的JavaScript和CSS，你幾乎不可避免地會面臨性能的打擊。這就是為什么我們沒有看到更大的改進的部分原因。這就是你為方便使用這些工具所付出的代價。

也就是說，頁面上的圖片越多，圖片的尺寸越大，改進的效果就越顯著。

同樣值得注意的是，如果快速向下滾動頁面，惰性加載的圖像在ImageEngine中加載的速度會顯著加快，這再次改善了用戶體驗。

由于它的智能圖像壓縮，在圖像質量上也沒有明顯的損失，從這個對比中可以看到:

結論

因此，正如你所看到的，我們可以通過使用ImageEngine圖像CDN在圖像較多的網站上實現(xiàn)顯著的性能改進，盡管使用CMS存在固有的性能問題。這將轉化為更快樂的用戶，更好的搜索引擎排名，和一個整體上更成功的網站。

最重要的是，ImageEngine忠實于WordPress的關鍵原則。你不用擔心任何內部的細節(jié)和螺栓。而且，ImageEngine會根據(jù)需要自動調整自動化策略，防止您為了優(yōu)化而偶爾返工圖像。