Cum să optimizați livrarea CSS – 7 pași simpli

css imagine de vector de optimizareAu dispărut zilele în care experții în design și bloggerii de top din industrie au recomandat construirea de pagini web nu mai mult de 30 de kilobiți …


Pe atunci, acest „șap” era de așteptat să gestioneze HTML, JavaScript, imagini, CSS și Flash. Să fim sinceri, nu este nevoie să depășim complet 30 kb.

Pe măsură ce JavaScript și CSS au câștigat popularitate, a devenit obișnuit doar CSS să depășească plafonul de 30KB. Acest lucru este valabil mai ales pentru site-urile web mai mari.

Cu toate acestea, nu trebuie să vă concentrați prea mult pe „numărul de kilobiți” atunci când creați și proiectați pagini pentru site-ul dvs. web. Este important să vă păstrați paginile optimizat și strâns când scrieți CSS.

Optimizarea nu înseamnă doar reducerea dimensiunilor fișierelor dvs. Este vorba despre a vă păstra paginile libere de dezordine, de a le face cât mai organizate și eficiente. Pe măsură ce aflați mai multe despre cele mai bune practici de optimizare CSS, veți vedea că creați automat dimensiuni de fișiere mai mici.

Iată 5 lucruri simple pe care le puteți face pentru a vă optimiza CSS chiar acum.

Cum să optimizați complet livrarea CSS

1. Folosiți Shorthand

Scrierea în scurtmetraj a devenit o practică foarte obișnuită. Acesta este de departe cel mai simplu mod de a vă reduce codul și cât timp vă va duce la cod. Dacă nu faceți acest lucru încă, nu există timp ca prezentul.

css proprietate font

Există o multitudine de elemente pentru care puteți utiliza shorthand, dar cele mai comune includ:

  • margine
  • umplutură
  • Font
  • Contur
  • Frontieră
  • fundal
  • Lista de stil

valori de configurare shorthandPuteți combina, de asemenea, valorile folosind shorthand. Prin specificarea diferitelor valori, browserul va utiliza în esență o manieră specificată pentru a interpreta regulile.

Folosind orice shorthand va faceți-vă codul general mult mai succint. Salvezi atât caractere, cât și linii.

Dacă utilizați shorthand în toate domeniile posibile, acest lucru poate reduce dramatic dimensiunea totală a fișierului.

2. Scapă-te de Hacks

adică regula CSSPentru a servi regulile CSI specifice IE, utilizarea hacks condiționate CSS vă oferă avantajul de a servi un fișier CSS implicit mai mic și mai curat.

Ajută cu browserele care respectă mai mult standardele. Cu toate acestea, greutatea suplimentară a paginii va fi descărcată doar de browserele care o solicită.

Dacă trebuie să utilizați un hack, este obligatoriu ca codul pe care îl utilizați să fie specific versiunii Internet Explorer pe care vă concentrați.

Există numeroase coduri pre-scrise care servesc ca hacks dacă nu doriți să vă scrieți propriul. Doar să-ți faci timp să te uiți cu adevărat la codul pre-scris și să te asiguri că este corect sau altceva ar putea duce la și mai multe probleme.

Acum, dacă puteți utiliza CSS pentru a obține rezultatele pe care le doriți, faceți acest lucru fără a avea vreun fel de hacks. Desigur, acest lucru depinde de faptul că toate celelalte lucruri sunt egale. Codul dvs. general va fi mult mai ușor și mai simplu atunci când utilizați mai puține accesări pe site-ul dvs..

3. Fii inteligent cu privire la utilizarea spațiului alb

Pentru codul dvs. CSS, spațiul alb este imperativ pentru lizibilitate.

Spațiul alb include elemente, cum ar fi file, spații și pauze suplimentare de linie. Fiecare spațiu alb pe care îl puteți elimina este similar cu eliminarea unui caracter.

eliminați liniile goaleCu toate acestea, de multe ori nu este recomandat să săriți în spațiul alb, de dragul unui fișier mai mic. Încă trebuie să mențineți o lizibilitate optimă pe paginile dvs. web.

Spațiul alb este important pentru formatare, deci doriți să găsiți un echilibru. Dacă scrieți în blocuri mari text pentru a elimina un spațiu alb, durata scurtă de atenție a cititorilor de pe internet îi va face să dea clic departe.

O modalitate de a oferi atât o dimensiune mai mică a fișierului, cât și o lizibilitate este de a șterge filele și de a pune doar o singură linie între paragrafe. Aceasta oferă suficient spațiu alb din punct de vedere al lizibilității, dar elimină și o parte din spațiul alb care nu este necesar.

Acum, pentru versiunea de producție a fișierului dvs. CSS, puteți elimina spațiul alb. Va fi încă prezent în fișierul dvs. de lucru.

Acesta este un alt mod de a face compromisuri, astfel încât să aveți atât fișiere mai mici, cât și formatare lizibilă.

4. Resetări și cadre de prune

Când utilizați un cadru CSS, este necesar să consultați documentația.

La fel de important este să te uiți la fiecare linie care se află în fișierul tău CSS. Există momente în care veți descoperi că există anumite reguli în cadrul cadrului pe care nu îl doriți pentru proiectul dvs. curent. Acestea pot fi eliminate.

a eliminat regulile css neutilizate

S-ar putea să descoperiți că puteți obține detalii prezentative într-un mod mai concis și mai elegant …

Este posibil să nu fie ceea ce utilizați de obicei, dar dacă funcționează, acest lucru poate permite un cadru mai curat. Când știți despre ele, acest lucru vă ajută, de asemenea, să evitați duplicarea neintenționată a seturilor de reguli.

Aceleași informații se aplică și pentru resetări. Când utilizați resetări, acestea ajută la neutralizarea stilului implicit al unui browser. Acum, dacă sunteți familiarizat cu site-ul web pe care îl creați, nu este neobișnuit să găsiți anumite declarații că știți că nu veți avea nevoie.

De exemplu, pe un blog general, probabil că nu le veți folosi. Pur și simplu scăpați de orice nu aveți nevoie pentru site-ul specific pe care îl construiți. Poti asigurați-vă o muncă mai optimizată atunci când utilizați un set de reguli cu privire la o resetare sau cadru.

Cu toate acestea, în starea lor implicită, acestea nu trebuie acceptate. Pentru a vă menține fișierele CSS lizibile și slabe, priviți fiecare declarație individual și reduceți-le pe cele care nu sunt necesare.

5. CSS-ul Dvs. de viitor

Sintaxa Css

O altă opțiune utilă de optimizare CSS: separați majoritatea regulilor de declarațiile specifice layout-ului.

Alocați aspectul fișierului său individual dacă acest lucru este posibil. Dacă nu, cel puțin acordarea unei secțiuni proprii poate fi benefică.

În cele din urmă, poziționarea și plutirea – care sunt metodele actuale folosind CSS – nu erau menite să servească drept instrumente de dispunere.

Unii ajung până la a spune că acestea sunt de fapt similare cu hakurile de aspect. Nu există o alternativă viabilă în acest moment, iar speranța este că, odată ce au fost aprobate standardele de layout, acestea încep să obțină suport din partea browserelor.

Odată ce acest suport se întâmplă, nu ar trebui să fie foarte dificil să schimbați proprietățile modelului de casetă care sunt redate pentru cele destinate pentru machete.

În momentul de față, cea mai bună alegere este să vă gestionați aspectul folosind proprietățile potrivite. Acest lucru va condensa, de obicei, greutatea paginii mai eficient decât utilizarea setului limitat de proprietăți disponibile în prezent pentru a compensa aspectele interesante.

6. Mențineți întotdeauna documentația actualizată cu privire la munca dvs.

Indiferent dacă lucrați pe un site web în echipă sau singur, este obligatoriu să urmăriți tot ce ați făcut.

De exemplu, singur, poate uitați ceva ce ați făcut. Ca echipă, cineva poate face ceva și este posibil să nu fiți conștienți până nu faceți modificări care pot cauza probleme cu diverse elemente ale codului.

adăugând comentariu cssDuplicările de cod reprezintă un domeniu imens de îngrijorare atât pentru echipe cât și pentru designeri individuali, în special atunci când se utilizează construitori de site-uri populare. Wix, Squarespace și alte programe de construire a site-urilor web sunt cunoscut pentru duplicarea codului sau lipsește în întregime din baza lor de date.

Utilizarea ghidurilor de foi de stil și ghidurile de marcare sunt alegeri viabile de documentare. Puteți utiliza și comentarii CSS este o altă opțiune și acest lucru poate fi benefic pentru secționarea elementelor fișierelor CSS care sunt lungi. Introducerea acestora în stilul sau ghidul de marcare, le împiedică să adauge dimensiunea fișierului.

Unul dintre cele mai rapide moduri de a umfla codul este de a face același lucru de două ori. Codificarea este complexă, de aceea este imperativ să păstrezi documentația exactă a tot ceea ce ai făcut.

Dacă lucrați singur, este ideal să consultați această documentație de fiecare dată când vă așezați pentru a începe să lucrați. Când lucrați ca parte a unei echipe, asigurați-vă că toată lumea codează în același document respectă un stil comunitar sau un ghid de marcare astfel încât modificările de codare sunt ușor de înțeles de toți cei din grup.

7. Comprimați-vă fișierele (CSS Optimization 101)

css de compresie și optimizare gif

Compresie: există ceva mai mult decât aceasta …

Un mod eficient de a optimiza CSS este prin utilizarea compresiei. Acesta este un mod de a vă asigura că fișierele dvs. sunt prietenoase cu browserul, chiar dacă acestea nu pot fi citite de oameni.

În comparație cu copiile de lucru, acestea vor fi o fracțiune din dimensiune. Există diferite aplicații de care puteți profita pentru a facilita procesul de compresie.

Acestea vor îndeplini sarcini, cum ar fi găsirea și remedierea oricăror proprietăți CSS care se rescriu reciproc, comprimarea spațiului alb și căutarea șanselor de a utiliza scurta CSS.

Pe lângă comoditatea acestor aplicații, acestea vă pot ajuta, de asemenea, să aflați mai multe despre sarcinile pe care le puteți face manual dacă doriți. Puteți utiliza, de asemenea, diverși editori de text pentru a vă ajuta să formatați fișierele CSS.

Pot servi versiuni zip ale diferitelor fișiere CSS pe care le aveți. Acest lucru se face de obicei folosind PHP. Dacă doriți să utilizați instrumente de optimizare și comprimare, asigurați-vă că treceți în revistă mai multe opțiuni înainte de a alege cea potrivită pentru dvs..

Acum, aceste aplicații sunt în general bune pentru a reduce la minimum erorile, dar nu sunt perfecte. Din această cauză, ar trebui să verificați întotdeauna CSS-ul dvs. după ce utilizați o aplicație pentru a vă asigura exactitatea. Codul optimizat și curat este esențial pentru dimensiunea fișierului, dar și pentru lizibilitate și întreținere.

Randul tau

Principiile discutate aici sunt considerente solide pentru CSS, dar și pentru JavaScript, HTML și alte limbaje de programare. În comparație cu redarea site-ului dvs. web, fișierele CSS nu sunt la fel de proeminente pentru utilizatorul final.

Cu toate acestea, principiile discutate aici ajută atât la dezvoltarea experienței, cât și a experienței utilizatorului.

Cele mai bune companii de găzduire web vă vor ajuta cu optimizarea CSS. Site-urile mai rapide vă fac un client fericit, dar fișierele mai mici sunt de asemenea mai puțin încărcate pe serverele lor.

Am testat fiecare gazdă web canadiană și recomandăm SiteGround. Nu numai că vă ajută să optimizați livrarea CSS, dar suportul tehnic al acestora este de neegalat.

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