WordPress支持近40%的網(wǎng)站，這多虧了它讓所有人都可以免費(fèi)發(fā)布內(nèi)容的承諾。與高級(jí)插件和主題相結(jié)合，它可能是構(gòu)建吸引人的、獨(dú)特的、功能豐富的網(wǎng)站的終極工具，無(wú)需任何編碼或設(shè)計(jì)經(jīng)驗(yàn)。

然而，你確實(shí)為這種體驗(yàn)付出了代價(jià)，WordPress和它的第三方產(chǎn)品并不總是為了性能而構(gòu)建——無(wú)論是頁(yè)面加載時(shí)間還是SEO。

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

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

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

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

通常，圖像cdn使用各種技術(shù)使圖像有效負(fù)載盡可能小，并更快地提供圖像內(nèi)容，同時(shí)最小化視覺(jué)影響。ImageEngine在這方面沒(méi)有什么不同。

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

適當(dāng)大小的圖像- ImageEngine會(huì)根據(jù)用戶設(shè)備的屏幕大小自動(dòng)調(diào)整圖像的大小與質(zhì)量的比例。ImageEngine支持Retina設(shè)備。

有效編碼圖像-應(yīng)用不同的壓縮率取決于用戶設(shè)備的PPI。例如，ImageEngine可以在PPI更高的設(shè)備上更積極地進(jìn)行壓縮，而不會(huì)失去視覺(jué)質(zhì)量。

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

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

雖然這些特性是大多數(shù)圖像cdn的標(biāo)準(zhǔn)特性，但I(xiàn)mageEngine對(duì)于WURFL設(shè)備檢測(cè)的使用是獨(dú)特的。這使ImageEngine能夠更深入地了解訪問(wèn)網(wǎng)站頁(yè)面的用戶設(shè)備及其圖像。通過(guò)使用屏幕大小、分辨率、PPI等，ImageEngine可以做出更智能的決定，即如何在保持視覺(jué)質(zhì)量的同時(shí)減少圖像負(fù)載。

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

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

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

如何使用ImageEngine與WordPress和Elementor

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

假設(shè)你已經(jīng)有一個(gè)使用Elementor的WordPress網(wǎng)站，以下是使用ImageEngine的一步一步的說(shuō)明:

去ImageEngine。注冊(cè)一個(gè)30天的免費(fèi)試用。

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

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

為ImageEngine提供提供圖像的當(dāng)前來(lái)源。如果你像往常一樣上傳圖片到你的WordPress網(wǎng)站，那就意味著你要再次提供你的WordPress網(wǎng)站地址。

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

現(xiàn)在，要在你的WordPress網(wǎng)站上設(shè)置ImageEngine:

轉(zhuǎn)到WordPress儀表盤，轉(zhuǎn)到插件->添加新。

通過(guò)ImageEngine搜索“Image CDN”插件。當(dāng)你找到它，安裝并激活插件。

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

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

b.勾選“啟用ImageEngine”框。

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

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

例如，你可以調(diào)整圖像的寬度為300px，并通過(guò)改變src屬性將其轉(zhuǎn)換為WebP:

但是，只有在必要時(shí)才使用它，因?yàn)檫@樣做會(huì)限制ImageEngine在不同條件下的適應(yīng)性。

你能期待什么樣的改善?

讓我們看看使用圖像CDN來(lái)改善頁(yè)面加載時(shí)間能得到什么結(jié)果。

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

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

為了更徹底，我測(cè)試了手機(jī)和桌面的性能。然而，我關(guān)注的是移動(dòng)結(jié)果，因?yàn)檫@些展示了更多的圖像CDN的響應(yīng)能力。移動(dòng)流量也占據(jù)了互聯(lián)網(wǎng)流量的大部分份額，似乎是搜索引擎未來(lái)的重點(diǎn)。

那么，首先，讓我們看看沒(méi)有ImageEngine的頁(yè)面的移動(dòng)分?jǐn)?shù):

正如你所看到的，交付大量的圖像內(nèi)容肯定是一場(chǎng)斗爭(zhēng)。谷歌顯示，53%的手機(jī)用戶放棄加載時(shí)間超過(guò)3秒的頁(yè)面。因此，很明顯，當(dāng)涉及到用戶體驗(yàn)和保持流量時(shí)，這個(gè)頁(yè)面有主要的關(guān)注點(diǎn)。

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

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

大多數(shù)問(wèn)題都與圖片的大小和重量有關(guān)。如您所見(jiàn)，Lighthouse標(biāo)識(shí)了3.8 MB的有效負(fù)載，而整個(gè)頁(yè)面的總圖像有效負(fù)載接近40 MB。

現(xiàn)在，讓我們先看看ImageEngine可以通過(guò)移動(dòng)端分?jǐn)?shù)來(lái)改善這些問(wèn)題:

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

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

臺(tái)式機(jī)的得分也高得多，并且在關(guān)鍵性能指標(biāo)上有進(jìn)一步的改進(jìn)。

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

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

也就是說(shuō)，頁(yè)面上的圖片越多，圖片的尺寸越大，改進(jìn)的效果就越顯著。

同樣值得注意的是，如果快速向下滾動(dòng)頁(yè)面，惰性加載的圖像在ImageEngine中加載的速度會(huì)顯著加快，這再次改善了用戶體驗(yàn)。

由于它的智能圖像壓縮，在圖像質(zhì)量上也沒(méi)有明顯的損失，從這個(gè)對(duì)比中可以看到:

結(jié)論

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

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