Зураг оновчлол нь WordPress-ийн гүйцэтгэлд хөрөнгө оруулалтын хамгийн өндөр өгөөжийг өгдөг: хуудасны бүтэц, сэдэв ижил байх нөхцөлд зургийн хэмжээ, харьцаа, формат, дамжуулах аргыг зөв тохируулах нь ачааллын туршлагыг шууд сайжруулдаг.

Гэсэн хэдий ч зураг оновчлол нь “илүү их оролдох тусам улам л мууддаг” нөхцөл байдлыг үүсгэх хамгийн өндөр магадлалтай. Үүний шалтгаан нь арга техник хэтэрхий хэцүүд оршиж байгаа хэрэг биш, харин мэдээлэл хэтэрхий тасархай байгаатай холбоотой:
Та хэд хэдэн нийтлэл уншиж, “compression”, “WebP/AVIF” болон “lazy loading” гэх мэт зүйлсийн талаар мэдлэгтэй болсон. Гэвч плагины тайлбарт “сар бүр 100 үнэгүй кредит”, “20MB үнэгүй” болон “зураг тутамд 1 кредит” гэж бичсэн байгааг хараад улам ихээр төөрөгдөж байна. Үнэгүй квот үнэхээр хангалттай юу? Төлбөр хэрхэн хасагддаг вэ? Та “адилхан зүйл”-ийг буруу ойлгосон юм биш биз? Мөн хамгийн чухал нь:Чи дууссаны дараа үнэхээр хүчин төгөлдөр болсон юм уу?

Энэ нийтлэл зөвхөн гурван зүйлийг хийдэг:

  1. Энд танд хэрэгжүүлэх боломжтой нэг санаа байна.Замын зураг(Юуны өмнө юу хийх, дараа нь юу хийх)
  2. Та сонгохыг хүсэж буй сонголтуудыг тодорхой тайлбарлаарай (үнэгүй болон төлбөртэй хувилбаруудын ялгаа яг юу вэ, аль нь хэнд тохиромжтой вэ).
  3. Хамгийн түгээмэл гацалтуудыг эхэнд нь жагсаагаарай (ингэснээр та дуусгасны дараа шийдэл хайх төвөгт орохгүй)

1. Үндсэн хэсэг: WordPress анхдагчаар юуг багтаадаг, юуг багтаадаггүй

Хэрвээ та эхлээд WordPress-ийн үндсэн кодонд аль хэдийн хэрэгжүүлсэн зүйлсийг ойлгоогүй бол хоёр нөхцөл байдал үүсэх магадлалтай:

  • Бэлэн байсан “үнэгүй боломжуудыг” ашиглахын оронд бид дугуйг дахин зохион бүтээхэд цаг, мөнгө зарцуулсан.
  • Би WordPress бүх хуучин зургийг автоматаар WebP/AVIF руу хөрвүүлнэ гэж бодож байсан, гэхдээ үнэндээ тийм биш юм.

WordPress-ийн үндсэн код нь аль хэдийн эдгээр чухал боломжуудыг агуулдаг:

  • Хариу аргачлалтай зургууд (srcset/sizes)WordPress 4.4-өөс эхлэн ядро зураг гаргана. srcsetsizesмөн байршуулах явцад үүссэн олон хэмжээтэй зургуудыг ашиглан, браузер нь дэлгэцийн нөхцөлд тохируулан ачаалах илүү тохиромжтой нөөцийг сонгох боломжтой болгоно.
  • Утгаараа сул ачаалалтWordPress 5.5 болон түүнээс хойших хувилбарууд HTML стандартыг ашиглан зургуудыг анхдагчаар сул дорой ачаалал (lazy loading) хийх боломжийг олгодог. loading Өмчийн хэрэгжилт.
  • WebP файлуудыг байршуулахыг дэмждэгWordPress 5.8-аас эхлэн (хостинг орчин WebP-ийг дэмжвэл) WebP файлуудыг JPEG/PNG шиг ачаалж, ашиглах боломжтой.
  • AVIF форматтай файлуудыг байршуулахыг дэмждэгWordPress 6.5-аас эхлэн хостингийн орчны дэмжлэгтэйгээс хамааран AVIF файлуудыг JPEG/PNG-тэй адил байдлаар байршуулж, ашиглах боломжтой.

Гэсэн хэдий ч анхаарна уу:
“Борлуулахад дэмжлэг үзүүлэх/ашиглах” ≠ “Автоматаар хөрвүүлэх/автоматаар хүргэх”
Өөрөөр хэлбэл: хэрвээ та аль хэдийн WordPress 6.5 ашиглаж байгаа ч медиа номын сан дахь JPG/PNG файлууд автоматаар WebP/AVIF болж хувирч өгөхгүй; мөн “AVIF/WebP-ийг браузерийн дэмжлэгт тулгуурлан гаргаж, дэмжлэггүй браузеруудад анхны зураг руу буцах” бүрэн боломж автоматаар нээгдэхгүй – энэ үйлдлийг гүйцэтгэхийн тулд ихэвчлэн плагин эсвэл нэмэлт үйлчилгээ шаардлагатай байдаг.

2. Замын зураг: Зураг оновчлол 5 алхамаар

Юу хийх, яагаад, хангалттай гүйцэтгэл гэж юу болох, мөн түгээмэл тохиолддог алдаанууд юу вэ.

2.1 Эхлээд хэмжээг зөв тогтоо (хамгийн амархан орхигдож, хамгийн их үр өгөөж авчирдаг)

Олон сайт удаан ажилладаг нь шахалт хийгдээгүйгээс биш харинДэлгэцийн талбайгаас илт том зургийг татаж авсан
Жишээлбэл, хэрвээ хуудас үнэндээ зөвхөн 900 пиксел өргөнтэй харагдаж байгаа хэрнээ та зочдоос 3000 пикселийн бүтэн зургийг татаж авахыг шаардвал, хөтөч зүгээр л “тааж аваад дараа нь харуулахын тулд багасгана” гэсэн үг. Энэ нь дамжуулах чадварыг үр ашиггүй зарцуулж, декодлох хугацааг уртасгаж, эхний дэлгэцийн ачаалтыг удаашруулдаг.

WordPress 4.4 болон түүнээс дээшХариу аргачлалтай зурагны механизмsrcset/sizes) яг энэ асуудлыг шийдвэрлэхийн тулд.

Дүнг хангалттай гэж тооцох шалгуур юу вэ:

  • Гар утас болон бусад зөөврийн төхөөрөмж дээр хуудас нээхэд татаж авсан зургийн хэмжээ ширээний компьютер дээрхээс илт жижиг байх ёстой.
  • Нэгэн адил зургийн ачаалагдсан нөөцийн хэмжээ нь төхөөрөмж бүрд өөр өөр байдаг (байнга анхны зургийг татаж авахын оронд).

Хамгийн түгээмэл алдаанууд:

  • Зарим сэдэв эсвэл вэб хөгжүүлэгчид зургийг CSS-ийн арын зураг болгон ашиглах эсвэл тусгай аргаар гаргах замаар үүнийг тойрон гарах боломжтой. srcsetҮүний улмаас том зургуудыг байнга татаж авах нөхцөл үүсдэг
  • Гадаад зураг хостингийн үйлчилгээ болон гуравдагч талын зурагны блокуудыг ашигласнаар та медиа номын сангийн үүсгэсэн олон хэмжээний системийг тойрон гарах боломжтой.

2.2 Шахмалжсан боловсруулалт (KB хэмжээг багасгах боловч чанарыг алдагдуулахгүй)

Шахмалтын гол утга нь “бага байх тусам сайн” биш, харин “нүдэнд бараг үл үзэгдэхээр хэмжээг багасгах боловч үр дүнг нь тод мэдрэхүйц” юм.

Дүрэмүүд дараах байдалтай байна:

  • Гэрэл зураг/жинхэнэ зургууд (портрет, бүтээгдэхүүн, байгалийн дүр төрх)Алдагдалтай шахалтыг тэргүүн ээлжинд тавь (ашиг тусыг хамгийн их болгодог)
  • Их хэмжээний текст бүхий дэлгэцийн агшин зураг/зурагШахалтыг текст бүдгэрч харагдахаас сэргийлэхийн тулд илүү болгоомжтой тохируулах хэрэгтэй.
  • Лого/ИконSVG-ийг тэргүүн ээлжинд тавьж эсвэл алдагдалгүй шахалтыг сонго (адалтай шахалт нь ирмэгийг амархан бүдгэрүүлдэг)

Дүнг хангалттай гэж тооцох шалгуур юу вэ:

  • Ихэнх хуудаснууд дээрх зургуудын хэмжээ эрс багассан.
  • Анзаарагдахуйц дуу чимээ, ирмэгийн бүдгэрэлт, өнгөний туузлалт эсвэл текстийн бүдгэрэлт байхгүй.

2.3 WebP / AVIF (Формат бодлого: Ижил тод байдлын хувьд файлын хэмжээ бага байх)

WordPress одоо файлыг байршуулахыг дэмждэг. WebP (5.8) ба AVIF (6.5)
Гэсэн хэдий ч “дараагийн үеийн формат”-ыг жинхэнэ утгаар нь практикт нэвтрүүлэхийн тулд ихэвчлэн хоёр асуудлыг шийдвэрлэх шаардлагатай:

  1. Түүхэн медиа архивыг багцаар хэрхэн хөрвүүлэх вэ(Үгүй бол та зөвхөн ирээдүйд байршуулах шинэ зургуудыг л оновчтой болгож байна.)
  2. Хуулбар үүсгэх үү, эсвэл эх зураг орлуулах уу?(Энэ нь шийдвэрлэх мөч юм; бид хожим Plus WebP-ийн “анхны зургийг орлуулах ба устгах” дээр анхаарлаа төвлөрүүлэх болно)

Зөвлөж буй үг хэллэг:

  • WebP: Ерөнхийдөө анхдагчаар илүүд үзэгддэг сонголт (илүү тогтвортой нийцтэй байдлыг санал болгодог)
  • AVIF: шахалтыг улам гүнзгийруулсан дараагийн алхам бөгөөд том зургууд/нэгдүгээр дэлгэцийн баннер/альбомын зурагнуудад тохиромжтой (гэхдээ илүү...Орчны дэмжлэгээс хамааралтай

2.4 Тэнэг ачаалал: Ухаалгаар ашигла (бүхэнд нь нэгэн адил хандлагаас зайлсхий)

WordPress 5.5-аас эхлэнҮндсэн тохиргоогоор залхуу ачаалалтЗураг.
Энэ нь эхний рендерлэх явцад өгөгдлийн урсгалын хэрэглээг бууруулдаг:

  • Захирангуй ачаалалт нь дэлгэцийн гаднах нөөцүүдэд тохиромжтой.“
  • Эхний дэлгэцийн хамгийн чухал зураг (ихэвчлэн эхний дэлгэцийн гол зураг) ихэвчлэн хойшлуулсан ачаалалтад тохиромжгүй байдаг.

2.5 Хүргэлтийн давхарга: CDN / Зураг CDN

Шахалт, хэмжээ, формат нь “жижиг, илүү тохиромжтой файлуудын” хэрэгцээг хангана.
Гэсэн хэдий ч зургуудыг эх серверээс хол зайнаас байнга татаж авбал сүлжээний саатал хэрэглэгчийн туршлагад ихээхэн нөлөөлнө. Ийм тохиолдолд “delivery layer” шийдэл шаардлагатай (CDN/image CDN).

Хоёр ердийн хандлага:

  • Клаудфлэр ПольшCloudflare-ийн баримт бичигЭнэ нийтлэлд Polish-ийн шахалтын аргуудыг (алдагдалгүй/алдагдсан/WebP) танилцуулж, ашиглахыг дурдсан байна. format=auto WebP/AVIF форматыг ашиглахыг зөвшөөрнө.
  • Жетпак Сайт ХурдасгуурЖетпакын баримт бичигЭнэ нь зургуудыг оновчтой болгож, сүлжээгээрээ дамжуулан статик нөөцүүдийн хамт тараана.

Зургийн оновчлол нь хэмжээг бууруулах, тохиромжтой байдлыг хангахад хариуцдаг.CDN: Илүү ойр, илүү найдвартай хүргэх

3. Сонголт: Зөвхөн хоёр гол чиглэлийг дагах ёстой.

Зургийн оновчлолд хамгийн түгээмэл тохиолддог алдаа нь “плагин суулгаагүй байх” биш, харин хэт олон плагин суулгаснаас үүдэлтэй давхардсан боловсруулалт юм:
A шахаж байна, B ч бас шахаж байна; A WebP/AVIF рүү хөрвүүлж байна, B ч бас хөрвүүлж байна; A URL-үүдийг өөрчилж байна, B тэдгээрийг дахин бичиж байна — эцэст нь та өөрөө ч сайт дээр юу болж байгааг тайлбарлаж чадахгүй.

Дүрэм:

Зөвхөн нэг л гарц байна: эсвэл бүрэн чөлөөт локал хадгалах сан, эсвэл гурван сонголттой үүлэн шахалт.

  • A маршрут (бүхэлдээ үнэгүй орон нутгийн):Мөн WebP эсвэл AVIF + EWWW Image Optimizer(эсвэл тэдгээрийн зөвхөн нэгийг сонгоно уу)
  • B маршрут (Гурван үүлний шахалтын сонголтоос нэгийг сонго):ShortPixel / Imagify / TinyPNG

3.1 A маршрут: Бүхэлдээ чөлөөт локал (WebP эсвэл AVIF эсвэл EWWW-тай хамт)

Энэхүү маршрутын тодорхойлогч шинж чанарууд нь:

  • Та сар бүрийн квота эсвэл файл тутамд тооцогдох гуравдагч талын шахалтын үйлчилгээнд найдахгүй (гэхдээ зарим функц нь нэмэлт үйлчилгээ санал болгож болно).
  • Үүний хажуугаар багцаар боловсруулах нь CPU/IO-ийн хувьд серверт илүү их ачаалал үүсгэж, танд “стратеги ба эрсдэл”-д илүү анхаарал хандуулах шаардлагатай болгодог.”

3.1.1 Мөн WebP эсвэл AVIFҮндсэн ойлголт нь “генераци/соль” бөгөөд энэ нь уламжлалт “шахалтын хэрэгсэл” биш юм.”

  • Бүрэн нягтралтай зургуудыг үүсгэх үед:Анхны зураг файлын ID-г WebP/AVIF-ээр дахин бичигдэж, анхны файл устгагдаж, агуулга дахь URL мөн солигдоно.
  • Энэхүү плагин нь WP-CLI командыг хангаж, дараах зөвлөгөөг өгдөг: олон файлыг боловсруулах үед WP-CLI нь илүү найдвартай байдаг.

Энэ нь: энэ нь таны төлөө чимээгүйхэн WebP үүсгэдэггүй, харин нэг удаагийн тохиолдол байж болно.Хөрөнгийн шилжилт(ялангуяа “Анхны зургийг орлуулах ба устгах” сонголтыг идэвхжүүлсэн үед)

Хоёр горим хоорондын ялгаа

Режим 1: Анхны зургийг хадгалж, WebP/AVIF хуулбар үүсгэх (илүү тогтвортой)

  • Давуу тал: нийцлийн асуудал гарсан тохиолдолд эргүүлэн сэргээх нь илүү хялбар
  • Зардла: Дискийн хэрэглээ нэмэгдэнэ (анхны зураг + шинэ формат + олон хэмжээтэй жижиг зургууд)

Режим 2: Анхны зургийг сольж, устгах (илүү эрс)

  • Давуу тал: Дискүүд хурдан өргөждөггүй; дотоод лавлагаанууд автоматаар шинэ формат руу хөрвүүлэгддэг.
  • Эрсдэл: Хөрөнгө болон ишлэлүүдийг зэрэг өөрчлөх үед нийцлийн асуудлыг шийдвэрлэх зардал эрс нэмэгддэг (ялангуяа гадаад систем эсвэл сэдвийн логик анхны файл нэр, зам эсвэл форматууд дээр тулгуурладаг бол).

Санал

“Анхны зургийг солиж устгах” сонголтыг хийхийн өмнө эхлээд жижиг цар хүрээний туршилт явуулж, нөөц хуулбарууд бэлэн байгааг баталгаажуул; шууд бүхэл бүтэн өгөгдлийн сангийн солилтыг хийхгүй байх.

WebP эсвэл AVIF ашиглах үед гардаг нийтлэг алдаанууд

  1. Өгөгдлийн сан бүрэн солигдсоны дараа зарим хуудасны дүрс буруу харагдаж байна.
    Шалтгаан нь ихэвчлэн “зураг эвдэрсэн” биш, харин холбоос дахь зарим алхам – жишээлбэл URL орлуулалт, кэшийн бодлого эсвэл жижиг зургийн үүсгэлийн бодлого – зөв нийцээгүйтэй холбоотой байдаг.
  2. Жижиг зурагны тоо их байх тусам өөрчлөлтийн цар хүрээ өргөн болно.
    WordPress-д зураг байршуулснаар олон хэмжээсийн хувилбарууд үүсдэг; сэдэв эсвэл залгаасууд нэмэлт хэмжээсийг нэмж болно. Бүхэлд нь солих нь та маш олон файлын цуглуулгыг өөрчлөх шаардлагатай болж магадгүйг илэрхийлнэ.
  3. Зөвхөн формат шилжүүлэлт хийх нь боломжит хамгийн бага хэмжээг баталгаажуулахгүй.
    WebP/AVIF файлууд ерөнхийдөө илүү жижиг байдаг ч хэмжээний стратеги болон шахалтын стратеги чухал хэвээр байна. Plus WebP-ийг хурдан ачаалах нэг товшилтын шийдэл гэж бүү үз.

3.1.2 EWWW Image OptimizerҮнэгүй орон нутгийн шахалтын шийдэл

EWWW залгаасын хуудасны байрлал маш тодорхой байна:

  • Энэ нь таны сервер дээрх оновчлолын зориулалттай хэрэгслүүдийн багцыг (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp гэх мэт) ашиглаж болно.
  • Хэрэв та илүү өндөр шахалт шаарддаг эсвэл CPU хэмнэх хүсэлтэй бол CPU ихээр шаарддаг боловсруулалтыг (заавал биш) сервер рүүгээ шилжүүлж болно.

Route A-д EWWW ямар үүрэг гүйцэтгэх ёстой вэ?

Хэрэв та формат шилжүүлэх/сольж орлуулах стратегид Plus WebP ашиглаж байгаа бол EWWW нь үүнийг гүйцэтгэхэд илүү тохиромжтой:

  • Шахалт ба эзлэхүүний оновчлол(ялангуяа JPG/PNG файлуудын хэмжээг багасгах)
  • Түүхэн медиа сангийн багц оновчлол(URL-ыг солих биш, харин хэмжээг нь бууруулахыг зорьж байна)

Анхаарна уу

Мөн WebP Эээээ: Бүгдийг AVIF эсвэл WebP форматаар хөрвүүлж болно.
Эдгээрийн зөвхөн нэгийг суулгахыг зөвлөж байна, учир нь хоёуланг нь суулгавал зөрчилдөөн үүсч болно.

EWWW-ийн сонгодог алдаанууд

  1. Бөөнөөр оновчлол хийх үед серверийн ачаалал нэмэгддэг
    Энэ нь орон нутгийн шахалт CPU/IO зарцуулдагтай холбоотой. Шийдэл нь үүнийг ашиглахаа зогсоох биш, харин ачаалал багатай үед багцаар боловсруулж, шаардлагатай үед дамжуулан ачих эсвэл үүлэн шийдлүүдийг сонгох явдал юм.
  2. “WebP файл үүсгэх нь заавал фронтэнд WebP файлыг үйлчилж байгаа гэсэн үг биш.
    Олон плагин энэ буруу ойлголтод автдаг: үүсгэх нь нэг зүйл, хүргэх стратеги (дахин бичих, зурагны шошго, кэшийн хандалт гэх мэт) нь огт өөр зүйл.
  3. Бусад залгаасуудтай адил үйлдлийг давтан хийх
    Хэрэв та A маршрутыг сонговол ShortPixel/Imagify/TinyPNG гэх мэт үүлэн шахалтын үйлчилгээг давхарлаж ашиглахаас зайлсхий; хэрэв та B маршрутыг сонговол Plus WebP орлуулах логикийг идэвхгүй болго. Үндсэн зарчим:Нэг үйлдлийн төлөвлөгөөг баримтал.

3.2 B маршрут: Нэг үүлэн шахалтын үйлчилгээг сонго (ShortPixel / Imagify / TinyPNG)

Энэхүү маршрут нь серверийн нөөцийг хэмнэх, багц боловсруулалтыг төвөггүйгээр гүйцэтгэх, хэрэглэсэн тусам төлбөр төлөх үнэ тогтоолттой таарах хүсэлтэй хүмүүст тохиромжтой.
Гэсэн хэдий ч үүлний шахалттай холбоотой хамгийн түгээмэл ойлгомжгүй байдал нь:Чөлөөт квот нь зүгээр л “чөлөөт хуудас'ны асуудал биш юм.Жижиг зурагны хэмжээний тоо, WebP/AVIF форматууд үүсэх эсэх, давтан шахалт хийгдэх эсэх нь бүгд нөөцийн хэрэглээнд ихээхэн нөлөөлнө.

Доор бид үнэ төлбөргүй/үнэтэй түвшинүүд хэрхэн ажилладаг, квотууд хэрхэн хасагддаг, хамгийн түгээмэл анхаарах зүйлс болон аль сайт төрөл хамгийн тохиромжтойг тайлбарлах болно.


3.2.1 ШортПикселСар бүр 100 үнэгүй кредит олгогдоно, гэхдээ миниатюр болон WebP/AVIF томруулалтад кредит зарцуулагдана.

Үнэгүй/төлбөртэй нь яах вэ?

ShortPixel залгаасын тайлбарт тодорхой заасан байдаг:

  • Сарын 100 үнэгүй кредит
  • Мөн “нэмэлт хязгааргүй сар бүрийн кредитүүд” байдаг (плагины хуудас дээр үүнтэй холбоотой үнийн мэдээлэл байдаг).
  • Мөн эхний үнийн мэдээлэл дурдсан “хугацаа дуусахгүй нэг удаагийн кредит багцууд”-ыг санал болгодог.

Анхаар:

  • Үнэгүй: Хөнгөн сайт эсвэл туршилтын зориулалтаар сар бүр олгогдох кредит.
  • Нэг удаагийн багц: Өргөн цар хүрээтэй медиа номын сантай, бараагаа нэг удаа худалдан авч хязгааргүй хугацаанд (ихэвчлэн хугацаа дуусахгүй) ашиглахыг хүссэн сайт, байгууллагад тохиромжтой.
  • Сар бүрийн/хязгааргүй: тасралтгүй зураг шинэчлэлт болон урт хугацааны тогтвортой оновчлол шаарддаг сайтуудад тохиромжтой.

ShortPixel-ийн албан ёсны мэдлэгийн сан нь “нэг удаагийн багцууд ба хязгааргүй сар бүрийн төлөвлөгөөний” харьцуулалтыг бас авч үздэг.Тодорхой тайлбар: Хязгааргүй сарын төлөвлөгөөг сар бүр (эсвэл жил бүр) төлдөг бөгөөд хязгааргүй кредит болон тогтмол CDN квотатай; нэг удаагийн кредитүүд хугацаа дуусдаггүй тул хэрэгцээ гарсан үед хэрэглээгээ илүү сайн хянах боломжтой.

Санал

  • Хуучин талбайн бараа үлдэгдлийг цэвэрлэх: нэг удаагийн багцуудыг тэргүүн ээлжинд авч үзнэ
  • Тасралтгүй шинэчлэлтүүд: Сар бүрийн/хязгааргүй төлөвлөгөөнд илүү тохиромжтой (кредит тоолохыг хүсэхгүй бол хязгааргүйг сонго)

Хамгийн чухал цэг: ShortPixel-ийн кредитүүд хэрхэн тооцогддог вэ?

ShortPixel-ийн албан ёсны баримт бичиг KB үүнийг маш тодорхой хэлсэн:

  • WordPress-д зураг байршуулснаар хэд хэдэн жижиг зураг үүсдэг;
  • Жижиг зураг оновчлох бүр нь нэг кредит гэж тооцогдоно.
  • Хэрэв та WebP эсвэл AVIF үүсгэхээр сонговол,Анхны зургийн WebP/AVIF хувилбар бүр болон түүний жижиг зураг тус бүр нь нэмэлт кредит зарцуулна.
  • Та кредит зарцуулалтыг бууруулахын тулд тодорхой жижиг зураг(ууд)-ыг оновчлолоос хасч болно.

Зээлийн жишээ

Жишээ нь та нэг зургийг байршууллаа гэж төсөөл, сэдэв эсвэл залгаас найман жижиг зураг үүсгэнэ:

  • Анхны зураг болон жижиг зургуудыг зөвхөн оновчлох: 1 (анхны зураг) + 8 (жижиг зураг) = 9 кредит
  • Хэрэв WebP/AVIF форматаар үүсгэх шаардлагатай бол: дээрх 9 форматын тус бүрт дараагийн үеийн нэг хувилбарыг нэмж, тэгээд нэмэлтээр 9 кредит нэмнэ.
    Өөрөөр хэлбэл, та “нэг зураг” гэж үзэж байгаа зүйл үнэндээ бараг хоёр оронтой кредит зарцуулж болно.

Тиймээс:“Үнэгүй 100 кредит” нь “үнэгүй 100 зураг” гэсэнтэй тэнцэхгүй.

ShortPixel-ийн хамгийн түгээмэл алдаанууд

  1. Үнэгүй 100 кредит хурдан дуусдаг
    Үндсэн шалтгаан: олон жижиг зураг болон WebP/AVIF үүсгэхийн тулд нэмэлт кредит шаардлагатай.
    Санал
  • Эхлээд сайт дээрх жижиг зурагны тоог үнэл.
  • Шаардлагагүй жижиг дүрсийн хэмжээг устга (зөвхөн үнэхээр ашиглагдах хэмжээг оновчлоо)
  • Бөөнөөр гүйцэтгэхээс өмнө шахалтын стратегиа тодорхойлж, нөөц шавхагч давтан туршилт-алдаа хийхээс зайлсхий.
  1. Бусад форматын хөрвүүлэлтийн залгаасуудыг зэрэг давхарлан суулгах
    Хэрэв та Plus WebP солилтыг идэвхжүүлээд, зэрэгцэн ShortPixel-д дараагийн үеийн тагууд үүсгэж/оруулахыг заавал болговол логик давхцаж, алдаа оношлох, шийдвэрлэхэд илүү хэцүү болно. Route B нь үүнийг ShortPixel-д бие даан гүйцэтгэх боломжийг олгодог.
  2. Зүгээр л суулгахад л “фронтэнд WebP/AVIF гаргаж байна” гэж баталгаажуулна гэж үзэх.”
    ShortPixel залгаасын хуудасЭнэ нь WebP/AVIF форматыг хөрвүүлж, дараагийн үеийн зургуудыг фронт-энд хуудаснууд дээр (жишээлбэл, тэгийн тусламжтайгаар) нэгтгэх боломжтой.
    Гэсэн хэдий ч дуусмагц үр дүнг заавал баталгаажуулах шаардлагатай.

3.2.2 Имажифай: Сард 20MB үнэгүй; квота нь “анхны зургийн хэмжээ + жижиг зургийн тоо”-оор хасагдана; дахин шахалт хийхэд давхар хасалт хийгдэнэ

Үнэгүй хөнгөлөлт ба байрлуулалт

Imagify-ийн албан ёсны үнийн хуудасҮүнийг тун тодорхой бичсэн байна:Үнэгүй дансууд сард 20MB квоттой.
Түүний плагины хуудас дээр мөн WebP/AVIF файлуудыг шахах, хэмжээг нь өөрчлөх, хөрвүүлэх боломжтой гэж тодорхой заасан.

Квотууд хэрхэн хасагддаг вэ?

Imagify-ийн албан ёсны баримт бичиг “Квотын хэрэглээг хэрхэн тооцдог вэ?” нь хасалтын механизмыг тодорхой тайлбарлана:

  • Жижиг зурагны тоо хэрэглээнд нөлөөлнө.Жишээлбэл, хэрэв танд 10 ширхэг жижиг зурагны хэмжээ байгаа бол нэг зургийг оновчлох нь 11 зураг (анхны зураг болон 10 жижиг зураг)-ыг оновчлох болж, бүгд квота зарцуулахад нөлөөлдөг.
  • Анхны файлын хэмжээнд үндэслэн квотыг хасахЖишээлбэл, хэрэв та Imagify-д 100KB хэмжээтэй зураг илгээвэл, таны квотаас 100KB хасагдана.
  • Шахмалтын түвшинг өөрчилж, дахин оновчлох нь квотыг дахин зарцуулах болно.
  • Нэг ижил API түлхүүрийг олон сайтуудад ашиглаж болох ч квотууд эдгээр сайтуудад хуваагдана.

Энэ бол Imagify-ийн “үндсэн ойлголтын арга”:
Энэ нь өгөгдлийн багц шиг юм: та ямар хэмжээний өгөгдөл илгээхээр тэр хэмжээгээр л хасагдана; жижиг зураг их байвал хасагдах хэмжээ ихсэх бөгөөд олон удаа их хэмжээний өгөгдөл байршуулбал дахин дахин хасагдана.

Ойлгоход хялбар Imagify квотын жишээнүүд

Жишээ нь та 800 КБ хэмжээтэй анхны зургийг байршуулбал сайт 8 ширхэг жижиг зураг үүсгэнэ.

  • Imagify-ээр оновчлол хийх үед (хэрэв та “Бүгдийг оновчлох” сонголтыг хийвэл) анхны зураг болон найман жижиг зураг бүгд багтдаг. Энэ нь нэг үйлдэл эдгээр файлуудын нийт анхны хэмжээтэй бараг тэнцэх квотыг зарцуулах болно гэсэн үг юм.
    Иймээс зарим сайт “20MB” квотаа хурдан дуусгаж байна: Imagify хангалттай хүчирхэг биш гэж биш, харин та байршуулж буй зургууд хэт том, хэт олон жижиг зураг үүсгэж, мөн янз бүрийн шахалтын түвшинг давтан туршиж байгаатай холбоотой.

Imagify ашиглахдаа түгээмэл тохиолддог алдаанууд

  1. Үнэгүй 20MB нь “бүх сайт түүхийн цэвэрлэгээ” хийхэд хангалтгүй”
    20MB нь ерөнхийдөө туршилт хийх болон жижиг шинэчлэлтүүдэд илүү тохиромжтой; хэрэв таны медиа номын сан аль хэдийн том бол бүх зүйлийг нэг дор цэвэрлэхэд магадгүй шинэчлэлт шаардлагатай болно.
  2. Шахалтын түвшинг давтан тохируулах нь квота давтан зарцуулагдахад хүргэдэг.
    Imagify тодорхой зааж өгдөгДахин оновчлол квотыг дахин зарцуулна.
    Энэ хуудас дээр стратегийг тодорхой, товчхон тодорхойлох нь зүйтэй:
  • Эхлээд цөөн тооны зураг ашиглан шахалтын түвшин болон дүрсний чанарыг тодорхойл.
  • Бөөнөөр гүйцэтгэхээс өмнө стратегийг эцэслэн баталгаажуул.
    Бүх өгөгдлийн сан даяар давтагдсан туршилт, алдаа гаргахаас зайлсхий.
  1. Олон сайт дээр API түлхүүрүүдийг хуваалцах нь квотууд үл мэдэгдэх байдлаар багасах шалтгаан болдог.“
    Хэрэв та нэг API түлхүүрийг олон сайтуудад ашиглавал квотууд хуваалцагдана.
    Иймээс багийн болон олон талбайн нөхцөлд аль талбай нөөцөө хуваалцах, аль нь бие даан ажиллахыг тодорхой зааглах нь төсвийн хяналтаас гарах байдлыг сэргийлэхэд зөвлөмжтэй.

3.2.3 Жижиг PNG(Жижиг шахагдсан зураг): Сар бүр 500 үнэгүй кредит; WebP/AVIF руу хөрвүүлэхэд хэмжээ бүрт нэмэлт 1 кредит ногдуулагдана.“

Чөлөөт хязгаар ба түүний тооцооллын аргачлал

TinyPNG-ийн WordPress залгаасын хуудас нь маш тодорхой бичигдсэн байна:

  • Сар бүр 500 кредит үнэгүй
  • “Стандарт WordPress суулгалт”-д үүнийг ойролцоогоор шахаж болно. Сарын ойролцоогоор 100 зураг
  • Гэсэн хэдий ч AVIF эсвэл WebP рүү хөрвүүлэх тохиргоо идэвхжсэн бол:Зураг тус бүрийн хэмжээнд нэмэлт кредит төлбөр ногдуулагдана.Тиймээс үүнийг магадгүй зөвхөн шахаж, хөрвүүлэх боломжтой. Сарын ойролцоогоор 50 зураг(Таны хэдэн жижиг зурагны хэмжээ байгаагаас хамаарна)

Тэгэх зуур TinyPNG/TinyJPG-ийн хөгжүүлэгч Tinify мөн өөрийн дээр зарласан. API үнийн хуудасАнхаар: Сар бүр 500 үнэгүй шахалтыг авахын тулд бүртгүүлнэ үү. Энэ квотыг давсан тохиолдолд амжилттай гүйцэтгэсэн шахалтын тоогоор төлбөр тооцогдох ба заавал захиалга шаардагдахгүй.

TinyPNG-ийг нэг өгүүлбэрт товчхон дүгнэвэл:
Энэ нь кредитийн тоогоор тооцогддог; жижиг зурагны хэмжээнүүд их байх тусам, WebP/AVIF форматуудыг идэвхжүүлсэнээр кредитийнхээ хэмжээ хурдан дуусна.

TinyPNG-ийн кредитүүдийн ойлгомжтой жишээ

Таны сайт дүрс бүрийн хувьд найман жижиг дүрсийн хэмжээ үүсгэдэг гэж үзье:

  • Шахалт л: Анхны зураг + 8 жижиг зураг → 9 кредит шаардлагатай
  • Хэрэв WebP/AVIF хөрвүүлэлт идэвхжүүлсэн бол: хэмжээ бүрт нэмэлт кредит хасагдана → үнэ бараг хоёр дахин нэмэгдэж болно.
    Энэ нь плагины хуудасны тайлбартай яг таарч байна: хувиргалтыг идэвхжүүлснээр үнэгүй квота ойролцоогоор “сар бүр 100 зураг”-аас “сар бүр 50 зураг”-д өөрчлөгдөнө.

TinyPNG-тэй холбоотой нийтлэг алдаанууд

  1. 500 кредит = 500 зураг гэж үзвэл
    Үгүй. Энэ нь “зурагны хэмжээ/хувилбар”-ын дагуу кредит зарцуулдаг. Плугингийн хуудас дээр тодорхой заасан: “Хөрвүүлэлт нь зурагны хэмжээ бүрт нэмэлт 1 кредит хасдаг”.
  2. Тема/электрон худалдааны залгаас хэт их хэмжээ үүсгэж, үр дүнд нь үнэгүй квота мэдэгдэхүйц буурдаг.
    Хэмжээ том байх тусам кредитүүд илүү хурдан өсөж, зарцуулагддаг.
  3. Хөрвүүлэлтийг идэвхжүүлсний дараа зээлийн хязгаар гэнэт хангалтгүй болсон.
    Энэ алдаа биш; энэ бол түүний тооцоо хийх механизм юм.
    Стратегийн зөвлөмжүүд:
  • Хэрэв үнэгүй түвшинг голчлон шахалт болон жинг бууруулахад ашиглаж байгаа бол эхэндээ зөвхөн шахалтыг л анхаарах боломжтой. Сайтын бүтэц тогтвортой бөгөөд дараагийн үеийн шинэчлэлт үнэхээр шаардлагатай гэдгийг баталгаажуулсны дараа шилжилтийг эхлүүлж болно.

4. Нөхцөл байдалд суурилсан зөвлөмжүүд: Өөр төрлийн сайтуудад хэрхэн сонгох

WordPress дээр ажилладаг ч контент сайтууд, цахим худалдааны платформууд, портфолио болон гишүүнчлэлийн сайтууд тус бүрдээ зурагтай холбоотой өвөрмөц сорилтуудтай тулгардаг.

4.1 Агуулгад төвлөрсөн вэбсайт/блог (нийтлэл тус бүрт олон зураг ашиглаж, дунд зэргийн шинэчлэлтийн давтамжтай)

Эрхэмлэх зөвлөмжүүд:

  1. Хэмжээсийн стратеги (1-р алхам)
  2. Шахалт (2-р алхам)
  3. WebP (3-р алхам)

Илүү тохиромжтой маршрут:

  • Торгохгүй сонголт: гурван хувилбарын аль нэгийг сонго (ShortPixel / Imagify / TinyPNG)
  • Үнэгүй сонголт: A маршрут (Plus WebP + EWWW), гэхдээ эхлээд “консерватив горим” (анхны зургуудыг устгахгүйгээр) дээр эрсдлийг үнэлэх нь зүйтэй.

Ерөнхий алдаанууд:

4.2 Электрон худалдаа/Бүтээгдэхүүний сайтууд (Олон жижиг зураг, олон төрлийн зурагны хувилбар, тогтвортой байдал хамгийн чухал)

Электрон худалдааны хамгийн түгээмэл асуудлууд нь “муу шахалтын үр дүн”-ээс биш, харин “оптималласны дараа хэмжээ буруу байх, жижиг зурагнууд байхгүй байх эсвэл фронтэнд компонентууд зураг татаж чадахгүй байх”-аас үүсдэг.

Эрхэмлэх зөвлөмжүүд:

  1. Анхааралтай хандана уу: шахалтын стратегид консерватив хандлага баримталж, мэдээллийн санг шууд бүрэн солихоос зайлсхий.
  2. Жижиг зурагны хэмжээг үнэл: цахим худалдааны сэдвүүд ихэвчлэн олон хэмжээ үүсгэдэг тул квотын хэрэглээг нэмэгдүүлдэг (ялангуяа ShortPixel/TinyPNG-д тод мэдрэгдэнэ).
  3. Томруулахын өмнө жижиг хэмжээний баталгаажуулалт хийх (маш чухал)

Илүү тохиромжтой маршрут:

  • B маршрут ихэвчлэн илүү энгийн байдаг: ShortPixel, Imagify, TinyPNG бүгдээрээ багцаар боловсруулах боломжтой. Гол нь тэдгээрийн квотын механизмийг ойлгож, зардлыг урьдчилан тооцох явдал юм.
  • Route A бас боломжтой ч Plus WebP-ийн ID-үүдийг дарах/анхны зургуудыг устгах/URL-үүдийг солих үйлдэлд илүү болгоомжтой хандах шаардлагатай: энэ нь хөрөнгийн шилжүүлэлт гэж тооцогдоно, эхнээс нь бүхэлд нь солих нь зүйтэй биш.

4.3 Портфолио/Фотографийн вэбсайт (зураг тус бүрийн чанар, том файл хэмжээ, өндөр визуал стандартыг чухалчилдаг)

Эрхэмлэх зөвлөмжүүд:

  1. Хэмжээний стратеги (Дэлгэцийн талбайн хяналт)
  2. Шахалтын стратеги (дэлгэрэнгүйг алдахаас илүүтэй арай том байх нь дээр)
  3. WebP/AVIF (их хэмжээний зургуудын тохиолдолд онцгой давуу талтай, гэхдээ дүрсний чанарыг баталгаажуулах шаардлагатай)

Илүү тохиромжтой маршрут:

  • ИмажифайАнхны зургийн хэмжээгээр квот хуваарилах нь ийм сайтуудыг төсвийн хяналтанд илүү таатай болгодог (том зураг бүр хэр их хэмжээг эзлэхээ ойролцоогоор мэдэж болно), гэхдээ дахин шахахыг аль болох зайлсхий.
  • ШортПикселХэрэв жижиг зурагны хэмжээнүүдийн тоо хязгаарлагдмал бол кредитийн зарцуулалт хялбар хэвээр байна; харин дараагийн үеийн активтай зэрэгцэн олон хэмжээ үүсгэхэд кредитийн хэрэглээ эрс нэмэгдэж, урьдчилан төлөвлөх шаардлагатай болдог.

5. Хязгаар/Төлбөрийн харьцуулалт: Үнэгүй хязгаар хангалттай эсэхийг тайлбарлах

Аль нь илүү зардал хэмнэлттэй вэ, үнэгүй хугацаа хэр удаан үргэлжлэх вэ?

5.1 Гурван хураамжийн хасалтын загвар

  • ШортПиксел(зээлүүд)Кредитүүд нь эх зураг болон жижиг зурагны тоогоор тооцогддог; WebP/AVIF хувилбаруудыг үүсгэхэд тус бүрийн форматын дагуу нэмэлт кредит хасагдана.
  • Имажифай(MB квота)Квота хасалт нь эх файлын хэмжээнд үндэслэн тооцогдоно; илүү олон жижиг зураг нь илүү их хасалт үүсгэнэ; дахин шахалт нь цаашид илүү их хасалт үүсгэнэ.
  • Жижиг PNG(зээлүүд): Сар бүр 500 кредит; WebP/AVIF хөрвүүлэлтийг идэвхжүүлснээр зурагны хэмжээнээс хамаарч нэмэлт кредит төлбөр ногдуулагдана.

5.2 Хурдан тооцоолох аргууд

Та үүнийг дараах байдлаар тооцоолж болно:

  1. Та ихэвчлэн байршуулдаг ямар ч “анхны зураг”-ыг сонгож, түүний ойролцоогоор хэмжээг шалгаарай (жишээ нь 300KB / 1MB / 3MB)
  2. Таны сайт үүсгэдэг жижиг зурагны ойролцоогоор хэдэн ширхэг байгааг тооцоолно уу (жишээ нь: 5/10/20)
  3. WebP/AVIF үүсгэх эсэхийг тодорхойлох (Тийм/Үгүй)

Дараа нь хэрэглээг ойлгохын тулд дараах “оюуны тооцоо”-г ашигла:

  • ШортПикселЗураг бүр нь ойролцоогоор (1 + жижиг зургуудын тоо) кредит шаарддаг; хэрэв WebP/AVIF форматаар үүсгэж байвал (дараагийн үеийн хувилбарууд ч кредит шаарддаг тул) энэ тоог ойролцоогоор хоёр дахин нэмэгдүүлнэ.
  • ИмажифайЗураг бүр ойролцоогоор (анхны зургийн хэмжээ + бүх жижиг зургуудын нийт хэмжээ) тэнцэх квота зарцуулдаг; өөр шахалтын түвшинд дахин шахах нь нэмэлт квота хасагдахад хүргэнэ.
  • Жижиг PNGҮнэгүй: 500 кредит; хэрэв таны сайт зураг бүрийн олон хэмжээний хувилбарыг үүсгэж, конверс идэвхжүүлсэн бол үнэгүй квот ихээхэн буурна (плагины хуудас нь “сард ойролцоогоор 100 зураг” ба “сард ойролцоогоор 50 зураг” гэж тооцоолсон урьдчилсан тооцоог харуулдаг).

6. Эрсдэлийн ил тод байдлын мэдэгдэл

Эрсдэл 1: Нэгэн адил функц гүйцэтгэх олон плагин давхарлан суулгахаас зайлсхий.

Энэ бол гамшгийн хамгийн түгээмэл эх үүсвэр юм.“

  • A маршрут:Мөн WebP эсвэл AVIF + EWWW(Хоёр хүний хооронд үүрэг хариуцлагыг хувааж; ижил төрлийн хөрвүүлэлт, хүргэлтийг зэрэгцүүлэн гүйцэтгэхгүй, эсвэл зөвхөн нэгийг нь суулгахгүй.)
  • B маршрут: ShortPixel / Imagify / TinyPNG Гурваас нэгийг сонго(Шахалт болон дараагийн үеийнхэд хариуцлага хүлээх нэгнийг сонгоно уу)

Эрсдэл 2: Plus WebP-ийн “ID-ийг дарах / анхны зургийг устгах / URL-ийг солих” функц нь хөрөнгийн шилжүүлэлт гэж тооцогдоно.

Дахин нэг удаа онцлох нь зүйтэй:Мөн WebP Тайлбарт тодорхой зааснаар бүрэн үүсгэсэн үед эх зурагны ID-г шинэ утгаар бичигдэж, эх файл устгагдаж, агуулгын URL солигдоно.
Энэ нь амархан буцааж болох жижиг засвар биш, харин хөрөнгийн түвшний өөрчлөлт гэдгийг илэрхийлж байна.

Санал болгож буй стратеги нь:

  • Эхний бага хэмжээний туршилт (хэдэн арван–хэдэн зуун нэгж)
  • Урд талын дэлгэц, жижиг зураг болон кэшийн шинэчлэлтүүд бүгд хэвийн ажиллаж байгааг баталгаажуулна уу.
  • Бүтэн өгөгдлийн сангийн боловсруулалтыг авч үзээрэй

Эрсдэл 3: Үүлэн шахалтын “үнэгүй квот”-ын бодит хэрэглээ нь сонгосон жижиг зураг болон дараагийн үеийн сонголтуудын тооноос хамаарна.

  • ШортПикселЖижиг зураг болон дараагийн үеийн хувилбарууд кредитүүдэд ихээхэн нөлөө үзүүлнэ.
  • Жижиг PNGWebP/AVIF-ийг идэвхжүүлснээр зураг бүрийн хэмжээнээс хамааран нэмэлт кредит хасагдана.
  • ИмажифайАнхны зургийн хэмжээгээр хасалт хийнэ; жижиг зураг их байх тусам хасалт ихсэнэ. Хэт шахалт нь давхар хасалт үүсгэнэ.

Эрсдэл 4: “Үйлдвэрлэсэн WebP/AVIF” нь “Урд талын WebP/AVIF хүргэх” гэсэнтэй тэнцэхгүй”

Олон хэрэглэгчид хувиргалт хийсний дараа сайт нь хурдтай болсонгүй гэж мэдээлдэг бөгөөд үүний үндсэн шалтгаан нь фронтэнд тал JPG/PNG файлуудыг тасралтгүй гаргасаар байдаг (кешийн тохиргоо зөрчилдөх, дахин бичих, шошголдох эсвэл хөтөчийн хэлэлцээрийн процессийн алдааны улмаас).

7. Үүргийг гүйцэтгэсний дараа үүний нөлөө илэрсэн эсэхийг хэрхэн баталгаажуулах вэ?

Дөрвөн маш энгийн шалгах цэг:

  1. Нэгэн адил хуудсыг хоёр дахь удаагаа шинэчлэхэд ачаалтын процесс илүү тогтвортой, хурдан болдог уу?(Кэшийн болон оновчлолын үр нөлөөний хүлээлт)
  2. Гар утас болон ширээний компьютерт ачаалах үед зургийн хэмжээнд анзаарагдахуйц ялгаа байдаг уу?(Хариу өгөх) srcset/sizes Үр дүнтэй эсэх
  3. Хэд хэдэн зургийг түргэн шалгах: WebP эсвэл AVIF форматын файлууд/ресурсууд байгаа юу?Энэ сайт үнэхээр үүнийг ашиглаж байна уу? дараагийн үеийн
  4. Хэд хэдэн зургийг санамсаргүйгээр шалга: томруулж үзээд зураг тодорхой бус эсэх, текст бүдгэрсэн эсэхийг тогтооно.(Шахмал чанар хэт их биш үү?)

Хэрэв дөрвөн шалгуур бүгд хангагдсан бол таны сонгосон маршрут аль хэдийнэ ашиглагдаж байгаа гэсэн үг. Дараагийн алхам руу шилжинэ үү. CDN “Хүргэлтийн давхарга”Ерөнхий тогтвортой байдал сайжирна.

8. Арга хэмжээ авах зөвлөмжүүд

  1. Эхлээд маршрутаа сонго:
  • Би үүнийг аль болох үнэгүй байлгахыг хүсэж байна.Мөн WebP эсвэл AVIF + EWWW (эсвэл тэдгээрийн аль нэгийг нь суулгах)
  • Серверийн нөөцийг хэмнэх, хэрэглэсэнээрээ төлбөр төлөх системээр илүү амар тайван байдлыг эдлэхДараахээс нэгийг сонгоно уу: ShortPixel / Imagify / TinyPNG
  1. Жижиг хэмжээний туршилт явуулах (хэдэн арван зүйл)
  2. Батчийг эхлүүлэхээс өмнө бүх зүйл хэвийн байгаа эсэхийг баталгаажуул.
  3. Хүргэлтийн тогтвортой байдлыг сайжруулахын тулд цаашдын сайжруулалт шаардлагатай:Унших CDN Хурдасгал

Олонтаа асуугддаг асуултууд

1. Хэдэн плагин суулгах ёстой вэ? Би бүгдийг нь суулгаж болох уу?

Нэг маршрутад баримталж үзээрэй.

  • Route A: Plus WebP эсвэл AVIF + EWWW Image Optimizer (эсвэл эдгээрийн аль нэгийг нь суулгах)
  • B маршрут: ShortPixel / Imagify / TinyPNG-ээс нэгийг сонгоно уу
    Нэг сайт дотор олон плагин зэрэгцэн WebP/AVIF рүү шахалт/хувиргалт, URL өөрчлөлт, хүргэлтийн дахин бичлэг хийх нь ихэвчлэн эмх замбараагүй байдал үүсгэж, алдааг олж оношлоход хамгийн хэцүү байдаг.

2. WordPress аль хэдийн WebP/AVIF-ийг дэмждэг биш үү? Надад одоо ч плагин хэрэгтэй юу?

Ялгах шаардлагатай:
“Борлуулахад дэмжлэг үзүүлэх/ашиглах” ≠ “Автоматаар хөрвүүлэх/автоматаар хүргэх”
WordPress 6.5 нь хуучин JPG/PNG файлуудыг WebP/AVIF рүү автоматаар бөөний байдлаар хөрвүүлэхгүй, мөн “браузерийн боломжид тулгуурлан AVIF/WebP гаргах ба шаардлагатай үед нөөц формат ашиглах” гэсэн бүтэн ажлын урсгалыг автоматаар гүйцэтгэхгүй. Хуучин медиа номын сангуудыг шинэчлэхэд ихэвчлэн залгаасууд эсвэл үйлчилгээ шаардлагатай байдаг.

3. Зургийн оновчлолын хүрээнд аль алхам хамгийн өндөр хөрөнгө оруулалтын өгөөж өгдөг вэ?

Ихэвчлэн Эхлээд хэмжээг зөв тохируул (srcset/sizes)
Олон сайт удаан ажилладаг нь шахалт дутагдсанаас биш, харин хуудаснууд зөвхөн 900 пиксел харуулдаг хэрнээ хэрэглэгчдийг бүтэн 3000 пикселийн зургийг татаж авахыг шаарддагтай холбоотой. Шахалт килобайтыг хэмнэдэг ч хэмжээ таарахгүй байх нь шаардлагагүй таталтуудаар тэр хэмжээний хэдэн дахин илүү өгөгдлийг үрэн таран хийдэг.

4. Одоогоор ачаалагдаж буй зураг нь эх хувилбарыг байнга татаж авахгүйгээр “жижиг” хувилбар гэдгийг би яаж баталгаажуулах вэ?

Хоёр үзэгдлийг ажигла:

  • Гар утас болон бусад зөөврийн төхөөрөмж дээр хуудас нээхэд татаж авсан зургийн хэмжээ ширээний компьютер дээрхээс илт жижиг байдаг.
  • Нэг ижил зургийн нөөцийн хэмжээ нь төхөөрөмж бүрд өөр өөр байдаг.
    Хэрвээ эх зурагнууд үргэлж татагдаж байвал, үүний нийтлэг шалтгаан нь сэдэв эсвэл бүтээгч зурагныг CSS-ийн арын зураг эсвэл тусгай гарал гэж үзэн медиа номын сангийн олон хэмжээ, srcset функцийг тойрон өнгөрдөгт оршино.

5. “generated WebP/AVIF” гэдэг нь заавал фронтэнд WebP/AVIF гаргаж байна гэсэн үг үү?

Энэ нь адилгүй.
Генераци нь зөвхөн “файлын давхарга”-г дуусгах явдал бөгөөд фронтэнд үнэхээр WebP/AVIF хүргэх эсэх нь дахин бичих, зурагны тагын стратеги, кэшийн хандалт, хөтөчийн хэлэлцээрийн үр нөлөө зэрэг хүчин зүйлсээс хамаарна. Дуусмагц та хэд хэдэн зургийн нөөцийн төрлийг санамсаргүйгээр шалгах ёстой.

6. WebP эсвэл AVIF-тэй яг ямар эрсдэл байгаа вэ? Би бүх номын сангийн файлуудыг нэг товшилтоор хөрвүүлж болох уу?

Түүний эрсдлийн цэг нь “compression” биш, харинХөрөнгийн шилжилтийн түвшинг өөрчлөх

  • Бүтэн хэмжээний үүсгэлийн явцад эх зураг файлын ID-г дарах боломжтой, эх файл устгагдаж, агуулга дахь URL-үүдийг солигдож болно.
    ТиймээсБүх өгөгдлийн санг шууд солих нь зүйтэй биш.Эхлээд жижиг хэмжээний туршилт (хэдэн арван–хэдэн зуун бичлэг) явуулж, бүрэн өгөгдлийн сан боловсруулалт хийхээс өмнө нөөц хуулбарууд бэлэн байгааг баталгаажуул.

7. Plus WebP-ийн хоёр горим (анхны зургийг хадгалах эсвэл анхны зургийг орлуулан устгах)-аас аль нэгийг сонгох вэ?

Энгийнээр хэлэхэд:

  • Режим 1: Анхны зургийг хадгалж, WebP/AVIF хуулбар үүсгэх (илүү тогтвортой)Буцаах үйлдэл хийхэд тохиромжтой, гэхдээ дискний зай нэмэгдэнэ (анхны дүрс + шинэ формат + олон хэмжээтэй жижиг зураг).
  • Режим 2: Анхны зургийг сольж, устгах (илүү эрс)Дискийн багтаамжийг нэмэгдүүлэх нь амархан биш, харин хөрөнгө болон лавлагааг зэрэг өөрчлөхөд нийцлийн асуудал үүсч, алдаа оношлох зардал эрс нэмэгддэг.
    Сайт илүү төвөгтэй байх тусам (цахим худалдаа/олон плагин/олон хэмжээ), тогтвортой арга барилаас эхлэх нь илүү зүйтэй.

8. EWWW Image Optimizer-ээр санал болгож буй үнэгүй локал шахалт хангалттай юу? Энэ нь серверийг хэт ачаалалд оруулж болзошгүй юу?

EWWW нь илүүтэй “орон нутгийн шахалтын хэрэгсэл” шиг юм: энэ нь CPU/IO зарцуулдаг.
Багцаар оновчлол хийх явцад ачаалал нэмэгдэх нь түгээмэл. Энэ нь арга барил хангалтгүй гэсэн үг биш, харин стратеги тохиромжтой байх ёстойг харуулж байна: багцаар хэрэгжүүлэх, оргил бус цагт гүйцэтгэх, шаардлагатай үед ачаалал бууруулах эсвэл үүлэн шийдлүүдийг сонгох.
Хэрэв та төвөггүй шийдэл хайж байгаа эсвэл серверийн нөөцийн хязгаарлалттай тулгарч байгаа бол Route B нь серверийн ашиглалтыг илүү үр ашигтай болгодог.

9. ShortPixel сар бүр 100 үнэгүй кредит өгдөг – яагаад хэдхэн зураг ашиглаад л тэд алга болчих шиг санагддаг вэ?

Учир нь Кредитүүд нь “зурагны тоо” биш юм.”жижиг зураг болон дараагийн үеийн томруулалтад хязгаарлагдах болно:

  • Анхны зураг болон жижиг зураг бүр нь кредит тооцогдоно.
  • Хэрэв WebP/AVIF үүсгэвэл, тус бүрийн хувилбар нэмэлт кредит зарцуулна.
    Тиймээс та “1 зураг” үнэндээ бараг хоёр оронтой кредит зарцуулж магадгүй гэж бодож магадгүй. ShortPixel

10. Imagify-ийн үнэгүй сарын 201 TP234T хязгаар яагаад ийм хурдан дуусдаг вэ?

Imagify нь илүү ихээр “дата багц”-тай төстэй:

  • Таны илгээсэн мессежийн дагууАнхны файлын хэмжээквота хасах
  • Жижиг дүрсүүдийн тоо их байх тусам хэрэглээ ихсдэг.
  • Шахмалтын түвшинг дахин оновчлоход нэмэлт квота зарцуулагдана.
  • Нэг API түлхүүрийг хэд хэдэн сайт дээр хуваалцдаг бөгөөд квотууд ч мөн түүний дагуу хуваагддаг.
    Тиймээс “20MB удахгүй дуусна” гэсэн мессеж ихэвчлэн зурагнууд хэт том, хэт олон жижиг зураг эсвэл давтан туршилт, алдааны улмаас гардаг.

11. TinyPNG сар бүр 500 үнэгүй кредит өгдөг байхад яагаад энэ плагин сар бүр зөвхөн ойролцоогоор 100 зураг гэж тооцоолж байна вэ? Мөн WebP/AVIF-ийг идэвхжүүлсний дараа яагаад сар бүр зөвхөн 50 зураг болж буурч байна вэ?

Учир нь TinyPNG-ийн кредитүүд бас “size/variant”-аар өсгөгддөг:

  • Стандарт WordPress суулгалт нь ихэвчлэн сард ойролцоогоор 100 зургийг шахаж авдаг.
  • AVIF эсвэл WebP рүү хөрвүүлэхийг идэвхжүүлэх:Зураг тус бүрийн хэмжээнд нэмэлт кредит төлбөр ногдуулагдана.Тиймээс сар бүр ойролцоогоор 50 зургийг шахаж, хөрвүүлэх боломжтой (жижиг зурагны хэмжээний тооноос хамаарна).
    Тиймээс 500 кредит нь 500 зурагтай тэнцэхгүй.

12. Миний сайт үнэндээ хэдэн жижиг зурагтай вэ? Яагаад энэ нь ийм их нөлөөтэй байдаг вэ?

WordPress-д зураг байршуулснаар олон хэмжээтэй хувилбарууд үүсдэг; сэдэв болон залгаасууд (ялангуяа цахим худалдааны зориулалттай) нэмэлт хэмжээ нэмж болно.
Үүлэн шахалтын кредит/квотууд ихэвчлэн “анхны зураг ба жижиг зураг нийлбэр” хэлбэрээр тооцогддог тул жижиг зургийн тоо их байх тусам үнэгүй квот хурдан дуусна.

13. Тэнэг ачаалалт үргэлж хурдыг нэмдэг үү? Яагаад зарим хүмүүс үүнийг үнэндээ удаашруулдаг гэж үздэг вэ?

Захиран ачаалалт нь дэлгэцийн гаднах нөөцүүдэд тохиромжтой.
Хэрвээ эхний дэлгэцийн хамгийн чухал том зураг хойшлогдвол эхний ачааллын туршлага удааширч болно. WordPress 5.5-ийн анхдагч хойшлуулсан ачаалалт ерөнхийдөө хангалттай боловч бүх зүйлд нэг хэвийн арга барилыг хэрэглэхээс зайлсхий.

14. Хэрэв би A эсвэл B маршрутаар явбал CDN / Image CDN-ийг хэзээ авах шаардлагатай вэ?

Шахалт, хэмжээ, формат нь “жижиг, илүү тохиромжтой файлуудын” хэрэгцээг хангана;
CDN нь илүү хурдан, илүү найдвартай хүргэлтийг хангана
Хэрэв зургуудыг алслагдсан эх серверээс татах явцад их хэмжээний саатал үүсэж байвал, зураг бүрт CDN нэмэх (жишээ нь Cloudflare Polish/Jetpack Site Accelerator) нь ерөнхийдөө илүү тогтвортой туршлага өгч, агуулгыг уншихад хялбар болгодог. WordPress CDN хурдасгал

15. Үүнийг хийсний дараа үнэхээр ажиллаж байгаа эсэхийг шалгах хамгийн энгийн арга юу вэ?

Хамгийн их цаг хэмнэдэг баталгаажуулалтын арга:

  • Нэгэн адил хуудсыг хоёр дахь удаагаа шинэчлэхэд ачаалтын процесс илүү тогтвортой, хурдан болдог уу?
  • Гар утас болон ширээний компьютерт ачаалах үед зургийн хэмжээнд анзаарагдахуйц ялгаа байдаг уу (srcset/sizes функц үр дүнтэй ажиллаж байна уу)?
  • Хэд хэдэн зургийг түргэн шалгах: WebP эсвэл AVIF форматын файлууд/ресурсууд байгаа юу?
  • Хэд хэдэн зургийг санамсаргүйгээр шалга: томруулж үзээд зураг тодорхой бус эсэх, текст бүдгэрсэн эсэхийг тогтооно.