Chcete odstrániť blokovanie vykreslenia skriptov JavaScript a CSS vo WordPress?
Ak testujete svoje webové stránky na základe štatistík nástroja Google PageSpeed, pravdepodobne uvidíte návrh na odstránenie blokov vykreslenia skriptov a skriptov CSS. Neposkytuje však podrobnosti o tom, ako to urobiť na svojej webovej stránke WordPress.
V tomto článku vám ukážeme, ako ľahko opraviť blokovanie vykreslenia skriptov JavaScript a CSS v programe WordPress, aby ste zvýšili svoje skóre Google PageSpeed.
Ale predtým sa spolu objavíme Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu.
Čo je blokovanie vykreslenia skriptov JavaScript a CSS?
Blokovanie vykreslení skriptov JavaScript a CSS sú súbory, ktoré bránia webovej stránke zobraziť webovú stránku pred ich načítaním.
Každá webová stránka WordPress má motív a doplnky, ktoré pridávajú súbory JavaScriptu a CSS na frontend vašich webových stránok. Tieto skripty môžu zvýšiť rýchlosť načítania stránky z vášho webu a môžu tiež blokovať vykreslenie stránky.
Prehliadač používateľa bude musieť tieto skripty a CSS načítať pred načítaním zvyšku kódu HTML na stránku. To znamená, že používatelia s pomalým pripojením budú musieť na zobrazenie stránky počkať niekoľko milisekúnd.
Tieto skripty a zoznamy štýlov sa nazývajú blokátory vykreslenia JavaScriptu a CSS.
Majitelia webových stránok, ktorí sa snažia dosiahnuť skóre 100 PageSpeed v službe Google, budú musieť toto opraviť, aby dosiahli toto dokonalé skóre.
Čo je skóre Google PageSpeed?
Google PageSpeed Insights je nástroj na testovanie rýchlosti vytvorený spoločnosťou Google, ktorý pomáha vlastníkom webových stránok optimalizovať a testovať svoje webové stránky. Tento nástroj otestuje vaše webové stránky podľa pokynov spoločnosti Google pre rýchlosť a ponúka návrhy na zlepšenie časov načítania webovej stránky.
Ukazuje vám skóre na základe počtu pravidiel, ktoré váš web prechádza. Väčšina webových stránok je medzi 50 a 70. Niektorí vlastníci webových stránok však cítia tlak dosiahnuť 100.
Naozaj potrebujete v službe Google PageSpeed skóre „100“?
Účelom Štatistiky Google PageSpeed je poskytnúť vám pokyny na zvýšenie rýchlosti a výkonu vašich webových stránok. Nie ste povinní prísne dodržiavať tieto pravidlá.
Nezabudnite, že rýchlosť je len jednou z mnohých metrík SEO, ktoré spoločnosti Google pomáhajú určiť, ako hodnotiť vaše webové stránky. Dôvodová rýchlosť je taká dôležitá, že sa zlepšuje užívateľskú skúsenosť na vašom webe.
Lepšia používateľská skúsenosť vyžaduje oveľa viac ako rýchlosť. Mali by ste tiež ponúknuť užitočné informácie, lepšie užívateľské rozhranie a zapojiť obsah pomocou textov, obrázkov a videí.
Vaším cieľom by malo byť vytvorenie rýchleho webového sídla, ktoré ponúka vynikajúcu používateľskú skúsenosť.
Počas posledného redizajnu služby BlogPasCher sme sa sústredili na rýchlosť a zlepšili používateľské prostredie.
Odporúčame vám použiť ako odporúčanie pravidlá služby Google Pagespeed. Ak ich dokážete implementovať ľahko a bez toho, aby ste rušili dojem používateľa, je to skvelé. Ak nie, mali by ste sa snažiť robiť toľko, koľko len dokážete, a potom sa nemusíte starať o zvyšok.
Po tomto sa poďme pozrieť na to, čo môžete urobiť na odstránenie blokovania vykresľovania JavaScriptu a CSS vo WordPress.
Budeme sa venovať dvom metódam, ktoré tento problém vyriešia. Môžete si vybrať ten, ktorý na vašom webe funguje najlepšie.
1. Opravte skripty blokovania vykreslenia a CSS pomocou WP Rocket
Pre túto metódu použijeme doplnok WP Rocket. Toto je najlepší plugin pre ukladanie do vyrovnávacej pamäte WordPress na trhu a umožňuje vám rýchlo zvýšiť výkonnosť vašich webových stránok bez akýchkoľvek technických alebo zložitých zručností.
Najprv musíte nainštalovať a aktivovať doplnok WP Rocket. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress..
WP Rocket aktivuje svoju vyrovnávaciu pamäť s optimálnym nastavením. V predvolenom nastavení nepovoľuje možnosti optimalizácie JavaScriptu a CSS. Tieto optimalizácie môžu potenciálne ovplyvniťvzhľad vašej webovej stránky alebo určité funkcie, preto vám doplnok umožňuje povoliť tieto nastavenia ako možnosť.
Aby ste to dosiahli, musíte pokračovať Nastavenia »WP Rocket, potom prepnite naOptimalizácia súborov ', Odtiaľ prejdite nadol k sekcii Súbory CSS a začiarknite políčka Minifikujte CSS, Kombinujte súbory CSS et Optimalizujte doručovanie CSS.
Poznámka : WP Rocket sa pokúsi minimalizovať všetky vaše CSS súbory, skombinovať ich a načítať len potrebné CSS pre viditeľnú časť vášho webu. To by mohlo ovplyvniťvzhľad vašej webovej stránky, preto by ste mali svoje webové stránky dôkladne otestovať na viacerých zariadeniach a veľkostiach obrazoviek.
Potom musíte prejsť na časť Súbory JavaScript, Odtiaľ môžete zaškrtnúť všetky možnosti maximálneho zvýšenia výkonu.
Súbory JavaScript môžete zmenšovať a kombinovať rovnako ako súbory CSS.
Môžete tiež zabrániť WordPress v odovzdávaní súboru. Migrácia jQuery, Toto je skript, ktorý sa načíta program WordPress, aby poskytoval kompatibilitu pre doplnky a témy pomocou starších verzií jQuery.
Väčšina webových stránok tento súbor nepotrebuje, ale je vhodné skontrolovať váš web a ubezpečiť sa, že jeho odstránenie nemá vplyv na vašu tému alebo doplnky.
Potom posuňte zobrazenie nadol o niečo ďalej a skontrolujte možnosti 'Načítanie JavaScriptu odložené„a“Núdzový režim pre jQuery".
Tieto voľby oneskorujú načítanie nepodstatného JavaScriptu a jQuery Safe Mode vám umožňuje načítať jQuery pre témy, ktoré ho môžu použiť inline.
Nezabudnite kliknúť na tlačidlo Uložiť zmeny a nastavenia sa uložia.
Potom môžete vymazať vyrovnávaciu pamäť v aplikácii WP Rocket a potom znova otestovať svoje webové stránky pomocou nástroja Štatistiky rýchlosti stránky Google.
Na našom testovacom webe sa nám podarilo dosiahnuť 100% skóre na počítačoch a problém so zablokovaním vykreslenia sa vyriešil v skóre mobilných aj stolných počítačov.
2. Opravte blokovanie vykreslenia skriptov JavaScript a CSS pomocou autoptimize
Pre túto metódu použijeme iný doplnok vytvorený špeciálne na zlepšenie doručovania súborov CSS a JS na vašom webe. Kým tento doplnok dokončí prácu, postrádajú ďalšie výkonné funkcie, ktoré ponúka WP Rocket.
Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať doplnok Autoptimize. Viac podrobností nájdete v našej podrobnej príručke, ako nainštalovať doplnok WordPress.
Pri aktivácii musíte navštíviť túto stránku Nastavenie »Automatická optimalizácia na konfiguráciu nastavení doplnku.
Najskôr je potrebné skontrolovať možnosť „Optimalizujte kód JavaScript„pod blokom JavaScript možnosti. Uistite sa, že nie je začiarknutá možnosť „Agregovať všetky prepojené súbory JS“.
Potom prejdite nadol do oblasti Možnosti CSS a začiarknite možnosť ' Optimalizovať kód CSS?". Uistite sa, že možnosť „Agregujte všetky prepojené súbory CSS„nie je začiarknuté.
Teraz môžete svoje nastavenia uložiť kliknutím na tlačidlo „Uložiť zmeny a vyčistiť medzipamäť“.
Vyskúšajte svoje webové stránky pomocou funkcie Page Speed Insights. Na našich demonštračných webových stránkach sa nám podarilo vyriešiť problém s uviaznutím vykreslenia pomocou týchto základných nastavení.
Ak stále existujú skripty blokujúce vykreslenie, musíte sa vrátiť na stránku s nastaveniami doplnku a pozrieť sa na možnosti JavaScript a CSS.
Napríklad môžete povoliť doplnku, aby zahrnoval JS Inline a odstraňoval skripty, ktoré sú predvolene vylúčené, napríklad seal.js alebo jquery.js.
Kliknutím na tlačidlo „Uložiť zmeny a vyčistiť medzipamäť“ uložte zmeny a vymažte medzipamäť doplnku.
Až budete hotoví, choďte do toho a znova vyskúšajte svoje webové stránky pomocou nástroja Štatistiky rýchlosti stránky.
Ako to funguje?
Automatická optimalizácia balíkov všetkých súborov JavaScript a CSS. Potom sa vytvorí zmenšené súbory CSS a JavaScripts a zobrazuje kópie vašich webových stránok uložené v pamäti na synchronizovanom alebo odloženom základe.
To vám umožní vyriešiť problém blokovania omietky skripty a štýly blokovania. Majte však prosím na pamäti, že to môže ovplyvniť aj výkon respvzhľad vašej webovej stránky.
pomôcť
V závislosti od toho, ako doplnky a vaša téma WordPress používajú JavaScript a CSS, môže byť docela ťažké úplne vyriešiť všetky problémy s blokovanie z Vykreslenie skriptov JavaScript a CSS.
Hoci vyššie uvedené nástroje môžu pomôcť, vaše doplnky môžu potrebovať určité skripty na inej úrovni priority, aby mohli správne fungovať. V takom prípade môžu vyššie uvedené riešenia narušiť funkčnosť týchto doplnkov alebo sa môžu správať neočakávane.
Google vám stále môže ukázať niektoré problémy, ako napríklad optimalizácia doručovania CSS. WP Rocket vám to umožní vyriešiť manuálnym pridaním kritického CSS potrebného na dokonalé zobrazenie témy WordPress.
Môže však byť dosť ťažké vedieť, aký kód CSS budete musieť zobraziť.
Objavte aj niektoré témy a prémiové doplnky WordPress
Pomocou ďalších doplnkov WordPress môžete dať moderný vzhľad a optimalizovať priľnavosť svojho blogu alebo webovej stránky.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. WordPress Speed Optimization Plugin
Snažíte sa spravovať viac doplnkov na optimalizáciu rýchlosti webových stránok? Máte obavy, že bránia rýchlosti vykonania vášho webu? potom bude tento doplnok WordPress dokonalým riešením pre všetky vaše starosti.
Tento doplnok je navrhnutý tak, aby vám poskytol funkčnosť takmer 6 - 8 rôznych doplnkov WordPress. Musíte ho iba nainštalovať a nakonfigurovať, aby ste videli výrazné zlepšenie načítania vašich stránok.
Upozorňujeme, že nejde o a doplnok cache alebo CDN, ale výsledok, ktorý ponúka, je napriek tomu pôsobivý. Neváhajte vyskúšať tento doplnok WordPress a zistite, čoho je schopný.
Stiahnuť | demo | web hosting
2. Social Share & Locker Pro
Doplnok Social Share & Locker Pro bol navrhnutý tak, aby umožňoval lepšiu viditeľnosť vášho webu v sociálnych sieťach. Iba niekoľkými kliknutiami môžete buď nastaviť polohu svojich sociálnych ikon, alebo uzamknúť obsah požadovaním zdieľania na jednej zo sociálnych sietí, ktoré ponúkate.
Máte preddefinované témy 10 a to by malo pokrývať najbežnejšie priania. Všetky jej témy sú sietnica a pracovné zázraky.
Vďaka aplikácii Social Share & Locker Pro budete môcť zobraziť celý názov sociálnych sietí alebo iba ikonu. Bude to závisieť od vášho dizajnu, dostupného priestoru alebo vašich želaní.
Stiahnuť | demo | web hosting
3. WordPress PDF Obrázky Lightbox
WordPress PDF Lightbox je a Rozšírenie WordPress ktorý vám umožňuje vytvárať prehliadače súborov PDF. Prehliadač PDF je zbierka fotografií, ktoré je možné uložiť ako súbory PDF.
S týmto rozšírením môžete vytvoriť toľko prehliadačov PDF, koľko chcete. Pre každého prehliadača môže správca nastaviť niektoré možnosti, ako napríklad:
- Titulný obrázok: ktorý sa pridá ako prvá stránka PDF vytvoreného používateľom
- Maximálny počet obrázkov na jedného diváka
- Obrázok vodoznaku: použije sa na stránkach PDF
- Odosielanie e-mailom: ak je táto funkcia aktivovaná, a Kontaktný formulár bude ponúknutá hneď po galérii obrázkov. Prostredníctvom tohto formulára budú môcť používatelia poslať vytvorený PDF e-mailom komukoľvek.
Stiahnuť | demo | web hosting
Odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- Doplnky 10 WordPress na zlepšenie SEO vašich webových stránok
- 5 premium WordPress pluginy pre optimalizáciu vašich kategórií
- 10 doplnkov WordPress na konverziu meny
- 10 WordPress pluginy integrovať audio prehrávač na webové stránky
záver
Tu ! To je pre tento návod všetko. Dúfame, že vám tento článok pomohol naučiť sa, ako opraviť blokovanie vykresľovania JavaScriptu a CSS v prostredí WordPress. Môžete tiež vidieť naše dokonalý sprievodca o tom, ako zrýchliť výkon WordPress pre začiatočníkov.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.
Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach. A ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej časti Komentáre.
...
