5 vinkkiä nopeaan CSS: ään

Oletko ajatellut sivustosi CSS: n kokoa? Jos tyylisivusi ilmestyy, se saattaa viivästyttää sivun hahmontamista.

Vaikka CSS ei ole suurin tarjoamasi resurssityyppi, se on yksi ensimmäisistä, jotka selain löytää. Koska selainta on estetty renderöimästä sivua, kunnes CSS on ladattu ja jäsennetty, sen on oltava mahdollisimman laiha. Tässä on viisi vinkkiä, joiden avulla pääset sinne.



Onko sinulla monimutkainen sivusto? Tarvitset täydellisen sivujen ylläpito palvelu. Tai jos haluat tehdä sivuston ilman hätää, kokeile a verkkosivujen rakentaja .



01. Käytä matalia valitsimia

Vanhempasi kertoivat sinulle, että mataluus ei ole hyve, mutta CSS: n suhteen he ovat väärässä. Jatkuvasti käytettynä matalat valitsimet voivat leikata kilotavut pois suurista tyylilehdistä. Valitse tämä valitsin:

nav ul li.nav-item

Tämä voidaan ilmaista lyhyesti:



.nav-item

Sen lisäksi, että selain auttaa pitämään CSS: n ohut, selain tekee myös matalien valitsimien kohteet nopeammin. Selaimet lukevat valitsimia oikealta vasemmalle. Mitä syvemmät valitsimet ovat, sitä kauemmin selain renderöi ja renderöi uudelleen elementit, joihin valitsimia käytetään. Monimutkaisissa DOM: issa, jotka valuvat usein, lyhyet valitsimet voivat myös vähentää jankia.

Ihannetapauksessa haluat, että valitsimet ovat mahdollisimman matalia, mutta tämä ei tarkoita, että sinun pitäisi leikata kaikki luuhun. Joskus tarvitset lisäspesifisyyttä komponenttien laajentamiseksi. Löydä oikea tasapaino, mutta ole myös käytännöllinen.

02. Käytä lyhytominaisuuksia

Lyhyt CSS: n käyttö nopeuttaa sivustoasi



Lyhyt CSS: n käyttö nopeuttaa sivustoasi

Tämä tuntuu järkevältä, mutta yllätätte siitä, kuinka usein pitkäikäisiä ominaisuuksia käytetään turhaan. Tässä on esimerkki joistakin käytössä olevista pitkäikäisistä ominaisuuksista:

font-size: 1.5rem; line-height: 1.618; font-family: 'Arial', 'Helvetica', sans-serif;

Se on paljon CSS: ää! Siivotaan tämä:

kuinka tehdä valolaatikko piirtämistä varten
font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif;

tehdä Lyhytaikainen omaisuus tiivistää useita ilmoituksia käteväksi yksilinjaiseksi, joka vie paljon vähemmän tilaa.

Edellä esitetyssä esimerkissä lyhytnimi käyttää noin 40 prosenttia vähemmän tilaa kuin sen pitkäikäinen ekvivalentti. Se ei ole ensi silmäyksellä yhtä luettavissa, mutta syntaksista tulee toinen luonne sen jälkeen, kun olet käyttänyt jonkin aikaa sen käyttämiseen.

Tietysti, tehdä ei ole ainoa käytettävissäsi oleva lyhenne. Esimerkiksi, marginaali voidaan käyttää pidempien ominaisuuksien, kuten marginaali , marginaali-oikea ja niin edelleen.

pehmuste omaisuus toimii samalla tavalla. Mozilla Developer Network tarjoaa hyödyllisen luettelon CSS: n puhdistamiseen lisää tavoista lyhytominaisuusviitteet .

Entä jos sinun on ohitettava arvo alaspäin kaskadissa? Oletetaan esimerkiksi, että sinulla on otsikkoelementti, jonka on muutettava kirjasinkokoa suurempien näyttöjen kohdalla.

Tässä tapauksessa sinun tulisi käyttää tarkempaa Fonttikoko kiinteistö sen sijaan:

h1{ font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif; } @media (min-width: 60rem){ h1{ font-size: 2rem; } }

Tämä ei ole vain kätevää, vaan myös lisää komponenttien joustavuutta. Jos jokin muu kohde-etuuden osa tehdä Ominaisuutta muokataan, nämä muutokset suodattuvat suurempiin näyttöihin. Tämä toimii hyvin komponenttien ohituksissa, joissa uusi konteksti vaatii erilaista kohtelua.

03. Käytä esilatausresurssivihjettä

esilataus resurssivihje voi antaa selaimelle etukäteen ladata sivustosi CSS: ää. esilataus resurssivihje käskee selainta aloittamaan sisällön varhaisen haun.

Voit asettaa sen arvoksi tag HTML: ssä:

Tai HTTP-otsikkona palvelimen määrityksissä:

Link: ; rel=preload; as=style

Molemmissa skenaarioissa esilataus antaa selaimelle etukäteen latauksen /css/styles.css . Käyttämällä esilataus HTTP-otsikossa on suositeltava, koska tämä tarkoittaa, että selain löytää vihjeen aikaisemmin vastauksen otsikoista eikä myöhemmin vastauksen rungosta.

Toinen syy käyttää esilataus HTTP-otsikossa on, että se käynnistää palvelimen push-tapahtuman useimmissa HTTP / 2-toteutuksissa. Palvelinpush on mekanismi, jolla omaisuuserät työnnetään ennakolta asiakkaalle, kun sisältöpyyntöjä tehdään, ja se tarjoaa CSS: n kaltaisia ​​suorituskykyetuja.

Palvelinpush ei ole käytettävissä HTTP / 1: ssä. Kuitenkin käyttämällä esilataus HTTP / 1-ympäristössä voi silti parantaa suorituskykyä.

04. Tyhjennä irtisanomisia csscss: n avulla

csscss analysoi kaikki antamasi CSS-tiedostot ja ilmoittaa, mitkä sääntöjoukot ovat kopioita ilmoituksia

csscss analysoi kaikki antamasi CSS-tiedostot ja ilmoittaa, mitkä sääntöjoukot ovat kopioita ilmoituksia

Se voi maksaa tarkistaa CSS: stä päällekkäiset säännöt redundanssitarkistimella. Otetaan esimerkiksi Ruby-pohjainen työkalu csscss.

Ruby-käyttäjät voivat asentaa sen seuraavilla tavoilla:

gem install csscss

Asennuksen jälkeen voit tarkistaa CSS: stäsi irtisanomisia näin:

csscss -v styles.css

Tämä komento listaa mitkä valitsimet jakavat sääntöjä, jotka voit kopioida säästääksesi tilaa:

{h1} AND {p} share 3 declarations - color: #000 - line-height: 1.618 - margin: 0 0 1.5rem

Voit siirtää päällekkäisiä sääntöjä yhdellä valitsimella:

h1, p{ color: #000; line-height: 1.618; margin: 0 0 1.5rem; }

Olisit yllättynyt siitä, kuinka paljon tilaa tämä prosessi voi säästää suurissa projekteissa. Käytä --auta vaihtoehto nähdäksesi lisää komentoja, joilla voit säätää asioita edelleen.

05. Mene ylimääräinen maili cssnanolla

cssnano vie kauniisti muotoillun CSS: n ja suorittaa sen monien kohdennettujen optimointien avulla

kuinka piirtää isometrinen piirustus askel askeleelta
cssnano vie kauniisti muotoillun CSS: n ja suorittaa sen monien kohdennettujen optimointien avulla

Voit käyttää kirsikkaa ylhäällä cssnano - solmu ja PostCSS-riippuvainen työkalu. cssnano ei vain minimoi CSS: ää, se tekee monia kohdennettuja optimointeja, jotka voivat vähentää CSS: ääsi entisestään. Asenna se järjestelmään nopeudella npm:

npm i -g cssnano-cli

Käytä sitten sitä CSS: n optimointiin:

cssnano styles.css optimized-styles.css

Jos komentojen suorittaminen ad hoc ei ole sinun tyylisi, voit automatisoida cssnanon rakennusjärjestelmällä. Näin voit käyttää cssnanoa gulp-tiedostossa:

const gulp = require('gulp'); const postcss = require('gulp-postcss'); const cssnano = require('cssnano'); const buildCSS = ()=>{ return gulp.src('css/styles.css') .pipe(postcss([cssnano()]) .pipe(gulp.dest('css/optimized')); }; const watch = ()=>{ gulp.watch('css/styles.css', buildCSS); }; exports.buildCSS = buildCSS; exports.watch = watch;

buildCSS tehtävä lukee CSS: n, johon kirjoitat css / styles.css , sitten putki optimoidun ulostulon css / optimoitu hakemistoon. katsella tehtävä alkaa buildCSS aina kun tapahtuu muutoksia css / styles.css .

katsella tehtävä voidaan sitten kutsua päätelaitteeseen näin:

gulp watch

Muutamalla säätöä voit rakentaa työnkulun, joka suorittaa tämän erityisen optimoinnin muiden CSS-toimintojen lisäksi, kuten Sass / Less-tiedostojen luominen, automaattinen korjaus ja paljon muuta.

Haluatko tallentaa verkkosivustosi sivut? Vie PDF-tiedostoina ja tallenna luotettavasti pilvitallennus .

Tämä artikkeli ilmestyi alun perin netto , maailman johtava verkkosuunnittelijoiden aikakauslehti. Tilaa täällä .

Aiheeseen liittyvät artikkelit: