W3 Total Cache Minify залгаасны тохиргоо: Оруулгын төрлийг хэрхэн сонгох вэ? Миний алдааг олж засварлах туршлага болон амь аврах зөвлөгөө

W3 Total Cache Minify-д тохирох оруулах төрлийг сонгоход бэрхшээлтэй байна уу? Энэ нийтлэлд вэбмастерын бодит туршлагыг хуваалцаж, вэбсайтын хэв маягийн алдаа, ачаалах ослоос зайлсхийхийн тулд зөв Minify оруулах төрлийг зөв сонгох алхам алхмаар зааварчилгаа өгөх болно. Мөн анхан шатны хэрэглэгчид ч гэсэн амархан хэрэгжүүлж болох, WordPress-ийн жигд, хурдан туршлагыг хангах найдвартай тохиргооны шийдлийг багтаасан болно!

Би вэбсайтыг оновчтой болгож байсан бөгөөд W3 Total Cache дээр Minify тохиргоог нээхэд би бүрэн гайхсан. Embedded төрлийн унах цэс нь дөрвөн сонголттой байсан: Default (Block), Non-Blocking-д JS ашиглах, Non-Blocking-д "Asynchronous" ашиглах, Non-Blocking-д "Delayed" ашиглах.

Би хэсэг зуур бодов, энэ бүхэн юуны тухай вэ?

Надад итгээрэй, та ганцаараа биш. Эдгээр дөрвөн сонголт нь шинэхэн хэрэглэгчийг ч, тэр ч байтугай олон жилийн турш WordPress ашиглаж байгаа хүнийг ч гайхшруулах болно. Энэ нийтлэлд миний тулгарсан бэрхшээлүүд болон сурсан сургамжуудыг танд шууд танилцуулж байна. Та баримт бичгийг үзэх шаардлагагүй; зүгээр л миний зааврыг дагана уу.

Эдгээр дөрвөн суулгалтын төрөл яг юу вэ?

Эхлээд эдгээр дөрвөн сонголт ямар төрлийн дүр болох талаар ярилцъя.

Анхдагч хаалт нь хамгийн энгийн арга юм. Хөтөч скрипттэй тааралдахад зогсож, скриптийг бүрэн татаж аваад ажиллуулж, дараа нь хуудсыг үргэлжлүүлэн харуулдаг. Найдвартай сонсогдож байна, тийм үү? Гэхдээ энэ нь таны анхны хуудас ачаалах хугацаа хойшлогдох болно гэсэн үг юм; хэрэглэгчид ямар нэгэн зүйл харахаасаа өмнө скрипт ажиллаж дуусахыг хүлээх хэрэгтэй болно.

Блоклохгүй байхын тулд JavaScript ашиглах нь нэлээд сонирхолтой юм. Хуудсан дээр `<script>` шошгыг шууд бичихийн оронд эхлээд жижиг скрипт гаргаж, дараа нь хуудас ажиллаж эхэлсний дараа шаардлагатай скриптүүдийг JavaScript-ээр дамжуулан хуудсанд динамикаар оруулдаг. Ингэснээр хуудас эхлээд рендер хийж, скриптүүд аажмаар ачаалагддаг. Гайхалтай сонсогдож байна, тийм үү? Гэсэн хэдий ч асуудал нь энэхүү динамик оруулгын процесс нь скриптүүдийн анхны гүйцэтгэлийн дарааллыг алдагдуулж болзошгүй юм. Хэрэв таны хуудсан дээрх зарим скриптүүд гүйцэтгэлийн дарааллаас ихээхэн хамааралтай бол асуудал үүсч болзошгүй юм.

Блоклохгүй гүйцэтгэлд "асинхрон" ашиглах нь зүгээр л `<script>` таг дээр `async` шинж чанарыг нэмэхэд оршино. Скрипт нь ард нь асинхрон байдлаар татаж аваад, хуудас хүлээхгүйгээр шууд гүйцэтгэгдэнэ. Гэсэн хэдий ч сул тал нь гүйцэтгэх дараалал бүрэн хяналтгүй байдаг; эхлээд татаж авсан зүйл нь кодонд заасан дарааллаас үл хамааран гүйцэтгэгдэнэ.

Блоклохгүй гүйцэтгэлд "delay"-г ашиглахын тулд `defer` шинж чанарыг нэмж оруулна. Скрипт нь гүйцэтгэхийн өмнө хуудсыг бүхэлд нь задлан шинжилж дуустал хүлээх бөгөөд хамгийн чухал нь таны бичсэн анхны дарааллыг хадгалах болно. Энэ нь эхний дэлгэцийг хаахгүй бөгөөд скриптийн дарааллыг алдагдуулдаггүй тул хэрэглэхэд нэлээд хялбар юм.

Би алийг нь сонгох ёстой вэ?

Энгийнээр хэлбэл, эдгээр дөрвөн сонголт нь олон сонголттой асуулттай адил юм: та хурдыг хүсч байна уу, эсвэл дарааллыг хүсч байна уу?

Миний санал бол дараах байдалтай байна.

Хэрэв таны вэбсайт жижиг, цөөн скрипттэй, мөн ачаалах хурдад тийм ч өндөр шаардлага тавьдаггүй бол анхдагч (хаагдсан) тохиргоог ашиглах нь хамгийн хялбар сонголт юм. Хэдийгээр энэ нь арай удаан боловч ямар ч асуудал үүсгэхгүй.

Хэрэв та эхний дэлгэцийн хурдыг сайжруулахыг хүсч байгаа бөгөөд таны скриптүүд "А нь В-ээс өмнө ажиллах ёстой" гэх мэт хүчтэй хамааралгүй бол хаалтгүй гүйцэтгэлд "defer"-ийг ашиглахад давуу эрх олго . Энэ нь одоогоор байгаа бараг хамгийн тохиромжтой шийдэл бөгөөд гүйцэтгэлийн дарааллыг хадгалахын зэрэгцээ рендерингийг хаахаас зайлсхийдэг.

Хэрэв та хойшлуулахыг оролдсоны дараа зарим функцууд асуудалтай хэвээр байгааг анзаарсан бол хаалтгүй болгохын тулд JavaScript ашиглах талаар бодож үзээрэй . Энэ арга нь илүү түрэмгий боловч нийцтэй байдал нь арай муу байна.

Блоклохгүй байхын тулд "async" ашиглах нь миний хамгийн бага санал болгодог сонголт юм. Гүйцэтгэлийн дараалал бүрэн замбараагүй тул таны скриптүүд бие даан ажилладаг гэдэгт бүрэн итгэлтэй биш л бол гацах нь амархан.

Миний унасан хоёр том аюул

Яриа бол хямдхан. Би гаргасан хоёр алдаагаа бичсэн; та тэдгээрээс зайлсхийх боломжтой эсэхээ өөрийн туршлагатай харьцуулж болно.

Эхний алдаа: Захиалгат WordPress сэдвүүдийг бодит цаг хугацаанд урьдчилан харах боломжгүй.

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

Хэсэг хугацаанд судалсны дараа би Minify-ийн шахалтын функц буруутан болохыг олж мэдсэн. Шийдэл нь энгийн:

W3 Total Cache залгаасын ерөнхий тохиргоо руу очоод, "Шахалт" сонголтыг олоод тэмдэглэгээг нь арилгана уу. Дараа нь баруун дээд буланд байрлах "Тохиргоог хадгалах" гэсэн жижиг сумыг дарж, " Тохиргоог хадгалах ба кэшийг цэвэрлэх "-ийг сонгоно уу. Энэ алхам маш чухал; кэшийг цэвэрлэхгүйгээр та хуучин хувилбарыг нь харах болно.

Дууссаны дараа сэдэвчилсэн тохиргоо руу буцаж очвол шууд урьдчилж харах хэвийн байдалдаа эргэн орно.

Хоёр дахь асуудал: Astra загварын хайлтын хайрцаг дарахад хариу өгөхгүй байна.

Би энэ асуудалтай нэлээд удаан хугацааны өмнө тулгарсан. Би Astra загварыг ашиглаж байсан бөгөөд нэг өдөр хайлтын хайрцаг хэрхэн дарсан ч хариу өгөхгүй байгааг гэнэт олж мэдсэн. Эхэндээ би энэ нь загвартай холбоотой асуудал гэж бодож байсан ч дараа нь W3TC-ийн Minify тохиргооноос үүдэлтэй болохыг олж мэдсэн.

Шийдэл нь дараах байдалтай байна:

W3 Нийт Кэш → Ерөнхий Тохиргоо → Дэвшилтэт Шахалтын Тохиргоо → JS → Minify Engine Тохиргоо → Локал Тохиргоо руу очоод оруулах төрлийг эдгээр хоёрын аль нэгээр нь өөрчилнө үү:

1. Өмнө нь JavaScript ашиглан хаалтгүй байдлыг хангадаг байсан.
2. Үүний дараа JS-г блоклохгүй байхаар ашиглаарай

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

Яагаад эдгээр хоёр сонголтыг бусдын оронд сонгосон талаар би бага зэрэг судалгаа хийсэн. Энгийнээр хэлбэл, Astra сэдвийн урд талын бүрэлдэхүүн хэсгүүд нь скриптийн гүйцэтгэлийн хугацаанд нэлээд мэдрэмтгий байдаг бөгөөд зарим хаалтгүй аргууд нь үйл явдлын холболтыг амжилтгүй болгож болзошгүй юм. "JS-тэй хаалтгүй" горимыг ашиглах нь скриптийг хуудас ачаалагдаж дууссаны дараа л ажиллуулахыг баталгаажуулдаг бөгөөд асинхрон үед харагдах эмх замбараагүй гүйцэтгэлээс зайлсхийдэг.

Зочлох газруудын жагсаалт

Эцэст нь, та шууд дагаж мөрдөх боломжтой шалгах жагсаалт энд байна:

Эхний алхам бол зорилгоо тодорхой болгох явдал юм. Та хуудсыг хамгийн хурдан ачаалахыг хүсч байна уу, эсвэл тогтвортой байдал, алдаагүй ажиллагааг чухалчилдаг уу? Энэ нь таны ямар төрлийн суулгац ашиглахыг тодорхойлох болно.

Хоёр дахь алхам бол бүх зүйлийг нэг дор өөрчлөх биш юм. Нэгдүгээрт, үүнийг туршиж үзэхийн тулд тийм ч чухал биш хуудсыг олоод, нэг эсвэл хоёр өдөр ажиглаад, асуудалгүй гэдэгт итгэлтэй байгаа тохиолдолд л бүхэл бүтэн сайтад сурталчлаарай.

Гуравдугаарт, өөрчлөлт бүрийн дараа кэшийг үргэлж цэвэрлэж байгаарай. W3TC-ийн кэшлэх механизм нь танд хамгийн сүүлийн үеийн өөрчлөлтүүдийг харах боломжийг олгохгүй тул "кэшийг цэвэрлээд дахин турших" алхам зайлшгүй шаардлагатай.

Дөрөвдүгээрт, хөтөчийнхөө хөгжүүлэгчийн хэрэгслүүд эсвэл PageSpeed ​​​​Insights гэх мэт хэрэгслүүдийг ашиглан ачаалах хурдыг өмнөх болон дараах байдлаар харьцуулаарай. Зөвхөн таны дотоод мэдрэмж биш, өгөгдөл өөрөө ярь.

Төгсгөлд нь бич

Үнэнийг хэлэхэд, би энэ суулгагдсан төрлийн тохиргоог анх хараад удаан хугацаанд гайхширсан. Анхдагч хаах горим хэтэрхий удаан юм шиг санагдсан бол асинхрон горим нь үйлдлийн дарааллыг баталгаажуулдаггүй бөгөөд хойшлуулах нь нийцтэй байдлын асуудал үүсгэж болзошгүй. Аль сонголтыг сонгохоо мэдэхгүй байсан.

Гэхдээ би хожим нь үүнийг буулт гэдгийг ойлгосон. Та хамгийн хурдан болон хамгийн тогтвортойг хоёуланг нь авч чадахгүй; та үргэлж нэгийг нь золиослох хэрэгтэй болдог. Миний туршлагаас харахад эхлээд defer-ийг ашигладаг бөгөөд энэ нь одоогоор хамгийн аюулгүй хаалтгүй шийдэл бөгөөд дараа нь асуудал гарвал callback-ийг ашигладаг.

Хэрэв та үүнтэй төстэй асуудалтай тулгарвал, эсвэл миний аргыг дагасны дараа өөр асуудал гарсаар байвал энэ талаар ярилцаарай. Вэбсайт хөгжүүлэлт нь бүхэлдээ туршилт ба алдааны үндсэн дээр хийгддэг бөгөөд хэн ч үүнээс үл хамаарах зүйл биш юм.

Миний нийтлэлийг уншсанд баярлалаа. Дараагийн удаа уулзъя.