Ինչպես օպտիմալացնել CSS- ի առաքումը `7 պարզ քայլ

css օպտիմիզացման վեկտորի պատկերԱնցել են այն օրերը, երբ դիզայնի մասնագետներն ու արդյունաբերության առաջատար բլոգերները խորհուրդ են տվել վեբ-էջեր կառուցել ոչ ավելի, քան 30 կիլոբայթ…


Դրանից հետո, այս «գլխարկը» սպասվում էր HTML, JavaScript, պատկերներ, CSS և Flash: Եկեք անկեղծ լինենք, շատ բան չի պահանջվում, որ ամբողջությամբ գերազանցի 30 կբ.

Երբ JavaScript- ը և CSS- ը ձեռք բերեցին ժողովրդականություն, միայն CSS- ի համար սովորական դարձավ գերազանցել 30KB- ի առաստաղը: Սա հատկապես ճիշտ է ավելի մեծ կայքերի համար.

Այնուամենայնիվ, ձեր կայքի համար էջեր կառուցելիս և նախագծելիս չպետք է չափազանց կենտրոնացած լինեք ձեր «կիլոբիթների հաշվարկի վրա»: Կարևոր է ձեր էջերը պահել օպտիմիզացված և ամուր է CSS- ը գրելիս.

Օպտիմիզացումը չի վերաբերում միայն ձեր ֆայլերի չափերը նվազագույնին: Խոսքն այն մասին է, որ ձեր էջերը զերծ մնացին խառնաշփոթությունից և փչոցից, դրանք հնարավորինս կազմակերպված և արդյունավետ դարձնելով: Քանի որ ավելին իմանալով CSS օպտիմիզացիայի լավագույն փորձի մասին, դուք կգտնեք, որ ինքնաբերաբար ստեղծում եք ֆայլի փոքր չափեր.

Ահա 5 պարզ բան, որ դուք կարող եք անել ձեր CSS- ի օպտիմալացման համար հենց հիմա.

Ինչպես լիովին օպտիմալացնել CSS- ի առաքումը

1. Օգտագործեք Shorthand

Շորտերով գրելը շատ տարածված պրակտիկա է դարձել: Սա հեռու է ձեր ծածկագիրը նվազեցնելու ամենադյուրին ճանապարհը և որքան ժամանակ է տևում ձեզ կոդավորելու համար: Եթե ​​դուք դեռ դա չեք անում, ներկայի պես ժամանակ չկա.

css տառատեսակի հատկություն

Կան մի շարք տարրեր, որոնց համար կարող եք օգտագործել սղագրավը, բայց ամենատարածվածը ներառում է.

  • Լուսանցք
  • Լիցք
  • Տառատեսակ
  • Ուրվագիծ
  • Սահման
  • Նախապատմություն
  • Listանկի ոճ

shorthand config արժեքներըԿարող եք նաև միավորել արժեքները ՝ օգտագործելով սղագրությունը: Նշելով տարբեր արժեքներ, զննարկիչը, ըստ էության, կօգտագործի որոշակի կանոն `կանոնները մեկնաբանելու համար.

Usingանկացած սղագրության կամք օգտագործելը ձեր ընդհանուր ծածկագիրը շատ ավելի հակիրճ դարձրեք. Դուք խնայում եք և՛ նիշը, և՛ տողերը.

Եթե ​​դուք օգտագործում եք սղոցը հնարավոր յուրաքանչյուր ոլորտում, դա կարող է զգալիորեն նվազեցնել ֆայլի ընդհանուր չափը.

2. Ազատեք հաքերից

այսինքն css կանոնIE- ի հատուկ CSS կանոնների սպասարկման համար պայմանական CSS հակեր օգտագործելը ձեզ առավելություն է տալիս փոքր և մաքուր կանխադրված CSS ֆայլ ծառայելու համար:.

Այն օգնում է ավելի շատ ստանդարտներին համապատասխանող զննարկիչներին: Այնուամենայնիվ, էջի լրացուցիչ քաշը ներբեռնելու են միայն այն պահանջող զննարկիչները.

Եթե ​​դուք պետք է օգտագործեք հակեր, ապա հրամայական է, որ ձեր օգտագործած ծածկագիրը հատուկ է Internet Explorer- ի տարբերակին, որի վրա դուք կենտրոնացած եք.

Կան բազմաթիվ նախապես գրված կոդեր, որոնք հաքեր են ծառայում, եթե չես ուզում գրել քո սեփականը: Ուղղակի ժամանակ վերցրեք իսկապես նախապես գրված ծածկագրին նայելու և ճշգրիտ լինելու համար կամ էլ սա կարող է հանգեցնել ավելի մեծ խնդիրների.

Հիմա, եթե կարող եք օգտագործել CSS- ը `ձեր ցանկալի արդյունքների հասնելու համար, արեք դա առանց որևէ խաբեության: Իհարկե, դա կախված է բոլոր մյուս բաների հավասար լինելուց: Ձեր ընդհանուր ծածկագիրը շատ ավելի թեթև ու պարզ կլինի, երբ ձեր կայքում ավելի քիչ հեքիաթներ օգտագործեք.

3. Եղեք խելացի `սպիտակ տարածքը օգտագործելու համար

Ձեր CSS կոդի համար, սպիտակ տարածքը հրամայական է ընթերցանության համար.

«Սպիտակ տարածքը» ներառում է այնպիսի տարրեր, ինչպիսիք են ներդիրները, տարածությունները և գծի լրացուցիչ ընդմիջումները: Սպիտակ տարածության յուրաքանչյուր հատված, որը դուք ի վիճակի եք վերացնել, նման է կերպարի վերացմանը.

հեռացնել դատարկ գծերըԱյնուամենայնիվ, ավելի փոքր ֆայլերի համար հաճախ խորհուրդ չի տրվում սպիտակեցնել տարածքը: Դուք դեռ պետք է պահպանեք օպտիմալ ընթեռնելիությունը ձեր վեբ-էջերում.

Whitespace- ը կարևոր է ձևաչափման համար, այնպես որ ցանկանում եք գտնել հավասարակշռություն: Եթե ​​մեծ բլոկների վրա եք գրում տեքստը `որոշ տարածքի տարածությունը վերացնելու համար, Ինտերնետում ընթերցողների կարճ ուշադրության տիրույթը նրանց կստիպի սեղմել.

Ֆայլի ավելի փոքր չափը և ընթերցանությունը ապահովելու միջոցներից մեկը ներդիրների ներդիրներն են և կետերի միջև միայն մեկ տող դնելը: Սա ապահովում է բավարար սպիտակ տարածություն ընթեռնելիության տեսանկյունից, բայց նաև վերացնում է այդ անհրաժեշտ տարածքի որոշ մասը:.

Այժմ, ձեր CSS ֆայլի արտադրության տարբերակի համար կարող եք հեռացնել սպիտակ տարածքը: Այն դեռ ներկա կլինի ձեր աշխատանքային ֆայլում.

Սա ևս մեկ տարբերակ է փոխզիջման համար, որպեսզի դուք ունեք և՛ փոքր ֆայլեր, և՛ ընթեռնելի ձևաչափում.

4. Սալորաչիր վերականգնում և շրջանակ

Երբ դուք օգտագործում եք CSS շրջանակ, անհրաժեշտ է վերանայել փաստաթղթերը.

Նույնքան կարևոր է դիտել յուրաքանչյուր տող, որը գտնվում է ձեր CSS ֆայլի մեջ: Կան ժամանակներ, երբ դուք կբացահայտեք, որ շրջանակներում կան որոշ կանոններ, որոնք դուք չեք ցանկանում ձեր ընթացիկ նախագծի համար: Սրանք հնարավոր է հեռացնել.

հանեց չօգտագործված CSS կանոնները

Կարող եք գտնել, որ ներկայացման մանրամասներին կարող եք հասնել ավելի հակիրճ և էլեգանտ եղանակով…

Սա կարող է լինել այն, ինչ սովորաբար օգտագործում եք, բայց եթե այն աշխատում է, դա կարող է թույլ տալ ավելի մաքուր շրջանակ: Երբ դուք գիտեք դրանց մասին, սա նաև օգնում է ձեզ խուսափել կանոնների սահմանների աննպատակ կրկնօրինակումից.

Նույն տեղեկատվությունը տարածվում է նաև վերակայման համար: Վերադարձն օգտագործելու դեպքում դրանք օգնում են զննարկիչի լռելյայն ոճը չեզոքացնելուն: Հիմա, եթե դուք ծանոթ եք ձեր ստեղծած կայքին, հազվադեպ չէ գտնել որոշ հայտարարագրեր, որոնք գիտեք, որ ձեզ հարկավոր չէ:.

Օրինակ, ընդհանուր բլոգում, ամենայն հավանականությամբ, դրանք չեք օգտագործի: Պարզապես ազատվեք այն ամենից, ինչ ձեզ հարկավոր չէ ձեր կառուցած հատուկ կայքի համար: Դու կարող ես ապահովել ավելի լավ օպտիմիզացված աշխատանք, երբ դուք օգտագործում եք մի շարք կանոններ վերակայման կամ ծրագրի հետ կապված.

Այնուամենայնիվ, իրենց նախնական վիճակում դրանք չպետք է ընդունվեն: Որպեսզի ձեր CSS ֆայլերը դյուրին և նիհար պահեք, նայեք յուրաքանչյուր հռչակագիր անհատապես և կտրեք այն ավելորդները, որոնք անտեղի են.

5. Ապագա-ապացուցեք ձեր CSS- ն

Css շարահյուսություն

CSS օպտիմիզացման ևս մեկ օգտակար տարբերակ. Ձեր կանոնների մեծ մասը առանձնացրեք ձեր դասավորության հատուկ հայտարարագրերից.

Եթե ​​դա հնարավոր է, դասավորությունը հանձնեք իր անհատական ​​ֆայլին: Եթե ​​ոչ, ապա գոնե դրան իր բաժին տալը կարող է օգտակար լինել.

Ի վերջո, դիրքավորումը և լողացողները, որոնք CSS- ի օգտագործմամբ գործող մեթոդներն են, նախատեսված չէր որպես դասավորության գործիք ծառայել.

Ոմանք ասում են, որ դրանք իրականում նման են դասավորության հաքերին: Այս պահին գոյություն չունի կենսունակ այլընտրանք, և հույսն այն է, որ երբ դասավորության ստանդարտները համաձայնեցված լինեն, նրանք սկսում են աջակցություն ստանալ զննարկիչներից.

Այս աջակցությունը տեղի ունենալուց հետո չպետք է որ շատ դժվար լինի փոխարկել տուփի մոդելի հատկությունները, որոնք կոտրված են դասավորության համար նախատեսվածների համար:.

Հենց հիմա, լավագույն ընտրությունն այն է, կարգավորել ձեր դասավորությունը `օգտագործելով ճիշտ հատկությունները. Դա սովորաբար ավելի արդյունավետ կդարձնի էջի կշիռը, քան ներկայումս առկա սահմանափակ հատկությունների օգտագործումը `quirks- ները փոխհատուցելու համար.

6. Միշտ շարունակեք թարմացված փաստաթղթերը `կապված ձեր աշխատանքի հետ

Անկախ նրանից, թե դուք աշխատում եք կայքում որպես թիմ կամ միայնակ, հրամայական է հետևել ձեր արած ամեն ինչի.

Օրինակ, միայնակ, դուք կարող եք մոռանալ ձեր արածը: Որպես թիմ, ինչ-որ մեկը կարող է ինչ-որ բան անել, և դուք գուցե տեղյակ չեք, քանի դեռ չեք կատարել փոփոխություններ, որոնք կարող են խնդիրներ առաջացնել կոդի տարբեր տարրերով.

ավելացնելով css մեկնաբանությունԿոդի կրկնօրինակումը հսկայական մտահոգության տեղիք է տալիս ինչպես թիմերի, այնպես էլ անհատ դիզայներների համար, հատկապես վեբ կայքերի հանրաճանաչ շինարարներ օգտագործելիս: Wix, Squarespace և կայքերի կառուցման այլ ծրագրաշարեր են հայտնի են կրկնօրինակման կոդով կամ այն ​​ամբողջովին բացակայում են իրենց տվյալների բազայից.

Օգտագործելով ոճային թերթիկային ուղեցույցներ և նշագրման ուղեցույցներ, փաստաթղթերի կենսունակ ընտրությունն է: Կարող եք նաև օգտագործել CSS մեկնաբանությունները ևս մեկ տարբերակ, և դա կարող է ձեռնտու լինել երկար CSS ֆայլերի տարրերի բաժանման համար: Դրանք դնելով ոճը կամ նշման ուղեցույցը, թույլ չի տալիս նրանց ավելացնել ֆայլի չափը.

Քաղցրեղենի ծածկագրման ամենաարագ եղանակներից մեկը նույն աշխատանքը երկու անգամ կատարելն է: Կոդավորումը բարդ է, ուստի հրամայական է պահել ձեր կատարած ամեն ինչի ճշգրիտ փաստաթղթերը.

Եթե ​​դուք մենակ եք աշխատում, ապա իդեալական է վերանայել այս փաստաթղթերը ամեն անգամ նստելուց հետո, որպեսզի սկսեք աշխատել: Երբ աշխատում եք որպես թիմի կազմում, համոզվեք, որ բոլորը նույն փաստաթղթում կոդավորում են հավատարիմ է համայնքի ոճին կամ նշագրման ուղեցույցին այնպես որ կոդավորման փոփոխությունները հեշտությամբ հասկանում են խմբում առկա բոլորը.

7. Սեղմեք ձեր ֆայլերը (CSS օպտիմիզացում 101)

css սեղմում և օպտիմիզացում gif

Սեղմում. Դրանում մի փոքր ավելին կա, քան սա…

CSS- ի օպտիմիզացման մեկ արդյունավետ միջոց `սեղմում օգտագործելը: Սա միջոց է ապահովելու, որ ձեր ֆայլերը զննարկիչ են, չնայած որ դրանք անընթեռնելի են մարդկանց կողմից.

Աշխատանքային օրինակների համեմատությամբ դրանք չափի մի մասն են լինելու: Կան տարբեր ծրագրեր, որոնցից կարող եք օգտվել սեղմման գործընթացը հեշտացնելու համար.

Դրանք կկատարեն առաջադրանքներ, ինչպիսիք են CSS- ի ցանկացած հատկություն գտնելը և ամրագրելը, որոնք վերագրում են միմյանց, սեղմում են սպիտակ տարածքը և փնտրում են CSS- ի կրճատում օգտագործելու հնարավորություններ:.

Ի լրումն այս հավելվածների հարմարության, նրանք կարող են նաև օգնել ձեզ ավելին իմանալ այն առաջադրանքների մասին, որոնք նախընտրում եք ձեռքով կատարել: Կարող եք նաև օգտագործել տարբեր տեքստային խմբագիրներ ՝ ձեր CSS ֆայլերը ձևավորելու համար.

Դրանք կարող են ծառայել ձեր ունեցած տարբեր CSS ֆայլերի zip տարբերակների: Դա սովորաբար արվում է ՝ օգտագործելով PHP: Եթե ​​ցանկանում եք օգտագործել օպտիմալացնող և սեղմիչ գործիքներ, համոզվեք, որ վերանայեք բազմաթիվ տարբերակներ ՝ նախքան ձեզ համար ճիշտը ընտրելը.

Հիմա այդ ծրագրերը, ընդհանուր առմամբ, լավ են սխալները նվազագույնի հասցնելու համար, բայց դրանք կատարյալ չեն: Դրա պատճառով ճշգրտությունն ապահովելու համար դուք միշտ պետք է վերանայեք ձեր CSS ծրագիրը: Օպտիմիզացված և մաքուր ծածկագիրը կարևոր է ֆայլի չափի համար, այլև ընթերցման և պահպանման համար.

Քո հերթն է

Այստեղ քննարկվող սկզբունքները հիմնարար նկատառումներ են CSS- ի, ինչպես նաև JavaScript- ի, HTML- ի և ծրագրավորման այլ լեզուների համար: Ձեր վեբ կայքի մատուցման համեմատությամբ, CSS ֆայլերը նույնքան կարևոր չեն վերջնական օգտագործողի համար.

Այնուամենայնիվ, այստեղ քննարկված սկզբունքներն օգնում են ինչպես զարգացած փորձին, այնպես էլ օգտագործողի փորձին.

Ոստայնի հոստինգի շատ լավ ընկերություններ կօգնեն ձեզ CSS օպտիմիզացիայի հարցում: Ավելի արագ կայքերը ձեզ ուրախ հաճախորդ են դարձնում, բայց փոքր ֆայլերը նույնպես ավելի քիչ են իրենց սերվերների վրա.

Մենք փորձարկել ենք կանադացանցի յուրաքանչյուր սերվերից յուրաքանչյուրին և խորհուրդ ենք տալիս SiteGround- ին: Նրանք ոչ միայն օգնում են ձեզ օպտիմալացնել CSS առաքումը, այլև դրանց տեխնոլոգիական աջակցությունն անզուգական է.

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