A CSS optimalizálása a webhely sebességéhez – 9 módszer

nyomtatás · Время на чтение: 6мин · Автор: · Опубликовано · Обновлено

szaporodniHallgassa meg a cikket

Weboldal css optimalizálás.

A lassú oldal mindig rossz! Szerintem a kifejezés a CSS-kód optimalizálása a webhely felgyorsítása érdekében, gyakran jelen van a keresésben is 301-es átirányítás vagy robots.txt. Vagy talán Ön az a fajta fejlesztő, aki úgy küld webhelyeket, hogy nem törődik az optimális teljesítménnyel?

Ha az első lehetőséghez tartozik, akkor ez a cikk az Ön számára készült. Most elmondom a 9 legjobb módszert a CSS optimalizálására. Ezek a tippek felgyorsíthatja webhelyét és emelkedik a kibocsátás. Ez a hatás jelentősen megnöveli az új látogatók áramlását webhelyére.

A webhely sebességének jelentősége az organikus rangsorolás szempontjából

A CSS-kód optimalizálása a webhely gyorsabb betöltéséhez.

Meg fog lepődni a gyorsabb weboldalak fontosságán. Ennek számos fő oka van, de ezek hatása jelentősen befolyásolja a helyszín helyzetét. Fő ok:

  1. A webhely látogatói nem szeretnek sokáig várni az oldal teljes betöltésére;
  2. Ügyfelei minden bizonnyal visszatérnek az oldalra, ha az gyorsan működik; A gyorsabb webhelyek mindig előrébb helyezkednek el a keresőkben
  3. A webhely sebessége is hozzáadott értéket ad az Ön SEO stratégiájához;
Ezek a források egyszerűen fantasztikusak, és nagyszerű benyomást keltenek. Most mit tenne webhelye gyorsabbá tétele érdekében? Természetesen a helyzet javítása sok lépést igényelhet Öntől.

Például a szerver, a RAM, a tárhely vagy általában a hardver frissítése. De tudtad, hogy a lassú webhely fő oka a forráskódban rejlik? Az optimalizált CSS hiánya a leggyakoribb ok. Ez azt jelenti, hogy a stíluslap fájlméretének akár néhány kilobájttal történő csökkentése is jelentős hatással lesz az oldal betöltési idejére.

Használja az Image Sprite-et

A CSS Sprites több kép egyetlen képfájlba való kombinálásának eszköze. A teljesítmény javítása érdekében használja tovább a webhelyen. A képi sprite-ok használata régi technika. Ha a CSS-fájl méretének csökkentéséről és az oldalbetöltési idők csökkentéséről van szó, ez a technika kötelező.

Az Image Sprite lehetővé teszi, hogy a képeket egyetlen nagy .png fájlba csomagolja. Ez a módszer csökkenti a HTTP-kéréseket és felgyorsítja az oldalak betöltési idejét. Az image sprite nagyszerű választás, ha sok ikont és grafikát használ webhelyén. Ez az opció jelentősen csökkenti a több kép kinyerésének többletköltségét.

CSS optimalizálás

CSS rövidítése egyszerűen tömöríti a fájlt egy új fájlba, a lehető legkevesebb szóközzel. Minél kisebb a kód, annál gyorsabban olvassa be a felhasználó böngészője.

Természetesen nem kell ezt manuálisan megtenni, mivel vannak automatikus kompresszorok az interneten. Csak az ilyen egyszerű online eszközöknek köszönhetően lehetséges a tömörítés néhány perc alatt elvégezni. Íme egy ilyen minifier: http://www.cssminifier.com

Csökkentse a felesleges kódot

Nincs szükségünk ismételt kódra. Az ilyen kód nagyban lelassítja az elemek betöltését. A böngészőnek többször is át kell mennie a duplikált kódon, ezzel a másodperc töredékét fordítva erre.Az oldalbetöltési sebesség növelésének másik trükkje a felesleges kódok csökkentése. Ez a javulás a redundáns vagy duplikált kódok ellenőrzésével érhető el.

Tegye a CSS-táblákat a fejlécbe és a JS-szkripteket a láblécbe

Jó gyakorlat, ha a stíluslapot felülre (a head tagek közé), a JavaScript kódot pedig alulra helyezi. Győződjön meg arról, hogy a kód az oldal többi része előtt töltődik be. A fő oka annak, hogy a JavaScriptet a webhely aljára helyezzük, a nagy mérete. Valamint további hatása a webhely sebességére. Ezért az ilyen szkriptek a webhely alján vannak elhelyezve. Ez lehetővé teszi számukra, hogy az oldal fő összetevői után töltsenek be.

Az oldal tetején található tartalom stílusához szükséges alapvető stílusok be vannak illesztve, és azonnal alkalmazzák a dokumentumban. A teljes small.css fájl az oldal kezdeti megjelenítése után betöltődik. Stílusait a rendszer a betöltés befejezése után alkalmazza az oldalra anélkül, hogy blokkolná a kritikus tartalom kezdeti megjelenítését.

Ne ágyazzon be big data URI-kat

Legyen óvatos, amikor adat-URI-kat ágyaz be stílusfájlokba. Míg a kis adat-URI-k CSS-ben való szelektív használata ésszerű lehet, a nagy adatú URI-k beágyazása azt eredményezheti, hogy a CSS nagyobb lesz a hajtás tetején, ami lelassítja az oldal megjelenítési idejét.

Ne ágyazzon be CSS-attribútumokat

A CSS-attribútumok HTML-elemekbe (például ) beágyazását lehetőség szerint kerülni kell, mert ez gyakran szükségtelen kódmásoláshoz vezet. Ezenkívül a HTML-elemek soron belüli CSS-jét alapértelmezés szerint blokkolja a Content Security Policy (CSP).

CSS fájlok szétválasztása

Szintén szétválaszthat CSS-fájlokat, azaz különböző stíluslapokat. Például, ha több böngészőt, például IE-t, Chrome-ot vagy Firefoxot céloz meg. Például ahelyett, hogy egy stíluslapon ellenőrizné a CSS-feltöréseket, az IE feltételes utasításaival betölthet egy másik stíluslapot (például IE6 esetén), így Chrome használatakor nem fog IE-kódot betölteni. Ez nagymértékben csökkenti a fájl méretét.

Csökkentse a szóközök számát a kódban

Mindig próbálja csökkenteni a szóközök számát a stíluslapon. A fehérterület növelése szabad bájtokat foglal el. Ez különbséget tehet a gyorsabb és a lassabb webhely között nagyon nagy projektekben.A szóközök számának csökkentésével a fájl mérete csökken. Így a kisebb súly miatt felgyorsítjuk a fájl letöltését.

Dokumentálja a kódját

Lehetőség szerint dokumentálnia kell a kódját. Az olyan megjegyzések használata, mint a /* Megjegyzés itt */ segíthet azonosítani a haszontalan kódot. Bár a megjegyzések hozzáadása sok helyet foglal el, könnyen elhanyagolható, egyes esetekben a haszontalan megjegyzések egyszerűen törlődnek. Ez a technika lehetővé teszi, hogy nagyon produktív módon megszabaduljon a CSS túlsúlyától.

Rendszerezze a kódot

CSS kód optimalizálása olyan technika, amelyről sokan nem is gondolnának beszélni. Valójában sok szinten a kód rendszerezése jelentősen csökkentheti a fájlméretet. Ennek eredményeként növelje webhelye sebességét. Kíváncsi vagyok, hogyan? Ez nagyon egyszerű.

Helyezze a CSS-osztályokat a megfelelő ágakba. Ez a módszer minimális duplikációt garantál. A rendezetlen kód gyakori probléma a modern webdizájnban. Egyes forgatókönyvekben a kócos kód hierarchikus ágakba való rendszerezése elegendő ahhoz, hogy webhelye betölthető legyen. Próbálja elkerülni a CSS-feltöréseket egyetlen stíluslapon. Ehelyett használja az 5. és 8. pontban jelzett módszereket.

KISS technika (Keep it Simple Stupid)

Az utolsó szó az, hogy győződjön meg arról, hogy minden, amit csinál, összhangban van a KISS technikával. A KISS a Keep it Simple Stupid rövidítése. Ha újra létrehoz egy fájlt! Akkor mindenképpen jó úton kell haladnia a szervezett, jól megírt, kevésbé redundáns és tiszta kód felé. Mint látható, a CSS optimalizálása nem nehéz. Különösen bizonyos esetekben meg lehet boldogulni a cikk néhány bekezdésével. Ezek a technikák időnként felgyorsítják a webhely működését.

Köszönjük, hogy elolvasta Nicola Topot

Mennyire hasznos a poszt?

Kattintson a smiley-ra az értékeléshez!

átlagos értékelés 4.9 / 5. Értékelések száma: 16

Még nincsenek értékelések. Értékelje először.

Читайте также:

Добавить комментарий

Az e-mail címet nem tesszük közzé. Обязательные поля помечены *

3 × 5 =