Kuinka optimoida CSS-toimitus WordPressissä pienellä vaivalla

CSS voi parantaa verkkosivustosi yleisilmettä ja sitä on helppo käyttää, muokata ja ylläpitää. Ainoa haittapuoli on mahdollisuus hidastaa sivusi latausnopeutta. Siksi tämä WpDataTables -tiimimme luoma artikkeli näyttää sinulle, kuinka voit optimoida CSS-toimituksen WordPressissä.

Jos CSS:ää ei toimiteta hyvin, selaimen on käsiteltävä ja ladattava tiedot ennen kuin se on valmis hahmontamaan sivusi. Tämä tarkoittaa, että vierailijat näkevät sivusi viiveellä ja voivat napsauttaa sen pois päältä, koska se ei näytä latautuvan. Tästä syystä CSS-toimituksen optimointi on tärkeää, joten lue eteenpäin oppiaksesi välttämään sudenkuopat, jotka voivat hidastaa verkkosivuasi.

Kaikki CSS-toimituksesta

Pohjimmiltaan CSS, Cascading Style Sheet, saa verkkosivustot näyttämään houkuttelevilta, ja ilman niitä verkkosivustot olisivat edelleen jumissa 90-luvulla.

Web-sivut, mukaan lukien WordPress-verkkosivut, on muotoiltu CSS:llä. Jokainen WordPress-teema käyttää style.cc-tiedostoa tyylikkään ilmeen luomiseen. Lisäosien lisääminen lisää tyylisivuja, esimerkiksi jos lataat widget-laajennuksen, se lisää ylimääräisen CSS-tiedoston (tyylitaulukon) halutun ulkoasun luomiseksi.

CSS-skriptit ladataan ennen kuin sivustosi on näkyvissä, mikä tarkoittaa, että selaimesi ei näytä sisältöä ennen kuin annetut CSS-tiedot on käsitelty. Tämä johtaa renderöinnin estoon, joka tapahtuu, kun selain lataa kaikki CSS-komentosarjat ennen sivuston näyttämistä.

CSS:ää voidaan käyttää useilla tavoilla toimitukseen WordPressissä useilla eri asetuksilla.

Riippumatta siitä, miten olet määrittänyt verkkosivusi, CSS voi itse asiassa auttaa hahmottamaan sivustosi nopeammin.

Renderöinnin estävä JavaScript ja CSS – mikä se on?

Nopeasti latautuvia sivustoja odotetaan korkean teknologian yhteiskunnassamme, ja se on elintärkeää korkean tason SEO:lle. Googlen PageSpeed ​​Insights voi auttaa sinua ymmärtämään sivustosi latausnopeuden. Joskus varoitus ponnahtaa näkyviin, kun käytät työkalua – "Poista renderöinnin estävä JavaScript ja CSS sivun yläosan sisällöstä", mutta tässä on ratkaisu tähän ongelmaan.

HTML-koodin renderöinti on välttämätöntä, ennen kuin selain voi näyttää minkä tahansa verkkosivun. Kun se tekee tämän, se törmää komentosarjoihin ja tyylitaulukoihin, ja sen on pysähdyttävä pyytääkseen ja ladatakseen kyseistä tiedostoa. Sitten se suorittaa sen ja jatkaa HTML:n läpikulkua. Useimmat WordPressin teemat ja laajennukset käyttävät monia JavaScript- ja/tai CSS-tiedostoja, minkä vuoksi sivustosi yhden sivun hahmontaminen voi kestää kauan.

Tämä estää sivustosi kävijöitä näkemästä verkkosivujen tietoja nopeasti, ja mikä pahentaa tilannetta, näitä komentosarjoja ei tarvitse ladata välittömästi.

Näitä tarpeettomia tiedostoja kutsutaan renderöinnin estoiksi CSS:ksi ja JavaScriptiksi. Jatka lukemista saadaksesi selville, mitä ne ovat ja kuinka voit poistaa ne WordPress-sivustoltasi.

Käytä Google Pagespeed Insightsia löytääksesi renderöinnin estävän CSS:n ja JavaScriptin

Hitaasti latautuvat selaimet yrittävät yleensä käsitellä huomattavan määrän CSS-koodia eivätkä siksi pysty renderöimään sivua. Kaikki CSS-resurssit eivät kuitenkaan estä hahmonnusta.

Verkkosivustot näkyvät tyhjinä tai vain osittain näkyvissä, jos CSS on ladattu väärin tai ellei CSS:ää ole optimoitu, mikä voi johtaa vääriin kirjasimiin tai asetteluihin.

On tärkeää ymmärtää, mitkä elementit ovat välttämättömiä ja mitkä eivät, jotta CSS:n toimittaminen voidaan optimoida.

Aloita renderöinnin estoprosessi testaamalla ensin sivustosi nopeus Google PageSpeed ​​Insightsilla.

Näin:

• Siirry Google PageSpeed ​​Insights -sivulle
• Kopioi ja liitä sivustomme URL-osoite asiaankuuluvaan kenttään
• Paina ‘Analysoi’
• Tämä johtaa raporttiin. Huomaa komentosarjat, jotka tulevat näkyviin "Eliminate renderöinnin estävä JavaScript ja CSS"

Yleensä nämä CSS:t ovat tärkeitä sivustollesi:

• Sivun yläosan tyylit
• Teemat
• Taustan väri
• Muut sivuston tyypistä riippuen

Nämä CSS:t ovat yleensä vähemmän tärkeitä:

• Sivun alapuolella CSS
• CSS, joka on suunnattu muille laitteille

Vähennä renderöinnin estäviä komentosarjoja

On mahdollista minimoida sivustossasi olevan renderöinnin estävän skriptin määrä seuraavilla tavoilla:

• CSS:n ja JavaScriptin määrän vähentäminen. Voit poistaa tarpeettoman tyhjän tilan ja kommentit
• CSS:n ja JavaScriptin yhdistäminen. Ota eri .css- ja .js-tiedostot ja lisää ne yhteen, jolloin tiedostoja on vähemmän.
• JavaScriptin latausta lykätään. Voit saada ne latautumaan viimeisenä, kun kaikki muu on latautunut, käyttämällä asynkronista latausta.

WordPress käyttää yhtä yhdistettyä suodatinta käyttöliittymän komentosarjojen rekisteröintiin, jotta voit nähdä saapuvat CSS- tai JavaScript-tiedostot. Et ehkä tiedä mitä etsiä, joten laajennuksen käyttäminen on hyödyllistä.

lCSS:ää ei tarvita kaikilla sivuilla jatkuvasti. Se on kuitenkin olemassa syystä ja käytät sitä kaikkea jossain vaiheessa, jolloin tarvitaan kriittinen renderöintipolku.

CSS:n eri osia voidaan vaatia Ota yhteyttä -sivulta ja Tarjoamamme palvelut -sivulta. Kun joku lataa Tarjoamamme Palvelut -sivun, vain Ota yhteyttä -sivulle tarkoitettuja CSS-osia ei silloin tarvita, mutta CSS on silti ladattuna, koska verkkovastaava tarvitsee kaikki CSS-tiedostot ladatakseen verkkosivun renderöimiseksi.

Siksi verkkosivusto tarvitsee kaiken CSS:n, mutta ei kaikkea CSS:ää jokaiselle sivulle. Siksi kriittinen CSS on erilainen jokaisella sivulla ja sivustosi jokaisella käyttäjällä.

Sivun yläpuolella renderöinnin estävä CSS ja JavaScript ovat vakava ongelma, ja ne on korjattava mahdollisimman pian.

On epärealistista odottaa sivustosi saavan 100/100, joten pyri saavuttamaan hyvät pisteet, jotka antavat vierailijoillesi nopean latauksen.

Älä poista hyvän käyttökokemuksen edellyttämiä skriptejä; nämä ovat tärkeämpiä kuin yrittäminen saavuttaa korkeampi tulos.

Kriittisen renderöintipolun optimointi WordPressissä

Kriittinen renderöintipolku ilmaisee järjestyksen, jossa selain suorittaa tehtäviä sivusi renderöimiseksi, eli järjestystä, jossa se lataa ja käsittelee CSS:n, HTML:n ja JavaScriptin ja näyttää ne selaimessa.

Sivun yläosan sisältö on tärkeä, koska tämä on ensimmäinen osa, jonka käyttäjä näkee. Sivun alapuolella olevan sisällön lataamiseen on enemmän aikaa, koska käyttäjän on vieritettävä nähdäkseen sen.

Ladataksesi taittoosuuden mahdollisimman nopeasti, sinun on:

• Luo HTML-koodi niin, että se priorisoi sivun yläosan osien lataamisen
• Minimoi CSS:n, JS:n ja HTML:n käyttämä data

Lisää selityksiä löytyy Googlen PageSpeed-oppaasta. Joskus ATF:n lataamiseen tarvitsemasi tiedot ovat enemmän kuin ruuhkaikkuna (joka on 14,6 kt). Tässä tapauksessa verkkomatkoja on tapahduttava enemmän palvelimelta selaimeen ja takaisin. Mobiiliverkot, joissa on korkea viive, huomaavat, että tämä estää sivua latautumasta.

Selain rakentaa DOM:n osa kerrallaan, mikä voi lyhentää ATF:n hahmontamiseen tarvittavaa aikaa. Rakenna HTML-koodi siten, että sivun yläosan sisältö latautuu ensin ja muu sivu sen jälkeen.

Optimointiprosessi vaatii jatkuvaa parantamista, seurantaa ja mittaamista.

Vaikka CSS:ää voidaan käyttää useilla tavoilla luomaan tyylikkäitä verkkosivuja, tärkeintä on, että se latautuu nopeasti. Puhdista koodi ja noudata yllä olevia ohjeita, jotta sivusi latautuvat nopeammin.

Jos pidit tämän artikkelin lukemisesta CSS-toimituksen optimoinnista WordPressissä, sinun kannattaa tutustua tähän artikkeliin, jossa kerrotaan sisällönkuvauskenttien lisäämisestä WordPressiin ilman laajennusta.

Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten pdf-tiedoston upottamisesta WordPressiin, excelin upottamisesta html :ään, esitellyn kuvan piilottamisesta WordPress -julkaisussa, kuinka selvittää, onko sivusto WordPress, kuinka poistaa WordPress-asennus cPanelista. ja kuinka luoda Amazonin kaltainen verkkosivusto.