Kā salabot JavaScript un CSS renderēšanas bloķēšanu programmā WordPress

Vai vēlaties novērst renderēšanu bloķējošus JavaScript un CSS WordPress? Ja pārbaudīsit savu vietni, izmantojot Google PageSpeed ​​ieskatu, jūs, iespējams, redzēsit ieteikumu atcelt renderēšanu bloķējošus pirkumus un CSS. Šajā rakstā mēs jums parādīsim, kā WordPress var viegli novērst renderēšanas bloķēšanas JavaScript un CSS, lai uzlabotu jūsu Google PageSpeed ​​rezultātu.


Kā izlabot renderēšanas bloķēšanu JavaScript un CSS programmā WordPress

Kas ir JavaScript un CSS renderēšanas bloķēšana?

Katrā WordPress vietnē ir tēma un spraudņi, kas jūsu vietnes priekšpusē pievieno JavaScript un CSS failus. Šie skripti var palielināt jūsu vietnes lapas ielādes laiku, un tie var arī bloķēt lapas atveidošanu.

Pirms pārējā HTML lapas ievietošanas lapā lietotāja pārlūkprogrammai būs jāielādē šie skripti un CSS. Tas nozīmē, ka lietotājiem, kuriem ir lēnāks savienojums, lapas redzēšanai būs jāgaida vēl dažas milisekundes vairāk.

Šie skripti un stila lapas tiek saukti par renderēšanu bloķējošiem JavaScript un CSS.

Vietņu īpašniekiem, kuri mēģina sasniegt Google PageSpeed ​​rezultātu 100, būs jānovērš šī problēma, lai sasniegtu šo perfekto rezultātu.

Kas ir Google PageSpeed ​​rādītājs?

Google PageSpeed ​​Insights ir tiešsaistes rīks, ko izveidojis Google, lai palīdzētu vietņu īpašniekiem optimizēt un pārbaudīt savas vietnes. Šis rīks pārbauda jūsu vietni atbilstoši Google vadlīnijām par ātrumu un piedāvā ieteikumus, kā uzlabot vietnes lapas ielādes laiku.

Tas parāda punktu skaitu, pamatojoties uz jūsu vietnē pieņemto noteikumu skaitu. Lielākā daļa vietņu sasniedz 50–70. Tomēr daži vietņu īpašnieki jūtas spiesti sasniegt 100 (visaugstākais lapas vērtējums).

Vai jums tiešām ir nepieciešams perfekts “100” Google PageSpeed ​​rādītājs?

Google PageSpeed ​​ieskatu mērķis ir sniegt jums vadlīnijas, kā uzlabot vietnes ātrumu un veiktspēju. Šie noteikumi nav stingri jāievēro.

Atcerieties, ka ātrums ir tikai viens no daudzajiem SEO rādītājiem, kas palīdz Google noteikt, kā klasificēt jūsu vietni. Ātrums ir tik svarīgs, jo tas uzlabo lietotāju pieredzi jūsu vietnē.

Labākai lietotāja pieredzei ir nepieciešams daudz vairāk nekā tikai ātrums. Jums jāpiedāvā arī noderīga informācija, labāka lietotāja saskarne un saistošs saturs ar tekstu, attēliem un video.

Jūsu mērķim vajadzētu būt ātras vietnes izveidošanai, kas piedāvā lielisku lietotāja pieredzi.

Mēs nesen pārveidojām WPBeginner un koncentrējāmies uz ātrumu, kā arī uz lietotāju pieredzes uzlabošanu.

Mēs iesakām kā ieteikumus izmantot Google lapas ātruma noteikumus, un, ja jūs tos varat viegli ieviest, nesabojājot lietotāju pieredzi, tas ir lieliski. Pretējā gadījumā jums jācenšas darīt tik daudz, cik varat, un tad neuztraucieties par pārējo.

To apskatot, apskatīsim, ko jūs varat darīt, lai labotu renderēšanu, kas bloķē JavaScript un CSS WordPress.

Mēs aplūkosim divas metodes, kas WordPress koriģēs renderēšanas bloķēšanu JavaScript un CSS. Jūs varat izvēlēties sev vispiemērotāko.

1. Labojiet Render Bloķēšanas skriptus un CSS ar Autoptimize

Šī metode ir vienkāršāka un ieteikta lielākajai daļai lietotāju.

Pirmais, kas jums jādara, ir instalēt un aktivizēt spraudni Autoptimize. Lai iegūtu sīkāku informāciju, skatiet mūsu soli pa solim, kā instalēt WordPress spraudni.

Pēc aktivizēšanas jums jāapmeklē Iestatījumi »Autoptimizēt lapu, lai konfigurētu spraudņa iestatījumus.

Automātiski optimizēt iestatījumus

Lai sāktu, atzīmējiet izvēles rūtiņu blakus JavaScript opcijas un CSS opcijas un pēc tam noklikšķiniet uz pogas Saglabāt izmaiņas.

Tagad varat pārbaudīt savu vietni, izmantojot rīku PageSpeed. Ja joprojām ir renderēšanas bloķēšanas skripti, jums ir jāatgriežas spraudņa iestatījumu lapā un augšpusē noklikšķiniet uz pogas Rādīt papildu iestatījumus..

JavaScript papildu opcijas

Šeit jūs varat ļaut spraudnim iekļaut iekļauto JS un noņemt skriptus, kas pēc noklusējuma ir izslēgti, piemēram, seal.js vai jquery.js.

Pēc tam ritiniet uz leju līdz CSS opcijai un ļaujiet spraudnim apkopot CSS.

Lai saglabātu izmaiņas un tukšu spraudņu kešatmiņu, noklikšķiniet uz pogas Saglabāt izmaiņas un iztukšot kešatmiņu.

Kad esat pabeidzis, dodieties uz priekšu un vēlreiz pārbaudiet savu vietni, izmantojot rīku PageSpeed.

Pārliecinieties, ka esat rūpīgi pārbaudījis savu vietni, lai pārliecinātos, ka nekas nav salauzts, optimizējot JavaScripts vai CSS.

Kā tas darbojas?

Autoptimizē apkopojumus visiem iespiestajiem JavaScript un CSS. Pēc tam tas izveido minificētus CSS un JavaScripts failus un kešotās kopijas jūsu vietnē kalpo kā async vai atlikts.

Tas ļauj jums novērst renderēšanas bloķēšanas skriptu un stilu problēmu. Tomēr, lūdzu, ņemiet vērā, ka tas var ietekmēt arī jūsu vietnes veiktspēju vai izskatu.

2. Izlabojiet renderēšanas bloķēšanu JavaScript, izmantojot W3 kopējo kešatmiņu

Šī metode prasa nedaudz vairāk darba, un tā ir ieteicama lietotājiem, kuri savā vietnē jau izmanto spraudni W3 Total Cache.

Vispirms jums būs jāinstalē un jāaktivizē spraudnis W3 Total Cache. Ja jums nepieciešama palīdzība, skatiet mūsu rokasgrāmatu par W3 kopējās kešatmiņas instalēšanu un iestatīšanu iesācējiem.

Tālāk jums jāapmeklē Performance »Vispārējie iestatījumi un ritiniet uz leju līdz sadaļai Samazināt.

Kopējās kešatmiņas W3 samazināšanas iespēja

Vispirms atzīmējiet opciju Iespējot blakus opcijai Minificēt un pēc tam atlasiet “Manuāli” saīsināšanas režīma opcijai.

Lai saglabātu iestatījumus, noklikšķiniet uz pogas Saglabāt visus iestatījumus.

Tālāk jāpievieno skripti un CSS, kurus vēlaties saīsināt.

Izmantojot Google PageSpeed ​​Insights rīku, varat iegūt visu bloķējošo skriptu un stila lapu vietrāžus URL..

Zem ieteikumiem, kur teikts: “Likvidējiet JavaScript un CSS bloķēšanu, ja saturs tiek parādīts virs reizes”, noklikšķiniet uz “Rādīt, kā labot”. Tas parādīs skriptu un stila lapu sarakstu.

Iegūstiet JavaScript un stila lapu vietrāžus URL no rīka Google PageSpeed

Paņemiet peles kursoru uz skriptu, un tas parādīs pilnu URL. Jūs varat atlasīt šo URL un pēc tam izmantot tastatūras taustiņus CTRL + C (Mac datorā – Command + C), lai kopētu vietrādi URL.

Tagad dodieties uz savu WordPress administratora zonu un dodieties uz Izrāde »Minify lappuse.

Vispirms jāpievieno JavaScript faili, kurus vēlaties sagrupēt. Ritiniet uz leju līdz JS sadaļai un pēc tam sadaļā “Darbības apgabalos” iestatiet sadaļas iegulšanas veidu uz “Nebloķējoša asinhronizācija”..

Pievienojiet skriptus, lai samazinātu

Tālāk jums jānoklikšķina uz pogas “Pievienot skriptu” un pēc tam jāsāk pievienot skriptu URL, kurus kopējāt no Google PageSpeed ​​rīka..

Kad esat pabeidzis, ritiniet uz leju līdz sadaļai CSS un pēc tam noklikšķiniet uz pogas Pievienot stila lapu. Tagad sāciet pievienot stilu lapu vietrāžus URL, kurus kopējāt no Google PageSpeed ​​rīka.

Pievienojiet stila lapas, lai samazinātu

Tagad noklikšķiniet uz pogas Saglabāt iestatījumus un iztīrīt kešatmiņu, lai saglabātu iestatījumus.

Apmeklējiet Google PageSpeed ​​rīku un vēlreiz pārbaudiet savu vietni.

Pārliecinieties, ka rūpīgi pārbaudāt arī savu vietni, lai pārliecinātos, ka viss darbojas pareizi.

Traucējummeklēšana

Atkarībā no tā, kā spraudņi un jūsu WordPress motīvi izmanto JavaScript un CSS, varētu būt diezgan sarežģīti pilnībā novērst visas renderēšanas bloķēšanas JavaScript un CSS problēmas.

Lai gan iepriekš minētie rīki var palīdzēt, jūsu spraudņiem, lai pareizi darbotos, var būt nepieciešami noteikti skripti citā prioritātes līmenī. Tādā gadījumā iepriekš minētie risinājumi var sabojāt jūsu spraudņus vai arī tie var rīkoties negaidīti.

Google joprojām var parādīt noteiktas problēmas, piemēram, CSS piegādes optimizēšanu virs pirmā ekrāna satura. Automātiskā optimizācija ļauj to labot, manuāli pievienojot ievietotu CSS, kas nepieciešama, lai parādītu iepriekš motīva augšējo kroku apgabalu.

Tomēr varētu būt diezgan grūti noskaidrot, kāds CSS kods jums būs jāparāda virs pārsega satura.

Tas ir viss, mēs ceram, ka šis raksts jums palīdzēja uzzināt, kā WordPress koriģēt renderēšanas bloķēšanu JavaScript un CSS. Jūs varat arī redzēt mūsu galveno ceļvedi, kas palielina WordPress ātrumu un veiktspēju iesācējiem.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map