Renderöinnin estävän JavaScriptin ja CSS:n poistaminen sivun yläosasta

Verkkosivustoa luotaessa on muutamia näkökohtia, jotka ovat ensiarvoisen tärkeitä, jotta käyttäjille voidaan tarjota sujuva käyttökokemus. Yhtä näistä näkökohdista edustaa latausaika. Nopeasti latautuva verkkosivusto on aina arvostettu vierailijoilta, jotka haluavat löytää etsimänsä mahdollisimman nopeasti. Nopean latausajan saavuttamiseksi sinun tulee oppia poistamaan renderöinnin estävät JavaScript- ja CSS-tiedostot sivun yläosan sisällöstä.

Useat tekijät voivat vaikuttaa verkkosivuston nopeuteen, mutta tässä artikkelissa käsitellyillä tekijöillä on suurin vaikutus. Täydellinen verkkosivustoyhtälö voi olla hankala ratkaista, koska tietyt elementit eivät riipu toimistasi. Ne määräytyvät kunkin tilanteen mukaan (esim. maantieteellinen sijainti, Internetin nopeus). Voit kuitenkin optimoida CSS-toimituksen muokkaamalla elementtejä, joita pystyt täysin hallitsemaan. Lisätietoja tästä aiheesta on alla tässä artikkelissa, jonka tiimimme on luonut osoitteessa wpDataTables.

Renderöinnin estävän ja sivun yläosan sisällön määrittäminen

Renderöinnin esto

Renderöinnin esto viittaa elementteihin, jotka estävät verkkosivuston olennaisen sisällön (esim. artikkelin päätekstin) latautumisen ennen kuin koko sivu on latautunut. Hyvä esimerkki tällaisesta elementistä on mikä tahansa ylimääräinen JavaScript tai CSS, joka lisätään verkkosivustolle. Tämä koodi saattaa estää käyttäjää näkemästä mitään selaimessaan, ennen kuin koodi on suoritettu kokonaan, jolloin siitä tulee renderöinnin estävä.

Sivun yläosan sisältö

Kun vierailija siirtyy verkkosivustolle, häntä tervehtii tietty sivuston osa – eli ylin osa. Nähdäkseen loput käyttäjän on vieritettävä alas tai suoritettava muita toimintoja sivustolla. Sisältöä, jonka vierailijat näkevät heti sen jälkeen, kun he ovat käyttäneet sitä, kutsutaan sivun yläosaksi.

Tietoja hahmontamisen estämisestä JavaScriptissä ja CSS:ssä

Selaimet lukevat HTML:ää näyttääkseen sivuston. Tämä on prosessi, jossa on useita vaiheita. Jos selain törmää elementteihin, jotka viittaavat komentosarjaan/tyylitaulukkoon, koodin lukemiseen tarvitaan lisävaiheita. Selaimen on pyydettävä tiedostoa, odotettava vastausta, ladattava tiedosto palvelimelta ja suoritettava tiedosto.

Tietenkin nämä lisävaiheet voivat hidastaa latausaikaa. Muista, että jotkin WordPress-teemat sisältävät enemmän kuin yhden CSS- tai JavaScript-tiedoston. Latausaika voi hidastua dramaattisesti näiden tiedostojen takia. Tästä syystä sinun on poistettava renderöinnin estävät resurssit sivustostasi. Useimmiten nämä eivät ole kriittisiä tiedostoja, joten voit lykätä JavaScriptin jäsentämistä vähentääksesi sivun renderöinnin estämistä, mikä parantaa sivustosi nopeutta.

Renderöinnin estävän JavaScriptin ja CSS:n tunnistaminen

Jos haluat poistaa hahmontamisen estävän JavaScriptin ja CSS:n sivun yläosan sisällöstä, sinun on tunnistettava, mitä nämä elementit ovat. Yksi helpoimmista tavoista tunnistaa ne on avata verkkosivustosi sivun nopeustyökalulla, joka kertoo, mitä ongelmia se kohtaa latauksen aikana. Googlen PageSpeed ​​Insights on yksi tällainen työkalu, jonka pitäisi auttaa sinua löytämään tiedostot, jotka estävät hahmontamisen sivustossasi. Kun olet selvittänyt, mitkä tiedostot ovat, voit jatkaa renderöinnin estävän JavaScriptin poistamista tai järjestämistä uudelleen.

Kuinka poistaa renderöinnin estävät JavaScript- ja CSS-koodit sivun yläosan sisällöstä?

Sinulla on tässä tilanteessa kaksi vaihtoehtoa: opi itse poistamaan renderöinnin estävät JavaScript- ja CSS-koodit sivun yläosan sisällöstä tai käytä laajennusta. Jos olet tekniikkataito ja olet valmis oppimaan, kuinka renderöinnin estävät resurssit poistetaan, käytä jotakin seuraavista tavoista:

Poista JavaScript kriittisestä renderöintipolusta

Kriittisen renderöintipolun tulee sisältää vain verkkosivustolle välttämättömät elementit. Voit siirtää tarpeettomat JavaScript-resurssit pois tältä polulta. Tämä tehdään lisäämällä tiettyjä määritteitä, joissa JavaScript vaaditaan. Ominaisuudet ovat:

• Async: Tämä attribuutti kertoo selaimelle, että sen pitäisi aloittaa resurssien lataaminen välittömästi hitaiden latausaikojen välttämiseksi. Kun resurssit ovat käytettävissä, HTML-jäsennys keskeytetään väliaikaisesti ja resurssit ladataan.
• Defer:  Tämä attribuutti kertoo selaimen lykkäävän resurssien lataamista, kunnes HTML-jäsennysprosessi on valmis. Kun se on valmis, selain lataa ja renderöi skriptit siinä järjestyksessä kuin ne näkyvät verkkosivustolla.

Tarkista, kuinka CSS-resurssit toimitetaan, ja optimoi ne

Poistaaksesi renderöinnin estävät resurssit CSS:stä, sinun on:

• Tunnista sivun yläosan sisällön edellyttämät resurssit ja sisällytä CSS-tyylit HTML:ään.
• Käytä toista attribuuttia tunnistaaksesi ehdottoman vaadittavat CSS-resurssit (mediaattribuutti).
• Lataa CSS-resurssit asynkronisesti (yllä käsiteltyjen attribuuttien avulla).

Luettelo laajennuksista, jotka voivat auttaa sinua poistamaan renderöinnin estävän JavaScriptin helpommin

Automatisoi

Voit poistaa hahmonnusta estävän JavaScriptin ja CSS:n WordPressin sivun yläosan sisällöstä käyttämällä laajennuksia, kuten Autoptimize. Tämä laajennus parantaa WordPress-sivustosi latausaikaa yhdistämällä koodibittejä, pienentämällä koodilohkoja poistamalla tarpeettomia merkkejä (pakkaus) ja niin edelleen. Tekemällä nämä muutokset koodia on helpompi lukea ja tiedostokoko pienenee, mikä vähentää latausaikaa muutamalla sadalla millisekunnissa tai jopa sekunneilla.

Asentaaksesi tämän laajennuksen, sinun on vain käytettävä WordPress-hallintapaneelia ja siirryttävä Plugins-välilehteen. Valitse sitten Lisää uusi -vaihtoehto, joka sijaitsee ikkunan yläosassa. Tämän jälkeen voit etsiä hakupalkista Autoptimize tai muita laajennuksia. Napsauta Asenna nyt, aktivoi se haluamallasi verkkosivustolla ja olet valmis.

W3 Total Cache

Autoptimizella on monia muita vaihtoehtoja, joiden avulla voit poistaa renderöinnin estäviä resursseja WordPressistä. W3 Total Cache -laajennus on yksi parhaista. Tämän laajennuksen mielenkiintoista on, että se sisältää useita lisäominaisuuksia WordPressin optimoimiseksi. Välimuisti edustaa prosessia, jossa tietyt tiedostot tallennetaan käyttäjän tietokoneelle parantaakseen hänen käyttökokemustaan ​​verkkosivustolla. Myöhemmät käynnit helpottuvat ja latausajat paranevat.

Speed ​​Booster Pack

Toinen vaihtoehto on Speed ​​Booster Pack. Kun olet asentanut sen, voit käyttää asetuksia ja valita tarpeitasi vastaavat vaihtoehdot. Laajennus tarjoaa muutamia asetusvaihtoehtoja, kuten komentosarjojen siirtämisen alatunnisteeseen tai JavaScript-tiedostojen jäsentämisen lykkäämisen. Valitsemalla nämä voit poistaa hahmonnusta estävän JavaScriptin ja CSS:n sivun yläosan sisällöstä muutamalla napsautuksella.

JCH Optimize

JCH Optimize on laajennus, joka yhdistää JavaScriptin ja CSS:n ja pienentää tiedostojen kokoa. Siinä on monia muita ominaisuuksia, jotka voivat olla hyödyllisiä pitkällä aikavälillä, mutta se on hyvä eliminoimaan renderöinnin estäviä resursseja. Selaa sen asetuksia ja aktivoi ominaisuudet, jotka vaikuttavat verkkosivustosi kannalta oleellisilta.

Vaikka ongelma vaatii jonkin verran huomiota, sen ratkaiseminen vaikuttaa sivustoosi suuresti. Kun olet oppinut poistamaan renderöinnin estävän JavaScriptin ja CSS:n sivun yläosan sisällöstä, poista mahdollisimman pian kaikki elementit, jotka voivat hidastaa verkkosivustoasi.

Jos pidit tämän artikkelin lukemisesta, jossa kerrotaan renderöinnin estävän JavaScriptin ja CSS:n poistamisesta sivun yläosan sisällöstä, sinun kannattaa tutustua tähän artikkeliin, jossa kerrotaan fonttien vaihtamisesta WordPressissä.

Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten WordPressin iframe -kehyksen upottamisesta, sivutunnuksen löytämisestä WordPressistä, WordPressin mediakirjaston lataamisesta, DDoS-hyökkäyksen pysäyttämisestä ja sivun otsikon piilottamisesta WordPressissä.