>在構建和維護WordPress網站時,重要的是要找到改善站點性能并減少頁面加載時間的方法。這有助于降低跳出率并提高搜索引擎的排名。
有幾種方法可以通過WordPress網站的主題和插件代碼來實現性能 - 例如,縮小JavaScript,CSS和圖像。還有基于服務器的配置選項 - 例如,啟用緩存或使用WordPress插件來幫助緩存靜態(tài)內容。
> 但是,我們無法控制客戶將添加到其WordPress網站的內容(特別是圖像)。圖像可以以其原始形式上傳,導致站點性能問題并增加頁面加載時間。 在本文中,我們將探討優(yōu)化JPEG和PNG圖像的不同方法,這些方法由客戶和網站所有者上傳到WordPress。鑰匙要點
>優(yōu)先考慮預定義的圖像大?。豪肳ordPress的內置設置來定義縮略圖,中和大尺寸以進行圖像以優(yōu)化性能并確保圖像適當尺寸適合您主題中的不同上下文。
>>>>>
實現其他圖像尺寸:使用主題中的自定義圖像尺寸,允許在各種帖子類型和頁面布局中更大的靈活性和優(yōu)化。- >
- 優(yōu)化圖像壓縮:同時使用有損和無損壓縮技術可大大減少圖像文件大小,平衡質量和性能,并使用諸如用于自動壓縮的TinyPNG之類的工具。
- >調整JPEG質量設置:通過主題的`functions.php`修改默認的JPEG映像質量,以直接在WordPress中管理文件大小,優(yōu)化存儲時間和加載時間。 >利用CDN服務:集成內容輸送網絡(CDN)(例如Photon或MaxCDN)以分發(fā)和緩存圖像地理位置,根據用戶的位置加速圖像交付并進一步增強站點性能。
- >
- >主題圖像大小
- > WordPress用戶上傳圖像時,WordPress提供了兩個功能,我們可以在特定的維度下使用它們來創(chuàng)建原始圖像的副本。這很有用,我們要在主題內以特定大小的特定大小輸出圖像。 >
在WordPress管理中,在設置>媒體下,有三個預定義的圖像尺寸:縮略圖,中和大。每個人都可以設置自己的尺寸。
>由于WordPress始終將圖像大小調整到這些尺寸(導致4個圖像被存儲 - 原始的,縮略圖,中等大小和大尺寸),因此值得首先設置這些圖像,并在可能的情況下將它們放在WordPress主題中。
>在WordPress主題中使用預定義的圖像大小,使用:<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large' </span><span>}</span>
set_post_thumbnail_size()
如果您需要其他圖像尺寸,我們可以使用set_post_thumbnail_size():
>這允許我們定義帖子,頁面和自定義帖子類型的特征圖像的寬度和高度,我們使用the_post_thumbnail()。要定義特色圖像大小,請將以下代碼添加到主題的functions.php文件中。這將將特色圖像設置為500px寬度x 500px高度:
>要在指定的維度上輸出帖子的特征圖像,請在WordPress循環(huán)中使用the_post_thumbnail():
>
<span>add_theme_support( 'post-thumbnails' ); </span><span>set_post_thumbnail_size( 500, 500, true );</span>add_image_size()
>雖然set_post_thumbnail_size()很有用,但我們只能稱其為定義一組圖像尺寸,以及WordPress縮略圖,中型和大尺寸。如果我們想輸出其他尺寸,我們就會卡住,例如,我們的帖子為500px x 500px圖像,以及我們頁面的400px x 400px圖像。
<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail(); </span><span>}</span>>
幸運的是,WordPress還提供add_image_size()函數:
記錄一個新的圖像大小。這意味著WordPress將在上傳新圖像時使用指定的維度創(chuàng)建圖像的副本。。
>我們可以在主題的functions.php文件中調用此函數,以根據主題要求注冊盡可能多的圖像大小。讓我們注冊兩個圖像尺寸,分別用于帖子和頁面:>
我們現在可以通過修改我們的the_post_thumbnail()調用:>
結果
<span>add_image_size( 'post', 500, 500, true ); </span><span>add_image_size( 'page', 400, 400, true );</span>使用我們的測試JPEG和PNG圖像,我們可以看到文件尺寸降低和性能增長:
jpeg圖像
<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail( 'post' ); // Or 'page' </span><span>}</span>原始尺寸 - 文件大?。?04KB
500px x 500px - 文件大?。?9kb
400px x 400px - 文件大小:21kb> png圖像
原始尺寸 - 文件大?。?97KB
500px x 500px - 文件大小:354KB


>圖像壓縮旨在通過刪除冗余數據進一步減少圖像文件大小,而對圖像質量的犧牲很少或沒有犧牲。


>有損圖像壓縮
有損壓縮使用不精確的近似值,丟棄了部分圖像數據,以產生具有較低文件大小的映像,同時盡可能地維護原始圖像。
>元數據(例如Exif信息,告訴我們有關相機制造,模型和位置)可以丟棄,不會影響圖像質量。缺點是圖像質量可能會受到影響,因此在快速圖像加載時間和圖像質量之間找到適當的平衡很重要。
有損壓縮通常在JPEG圖像和照片上使用,其中圖像文件中有很多數據以渲染圖像輸出。
使用我們的測試圖像和tinypng.com,我們可以看到有損壓縮對我們的JPEG和PNG圖像的影響:
jpeg圖像
原始尺寸 - 原始文件大?。?04KB,有損耗的壓縮文件大小:367KB,保存:27%
500px x 500px - 原始文件大?。?9kb,有損耗的壓縮文件大?。?7.1kb,保存:41%


原始尺寸 - 原始文件大?。?97KB,有損耗的壓縮文件大?。?29.6KB,保存:67%
500px x 500px - 原始文件大小:354KB,有損耗的壓縮文件大?。?4.3kb,保存:73%


無損壓縮允許部分丟棄和壓縮圖像數據,而不會丟失圖像質量。 “無損”壓縮的圖像將與原始圖像相同。
缺點是,它通常不會在更復雜的圖像(例如照片)上提供任何文件大小的改進。因此,它最好用于png和gif圖像。
>圖像壓縮:WordPress解決方案
WordPress使用有損壓縮提供了兩種調整圖像質量的方法。我們可以通過將以下代碼添加到我們的主題函數。jpeg_quality定義上傳到WordPress的JPEG圖像的質量,或在WordPress的圖像編輯器中進行了編輯。
> wp_editor_set_quality定義了WordPress圖像編輯器中編輯的任何圖像的質量。對于JPEG圖像,因為我們已經指定了JPEG_QUELITY過濾器,所以這將覆蓋此過濾器。通過這些更改將我們的測試映像上傳到WordPress上,會產生以下結果:
jpeg圖像
原始尺寸 - 原始文件大?。?04KB,60%質量文件大?。?04KB,保存:0%500px x 500px - 原始文件大?。?9kb,60%質量文件大小:14kb,保存:51%
400px x 400px - 原始文件大?。?1kb,60%質量文件大?。?0KB,保存:52%


>我們探索了圖像壓縮的工作原理,并使用在線工具運行了一些測試,但理想情況下,我們希望在WordPress中自動壓縮我們的圖像。這意味著我們并不依靠客戶(或我們自己)記住在將圖像上傳到WordPress之前使用第三方工具,而我們正在簡化過程。
有幾個WordPress插件,可提供自動圖像壓縮:
使用各種JPEG,PNG和GIF壓縮庫/服務提供無損壓縮的EWWW Image Optimizer。它需要exec()訪問,某些共享主機可能沒有 - 但是他們確實提供了ewww image Optimizer云,這是對服務器上處理圖像的服務的付費。
>>再次,對于有損壓縮,您需要支付API鍵,費率為1,000張圖像的價格為$1。
>要設置EWWW映像優(yōu)化器,導航到插件>在WordPress管理接口中添加新的插件,然后搜索“ EWWW Image Optimizer”:
>單擊
>立即安裝>按鈕,并在安裝后激活插件。
默認情況下,該插件將在我們的圖像上提供無損壓縮,無需進一步的配置。讓我們創(chuàng)建一個新帖子,并將我們的特色圖像設置為我們的測試圖像,以獲得一些結果:
>jpeg圖像
原始尺寸 - 原始文件大小:504KB,有損耗的壓縮文件大?。?03KB,保存:0.2%


> png圖像
原始尺寸 - 原始文件大?。?97KB,有損耗的壓縮文件大小:669KB,保存:4%


>當“無損”地壓縮PNG圖像上的jpeg圖像時,我們可以獲得更好的性能,這是可以預期的。但是,這些圖像仍然很大,所以讓我們嘗試另一個提供有損壓縮的插件。
>壓縮JPEG和PNG圖像
以及提供基于Web的圖像壓縮服務,TINYPNG還提供了一個WordPress插件,可以自動為JPEG和PNG圖像提供有損的壓縮。
>每月免費的前500張圖像壓縮是免費的。之后,每圖像壓縮的價格為0.009美元。>
>要設置tinypng插件,導航到插件>在WordPress管理接口中添加新的插件,然后搜索“壓縮JPEG&PNG images”:>單擊

>按鈕,并在安裝后激活插件。 接下來,通過訪問https://tinypng.com/developers獲取API密鑰,然后輸入您的姓名和電子郵件地址:
>>您將收到帶有鏈接的電子郵件,以獲取您的API密鑰。單擊鏈接,并記下您的API密鑰:

在WordPress插件中,導航到設置>媒體,然后插入您的tinypng api鍵。您還可以選擇要壓縮的圖像尺寸 - 每個圖像大小每月都將500個免費分配的壓縮量計算為壓縮,因此,讓我們選擇原始圖像,頁面和帖子尺寸以進行測試:
>
>讓我們創(chuàng)建一個新帖子,并將我們的“特色圖像”設置為我們的測試圖像以獲取一些結果:
jpeg圖像
原始尺寸 - 原始文件大?。?04KB,有損耗的壓縮文件大?。?67KB,保存:27.2%


> png圖像
原始尺寸 - 原始文件大小:697KB,有損耗的壓縮文件大小:230kb,保存:67%


>單獨使用特定圖像大小和壓縮插件,我們可以將504KB JPEG圖像降低至13KB - 節(jié)省491KB,或在2 Mbps的連接中快1秒左右。對于697KB PNG,我們可以將其降低到65KB - 節(jié)省632KB,或在2 Mbps連接上更快的速度約1.2秒。
>>現在我們已經優(yōu)化了要在WordPress網站上交付的圖像,讓我們看看如何根據訪問者的位置和其他因素來優(yōu)化這些圖像的交付。
>內容輸送網絡(CDN)
>>內容輸送網絡是大量服務器,通常分布在世界各地的多個數據中心中。它們旨在提供靜態(tài)內容,例如文本,圖像,CSS和JavaScript,以及更大的文件下載。
> CDN也可以使用緩存和縮小,以確保交付的內容盡可能優(yōu)化。 由于CDN的地理位置,大多數將檢測到訪客的國家,并嘗試從最近的可用數據中心傳遞文本,圖像,CSS和JavaScript。這有助于減少響應時間和頁面加載時間,并減少服務器帶寬和加載服務器上的響應時間和加載。讓我們看一下WordPress的兩個可用的CDN解決方案。
>
photon光子被描述為:
…托管在WordPress.com上或JetPack連接的WordPress站點上的網站的圖像加速度和編輯服務。這意味著您的主機上的負載少,讀者的圖像更快
它會自動捕獲JPEG,PNG和GIF圖像,提供調整大小的版本以滿足瀏覽器的要求。如果我們在具有500px x 500px圖像的移動設備上查看WordPress網站,這將很有用,但是我們只需要250px x 250px版本。>為了設置光子,我們需要安裝和激活噴氣背包。導航到插件>在您的WordPress管理接口中添加新的插件,然后搜索“ JetPack”:
> >單擊
>立即安裝
>按鈕,并在安裝后激活插件。 接下來,在WordPress管理菜單中單擊
jetpack,然后單擊>連接到wordpress.com。 (如果沒有一個,請不要擔心 - 您可以在這一點上注冊一個免費帳戶) 如果一切成功,您將被重定向到WordPress管理接口,在那里您會看到幾個可用的模塊,包括光子。讓我們繼續(xù)通過單擊激活
按鈕來激活光子:> 現在激活
光子,并將圖像從其CDN中提供。 >讓我們查看我們的現有帖子和頁面,其中包含我們的TINYPNG優(yōu)化的特色圖像。您會注意到這些圖像現在是從i2.wp.com提供的 - 這是Photon的CDN。我們可以獲取圖像源并調整調整大小參數以獲取原始的500px和400px版本,以測試優(yōu)化的文件尺寸:
jpeg圖像原始尺寸 - 原始文件大小:504KB,有損耗的壓縮文件大?。?18KB,保存:37%
500px x 500px - 原始文件大?。?9kb,有損耗的壓縮文件大?。?4kb,保存:51.7%
400px x 400px - 原始文件大?。?1kb,有損耗的壓縮文件大小:10KB,保存:52.4%> png圖像
原始尺寸 - 原始文件大?。?97KB,有損耗的壓縮文件大?。?39KB,保存:65.7%
500px x 500px - 原始文件大?。?54KB,有損耗的壓縮文件大?。?01KB,保存:71.5%400px x 400px - 原始文件大?。?36KB,有損耗的壓縮文件大?。?9kb,保存:70.8%
![]()
>我們仍然能夠實現與TinyPng相似的文件大小,我們的JPEG圖像在光子上的性能更好,并且我們的PNG圖像使用TINYPNG表現更好。
>第三方CDNS
如果您不想安裝JetPack,并使用隨附的其他功能(36模塊和計數?。?,則可以使用第三方CDN,例如MaxCDN。
這種方法的優(yōu)點是,您不僅限于優(yōu)化圖像交付;您可以指定CDN提供的CSS,JavaScript文件和其他靜態(tài)文件類型。我們還可以在WordPress安裝上保留圖像優(yōu)化插件(例如TinyPng),以確保在存儲在CDN上之前對圖像進行了優(yōu)化。如果您在一個具有更多CSS和JavaScript內容與圖像的網站上,那么這可能是一個更好的解決方案。
>設置MaxCDN,轉到他們的網站,然后單擊>獲取免費測試帳戶>按鈕。
>按照屏幕上的說明完成您的個人詳細信息。然后,您將收到一封電子郵件,允許您創(chuàng)建MaxCDN帳戶并開始。>注冊后,您需要創(chuàng)建一個區(qū)域。區(qū)域本質上是一個網站。
要創(chuàng)建一個區(qū)域,請單擊主菜單中的“區(qū)域”選項,然后是
>創(chuàng)建拉動區(qū)域>
輸入拉動區(qū)域的名稱(通常是您的網站名稱),它是URL和一個可選標簽:![]()
接下來,我們需要配置我們的WordPress安裝以使用MAXCDN。我們將使用W3 Total Cache,這是MaxCDN支持的WordPress插件。
>
>設置W3總緩存,導航到插件>在您的WordPress管理接口中添加新的插件,然后搜索“ W3 Total Cache”:
>單擊
>立即安裝>按鈕,并在安裝后激活插件。
>激活后,在WordPress管理菜單中導航到cdn> cdn,然后向下滾動到配置面板。
>單擊
>授權按鈕,復制授權密鑰,然后將其粘貼到插件的
授權密鑰字段中:> 如果一切都起作用,則應在屏幕上顯示A
鍵有效。單擊>保存所有設置
按鈕以完成配置。> 重新加載您現有的頁面或帖子之一,您應該從CDN中看到CSS,JS和圖像。> 結論
在本文中,我們審查了WordPress的許多圖像優(yōu)化和CDN插件。 Photon CDN是JetPack插件的一部分,它提供了提供優(yōu)化圖像的單個,最有效的解決方案,該圖像為所有分辨率縮放并從CDN提供 - 最重要的是,它是免費的。對于那些已經已經有CDN的人,或者不想使用它,或使用JetPack,Tinypng的WordPress插件會在PNG圖像上對Photon的圖像優(yōu)化略有改進,并且可以與A相結合,從而有所改善第三方CDN提供商。>在WordPress中掌握圖像優(yōu)化的經常詢問的問題
>在WordPress中,圖像優(yōu)化的好處是什么?首先,它提高了網站的加載速度。大型,不優(yōu)化的圖像可能會減慢您的網站,從而對用戶體驗和SEO排名產生負面影響。其次,優(yōu)化的圖像使用較少的存儲空間,如果您采用有限的托管計劃,這可能是有益的。最后,優(yōu)化的圖像看起來很專業(yè)且吸引人,可以增強您網站的整體美學和用戶參與度。
>
>圖像優(yōu)化如何影響SEO?>圖像優(yōu)化在SEO中起重要作用。 Google之類的搜索引擎將網站加載速度視為排名因素。優(yōu)化的圖像加載速度更快,提高了您的網站的速度,從而提高了其SEO排名。此外,具有正確優(yōu)化的Alt標簽的正確優(yōu)化的圖像可以幫助您的網站出現在圖像搜索結果中,吸引更多的網站流量。
>>有什么最佳的WordPress插件用于圖像優(yōu)化?幾個出色的WordPress插件,用于圖像優(yōu)化。一些最受歡迎的內容包括EWWW圖像優(yōu)化器,Smush和shortpixel。這些插件在上載圖像時會自動壓縮并優(yōu)化圖像,節(jié)省時間和精力。
>>如何優(yōu)化圖像而又不會丟失質量?
您可以在不使用無損的情況下優(yōu)化圖像而不丟失質量壓縮,可以減小文件大小而不會降低圖像質量。許多WordPress圖像優(yōu)化插件都提供此功能。此外,根據您的需求選擇正確的圖像格式(JPEG,PNG,GIF等)也可以幫助維持圖像質量。
>如何將alt標簽添加到WordPress中的images?
>您可以通過轉到WordPress中的圖像中添加Alt標簽您的媒體庫,選擇圖像并填寫“ ALT文本”字段。 Alt標簽對于SEO和可訪問性很重要,因為它們描述了搜索引擎和視覺上受損的用戶的圖像內容。
我可以在WordPress中批量優(yōu)化圖像嗎?
是的,是的,許多WordPress圖像優(yōu)化插件讓您批量優(yōu)化圖像。如果您有大量圖像可以優(yōu)化,此功能可能非常有用。>
>如何優(yōu)化移動設備的圖像?
以優(yōu)化移動設備的圖像,您可以使用響應式圖像,這些圖像可以調整以適合不同的屏幕尺寸。 WordPress會自動創(chuàng)建您上傳的每個圖像的幾個尺寸,并為每個設備提供最合適的尺寸。
>>有損耗和無損壓縮之間有什么區(qū)別?
通過刪除降低文件大小一些圖像數據,可能導致圖像質量損失。另一方面,無損壓縮會減小文件大小而無需刪除任何數據,保留原始圖像質量。
>我應該在WordPress中優(yōu)化一次圖像?
>理想情況下,您應該在您時優(yōu)化圖像。將它們上傳到您的WordPress網站。這樣可以確保您的網站保持迅速,高效,從而提供最佳的用戶體驗。
以上是掌握WordPress中的圖像優(yōu)化的詳細內容。更多信息請關注PHP中文網其他相關文章!

熱AI工具

Undress AI Tool
免費脫衣服圖片

Undresser.AI Undress
人工智能驅動的應用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機

Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

WordPress導致服務器CPU使用率飆升的主要原因包括插件問題、數據庫查詢效率低、主題代碼質量差或流量激增。1.首先通過top、htop或控制面板工具確認是否為WordPress引起的高負載;2.進入故障排查模式逐步啟用插件排查性能瓶頸,使用QueryMonitor分析插件執(zhí)行情況并刪除或替換低效插件;3.安裝緩存插件、清理冗余數據、分析慢查詢日志以優(yōu)化數據庫;4.檢查主題是否存在過度加載內容、復雜查詢或缺乏緩存機制等問題,建議用標準主題測試對比并優(yōu)化代碼邏輯。按照上述步驟逐一排查可定位并解

MinifyingJavaScript文件可通過刪除空白、注釋和無用代碼來提升WordPress網站加載速度。1.使用支持合并壓縮的緩存插件如W3TotalCache,在“Minify”選項中啟用并選擇壓縮模式;2.使用專用壓縮插件如FastVelocityMinify,提供更精細控制;3.手動壓縮JS文件并通過FTP上傳,適用于熟悉開發(fā)工具的用戶。注意部分主題或插件腳本可能與壓縮功能沖突,啟用后需徹底測試網站功能。

優(yōu)化WordPress站點不依賴插件的方法包括:1.使用輕量級主題,如Astra或GeneratePress,避免功能堆砌的主題;2.手動壓縮和合并CSS、JS文件,減少HTTP請求;3.上傳前優(yōu)化圖片,使用WebP格式并控制文件大小;4.配置.htaccess啟用瀏覽器緩存,并接入CDN提升靜態(tài)資源加載速度;5.限制文章修訂版本并定期清理數據庫冗余數據。

TransientsAPI是WordPress中用于臨時存儲可自動過期數據的內置工具,其核心函數為set_transient、get_transient和delete_transient。相比OptionsAPI,transients支持設置生存時間(TTL),適合緩存API請求結果、復雜計算數據等場景。使用時需注意key命名唯一性與命名空間、緩存“懶刪除”機制及對象緩存環(huán)境下可能不持久的問題。典型應用場景包括減少外部請求頻率、控制代碼執(zhí)行節(jié)奏和提升頁面加載性能。

PluginCheck是一個幫助WordPress用戶快速檢查插件兼容性和性能的工具,主要用來識別當前安裝的插件是否存在與最新版本WordPress不兼容、存在安全漏洞等問題。1.如何開始檢查?安裝激活后,在后臺點擊“RunaScan”按鈕即可自動掃描所有插件;2.報告包含插件名稱、檢測類型、問題描述及解決方案建議,便于優(yōu)先處理嚴重問題;3.建議在更新WordPress前、網站異常時或定期運行檢查,提前發(fā)現隱患,避免未來出現重大問題。

防止評論垃圾信息最有效的方式是通過程序化手段自動識別并攔截。1.使用驗證碼機制(如GooglereCAPTCHA或hCaptcha)可有效區(qū)分人類與機器人,尤其適合公眾網站;2.設置隱藏字段(Honeypot技術),利用機器人自動填寫特性識別垃圾評論,不影響用戶體驗;3.檢查評論內容關鍵詞黑名單,通過敏感詞匹配過濾垃圾信息,需注意避免誤判;4.判斷評論頻率與來源IP,限制單位時間內的提交次數并建立黑名單;5.使用第三方反垃圾服務(如Akismet、Cloudflare)提升識別準確性??筛鶕W站

在開發(fā)Gutenberg塊時,正確enqueue資產的方法包括:1.使用register_block_type指定editor_script、editor_style和style的路徑;2.在functions.php或插件中通過wp_register_script和wp_register_style注冊資源,并設置正確的依賴和版本;3.配置構建工具輸出合適的模塊格式,并確保路徑一致;4.通過add_theme_support或enqueue_block_assets控制前端樣式的加載邏輯,確保

要添加自定義用戶字段需根據平臺選擇擴展方式并注意數據驗證與權限控制。常見做法包括:1.利用數據庫額外表或鍵值對結構存儲信息;2.在前端加入輸入框并與后端集成;3.對敏感數據進行格式校驗和訪問權限限制;4.更新接口及模板以支持新字段展示與編輯,同時兼顧移動端適配和用戶體驗。
