A CSS-kézbesítés optimalizálása – 7 egyszerű lépés

css optimalizálás vektor képElmúltak azok a napok, amikor a tervezési szakértők és az iparág vezető bloggerei legfeljebb 30 kilobájtnyi weboldalt javasoltak.


Akkoriban ezt a „sapkát” elvárták a HTML, a JavaScript, a képek, a CSS és a Flash kezelésére. Legyünk őszinték, nem sokba kell tartani, hogy teljesen meghaladjuk a 30 kb-t.

A JavaScript és a CSS egyre népszerűbbé válása miatt a CSS önmagában is meghaladta a 30 KB-os felső határt. Ez különösen igaz a nagyobb webhelyekre.

Ugyanakkor nem szabad túlzottan a „kilobájt-számra” összpontosítania, amikor weboldalait építi és tervezi. Fontos az oldalai megőrzése optimalizált és szűk a CSS írásakor.

Az optimalizálás nem csupán a fájlok méretének minimalizálását jelenti. Arról szól, hogy oldalaitól nem szabad rendetlenséget és felfúvódást biztosítani, és a lehető legjobban szervezett és hatékonyabbá válni. Amint többet megtud a CSS optimalizálásának bevált gyakorlatairól, rájön, hogy automatikusan létrehoz kisebb méretű fájlokat.

Íme 5 egyszerű lépés, amelyet most megtehetsz a CSS optimalizálása érdekében.

A CSS-kézbesítés teljes optimalizálása

1. Használja a Rövidítést

A rövid írás az általános gyakorlat. Ez messze a legegyszerűbb módja annak, hogy csökkentsék a kódot, és hogy mennyi ideig tart a kódolás. Ha még nem csinálod ezt, akkor nincs olyan idő, mint a jelen.

css font tulajdonság

Számos elem létezik, amelyekre használhatja a rövidítést, de a leggyakoribbak a következők:

  • Árrés
  • Párnázás
  • Betűtípus
  • Vázlat
  • Határ
  • Háttér
  • List-style

rövidített konfigurációs értékekAz értékeket rövidítéssel is kombinálhatja. Különböző értékek megadásával a böngésző alapvetően meghatározott módon fogja értelmezni a szabályokat.

Bármely rövidítés használatával tedd az általános kódot sokkal tömörebbé. A karaktereket és a sorokat is menti.

Ha minden lehetséges területen rövidítést használ, ez drasztikusan csökkentheti az általános fájlméretet.

2. Megszabadulni a hackektől

azaz css szabályAz IE-specifikus CSS-szabályok kiszolgálásához a feltételes CSS-hackerek használata előnye, hogy egy kisebb és tisztább CSS-fájlt szolgáltasson..

Segít a szabványoknak megfelelő böngészőknél. A további oldalsúlyt azonban csak az azt igénylő böngészők töltik le.

Ha hack-et kell használnia, feltétlenül szükséges, hogy a használt kód az adott Internet Explorer verzióra vonatkozzon, amelyre összpontosít.

Számos előre írt kód van, amelyek hack-ként szolgálnak, ha nem akarja írni a sajátját. Csak szánjon időt arra, hogy valóban megnézze az előre írt kódot, és ellenőrizze, hogy pontos-e különben ez még több problémát okozhat.

Most, ha a CSS segítségével elérheti a kívánt eredményeket, akkor ezt bármilyen csapkod nélkül végezze el. Ez természetesen attól függ, hogy minden más dolog egyenlő-e. Általános kódja sokkal könnyebb és egyszerűbb lesz, ha kevesebb csapást használ a webhelyén.

3. Legyen okos a szóköz használata

A CSS-kódhoz, a szóköz kötelező az olvashatóság érdekében.

A fehér szóköz elemeket tartalmaz, például füleket, szóközöket és extra sortöréseket. Minden olyan szóköz, amelyet meg lehet szüntetni, hasonló a karakter eltávolításához.

távolítsa el az üres sorokatEgy kisebb fájl kedvéért azonban gyakran nem javasoljuk, hogy átugorja a szóközt. A weboldalak optimális olvashatóságát továbbra is fenn kell tartania.

A szóköz fontos a formázáshoz, ezért szeretne egyensúlyt találni. Ha nagyméretű szövegként írsz szöveget, hogy eltüntesse a szóközt, az olvasók rövid figyelme az interneten keresztül kattintásra készteti őket.

A kisebb fájlméret és az olvashatóság biztosításának egyik módja a lapok áthidalása, és csak egy sor elhelyezése a bekezdések között. Ez elegendő szóközt biztosít az olvashatóság szempontjából, ugyanakkor kiküszöböli annak a szóközt is, amelyre nincs szükség.

Most, a CSS fájl gyártási verziójához eltávolíthatja a szóközt. Ez továbbra is jelen lesz a munkafájlban.

Ez a kompromisszum másik módja, hogy mind kisebb fájlokkal, mind olvasható formázással rendelkezzen.

4. A szilva-visszaállítás és a keretek

CSS-keretrendszer használatakor feltétlenül vizsgálja felül a dokumentációt.

Ugyanilyen fontos megvizsgálni minden sort, amely a CSS fájljában található. Vannak idők, amikor felfedezi, hogy vannak olyan szabályok a keretben, amelyeket nem kíván a jelenlegi projektjéhez. Ezek eltávolíthatók.

eltávolította a nem használt css szabályokat

Előfordulhat, hogy a bemutatási részleteket tömörebben és elegánsabb módon érheti el …

Lehet, hogy ez nem az, amit általában használ, de ha működik, ez lehetővé teszi a tisztább keretet. Ha tud róluk, ez segít elkerülni a szabálykészletek véletlenszerű másolatát is.

Ugyanez az információ vonatkozik az alaphelyzetbe állításra is. Ha visszaállítást használ, ezek segíthetnek semlegesíteni a böngésző alapértelmezett stílusát. Most, ha ismeri a létrehozott weboldalt, nem ritka, ha olyan nyilatkozatokat talál, amelyekről tudod, hogy nincs szüksége.

Például egy általános blogban valószínűleg nem fogja használni őket. Csak megszabaduljon attól, amire nincs szüksége az épített webhelyhez. tudsz a jobb optimalizált munka biztosítása szabályok használatakor alaphelyzetbe állításra vagy keretre.

Alapértelmezett állapotukban azonban nem szabad elfogadni őket. A CSS-fájlok olvashatóságának és karcsúságának érdekében nézzen meg minden nyilatkozatot külön, és vágja le azokat, amelyek feleslegesek.

5. Jövőbiztos CSS

Css szintaxis

Egy másik hasznos CSS-optimalizálási lehetőség: szüntesse meg a szabályok nagy részét az elrendezés-specifikus deklarációktól.

Rendelje hozzá az elrendezést a saját fájljához, ha ez lehetséges. Ha nem, akkor legalább a saját részének megadása hasznos lehet.

Végül a pozicionálás és az úszók – amelyek a jelenlegi módszerek a CSS használatával – nem célja, hogy elrendezési eszközként szolgáljon.

Vannak, akik azt mondják, hogy ezek valójában hasonlóak az elrendezési csapdákhoz. Jelenleg nincs megvalósítható alternatíva, és a remény az, hogy amint megállapodnak az elrendezési szabványokban, elkezdenek támogatást kapni a böngészőkből.

Amint ez a támogatás megtörténik, nem lehet nagyon nehéz kicserélni azokat a dobozmodell tulajdonságokat, amelyeket feltörtek az elrendezésekhez.

Jelenleg a A legjobb választás az, ha az elrendezést a megfelelő tulajdonságokkal kezeli. Ez általában sokkal hatékonyabban tömöríti az oldal tömegét, mint a jelenleg elérhető korlátozott tulajdonságkészlet használata a mókák kompenzálására.

6. Mindig tartson naprakész dokumentációt a munkájáról

Akár egy weboldalon dolgozik csapatként, akár egyedül, feltétlenül kövesse nyomon az összes dolgot, amit tett.

Például egyedül elfelejtheti valamit, amit tett. Csapatként valaki tehet valamit, és valószínűleg nem lesz tudatában, amíg nem végez olyan változtatásokat, amelyek problémákat okozhatnak a kód különböző elemeivel kapcsolatban.

css megjegyzés hozzáadásaA kódmásolatok óriási aggodalomra adnak okot mind a csapatok, mind az egyedi tervezők számára, különösen akkor, ha népszerű weboldal-készítőket használnak. A Wix, a Squarespace és más weboldalépítő szoftverek ismertek a kód sokszorosítása vagy hiánya miatt az adatbázisból.

A stíluslap-útmutatók és a jelölési útmutatók használata megfelelő dokumentációs választás. A CSS megjegyzéseket is használhatja, ez egy másik lehetőség, és ez hasznos lehet a hosszú CSS-fájlok elemének leválasztására. Ha ezeket a stílus- vagy jelölési útmutatóba helyezi, megakadályozza őket abban, hogy hozzáadják a fájl méretét.

Az egyik leggyorsabb módszer a kód feltöltésére, ha ugyanazt a munkát kétszer elvégzi. A kódolás bonyolult, ezért elengedhetetlen, hogy minden dokumentációt pontosan dokumentáljon.

Ha egyedül dolgozik, akkor ideális, ha a munka megkezdése érdekében minden alkalommal felülvizsgálja ezt a dokumentációt. Amikor egy csapat részeként dolgozik, győződjön meg arról, hogy mindenki ugyanazt a dokumentumot kódolja betartja a közösségi stílus vagy a jelölési útmutatót úgy, hogy a kódolási változások a csoport mindenki számára könnyen érthetők legyenek.

7. Tömörítse a fájljait (CSS Optimization 101)

css tömörítés és optimalizálás gif

Tömörítés: van egy kicsit több, mint ez …

A CSS optimalizálásának egyik hatékony módja a tömörítés. Ez egy módja annak, hogy a fájlok böngészőbarátak legyenek, annak ellenére, hogy az emberek nem olvashatók.

A munkás másolatokhoz képest ezek a méret töredéke lesz. Különböző alkalmazások vannak, amelyek kihasználhatják a tömörítési folyamat megkönnyítését.

Ezek olyan feladatokat hajtanak végre, mint például az egymást felülíró CSS ​​tulajdonságok megkeresése és kijavítása, a tömb tömörítése és a CSS rövidítés használatának lehetőségeinek keresése.

Ezen alkalmazások kényelme mellett segíthetnek abban, hogy többet megtudjon azokról a feladatokról, amelyeket kézzel tehet, ha úgy tetszik. Különböző szövegszerkesztőket is használhat a CSS-fájlok formázásához.

Ezek kiszolgálhatják a rendelkezésére álló különféle CSS-fájlok zip verzióit. Ez általában a PHP használatával történik. Ha optimalizáló és tömörítő eszközöket szeretne használni, ellenőrizze a több lehetőséget, mielőtt kiválasztja az Ön számára megfelelőt.

Most ezek az alkalmazások általában jók a hibák minimalizálásában, de nem tökéletesek. Emiatt az alkalmazás használata után mindig ellenőrizze CSS-jét a pontosság biztosítása érdekében. Az optimalizált és tiszta kód kritikus jelentőségű a fájlméret, valamint az olvashatóság és a karbantartás szempontjából is.

Te jössz

Az itt tárgyalt alapelvek szilárd megfontolások a CSS számára, de a JavaScript, a HTML és más programozási nyelvek szempontjából is. A webhely megjelenítéséhez képest a CSS-fájlok nem voltak olyan kiemelkedőek a végfelhasználó számára.

Az itt tárgyalt elvek azonban segítenek mind a fejlesztési, mind a felhasználói élményben.

A legtöbb jó web hosting cég segít a CSS optimalizálásában. A gyorsabb webhelyek boldoggá teszik az ügyfelet, de a kisebb fájlok szintén kevésbé terhelnek szervereiken.

Minden kanadai webhelyet teszteltünk, és javasoljuk a SiteGround alkalmazást. Nem csak a CSS-kézbesítés optimalizálásában segítenek, de páratlan technikai támogatást is nyújtanak.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map