21 módszer a CSS optimalizálására és webhelyének felgyorsítására

Az optimalizált CSS segítségével gyorsítsa fel webhelyeit

A CSS-nek viszonylag összetett folyamaton kell keresztülmennie, csakúgy, mint a HTML és a JavaScript. A böngészőnek le kell töltenie a fájlokat a szerverről, majd folytatnia kell a elemzést és a DOM-ra való alkalmazást. Az extrém szintű optimalizálás miatt ez a folyamat általában elég gyors - kisebb, nem keretrendszeren alapuló webes projektek esetében a CSS általában csak a teljes erőforrás-felhasználásnak csak egy kis részét teszi ki.

A keretek felborítják ezt az egyensúlyt. Tartalmazzon egy JavaScript GUI-veremet, például a jQuery UI-t, és nézze meg, ahogy a CSS, JS és HTML méretek az egekbe szöknek. Gyakran a fejlesztők általában a csipet utoljára érzik magukat - amikor a T3 internettel ellátott, erős, nyolcmagos munkaállomás mögött ülnek, senki sem törődik a sebességgel. Ez változik, mivel a késleltetés vagy a processzor által korlátozott eszközök lejátszódnak.

A CSS optimalizálása többdimenziós megközelítést igényel. Míg a kézzel írott kódot különféle technikákkal lehet lecsökkenteni, a keretrendszer kézi átírása nem hatékony. Ezekben az esetekben az automatizált minimalizáló használata jobb eredményeket hoz.



A következő lépésekkel a CSS optimalizálásának világába utazhatunk. Lehet, hogy nem mindegyik közvetlenül alkalmazható a projektjén, de ne feledje.

01. Használjon gyorsírást

Gyorsítsa fel webhelyeit optimalizált CSS-sel:

Rövidítéssel CSS-fájljai sokkal kisebbek lehetnek

A leggyorsabb CSS záradék az, amelyet soha nem lehet értelmezni. Gyorsmondatok használata, például az alább látható margó deklaráció, gyökeresen csökkenti a CSS-fájlok méretét. Számos további gyorsírás-űrlap található a „CSS Shorthand” guglizásával.

p { margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; } p { margin: 1px 2px 3px 4px; }

02. Keresse meg és távolítsa el a fel nem használt CSS-t

Gyorsítsa fel webhelyeit optimalizált CSS-sel:

Ha a kód nem csinál semmit, akkor szabaduljon meg tőle

A felár szükségtelen részeinek felszámolása nyilvánvalóan hatalmas sebességnövekedést okoz. A Google Chrome böngészője már nem elérhető. Egyszerűen válassza a Nézet> Fejlesztő> Fejlesztői eszközök menüpontot, nyissa meg a Források lapot egy legújabb verzióban, majd nyissa meg a Parancsmenüt. Ezt követően válassza a Lefedettség megjelenítése lehetőséget, és nézze meg a lefedettség-elemzési ablakot, kiemelve a fel nem használt kódot az aktuális weboldalon.

03. Csináld kényelmesebb módon

Gyorsítsa fel webhelyeit optimalizált CSS-sel:

A Web Performance Audit használatával egyszerűen vághatja le a felesleges kódot

A soronkénti elemzésben történő navigálás nem feltétlenül kényelmes. A Chrome internetes teljesítmény-ellenőrzése hasonló információkat szolgáltat - egyszerűen nyissa meg az eszköztáron a Nézet> Fejlesztő> Fejlesztői eszközök> Auditok elemet, és hagyja futni. Ha elkészült, megjelenik a problémás elemek listája.

04. Legyen tisztában a problémákkal

Ne feledje, hogy a CSS automatizált elemzése mindig hibákhoz vezethet. Végezzen alapos tesztet az egész weboldalon, miután kicserélte CSS fájljait a kicsinyített fájlokra - soha nem lehet tudni, hogy az optimalizáló milyen hibákat okozott.

05. Inline kritikus CSS

A külső stíluslapok betöltése késleltetés miatt időbe kerül - emlékszik valaki a 'stílus nélküli tartalom villanására'? A legkritikusabb bitek tehát a fejléc címkéjébe kerülhetnek. Ügyeljen arra, hogy ne vigye túlzásba. Ne feledje, hogy a kódot a karbantartási feladatokat végző embereknek is el kell olvasniuk.

.blue{color:blue;} Hello, world!

06. Engedélyezze a párhuzamos elemzést

Az @import struktúrát ad hozzá a CSS-kódhoz. Sajnos az előnyök nem ingyenesek: mivel az import fészkelhet, párhuzamos elemzésük nem lehetséges. Párhuzamosabb módon a címkék, amelyeket a böngésző egyszerre tud letölteni.

@import url('a.css'); @import url('b.css'); @import url('c.css'); v

07. Cserélje ki a képeket CSS-re

Évekkel ezelőtt mindennapos volt egy félig átlátszó PNG-készlet, amely áttetsző hatásokat eredményezett a webhelyeken. Manapság a CSS szűrők erőforrás-megtakarítási alternatívát kínálnak. Például az ezt a lépést kísérő kódrészlet biztosítja, hogy a kérdéses kép önmagának szürkeárnyalatos változataként jelenjen meg.

img { -webkit-filter: grayscale(100%); /* old safari */ filter: grayscale(100%); }

08. Használjon színes parancsikonokat

A közönséges bölcsesség azt tanítja, hogy a hatjegyű színleírók a színek kifejezésének leghatékonyabb módja. Ez nem így van - egyes esetekben a gyorsírás leírása vagy a színnév rövidebb lehet.

target { background-color: #ffffff; } target { background: #fff; }

09. Szüntesse meg a felesleges nullákat és egységeket

A CSS sokféle egységet és számformátumot támogat. Hálás célpontja az optimalizálásnak - mind a záró, mind a következő nullák eltávolíthatók, amint azt az alábbi részlet mutatja. Ezenkívül ne feledje, hogy a nulla mindig nulla, és hogy egy dimenzió hozzáadása nem ad hozzáadott értéket a benne lévő információkhoz.

padding: 0.2em; margin: 20.0em; avalue: 0px; padding: .2em; margin: 20em; avalue: 0;

10. Távolítsa el a túlzott pontosvesszőket

Ez az optimalizálás némileg kritikus, mivel befolyásolja a kód változását. A CSS specifikációja lehetővé teszi, hogy kihagyja a tulajdonságcsoport utolsó pontosvesszőjét. Mivel ezzel az optimalizálási módszerrel elért megtakarítás minimális, ezt elsősorban azok számára említjük, akik automatizált optimalizálón dolgoznak.

p { . . . font-size: 1.33em }

11. Használjon textúra atlaszt

Több apró sprite betöltése a protokoll általános költségei miatt nem hatékony. A CSS-írók egy kis képsorozatot egyesítenek egy nagy PNG-fájlba, amelyet aztán CSS-szabályokon keresztül bontanak szét. Olyan programok, mint TexturePacker jelentősen leegyszerűsíti a létrehozási folyamatot.

.download { width:80px; height:31px; background-position: -160px -160px } .download:hover { width:80px; height:32px; background-position: -80px -160px }

12. Hajtsa le a px-t

A teljesítmény növelésének egyik módja a CSS-szabvány egyik különlegessége. Az egység nélküli numerikus értékeket pixeleknek tekintjük - a px eltávolításával minden számhoz két bájtot kell megtakarítani.

h2 {padding:0px; margin:0px;} h2 {padding:0; margin:0}

13. Kerülje a drága tulajdonságokat

Az elemzés azt mutatta, hogy egyes címkék drágábbak, mint mások. Az ezt a lépést kísérő felsorolást különösen teljesítményre éhesnek tekintik - kerülje őket, amikor erre lehetősége adódik.

border-radius box-shadow transform filter :nth-child position: fixed; etc.

14. Távolítsa el a szóközt

A szóköz - a gondolkodási fülek, a kocsi visszatérései és a szóközök - megkönnyíti a kód olvasását, de a parser szempontjából kevés célt szolgál. Szállítás előtt szüntesse meg őket. Egy még jobb módszer magában foglalja a feladat delegálását egy shell parancsfájlra vagy hasonló eszközre.

15. Távolítsa el a megjegyzéseket

A megjegyzések szintén nem szolgálnak a fordítónak. Hozzon létre egy egyéni elemzőt a szállítás előtt történő eltávolításhoz. Ez nemcsak a sávszélességet takarítja meg, hanem azt is, hogy a támadóknak és klónozóknak nehezebben értsék meg a kód mögött rejlő gondolkodást.

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

A Yahoo felhasználói élmény csapata létrehozott egy alkalmazást, amely számos tömörítési feladatot kezel. JAR fájlként szállítja, elérhető itt , és futtatható egy választott JVM-mel.

java -jar yuicompressor-x.y.z.jar Usage: java -jar yuicompressor-x.y.z.jar [options] [input file] Global Options -h, --help Displays this information --type Specifies the type of the input file

17. Futtassa az NPM-től

Ha inkább integrálni szeretné a terméket a Node.JS-be, látogasson el npmjs.com/package/yuicompressor . A rosszul karbantartott adattár burkolófájlokat és JavaScript API-t tartalmaz.

var compressor = require('yuicompressor'); compressor.compress('/path/to/ file or String of JS', { //Compressor Options: charset: 'utf8', type: 'js',

18. Tartsa kordában Sass et al

Gyorsítsa fel webhelyeit optimalizált CSS-sel:

A Sass feleslegesen összetetté válhat, ezért optimalizálja, ha teheti

Míg a CSS-választó teljesítménye korántsem olyan kritikus, mint néhány évvel ezelőtt (lásd az erőforrást), a Sass-hoz hasonló keretrendszerek néha rendkívül összetett kódot bocsátanak ki. Időnként vessen egy pillantást a kimeneti fájlokra, és gondolkodjon el az eredmények optimalizálásának módjain.

19. Állítsa be a gyorsítótárat

Egy régi közmondás szerint a leggyorsabb fájl az, amelyet soha nem küldenek át a vezetékeken. A böngésző gyorsítótár kéréseinek elérése ezt hatékonyan biztosítja. Sajnos a gyorsítótár-fejlécek beállításának a szerveren kell történnie. Használja ki jól a képernyőképeken látható két eszközt - ezek gyors módszert kínálnak a módosítások eredményeinek elemzésére.

20. Tegye mellé a gyorsítótárat

A tervezők gyakran nem szeretik a gyorsítótárat, mert félnek a közelgő változásokkal kapcsolatos problémáktól. A probléma megoldása magában foglalja a fájlnévvel ellátott címkék használatát. Sajnos az ezt a lépést kísérő kódban felvázolt séma nem mindenhol működik, mivel egyes proxyk elutasítják a fájlok gyorsítótárazását „dinamikus” útvonalakkal.

21. Ne felejtsd el az alapokat

A CSS optimalizálása csak a játék része. Ha a szerver nem használja a HTTP / 2 és a gzip tömörítést, akkor sok idő veszít az adatátvitel során. Szerencsére e két probléma megoldása általában egyszerű. Példánk néhány módosítást mutat be az általánosan használt Apache szerverrel. Ha más rendszerre kerül, egyszerűen keresse meg a szerver dokumentációját.

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

Ez a cikk eredetileg a kreatív webdesign magazin 282. számában jelent meg Web designer . Vásárolja meg a 282. számot itt vagy itt iratkozzon fel a Web Designerre .

Kapcsolódó cikkek: