Dëshironi të eliminoni bllokimin e renditjes JavaScript dhe CSS në WordPress?
Nëse po e testoni uebfaqen tuaj në pamjet e Google PageSpeed, atëherë me siguri do të shihni një sugjerim për të hequr blloqet e skriptimit dhe të dhënies së CSS. Sidoqoftë, ai nuk jep detaje se si ta bëni këtë në faqen tuaj të internetit në WordPress.
Në këtë artikull, ne do t'ju tregojmë se si të rregulloni me lehtësi bllokimin e renditjes JavaScript dhe CSS në WordPress për të përmirësuar rezultatin tuaj të Google PageSpeed.
Por më parë, le të zbulojmë së bashku Si të instaloj një WordPress blog hapa 7 et Si të kërkoni, instaloni dhe aktivizoni një temë WordPress në blogun tuaj.
Isfarë është JavaScript dhe CSS-bllokimi i renditjes?
Bllokimi i prezantimeve JavaScript dhe CSS janë skedarë që parandalojnë një faqe në internet të shfaqë një faqe në internet para se t'i ngarkojë ato.
Do uebfaqe e WordPress ka një temë dhe shtojcat që shtojnë skedarët JavaScript dhe CSS në frontin e faqes tuaj. Këto shkrime mund të rrisin kohën e ngarkesës së faqes në faqen tuaj të internetit, dhe ato gjithashtu mund të bllokojnë interpretimin e faqeve.
Një shfletues i përdoruesit do të duhet të ngarkojë këto shkrime dhe CSS përpara se të ngarkojë pjesën tjetër të kodit HTML në faqe. Kjo do të thotë që përdoruesit në një lidhje më të ngadaltë do të duhet të presin disa milisekonda më shumë për të parë faqen.
Këto skripta dhe fletë stilet quhen JavaScript dhe CSS japin bllokues.
Pronarët e faqeve të internetit që përpiqen të arrijnë një rezultat Google PageSpeed prej 100 do të duhet ta rregullojnë këtë për të arritur atë rezultat perfekt.
Isfarë është rezultati Google PageSpeed?
Google PageSpeed Insights është një mjet i testimit të shpejtësisë i krijuar nga Google për të ndihmuar pronarët e faqeve të internetit që të zgjedhin dhe testojnë faqet e internetit të tyre. Ky mjet teston uebfaqen tuaj kundër udhëzimeve të shpejtësisë së Google dhe ofron sugjerime për përmirësimin e kohës së ngarkesës së faqes tuaj në internet
Kjo ju tregon një rezultat bazuar në numrin e rregullave që kalon në faqen tuaj. Shumica e faqeve të internetit janë midis 50 dhe 70. Sidoqoftë, disa pronarë të faqeve të internetit ndjehen presion për të arritur në 100.
A ju duhet vërtet një rezultat "100" në Google PageSpeed?
Qëllimi i Pasqyrimet e Google PageSpeed është që t'ju ofrojë udhëzime për të përmirësuar shpejtësinë dhe performancën e faqes tuaj. Ju nuk kërkohet të zbatoni me përpikëri këto rregulla.
Mos harroni, shpejtësia është vetëm një nga shumë metrics e SEO që ndihmojnë Google të përcaktojë se si të rendisë faqen tuaj të internetit. Shpejtësia e arsyes është kaq e rëndësishme është se përmirësohet përvoja e përdoruesit në faqen tuaj të internetit.
Një përvojë më e mirë e përdoruesit kërkon shumë më tepër sesa shpejtësia. Ju gjithashtu duhet të ofroni informacion të dobishëm, ndërfaqe më të mirë të përdoruesit dhe angazhoni përmbajtje me tekst, imazhe dhe video.
Qëllimi juaj duhet të jetë krijimi i një uebsajti të shpejtë që ofron një përvojë të shkëlqyeshme të përdoruesit.
Gjatë ridizajnimit të fundit të BlogPasCher, ne mbajtëm një përqëndrim në shpejtësinë, si dhe në përmirësimin e përvojës së përdoruesit.
Ne ju rekomandojmë të përdorni rregullat e Google Pagespeed si sugjerim, dhe nëse mund t'i zbatoni ato lehtësisht pa prishur përvojën e përdoruesit, atëherë kjo është e shkëlqyeshme. Nëse jo, duhet të përpiqeni të bëni sa më shumë që të keni mundësi, dhe pastaj mos u shqetësoni për pjesën tjetër.
Me këtë tha, le të hedhim një vështrim në atë që mund të bësh për të rregulluar bllokimin e pasqyrimit JavaScript dhe CSS në WordPress.
Ne do të mbulojmë dy metoda që do të rregullojnë këtë problem. Ju mund të zgjidhni atë që funksionon më mirë në faqen tuaj të internetit.
1. Fiksoni skedarët bllokues dhe CSS me WP Rocket
Për këtë metodë, ne do të përdorim shtojcën WP Rocket. Kjo është shtojca më e mirë e caching WordPress në treg dhe ju lejon të përmirësoni shpejt performancën e faqes suaj të internetit pa ndonjë aftësi teknike ose komplekse të vendosur.
Para së gjithash, ju duhet të instaloni dhe aktivizoni plugin WP Rocket. Për më shumë detaje, shihni udhëzuesin tonë hap pas hapi se si të instaloni një shtojcë WordPress..
WP Rocket aktivizon cache-in e saj me cilësimet optimale. Si parazgjedhje, nuk aktivizon opsionet e optimizimit të JavaScript dhe CSS. Këto optimizime potencialisht mund të ndikojnë nëpamjen e faqes suaj të internetit ose veçori të caktuara, kjo është arsyeja pse shtojca ju lejon të aktivizoni ato cilësime si opsion.
Për ta bërë këtë ju duhet të vazhdoni më tej Cilësimet »Rocket WP, pastaj kaloni te 'File Optimization '. Nga atje, lëvizni poshtë tek seksioni Skedarët CSS dhe shënoni kutitë Minimizoni CSS, Kombinoni skedarët CSS et Optimizoni dorëzimin CSS.
Remarque : WP Rocket do të përpiqet të minimizojë të gjithë skedarët tuaj CSS, t'i kombinojë ato dhe të ngarkojë vetëm CSS-në e nevojshme për pjesën e dukshme të faqes suaj të internetit. Kjo mund të ndikojë nëpamjen e faqes suaj të internetit, kështu që ju duhet të testoni faqen tuaj të internetit tërësisht në pajisje dhe madhësi të shumta ekrani.
Pastaj ju duhet të lëvizni te seksioni Skedarët JavaScript. Nga këtu mund të shënoni të gjitha opsionet për përmirësimin maksimal të performancës.
Ju mund të minifikoni dhe kombinoni skedarët JavaScript ashtu si keni bërë skedarët CSS.
Ju gjithashtu mund të parandaloni WordPress të ngarkoni skedarin. jQuery Migjeni. Ky është një skenar që WordPress ngarkon për të siguruar pajtueshmëri për shtojcat dhe temat që përdorin versionet më të vjetra të jQuery.
Shumica e faqeve të internetit nuk kanë nevojë për këtë skedar, por është një ide e mirë të kontrolloni faqen tuaj të internetit për t'u siguruar që heqja e tij nuk ndikon në temën ose shtojcat tuaja.
Pastaj lëviz pak më poshtë dhe kontrollo opsionet 'Ngarkoni JavaScript të dëmtuar'dhe'Modaliteti i sigurt për jQuery'.
Këto opsione vonojnë ngarkimin e JavaScript jo-thelbësor, dhe modaliteti i sigurt jQuery ju lejon të ngarkoni jQuery për temat që mund ta përdorin atë brenda.
Mos harroni të klikoni në butonin Ruaj ndryshimet për të ruajtur cilësimet tuaja.
Pas kësaj, ju gjithashtu mund të pastroni cache në WP Rocket përpara se të testoni përsëri faqen tuaj te internetit me Google Speed Insights.
Në uebfaqen tonë të testimit ne ishim në gjendje të arrinim rezultatin 100% në desktop dhe çështja që u bë e mbërthyer u zgjidh në të dyja rezultatet e celularit dhe desktopit.
2. Rregulloni bllokimin e JavaScript dhe CSS me bllokimin automatik
Për këtë metodë, ne do të përdorim një shtojcë tjetër të bërë posaçërisht për të përmirësuar shpërndarjen e skedarëve CSS dhe JS të faqes suaj të internetit. Ndërsa kjo shtojcë përfundon punën, asaj i mungojnë veçoritë e tjera të fuqishme që ofron WP Rocket.
Gjëja e parë që duhet të bëni është të instaloni dhe aktivizoni plugin Autoptimize. Për më shumë detaje, shihni udhëzuesin tonë hap pas hapi se si të instaloni një shtojcë WordPress.
Kur aktivizoni, duhet të vizitoni faqen Vendosja »Autoptimize për të konfiguruar cilësimet e shtojcës.
Para së gjithash, duhet të kontrolloni opsionin 'Optimizoni Kodin JavaScript'nën bllok JavaScript Opcionet. Sigurohuni që opsioni 'Bashkoji të gjithë JS-skedarët e lidhur' nuk është i kontrolluar.
Pastaj lëvizni poshtë në zonë Opsionet e CSS dhe kontrolloni opsionin ' Optimizoni kodin CSS?' Sigurohuni që opsioni 'Përmblidhni të gjitha skedarët CSS të lidhura'nuk është kontrolluar.
Tani mund të klikoni në butonin 'Ruaj ndryshimet dhe pastro memorien' për të ruajtur cilësimet e tua.
Shkoni përpara dhe provoni faqen tuaj të internetit me Faqe Speed Insights. Në faqen tonë të internetit demo, ne ishim në gjendje të zgjidhim çështjen e dhënë të mbërthyer me këto cilësime themelore.
Nëse akoma ka skriptete bllokuese, duhet të ktheheni në faqen e cilësimeve të shtojcës dhe të shikoni në opsionet JavaScript dhe CSS.
Për shembull, ju mund të lejoni që shtojca të përfshijë JS Inline dhe të hiqni skriptet që janë përjashtuar nga parazgjedhjet si vulë.js ose jquery.js.
Klikoni në butonin 'Ruaj ndryshimet dhe pastro memorien' për të ruajtur ndryshimet dhe pastruar memorjen shtesë të shtojcave.
Pasi të keni mbaruar, shkoni përpara dhe kontrolloni përsëri faqen tuaj të internetit me mjetin Speed Insights.
Si punon?
Autoptimizoni paketat e të gjithë skedarëve JavaScript dhe CSS. Pas kësaj ai krijon skedarët e minifikuar të CSS dhe JavaScriptts dhe shërben kopje të ruajtura të faqes suaj të internetit në një bazë të sinkronizuar ose të shtyrë.
Kjo ju lejon të zgjidhni problemin e bllokimit renderings skriptet dhe stilet e bllokimit. Sidoqoftë, mbani në mend se kjo mund të ndikojë gjithashtu në performancën osepamjen e faqes suaj të internetit.
ndihmë
Në varësi të mënyrës sesi pluginet dhe tema juaj WordPress përdorin JavaScript dhe CSS, mund të jetë mjaft e vështirë të zgjidheni plotësisht të gjitha çështjet me blocage i Paraqitjet e JavaScript dhe CSS.
Ndërsa mjetet e mësipërme mund të ndihmojnë, shtojcave të tua mund të kenë nevojë për skenare të caktuara në një nivel përparësi tjetër për të funksionuar siç duhet. Në këtë rast, zgjidhjet e mësipërme mund të prishin funksionalitetin e këtyre shtojcave, ose ato mund të sillen papritur.
Google ende mund t'ju tregojë disa çështje si optimizimi i shpërndarjes CSS. WP Rocket ju lejon të rregulloni këtë duke shtuar manualisht CSS kritike të nevojshme për të shfaqur në mënyrë të përsosur temën tuaj të WordPress.
Sidoqoftë, mund të ishte mjaft e vështirë të dini se çfarë kodi CSS do t'ju duhet të shfaqni.
Zbuloni gjithashtu disa tema dhe shtesa premium WordPress
Ju mund të përdorni shtesa të tjera WordPress për të dhënë një pamje moderne dhe për të optimizuar kontrollin e blogut ose faqes tuaj të internetit.
Ne ju ofrojmë këtu disa shtesa premium WordPress që do t'ju ndihmojnë ta bëni atë.
1. Shtojca e optimizimit të shpejtësisë WordPress
A po luftoni për të menaxhuar shtojca të shumta të optimizimit të shpejtësisë së faqes në internet? A jeni i shqetësuar se po pengojnë shpejtësinë e ekzekutimit të faqes suaj të internetit? atëherë, kjo shtojcë WordPress do të jetë zgjidhja përfundimtare për të gjitha shqetësimet tuaja.
Kjo shtojcë është krijuar për t'ju dhënë funksionalitetin e pothuajse 6-8 shtojcave të ndryshme WordPress. Thjesht duhet ta instaloni dhe konfiguroni për të parë një përmirësim të dukshëm në ngarkimin e faqeve tuaja.
Ne do të dëshironim të theksonim se kjo nuk është një plugin cache ose CDN, por rezultati që ofron është gjithsesi mbresëlënës. Mos hezitoni të provoni këtë shtojcë WordPress për të parë se për çfarë është e aftë.
Shkarko | DEMO | web hosting
2. Ndarja Sociale & Dollapi Pro
Shtojca Social Share & Locker Pro është krijuar për të ndihmuar që faqja juaj të jetë më e dukshme në mediat sociale. Me vetëm disa klikime, mund të vendosni pozicionin e ikonave tuaja sociale ose të bllokoni përmbajtjen tuaj duke kërkuar ndarjen në një nga rrjetet sociale të ofruara nga ju.
Ju keni tema të paracaktuara 10 dhe kjo duhet të mbulojë dëshirat më të zakonshme. Të gjitha temat e saj janë Retina dhe mrekulli pune.
Gjithashtu, me Social Share & Locker Pro, ju do të jeni në gjendje të shfaqni emrin e plotë të rrjeteve sociale ose thjesht ikonën. Kjo do të varet nga modeli juaj, hapësira e disponueshme ose dëshirat tuaja.
Shkarko | DEMO | web hosting
3. WordPress PDF Images Lightbox
WordPress PDF Lightbox është një Shtesa e WordPress i cili ju lejon të krijoni shikues të skedarëve PDF. Një shikues PDF është një koleksion fotografish që mund të ruhen si PDF.
Me këtë shtrirje, ju mund të krijoni sa më shumë shikues të PDF-ve. Për secilin shikues, administratori mund të vendosë disa opsione si:
- Imazhi i kopertinës: i cili do të shtohet si faqja e parë e PDF të krijuar nga përdoruesi
- Imazhe maksimale për shikues
- Një imazh i filigranit: të aplikohet në faqet PDF
- Dërgimi me email: nëse kjo veçori është e aktivizuar, a formularin e kontaktit do të ofrohet menjëherë pas galerisë së imazheve. Përmes këtij formulari, përdoruesit do të mund t'i dërgojnë me email PDF-në e krijuar kujtdo.
Shkarko | DEMO | web hosting
Burimet e rekomanduara
Mësoni rreth burimeve të tjera të rekomanduara për t'ju ndihmuar të ndërtoni dhe menaxhoni uebfaqen tuaj.
- Plugins 10 WordPress për të përmirësuar SEO të faqes suaj të internetit
- Shtojcat 5 premium WordPress për të optimizuar kategoritë tuaja
- 10 shtesa WordPress për të kthyer monedhën
- Shtojcat 10 WordPress për të futur një audio player në një faqe interneti
Përfundim
Këtu! Kjo është ajo për këtë tutorial. Shpresojmë që ky artikull t'ju ketë ndihmuar të mësoni se si të rregulloni bllokimin e dhënies JavaScript dhe CSS në WordPress. Ju gjithashtu mund të shihni tonë udhëzues i fundit se si të shpejtoni performancën e WordPress për fillestarët.
Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress.
Mos hezitoni të ndajeni me miqtë tuaj në rrjetet tuaja të preferuara sociale. Dhe nëse keni ndonjë sugjerim ose vërejtje, lini ato në seksionin tonë komente.
...
