Želite li ukloniti blokiranje JavaScript i CSS prikazivanja u WordPressu?
Ako testirate svoju web lokaciju na uvidima u Google PageSpeed, vjerojatno ćete vidjeti prijedlog za uklanjanje blokova za prikaz skripte i CSS-a. Međutim, ne pruža detalje o tome kako to učiniti na svojoj web stranici WordPress.
U ovom ćemo članku pokazati kako jednostavno popraviti JavaScript i CSS blokiranje prikazivanja u WordPressu kako biste poboljšali rezultat na Google PageSpeed.
Ali prije, otkrijmo zajedno Kako instalirati 7 korake WordPress blog et Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog.
Što je blokiranje JavaScript-a i CSS-a?
Blokiranje JavaScript i CSS prikazivanja su datoteke koje sprečavaju prikazivanje web stranice prije učitavanja.
Svaka WordPress web stranica ima temu i dodatke koji dodaju JavaScript i CSS datoteke na pročelje vaše web stranice. Ove skripte mogu povećati vrijeme učitavanja stranice na vašoj web lokaciji, a također mogu blokirati prikazivanje stranica.
Korisnički preglednik morat će učitati ove skripte i CSS-a prije nego što će učitati ostatak HTML koda na stranicu. To znači da će korisnici na sporijoj vezi morati pričekati još nekoliko milisekundi da bi pregledali stranicu.
Te se skripte i tablice stilova nazivaju JavaScript i CSS blokatori prikazivanja.
Vlasnici web lokacija koji pokušavaju postići Google PageSpeed ocjenu 100 trebali će to popraviti kako bi postigli savršen rezultat.
Što je Google PageSpeed Score?
Google PageSpeed Insights je alat za testiranje brzine koji je stvorio Google kako bi pomogao vlasnicima web lokacija da optimiziraju i testiraju svoje web stranice. Ovaj alat testira vašu web lokaciju u skladu s Googleovim smjernicama za brzinu i nudi prijedloge za poboljšanje vremena učitavanja vaše web stranice.
Pokazuje vam rezultat na temelju broja pravila koja vaša web stranica prolazi. Većina web lokacija ima između 50 i 70. Međutim, neki vlasnici web stranica osjećaju pritisak da dosegnu 100.
Je li vam doista potrebna ocjena "100" na Google PageSpeedu?
Svrha Google PageSpeed uvidi je pružiti vam smjernice za poboljšanje brzine i performansi vaše web stranice. Od vas se ne zahtijeva da strogo poštujete ta pravila.
Zapamtite da je brzina samo jedna od mnogih SEO metrika koja Googleu pomaže u određivanju ranga vaše web stranice. Razlog zašto je brzina toliko važna je da se poboljšava korisničko iskustvo na vašoj web stranici.
Bolje korisničko iskustvo zahtijeva puno više od brzine. Također biste trebali ponuditi korisne informacije, bolje korisničko sučelje i uključite sadržaj tekstom, slikama i videozapisima.
Vaš bi cilj trebao biti stvoriti brzu web stranicu koja nudi sjajno korisničko iskustvo.
Tijekom najnovijeg redizajna BlogPasCher, usredotočili smo se na brzinu i poboljšanje korisničkog iskustva.
Preporučujemo da koristite Google Pagespeed pravila kao prijedlog, a ako ih možete lako implementirati bez narušavanja korisničkog iskustva, onda je to sjajno. Ako ne, treba nastojati učiniti onoliko koliko možete, a onda ne brinite za ostalo.
Uz sve to, pogledajmo što možete učiniti da popravite blokiranje JavaScript i CSS prikazivanja u WordPressu.
Obuhvatit ćemo dvije metode koje će riješiti ovaj problem. Možete odabrati onaj koji najbolje funkcionira na vašoj web lokaciji.
1. Popravite skripte za blokiranje prikazivanja i CSS s WP Rocketom
Za ovu metodu koristit ćemo dodatak WP Rocket. Ovo je najbolji WordPress dodatak za predmemoriranje na tržištu i omogućava vam brzo poboljšavanje performansi vaše web stranice bez ikakvih tehničkih ili složenih vještina.
Prije svega, morate instalirati i aktivirati WP Rocket dodatak. Za više pojedinosti pogledajte naš korak po korak vodič o tome kako instalirati WordPress dodatak..
WP Rocket aktivira svoju predmemoriju optimalnim postavkama. Prema zadanim postavkama ne omogućuje opcije optimizacije JavaScripta i CSS-a. Ove optimizacije potencijalno mogu utjecati naizgled vaše web stranice ili određene značajke, zato vam dodatak omogućuje da omogućite te postavke kao opciju.
Da biste to učinili morate nastaviti Postavke »WP Raketa, a zatim se prebacite na 'Optimizacija datoteka ', Od tamo se pomaknite dolje do odjeljka CSS datoteke i označite kutije Umanjite CSS, Kombinirajte CSS datoteke et Optimizirajte isporuku CSS-a.
Bilješka : WP Rocket će pokušati minimizirati sve vaše CSS datoteke, kombinirati ih i učitati samo potreban CSS za vidljivi dio vaše web stranice. To bi moglo utjecati naizgled vaše web stranice, stoga biste trebali temeljito testirati svoju web stranicu na više uređaja i veličina zaslona.
Zatim se morate pomaknuti do odjeljka JavaScript datoteke, Od tamo možete označiti sve mogućnosti za maksimalno poboljšanje performansi.
Možete kombinirati i kombinirati JavaScript datoteke poput CSS datoteka.
Također možete spriječiti da WordPress prenese datoteku. jQuery Migracija, Ovo je skripta koju WordPress učitava kako bi osigurao kompatibilnost dodataka i tema koristeći starije verzije jQueryja.
Većina web stranica ne treba ovu datoteku, ali bilo bi dobro provjeriti svoje web mjesto kako biste bili sigurni da uklanjanje ne utječe na vašu temu ili dodatke.
Zatim se pomaknite malo dalje i provjerite opcije 'Učitaj JavaScript zaštićeno'i'Siguran način rada za jQuery'.
Ove opcije odgađaju učitavanje nebitnog JavaScripta, a jQuery sigurni način rada omogućuje vam da učitate jQuery za teme koje ga mogu koristiti inline.
Ne zaboravite da kliknete gumb Spremi promjene da biste pohranili svoje postavke.
Nakon toga također možete očistiti predmemoriju u WP Rocket-u prije ponovnog testiranja vaše web stranice pomoću Google Page Speed Insights.
Na našoj web stranici za testiranje uspjeli smo postići stopostotni rezultat na stolnim računalima, a problem učitavanja prikazivanja riješen je i u rezultatima mobilnih i desktop računala.
2. Popravite blokiranje ispisa JavaScript i CSS automatskim podešavanjem
Za ovu metodu koristit ćemo drugačiji dodatak izrađen posebno za poboljšanje isporuke CSS i JS datoteka na vašoj web lokaciji. Dok ovaj dodatak obavlja posao, nedostaju mu druge snažne značajke koje nudi WP Rocket.
Prvo što trebate učiniti je instalirati i aktivirati dodatak Autoptimize. Za više detalja pogledajte naš detaljni vodič o tome kako instalirati WordPress dodatak.
Prilikom aktiviranja morate posjetiti stranicu Postavka »Autoptimize za konfiguraciju postavki dodatka.
Prije svega, morate provjeriti opciju 'Optimizirajte JavaScript kôd'ispod bloka JavaScript Opcije. Provjerite je li označena opcija 'Objedini sve povezane JS-datoteke'.
Zatim se pomaknite prema dolje do područja CSS opcije i označite opciju ' Optimiziranje CSS koda?'. Provjerite je li opcija 'Objedinite sve povezane CSS datoteke'nije označeno.
Sada možete kliknuti na gumb "Spremi promjene i očisti predmemoriju" da biste spremili svoje postavke.
Nastavite i testirajte web mjesto pomoću Uvida brzine stranice. Na našoj demo web lokaciji uspjeli smo riješiti problem zaglavljenog prikazivanja s ovim osnovnim postavkama.
Ako i dalje postoje skripte za blokiranje prikazivanja, morate se vratiti na stranicu postavki dodatka i pogledati JavaScript i CSS opcije.
Na primjer, možete dopustiti da dodatak uključi JS Inline i uklonite skripte koje su prema zadanim postavkama isključene poput seal.js ili jquery.js.
Kliknite gumb "Spremi promjene i očisti predmemoriju" da biste spremili promjene i očistili predmemoriju dodataka.
Nakon što završite, nastavite i ponovno provjerite web mjesto pomoću alata Page Speed Insights.
Kako to djeluje?
Automatski optimizirajte sve sve JavaScript i CSS datoteke. Nakon toga stvara isprepletene CSS i JavaScripts datoteke i poslužuje spremljene kopije vaše web stranice sinkronizirano ili odgođeno.
To vam omogućuje da riješite problem blokiranja vizualizacije skripte i stilovi blokiranja. Međutim, imajte na umu da to također može utjecati na performanse iliizgled vaše web stranice.
pomoći
Ovisno o tome kako dodaci i vaša WordPress tema koriste JavaScript i CSS, moglo bi biti prilično teško u potpunosti riješiti sve probleme pomoću blokiranje od JavaScript i CSS prikazi.
Iako vam gornji alati mogu pomoći, vašim će dodacima možda trebati određene skripte na različitoj razini prioriteta kako bi pravilno funkcionirali. U ovom slučaju, gornja rješenja mogu pokvariti funkcionalnost ovih dodataka ili se mogu ponašati neočekivano.
Google vam i dalje može pokazati neke probleme poput optimizacije isporuke CSS-a. WP Rocket omogućuje vam da to popravite ručnim dodavanjem kritičnog CSS-a potrebnog za savršeno prikazivanje vaše WordPress teme.
Međutim, moglo bi biti prilično teško znati koji CSS kôd će vam trebati za prikaz.
Otkrijte i neke teme i premium WordPress dodatke
Možete koristiti druge WordPress dodatke kako biste pružili moderan izgled i optimizirali opciju svog bloga ili web stranice.
Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.
1. WordPress Brzina za optimizaciju brzine
Da li se mučite s upravljanjem više dodataka za optimizaciju brzine web mjesta? Jeste li zabrinuti da oni ometaju brzinu izvršavanja vaše web stranice? tada će ovaj dodatak za WordPress biti konačno rješenje za sve vaše brige.
Ovaj dodatak osmišljen je kako bi vam pružio funkcionalnost gotovo 6-8 različitih WordPress dodataka. Samo ga morate instalirati i konfigurirati da biste vidjeli značajno poboljšanje učitavanja vaših stranica.
Željeli bismo istaknuti da ovo nije predmemorija predmemorije ili CDN, ali rezultat koji nudi je ipak impresivan. Ne ustručavajte se isprobati ovaj WordPress dodatak da biste vidjeli za što je sposoban.
Preuzmite | demo | Web hosting
2. Social Share & Locker Pro
Proširenje Social Share & Locker Pro osmišljeno je kako bi vaše web mjesto bilo vidljivije na društvenim mrežama. Uz samo nekoliko klikova možete postaviti položaj ikona na društvenim mrežama ili zaključati sadržaj zahtijevajući dijeljenje na jednoj od društvenih mreža koje vam nude.
Imate 10 unaprijed definirane teme i to bi trebalo pokriti najčešće želje. Sve su joj teme Retina i radna čuda.
Također, uz Social Share & Locker Pro moći ćete prikazati puno ime društvenih mreža ili samo ikonu. Ovisit će o vašem dizajnu, raspoloživom prostoru ili vašim željama.
Preuzmite | demo | Web hosting
3. WordPress PDF Slike Lightbox
WordPress PDF Lightbox je a WordPress proširenje koji vam omogućuje stvaranje preglednika PDF datoteka. Preglednik PDF-a je zbirka fotografija koje se mogu spremiti u obliku PDF-a.
Pomoću ovog proširenja možete stvoriti onoliko PDF pregledača koliko želite. Za svakog gledatelja administrator može postaviti neke opcije poput:
- Slika naslovnice: koja će biti dodana kao prva stranica PDF-a koji je kreirao korisnik
- Maksimalan broj slika po gledatelju
- Slika vodenog žiga: za primjenu na PDF stranicama
- Slanje e-poštom: ako je ova značajka aktivirana, a kontakt obrazac ponudit će se odmah nakon galerije slika. Putem ovog obrasca korisnici će kreirani PDF moći poslati e-poštom bilo kome.
Preuzmite | demo | Web hosting
Preporučeni resursi
Saznajte više o drugim preporučenim resursima koji će vam pomoći u izgradnji i upravljanju web mjesta.
- 10 WordPress dodaci za poboljšanje SEO vaše web stranice
- 5 premium WordPress dodataka za optimizaciju vaše kategorije
- 10 WordPress dodataka za pretvaranje valuta
- 10 WordPress čep za integraciju audio player na web stranici
Zaključak
Ovdje! To je sve za ovaj vodič. Nadamo se da vam je ovaj članak pomogao naučiti kako popraviti blokiranje JavaScript i CSS prikazivanja u WordPressu. Možete vidjeti i naše krajnji vodič o tome kako ubrzati performanse WordPressa za početnike.
Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress.
Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama. A ako imate prijedloge ili primjedbe, ostavite ih u našem odjeljku Komentari.
...
