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 ашиглаж байгаа хүнийг ч гайхшруулах болно. Энэ нийтлэлд миний тулгарсан бэрхшээлүүд болон сурсан сургамжуудыг танд шууд танилцуулж байна. Та баримт бичгийг үзэх шаардлагагүй; зүгээр л миний зааврыг дагана уу.

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

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

Анхдагч (блок)Үүнийг Анхдагч хаалт гэж нэрлэдэг. Энэ бол хамгийн энгийн арга юм: хөтөч скрипттэй тааралдах үедээ зогсож, татаж аваад бүрэн ажиллуулж, дараа нь хуудсыг үргэлжлүүлэн харуулдаг. Найдвартай сонсогдож байна, тийм үү? Гэхдээ энэ нь таны анхны хуудас ачаалагдахыг хаах болно гэсэн үг юм; хэрэглэгчид ямар нэгэн зүйлийг харахаасаа өмнө скрипт ажиллаж дуусахыг хүлээх хэрэгтэй болно.

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

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

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

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

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

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

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

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

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

Блоклохгүй байхын тулд "асинхрон"-ыг ашиглана уу(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-ийг ашигладаг.

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

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