CSS-optimalizálás – 21 módszer a webhely felgyorsítására

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

szaporodniHallgassa meg a cikket

Hogyan optimalizáljuk a CSS-t a teljesítmény érdekében.

css egy viszonylag összetett csővezetéken kell áthaladnia, akárcsak HTML és JavaScript. A böngészőnek kell fájlok letöltése a szerverről, majd folytassa az elemzésükkel és alkalmazza őket a DOM-ra. Az optimalizálás szélsőséges szintje miatt ez a folyamat általában meglehetősen gyors – a nem keretrendszerekre épülő kis webprojekteknél a CSS általában csak egy kis részét teszi ki a teljes erőforrás-felhasználásnak.

A keretek megbontják ezt az egyensúlyt. Szereljen be egy JavaScript grafikus felhasználói felületet, például a jQuery UI-t, és figyelje a CSS, JS és HTML exponenciális növekedését. A fejlesztők gyakran nem érzik magukat rosszul – ha egy nagy teljesítményű, nyolcmagos, T3 internettel rendelkező munkaállomáson ülnek, senkit sem érdekel a sebesség. Ez változik, ahogy a késések vagy a CPU-korlátozásokkal rendelkező eszközök életbe lépnek.

CSS optimalizálás többdimenziós megközelítést igényel. Míg a kézzel írt kódot különféle módszerekkel lehet csökkenteni, a keretkódon keresztül kézzel történő iteráció nem hatékony. Ezekben az esetekben az automatikus minimalizáló használata jobb eredményeket ad.
A következő lépések segítenek optimalizálni a CSS-t. Előfordulhat, hogy nem mindegyik alkalmazható közvetlenül a projektjére, ezt tartsa szem előtt.

Használja a Parancsikon CSS-javaslatokat

CSS optimalizálás a gyors oldalbetöltés érdekében.

A leggyorsabb CSS-mondat az, amelyet soha nem elemeznek. Az alábbi meződeklarációhoz hasonló gyorsírási javaslatok használata drasztikusan csökkenti a CSS-fájlok méretét. Sok további gyorsírást találhat a "CSS Shorthand" googlással.

Íme egy példa:

p { margin-top: 1 képpont;
    margó-jobb: 2px;
    margó-alsó:  3 képpont;
    margó-bal: 4 képpont; }

p { árrés: 1px 2px 3px 4px; }

Távolítsa el a nem használt CSS-kódot

A jelölés szükségtelen részeinek eltávolítása nyilvánvalóan hatalmas sebességnövekedést eredményez. A Google Chrome böngésző már kivette ezt a funkciót.

Csak lépjen a Nézet > Fejlesztő > Fejlesztői eszközök menüpontra, nyissa meg a Források lapot a legújabb verzióban, és nyissa meg a parancsmenüt. Ezután válassza ki a "Lefedettség megjelenítése" lehetőséget, és csodálja meg a lefedettség-elemző ablakot, amely kiemeli a nem használt kódot az aktuális weboldalon.

Kényelmesebb módon dolgozhat a CSS-szel

A soronkénti elemzésben való navigáció nem feltétlenül kényelmes. A Chrome Web Performance Audit hasonló információkat ad vissza – csak nyissa meg az eszköztárról, válassza a Nézet > Fejlesztői eszközök > Fejlesztői eszközök > Audit menüpontot, és futtassa. Ha ez megtörtént, megjelenik a problémás elemek listája.

Mindig legyen tudatában a stílusával kapcsolatos problémáknak

Ne feledje, hogy az automatikus CSS-elemzés mindig hibákhoz vezethet. Végezze el a teljes webhely alapos tesztelését, miután lecserélte a CSS-fájlokat kicsinyítettre – soha nem tudhatja, milyen hibákat követett el az optimalizáló. A jövőben pedig egy tisztességes webtárhely segíthet kisimítani a ráncokat webhelyén.

Inline Critical CSS

A külső stíluslapok betöltése a késleltetés miatt időt vesz igénybe – emlékszik valaki a "stílus nélküli tartalom felvillanására"? Így a legfontosabb kódrészletek elhelyezhetők a fejléccímkében.

Azonban próbálja meg nem túlzásba vinni. Ne feledje, hogy a kódot a karbantartási feladatokat végző személyeknek is el kell olvasniuk.

Íme egy példa:

<html>
  <fej>
    <stílus>
      .kék{szín:kék;}
    </stílus>
    </fej>
  <test>
    <div osztály="kék">
      Helló Világ!
    </div>

 

Anti-párhuzamos elemzés

@import struktúrát ad a CSS-kódhoz. Sajnos az előnyök nem ingyenesek: mivel az importok egymásba ágyazhatók, nem elemezhetők párhuzamosan. A párhuzamosabb mód címkék sorozatát használja, amelyeket a böngésző egyszerre kaphat meg.

Példa:

@import url("a.css");
@import url("b.css");
@import url(c.css);
v <link rel="stíluslap" href="a.css"> <link rel="stíluslap" href="b.css"> <link rel="stíluslap" href=c.css>

 

Cserélje le a képeket CSS-re

Néhány évvel ezelőtt mindennapos volt az áttetsző PNG-fájlok készlete, amelyek áttetsző hatásokat hoztak létre a webhelyeken. Jelenleg a CSS-szűrők erőforrás-takarékos alternatívát jelentenek. Például az ezt a lépést kísérő részlet biztosítja, hogy a kérdéses kép önmaga szürkeárnyalatos változataként jelenjen meg.

Példa:

img { -webkit-szűrő: szürkeárnyalatos(100%); /* régi safari */ szűrő: szürkeárnyalatos(100%); }

 

Használjon színkombinációkat

A józan ész azt diktálja, hogy a hatjegyű színleírók a színek kifejezésének leghatékonyabb módjai. Ez nem így van – bizonyos esetekben a rövidített leírások vagy színnevek rövidebbek lehetnek.

cél { háttérszín: #ffffff; }
cél { háttér: #fff; }

 

Távolítsa el a felesleges nullákat és egyeseket

A CSS mértékegységek és számformátumok széles skáláját támogatja. Üdvözöljük az optimalizálás célpontját – a záró és a záró nullák is eltávolíthatók, amint az az alábbi részletben látható. Ne feledje továbbá, hogy a nulla mindig nulla, és egy dimenzió hozzáadása nem növeli a benne foglalt információ értékét.

párnázás: 0,2em;
árrés: 20.0em;
érték: 0px;
párnázás: .2em;
árrés: 20em;
érték: 0;

 

Távolítsa el a felesleges pontosvesszőt

Ez az optimalizálás némileg kritikus, mivel hatással van a kódmódosításokra. A CSS-specifikáció lehetővé teszi az utolsó pontosvessző elhagyását egy tulajdonságcsoportban. Mivel ezzel az optimalizálási módszerrel minimális megtakarítás érhető el, ezért elsősorban az automatikus optimalizálóval dolgozók számára említjük meg.

p {
. . .
betűméret: 1,33 em
}

 

Használjon textúra sprite-okat

Több kis sprite betöltése nem hatékony a protokoll többletterhelése miatt. A CSS sprite-ok kis képek sorozatát egyesítik egyetlen nagy PNG-fájlba, amelyet aztán CSS-szabályok segítségével szétszednek. Olyan programok, mint pl texturepacker , nagyban leegyszerűsíti a létrehozási folyamatot.

.Letöltés {
  szélesség:80 képpont; 
  magasság:31 képpont; 
  háttérpozíció: -160px -160px
}
.download:hover {
  szélesség:80 képpont; 
  magasság:32 képpont; 
  háttérpozíció: -80px -160px
}

 

Törölje a nem kívánt pixelt

A teljesítmény javításának egyik remek módja a CSS szabvány egyik jellemzője. Az egység nélküli numerikus értékeket pixeleknek kell tekinteni – a pixelek eltávolítása két bájtot takarít meg minden számhoz.

h2 {párnázás:0px; árrés:0px;}
h2 {párnázás:0; árrés:0}

 

Kerülje az igényes arányokat

Az elemzés kimutatta, hogy egyes címkék többe kerülnek, mint mások. Az ezt a lépést kísérő lista különösen megköveteli a teljesítményt – kerülje el, ha lehetősége van rá.

border-radius box-shadow transzformáció
    szűrő
    :n-edik gyermek
    pozíció: rögzített;
    stb.

 

Távolítsa el a felesleges helyeket

A szóközök – gondoljunk csak a tabulátorokra, a kocsivisszaadásokra és a szóközökre – megkönnyítik a kód olvasását, de nem sokat tesznek az elemző szemszögéből. Szállítás előtt távolítsa el őket. Még jobb, ha delegálja ezt a munkát egy shell-szkriptre vagy hasonló eszközre.

Távolítsa el a nem kívánt megjegyzéseket

A kommentek szintén haszontalanok a fordító számára. Hozzon létre saját elemzőt, hogy eltávolítsa őket a kézbesítés előtt. Ez nem csak sávszélességet takarít meg, hanem megnehezíti a támadók és klónozók számára, hogy kiderítsék, mi van a kód mögött.

Használjon automatikus tömörítést

A Yahoo UI csapata olyan alkalmazást hozott létre, amely sok tömörítési munkát végez. JAR-fájlként érkezik, és az Ön által választott JVM-mel futtatható.

java -jar yuicompressor-xyzjar
Használat: java -jar yuicompressor-xyzjar [opciók] [bemeneti fájl] Globális beállítások -h, --help Ezt az információt jeleníti meg --type Meghatározza a bemeneti fájl típusát

 

Fuss az NPM-ből

Ha inkább integrálni szeretné a terméket a Node.JS-be, látogasson el a következő oldalra npmjs.com/package/yuicompressor . A rosszul karbantartott tárház egy sor burkolófájlt és egy JavaScript API-t tartalmaz.

var kompresszor = igényelnek("yuikompresszor");
 kompresszor.borogatás('/path/to/ fájl vagy JS karakterlánc', {
    //Kompresszor opciók:
    karakterkészlet: "utf8",
    típus: "js",

 

Tartsa ellenőrzés alatt Sasst és másokat

Míg a CSS-választó teljesítménye nem olyan kritikus, mint néhány évvel ezelőtt (lásd a forrást), az olyan keretrendszerek, mint a Sass, néha rendkívül összetett kódot állítanak elő. Időnként tekintse át a kimeneti fájlokat, és gondolja át, hogyan optimalizálhatja az eredményeket. Megosztanád a csapattal az eredményeket? Tárolja a fájlokat nyilvános felhőtárhelyen.

Gyorsítótár beállítása

A régi mondás szerint az a leggyorsabb fájl, amelyik soha nem megy át a vezetéken. A böngésző gyorsítótárának lekérdezése ezt hatékonyan éri el. Sajnos a gyorsítótárazási fejlécek beállítását a szerveren kell elvégezni. Használja ki jól a képernyőképeken látható két eszközt, ezek segítségével gyorsan elemezheti a változtatások eredményeit.

gyorsítótár törlése

A tervezők gyakran nem szeretik a gyorsítótárazást, mert félnek a közelgő változásokkal kapcsolatos problémáktól. A probléma megoldásának egy ügyes módja a fájlnévvel ellátott címkék elhelyezése. Sajnos az ezt a lépést kísérő kódban leírt séma nem mindenhol működik, mivel néhány proxy megtagadja a "dinamikus" útvonalú fájlok gyorsítótárazását.

<link rel="stíluslap" href="style.css?v=1.2.3">

 

Ne felejtsd el az alapokat

A CSS optimalizálás csak egy része az optimalizálási erőfeszítésnek. Ha a szervere nem használ HTTP/2 és gzip tömörítést, sok időt veszít az adatátvitel. Szerencsére ennek a két problémának a megoldása meglehetősen egyszerű. A példám számos beállítást mutat be egy .htaccess fájlt használó, széles körben használt Apache-kiszolgálóhoz. Ha egy másik rendszeren találja magát, tekintse meg a szerver dokumentációját.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Nagyon örülök, ha ez a cikk hasznos lesz az Ön számára. Nos, továbbra is új releváns anyagokat adok hozzá ehhez a témához.

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: 8

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

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

1 válasz

  1. Илья szerint:

    Régóta követem a projektjét. Nézem a felépülést, nagyon jó látni, hogy jó irányba változnak a változások. Tetszik a designod és az elrendezésed. Látható, hogy a minőségen dolgozik. Köszönjük az erőfeszítéseket.

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

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

három − három =