Manuális CSS optimalizálás a betöltési sebesség javítása érdekében • Silo Creativo
Szia! A nevem Ricardo Prieto, és a SiloCreativo weblaptervezésével, elrendezésével és felhasználói élményével foglalkozom (és írok), ahol oktatóanyagok, tippek és forrásokkal segítjük az embereket projektjeik kidolgozásában.
20% kedvezmény
A WordPress-témák, például a Divi 1 dollárért
Egy weboldal betöltési sebessége az elmúlt évek egyik legfontosabb tényezőjévé vált a webdizájnban, és bár sok elem optimalizálható a letöltött fájlok teljes súlyának könnyítésére, ebben a cikkben arra fogunk összpontosítani optimalizálja a CSS fájlokat, pontosabban amikor CSS-t írunk.
Az a tény, hogy egy weboldal keveset nyom és gyorsan betöltődik, nyilvánvaló UX (User Experience) fejlesztés, mivel a látogatók korábban elérik a tartalmat és kölcsönhatásba lépnek vele. De más előnyökkel is társul, például a kevesebb adatfogyasztás és még a készülék akkumulátorának megtakarítása is.
Ez már egy ideje fontos volt. De a Google döntése volt a terhelési sebesség a pozicionálást meghatározó tényezők között a keresőmotoron belül, ami mindannyiunkat megőrjített a SEO-val, és megpróbálta csökkenteni a tizedrészeket a betöltési idő alatt, és megtakarítani egy kis kb.
Ennek eredményeként létrejött az úgynevezett WPO (Web Performance Optimization), amely a munka területe optimalizálja a webes betöltést, amennyire csak lehetséges tömörítési technikák és a tartalom optimalizálása révén.
Hogyan csökkenthető a CSS-fájlok súlya
Menj előre, számos módszer létezik a CSS fájlok súlyának csökkentésére. A legismertebbek átmennek csoportosítsa az összes stíluslapot webhelyén egyetlen fájlban, minifikálja és tálalja a Gzip segítségével tömörítve. Ezután aktiválhatjuk az említett fájl gyorsítótárát, hogy a látogató visszatérésekor ne kelljen újra letöltenie a CSS fájlt.
Ma azonban az előző lépésekre fogunk koncentrálni. Részletezni fogunk néhány tippet a optimalizálási feladatok az elrendezés fázisától, amikor weboldalunk CSS-szabályait készítjük.
Mindegyik egy nagyon alapelvből indul ki: minden karakter súlya körülbelül 1 bájt. Ha csökkentjük a karakterek számát, akkor csökkenthetjük a fájl súlyát, nemde? Nézzük meg, hogyan kell csinálni. (Megjegyzés: valójában az 1 karakter = 1 bájt szabály nem mindig ilyen, sokkal összetettebb kérdés, ahol a kódolás és a karakter típusa beíródik, de a következő pontok szemléltetésére ezt az egyenértékűséget vesszük jóra ).
1. Gyorsírás tulajdonságok a CSS-ben
A Gyorsírás tulajdonságai lehetővé teszi számunkra, hogy egy sorban több értéket definiáljunk. A legegyértelműbb példa a margó vagy a betét meghatározásában található, ahol a négy értéket egyetlen sorban definiálhatjuk, a felső oldalról indulva és az óramutató járásával megegyező irányba haladva.