HTML կոդի և կասկադային ոճերի թերթիկների (CSS) օպտիմիզացումն անհրաժեշտ է կայքի և դրանում տեղադրված բովանդակության բեռնման գործընթացն արագացնելու համար: Ժամանակի և երթևեկության խնայողությունը, ընդհանուր առմամբ, օպտիմիզացումից հետո երկար ժամանակ էական կլինի, նույնիսկ եթե արագության փոփոխությունն արտաքուստ այնքան էլ նկատելի չէ։
HTML կոդի օպտիմիզացում
Որպեսզի HTML կոդը հեշտացնի կայքի արագ բեռնումը, այն պետք է համապատասխանի մի քանի պայմանների.
- Եղեք պարզ և տեղեկատվական: Դրա վավերականությունը ստուգելուց հետո դուք պետք է շտկեք սխալները, որպեսզի ավելի հեշտ լինի բոտերի համար այն վերլուծել: Կոդը պետք է հստակ ներկայացնի էջի կառուցվածքը։
- Էջերի հիմնական բաղադրիչները, ինչպիսիք են վերնագրերը, ինդեքսները, տեղեկատվության բլոկները, պետք է հեշտությամբ և արագ նույնականացվեն:
- Կոդն ավելորդ տեղեկատվությունից ազատելը և այն առանձին ֆայլերում պահելը (օրինակ՝ կարող եք հեռացնել CSS-ը և JS-ը) կբարձրացնի բեռնման արագությունը, ինչը նաև կհեշտացնի բոտերի աշխատանքը։
Այս պայմաններին հասնելով՝ կայքը կարելի է դարձնել ավելի արագ, ավելի հարմար և բարձրացնել որոնման բոտերի կողմից դրա ինդեքսավորման արդյունավետությունը։
Կոդի կրճատում և CSS օպտիմիզացում
Կայքի կոդը կարող եք ավելի պարզեցնել՝ նվազեցնելով դրա ծավալը։ Դա անելու համար դուք պետք է կատարեք մի քանի գործողություններ.
Առաջին հերթին պետք է խուսափել Flash տեխնոլոգիաներից, JavaScript-ից, շրջանակներից, նկարով ներկայացված տեքստից։ Բոլոր հնարավոր տարրերը պետք է ձևաչափվեն առանձին, արտաքին ֆայլերում (օրինակ՝ CSS և JS, ինչպես նշվեց վերևում): Հատուկ պլագինները կօգնեն օպտիմալացնել կոդը։ Օրինակ, կարող եք տեղադրել Autoptimize plugin-ը, որն ավտոմատ կերպով օպտիմիզացնում է HTML, CSS, JS կոդը (եթե նշեք համապատասխան վանդակները): Անհրաժեշտ է ստեղծել գրագետ և հարմար կայքի նավարկություն, որը հասկանալի կլինի օգտվողների համար և ճիշտ ճանաչված որոնման համակարգերի կողմից: Սա կբարձրացնի կայքի բեռնման արագությունը, որակը և ինդեքսավորումը:
Ինչ վերաբերում է CSS-ի օպտիմալացմանը, ապա կարող եք դա անել ինքներդ կամ վստահել հատուկ ռեսուրսի կամ ծրագրի։ Ձեռնարկի օպտիմալացումը աշխատատար և ժամանակատար գործընթաց է, և դուք կարող եք բաց թողնել որոշ սխալներ: Օպտիմալացման ծրագիրը կամ ծառայությունը ավելի լավ կվերացնի թերությունները, բայց կարող է խաթարել որոշ գործառույթներ, որոնք աշխատում էին կայքում, և ստուգումից հետո բովանդակությունը կարող է ճիշտ չցուցադրվել, ուստի դրանց աշխատանքը պետք է շտկվի:
CSS կառուցվածքը ձեռքով բարելավելու որոշ ուղիներ.
- Հեռացրեք լրացուցիչ բացատները և տողերի ընդմիջումները, որոնք ծանրաբեռնում են CSS ֆայլը և դժվարացնում ռոբոտների աշխատանքը.
- Նմանատիպ հրամանները մի քանի անգամ կրկնելու փոխարեն գրել ընդհանրացնող հատկություններ;
- Մեկնաբանություններում օգտագործեք հակիրճ, հասկանալի նկարագրություններ;
- Անսովոր տառատեսակները պետք է գրվեն՝ օգտագործելով ոճեր, ոչ թե պատկերներ;
- Նկարների համար ստեղծեք alt և վերնագիր (յուրաքանչյուր պատկերի համար տարբեր), որպեսզի դրանց բովանդակությունը ճանաչվի որոնման համակարգի բոտերի կողմից.
- Կիրառել H1 գործիքները վերնագրերում և այլն, որպեսզի դրանք ճիշտ ճանաչվեն ինդեքսավորման ժամանակ;
- Հիմնաբառերի մեջ ներառեք միայն այն հիմնաբառերը, որոնք օգտագործվում են էջում՝ նվազագույնի հասցնելով դրանց թիվը.
- Օգտագործեք բազմազան և հակիրճ մետա թեգեր:
CSS և HTML օպտիմիզատորներ
Դուք կարող եք հարմար և արագ օպտիմիզացնել անմիջապես բրաուզերում՝ օգտագործելով հատուկ ծառայություններ, օրինակ.
- CleanCSS.com;
- CSS Optimizer;
- CSS կոմպրեսոր;
- CY-PR.com;
- Ինքնօպտիմիզացնել հավելվածը:
SEO-ի և ՏՏ մասնագետները խորհուրդ են տալիս օգտագործել CleanCSS.com-ը, քանի որ այն թույլ է տալիս ընտրել սեղմման մակարդակը ցածրից բարձր կամ ընտրել անհատական կարգավորումներ։ Օպտիմիզացիայի ամենաբարձր և ամենաբարձր մակարդակներից հետո կայքի կոդը ստանում է գրեթե անընթեռնելի ձև, և դրանում փոփոխություններ կատարելը գրեթե անհնար կլինի։ Հետեւաբար, նախ դուք պետք է օգտագործեք ստանդարտ օպտիմալացում: Դուք կարող եք ընտրել սեղմման ռեժիմներ կոնկրետ բովանդակության համար կամ օպտիմիզացնել առանձին պարամետրեր՝ տառատեսակների սեղմում, պատկերներ, բացատների հեռացում:
CY-PR.com ռեսուրսը նույնպես ունի օպտիմիզացիայի նմանատիպ գործիք, որը թեթեւացնում է CSS-ի կառուցվածքը 25-30%-ով, սակայն գործողությունը կատարելուց հետո կոդով ֆայլ ստեղծելու միջոց չկա։
Այլ ծառայությունները կարող են բավականին արմատապես փոխել կոդը, որպեսզի կայքի որոշ գործառույթներ դադարեն աշխատել: Հետեւաբար, նրանց օգնությամբ ավելի լավ է կատարել միայն տեղական փոփոխություններ կոնկրետ կայքի պարամետրերում:
Օպտիմալացումից հետո դուք պետք է ստուգեք կայքի ֆունկցիոնալությունը, դիզայնի ճիշտ ցուցադրումը և բեռնման արագությունը: Իրավիճակը նորմալ է համարվում, երբ կայքի էջերը և օգտատերերի ընտրանքները բեռնվում են 3-5 վայրկյանից ոչ ավելի։
Որպեսզի ստուգեք օպտիմալացման աստիճանը և հասկանաք, թե որքան արդյունավետ է այժմ գրված HTML կոդը, կարող եք օգտվել այնպիսի ծառայություններից, ինչպիսիք են.
- optimization.com;
- SEO ստուգաթերթի պորտալ;
- Firebug plugin.
Այս գործիքները կօգնեն ձեզ ստուգել, թե արդյոք ամեն ինչ արվել է HTML կոդի քանակը նվազեցնելու և դրա կառուցվածքը բարելավելու համար: SEO-ի ստուգաթերթի ռեսուրսում կարող եք ստուգել այն ցուցակը, թե ինչ է արդեն արվել օպտիմալացման համար և ինչ դեռ չի արվել, և նշեք կատարվածը:
Վավերացում
Դուք կարող եք ստուգել կայքի կոդը սխալների համար՝ օգտագործելով վավերացման ծառայությունները՝ վավերացնողները: Կոդի արդյունավետ ստուգումն իրականացվում է validator.w3c.org-ի միջոցով
Եթե առաջին ստուգման ժամանակ համակարգը արտադրում է ավելի քան հինգ հազար սխալ, մի վշտացեք: Որոշակի թերությունը շտկելուց հետո դուք կարող եք նորից ստուգել, և սխալները շատ ավելի քիչ կլինեն, քանի որ մեկ թերությունը հանգեցնում է մյուսներին, և երբ այն ուղղվի, դրանք կվերանան:
Ուղղված և օպտիմիզացված կոդ ունեցող կայքը որոնման արդյունքներում բարձր վարկանիշի ավելի լավ հնարավորություն ունի, քան սխալներ պարունակող ծանրաբեռնված HTML կոդով ռեսուրսը:
Բարի կեսօր Ես երկար ժամանակ տեխնիկական օպտիմալացման մասին որևէ նշում չունեմ, ուստի այսօր կխոսեմ CSS սեղմում.
Անմիջապես հարց է ծագում՝ ինչո՞ւ է դա անհրաժեշտ։ Պատասխանը պարզ է՝ օպտիմիզացնելով ոճաթերթերը՝ կրճատվում են ներբեռնված կոդի քանակը և style.css ֆայլի քաշը։ Արդյունքում էջը ավելի քիչ կկշռի, ինչը կխնայի տրաֆիկը և կբարձրացնի կայքի բեռնման արագությունը։
Բացի այդ, Google-ը ճանաչում է ինտերնետ էջի բեռնման արագությունը որպես որոնման արդյունքներից մեկը։
Համաձայն եմ, նույնիսկ չնայած ժամանակակից պրովայդերների ալիքների բարձր հզորությանը և ամենուր տարածվածին անսահմանափակ ինտերնետ, սա էական գործոն է։ Հետեւաբար, ես խստորեն խորհուրդ եմ տալիս ուշադրություն դարձնել ոչ միայն դրա չափին, այլեւ դրա չափին:
Ինչպես օպտիմիզացնել CSS-ը և նվազեցնել ֆայլի չափը
Դուք կարող եք մոտենալ օպտիմալացմանը տարբեր ձևերով. Ամենաանվտանգը ոճերի ֆայլը ձեռքով մաքրելն է: Թեև կարելի է վիճել, որովհետև անգրագետը կարող է այնպիսի բան անել, որ սատանան կոտրի նրա ոտքը, և դու դեռ չես հասնի առավելագույն սեղմման։
Ինչ գործողություններ կարող են իրականացվել CSS-ի օպտիմալացման ժամանակ.
- Հեռացրեք չօգտագործված ընտրիչները:
- Հեռացրեք չօգտագործված մեկնաբանված տողերը:
- Նվազեցրեք մեկնաբանությունների քանակը ոճային ֆայլում: Միշտ հարմար է, երբ տարրերը խմբավորվում են ըստ ընդհանուր բնութագրի և ունենում են սովորական օգտատերերի աչքին անտեսանելի մեկնաբանություններ։ Բայց հաճախ CSS-ում սեղմելիության բարձր աստիճանի հասնելու համար պետք է ազատվել դրանցից։ Հետագա աշխատանքի ընթացքում կոդով նավարկելը հեշտացնելու համար դուք դեռ կարող եք դրանք օգտագործել, բայց հեռանալ համառոտ նկարագրություններ.
- Հեռացրեք դատարկ տողերը և բացատները: Բայց դուք չպետք է շատ տարվեք ծածկագիրը, որպեսզի կարողանաք հեշտությամբ փոփոխություններ կատարել.
- Միավորել նույն հատկություններով տարրերը:
- Օպտիմալացնել տառատեսակները: Ավելի լավ է օգտագործել մեկ տառատեսակ: Էջի յուրաքանչյուր առանձին բլոկում տարբեր տառատեսակ օգտագործելը վատ ձև է և, ինչպես տեսնում եք, ծանրաբեռնում է ոճի ֆայլը:
- Օպտիմալացնել գույները: Սա բավականին պարզ է անել, բայց դժվար է բառերով բացատրել, ուստի ես հստակ օրինակներ կտամ.
Իհարկե, դուք կարող եք գտնել օպտիմալացման այլ եղանակներ, բայց ես հավանաբար կդադարեմ այստեղ և կշարունակեմ իմ պատմությունը առցանց CSS օպտիմալացման գործիքների մասին:
CSS-ի օպտիմիզացում՝ օգտագործելով առցանց ծառայություններ
Բոլորին առցանց ծառայություններպետք է վերաբերվել հատուկ խնամքով և ուշադրությամբ, որպեսզի չկոտրվի փայտը: Եվ պարտադիր է կրկնօրինակում պատրաստելը, այնուամենայնիվ, այս առաջարկությունը վերաբերում է բոլոր խմբագրված ֆայլերին:
Կան բավարար քանակությամբ առցանց գործիքներ (CleanCSS, Online CSS Optimizer և այլն), որոնք կարող են կատարել CSS օպտիմալացում: Նրանք շատ չեն տարբերվում միմյանցից, հաճախ օգտագործում են նույն ալգորիթմները և սեղմման գրադարանները, օրինակ՝ YUICompressor կամ CSSTidy:
Ես ավելի մանրամասն կանդրադառնամ այն մեկի վրա, որն առավել հաճախ եմ օգտագործում: Սա CSS օպտիմիզատոր է վեբ վարպետների համար CY-PR.com պորտալում:
Սկսելու համար դուք պետք է տեղադրեք CSS հատված կամ ոճաթերթի ամբողջ բովանդակությունը տեքստային դաշտում: Օգտագործեք բացվող ցանկը աջ կողմում արագ կարգավորումներ :
- առավելագույնը (անընթեռնելի կոդ, ամենափոքր չափը);
- բարձր (անցանելի ընթեռնելիություն, փոքր չափս);
- ստանդարտ (ընթեռնելիության և չափի հավասարակշռություն);
- ցածր (ընթեռնելի կոդը);
- ընտրեք ինքներդ (մուտքագրեք ստորև նշված պարամետրերը):
Անվտանգ օպտիմալացման համար խորհուրդ է տրվում օգտագործել ստանդարտ սեղմում: Պարզապես զվարճանալու համար օգտագործեք մյուս արագ կարգավորումները, բայց հիշեք պահուստային պատճեն. CSS սեղմման պարամետրերը սահմանելուց հետո կարող եք սկսել ուղղակիորեն աշխատել սցենարի հետ՝ սեղմելով կոճակը Օպտիմալացնել CSS-ը.
Արդյունքները ցուցադրվում են ստորև՝ նշելով բնօրինակ և օպտիմիզացված կոդի չափը, ինչպես նաև սեղմման հարաբերակցությունը որպես տոկոս.
Մի վերջին հավելում. փորձեք համատեղել CSS ֆայլերը: Որոշ պլագիններ օգտագործում են իրենց ոճերը, որոնք պահվում են առանձին ֆայլերում, լավ կլիներ դրանք համատեղել մեկի մեջ: Հաջորդ անգամ այս բաժնում ես ձեզ կասեմ, թե ինչպես կարող եք ավտոմատ կերպով ստանալ սեղմված CSS որպես արդյունք: Կհանդիպենք շուտով:
Շարունակում եմ, հիմա իմ առջև կա ևս մեկ կետ, որն ինձ առաջարկեց Google-ը. Հեռացրեք render-blocking JavaScript-ը և CSS-ը էջի վերևից. Այժմ ես կփորձեմ պարզել, թե ինչն է այնտեղ ավելորդ, և ինչպես հեռացնել ավելորդ JavaScript-ն ու CSS-ը:
Հիշեցնեմ, որ ես թեստեր եմ կատարում այս ծառայության հետ, որտեղ ինձ հատուկ խորհուրդ են տվել JavaScript-ի և CSS-ի վերաբերյալ.
Ինչպես տեսնում եք, ես ունեմ այս մեկը մեծ խնդիր, միանգամից 8 սկրիպտ է բեռնվում, և դրա պատճառով առաջին էկրանը չի բեռնվում այնքան արագ, որքան մենք կցանկանայինք: Կան նաև 10 css ֆայլեր, որոնք նույնպես օպտիմիզացված չեն: Դե, եկեք խնդիրը լուծենք։
Այս հարցի վերաբերյալ պնդումները մոտավորապես այսպիսին են.
Հեռացրեք JavaScript կոդը, որը խանգարում է ցուցադրմանը.
- https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver=1.10.2
- https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
- https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
- https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
- https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1
Վերջերս ես գտա մի հետաքրքիր լուծում. function.php-ում մենք պետք է տեղադրենք կոդ, որը կհրամայի այն սկրիպտները, որոնք մենք պետք է անմիջապես չբեռնենք:
ֆունկցիան jquery_in_footer() ( wp_register_script ('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array ('jquery')); wp_register_script ('tie-easing', get_urie')_ js/jquery.easing.1.3.js', array('jquery'));
Օրինակում ավելացվել է երկու սցենար, բայց մենք ավելացնում ենք այնքան, որքան ցանկանում ենք, և նրանք, որոնք դանդաղեցնում են էջի բեռնումը։ Ես փորձեցի կիրառել այս լուծումը. դա ինձ մոտ չաշխատեց, գուցե ինչ-որ բան սխալ արեցի:
Ինքը՝ Google-ը, խորհուրդ է տալիս ատրիբուտը տեղադրել սցենարի մեջ համաժամ, ինչը նրա բեռնումը կդարձնի ասինխրոն: Բայց այս լուծումը հարմար է միայն արտաքին սկրիպտների համար, օրինակ, այս async հատկանիշը կարող է տեղադրվել Yandex Direct գովազդային սցենարի մեջ, եթե ձեր գովազդը ցուցադրվի առաջին էկրանին: Yandex-ն ունի նաև ասինխրոն կոդ, բայց դա ինձ համար խնդիրներ առաջացրեց. եթե մի բլոկը ասինխրոն բեռնումով է, իսկ երկրորդը՝ ոչ, ապա կցուցադրվի դրանցից միայն մեկը։ Բայց դա հիմա դրա մասին չէ…
Դժվար է այս կերպ օպտիմիզացնել պլագինները, դուք պետք է մտնեք յուրաքանչյուր պլագինի կոդը և դրա մեջ գրեք այս հատկանիշը կամ դրա այլընտրանքը: Ես ծրագրավորող չեմ և չեմ անի դա։ Բացի այդ, եթե դուք անընդհատ թարմացնում եք պլագինները, ապա թարմացումից հետո ձեր ամբողջ աշխատանքը կկորչի։
Ի զարմանս ինձ, ես գտա այս հարցի մեկ այլ, շատ պարզ լուծում՝ տեղադրեցի plugin-ը Asynchronous Javascript. Տեղադրելուց հետո ստացա հետևյալ արդյունքը.
Ինչպես տեսնում եք, մնացել է միայն մեկ սկրիպտ, և սա ինքնին plugin-ի սցենարն է։ Տեղադրվելուց հետո ես անձամբ խնդիրներ չունեի կայքի թեման ցուցադրելու հետ կապված, բայց եթե ինչ-որ խնդիր ունեք և պետք է ինչ-որ սցենար անմիջապես բեռնելու համար, ապա plugin-ի կարգավորումներում կարող եք այն ավելացնել բացառություններին.
Ահա թե ինչպես է առաջին կետը հեշտությամբ լուծվում, բայց ինչպես տեսնում եք, սա դեռ բավարար չէ, դուք պետք է օպտիմալացնեք css-ը, ինչպես դա անել:
Ինչպե՞ս օպտիմալացնել CSS-ի կատարումը:
Հիշեցնեմ բողոքների ցանկը.
Օպտիմիզացրեք ձեր CSS-ը հետևյալ ռեսուրսների վրա.
- https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
- https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css
Իդեալում, դուք պետք է դա անեք. վերցրեք բոլոր տվյալները այս css ֆայլերից և տեղափոխեք այն հիմնական stile.css և անջատեք նրանց հարցումը հենց պլագիններում: Բայց, ինչպես հասկանում եք, սա երկար ու հոգնեցուցիչ գործ է, որը հղի է բազմաթիվ որոգայթներով: Միգուցե ապագայում ես դա անեմ, բայց առայժմ այդքան ժամանակ և փորձ չունեմ։
Դուք կարող եք լուծել խնդիրը՝ տեղադրելով plugin, որն ինքնին կմիավորի բոլոր ոճերը մեկ ֆայլի մեջ։ Ես չկարողացա գտնել մի plugin, որը կկատարի միայն այս գործառույթը, այնպես որ ես ձեզ կպատմեմ մի plugin-ի մասին, որն անում է ամեն ինչ միանգամից, հեռացնում է սցենարները և օպտիմալացնում է css-ը:
Ինչպե՞ս օպտիմալացնել ամեն ինչ միանգամից:
Ես որոշեցի տեղադրել plugin-ը Ինքնօպտիմալացնել, որը միաժամանակ օպտիմալացնում է ինչպես սցենարները, այնպես էլ css-ը: Փլագինը տեղադրելուց հետո պարզապես անհրաժեշտ է գնալ դրա կարգավորումներ և ճիշտ տեղում ստուգել վանդակները.
Դրանից հետո Google Page Speed-ը ցուցադրում է սա.
Ոչ մի սկրիպտ չի բեռնվում, ընդամենը երկու css ֆայլ, որոնք ներառում են բոլոր ոճերը, և բոլոր սկրիպտները տեղափոխվում են ստորագրի տարածք: Եթե հիմա նայեք էջի սկզբնական կոդը, ապա կա օպտիմիզացված շիլա, որը դուք չեք կարող պարզել առանց շշի:
Սկզբում կարծում էի, որ այս փլագինը ամբողջությամբ չի լուծի իմ խնդիրները, բայց ինչպես պարզվեց, դա այն պատճառով էր, որ ես այն ամբողջությամբ չեմ կարգավորել: Տուփերը ճիշտ տեղում ստուգելուց հետո ես ստացա ՀԵՆԱ արդյունք: ԲՈԼՈՐ ԽՆԴԻՐՆԵՐԸ ՎԵՐԱՑԱԾ ԵՆ։ 
Դա անելու համար հարկավոր է սեղմել վերևի կոճակը Ցույց տալ առաջադեմ կարգավորումներըիսկ հետո նրանք կհայտնվեն լրացուցիչ պարամետրեր. Պետք է նշել հետևյալ կետերը.
Օպտիմալացնե՞լ HTML կոդը:
Օպտիմալացնե՞լ JavaScript կոդը:
Փնտրեք սցենարներ միայն ներսում ? (հնացած)
Օպտիմալացնե՞լ ձեր CSS կոդը:
Ներդրե՞լ բոլոր CSS-ները:
Պահպանեք ագրեգացված սցենար/css որպես ստատիկ ֆայլեր
Դրանից հետո, ճիշտ է, վիջեթը շտկող պլագինը դադարեց աշխատել ինձ մոտ, բայց դա ամենևին էլ խնդիր չէ, կայքի բեռնման արագությունը շատ ավելի կարևոր է։ Եվ ավելի կարևոր է գոհացնել հորեղբայր Google-ին...
Կցանկանայի նշել նաև մի նրբերանգ՝ ես այս կայքում ունեմ հարմարվողական ձևանմուշ, և եթե այն օգտագործում եք, ապա պլագինը ցուցադրելիս. բջջային տարբերակչի կարող ամբողջությամբ վերացնել բոլոր խնդիրները: Երբ ես միացնում եմ բջջային տարբերակի հավելվածը, սխալներ չեն մնում: Ես ևս մեկ անգամ համոզվեցի, որ արձագանքող դիզայնն ավելի լավ է, քան արձագանքող:
Մեկ այլ նմանատիպ plugin է WP Minify Fix, նա նույն բանն է անում, բայց ինձ ավելի քիչ դուր եկավ, կամ գուցե ես նրան լիովին չհասկացա։
Ես հասկանում եմ, որ իդեալական է այս ամենը անել առանց պլագինների, ձեռքով, բայց դա շատ երկար է և հոգնեցուցիչ, և դա իսկապես չարժե, քանի որ նույնիսկ հասնելուց հետո վարկանիշ 100, դուք ձեր կայքը չեք հասցնի ամենաբարձր մակարդակին՝ կայքի բեռնման արագությունը հարյուրավոր վարկանիշային գործոններից միայն մեկն է և բավականին կարևոր: Բայց մենք պետք է անենք այն ամենը, ինչ կարող ենք:
JavaScript-ի և CSS Google PageSpeed-ի կոդի հեռացում
Չե՞ք գտել պատասխանը։ Օգտագործեք կայքի որոնումը
Վեբ էջերի օպտիմիզացումը աներևակայելի կարևոր մասն է: Սա ներառում է ոչ միայն կայքի ծրագրային կոդի օպտիմիզացում, այլ նաև կասկադային ոճերի թերթիկների (CSS) օպտիմիզացում, որը շատ վեբ վարպետների կողմից անտեսվում է:
Ինչպես կոդերի օպտիմիզացումը, այնպես էլ CSS-ի օպտիմալացումը անհրաժեշտ է էջի բեռնումն արագացնելու և երթևեկությունը խնայելու համար: Քանի որ CSS ֆայլը կշռում է մինչև 100 կբ, շատերը չեն հասկանա դրա օպտիմալացման կարևորությունը, բայց երբ հաշվարկեք, թե օպտիմիզացված ֆայլը տարեկան որքան ժամանակ և թողունակություն կարող է խնայել, դուք կհասկանաք, թե որքան է այն թերագնահատված:
Դուք կարող եք օպտիմիզացնել CSS-ը կամ ձեռքով կամ օգտագործելով հատուկ ծառայություններ: Երկու տարբերակներն էլ ունեն թերություններ. Աղյուսակները ձեռքով օպտիմիզացնելով, դուք կարող եք շատ բան բաց թողնել, ուստի օպտիմալացումն այնքան արդյունավետ չի լինի, որքան մեքենայի օպտիմալացումը: Ավելին, ձեռքով օպտիմիզացումը ձեզնից շատ ժամանակ կխլի, քանի որ CSS-ը կարող է պարունակել կոդերի հազարավոր տողեր։ Այնուամենայնիվ, մեքենայի օպտիմալացումը կարող է հեռացնել կարևոր գծերը, առանց որոնց դիզայնը ճիշտ չի ցուցադրվի: Այս հոդվածում մենք օգտակար խորհուրդներ կտրամադրենք նրանց համար, ովքեր ցանկանում են ձեռքով օպտիմալացնել CSS-ը, ինչպես նաև նրանց համար, ովքեր պատրաստվում են դա անել՝ օգտագործելով առցանց ծառայությունները։
Նախ, համոզվեք, որ օգտագործեք ընդհանուր հատկություններ: Դուք կարող եք պահպանել մի քանի տող, եթե լուսանցք-ներքև, լուսանցք-ձախ, լուսանցք-աջ և լուսանցք-վերևի փոխարեն օգտագործեք մեկ լուսանցք՝ նախորդ չորսի արժեքներով, օրինակ՝ մարմին ( լուսանցք՝ 10px 2px 10px 5px ;)
Օգտագործեք տարածքները խելամտորեն: Բացատները և լրացուցիչ տողերի ընդմիջումները սովորաբար օգտագործվում են CSS-ում օգտագործելիությունը բարելավելու համար: Այնուամենայնիվ, յուրաքանչյուր բացատ ավելացնում է ֆայլի քաշը փոքր քանակությամբ: Հետևաբար, եթե կայքի ձևավորումն արդեն ավարտված է, ոչինչ չի խանգարում ձեզ ամբողջությամբ ազատվել ավելորդ տարածություններից:
Մեկնաբանությունների կարևորության վրա ոչ ոք չի կասկածում։ Ամբողջովին վերացնելով դրանք՝ դուք ավելի դժվարությամբ կգտնեք ձեզ անհրաժեշտ կոդը՝ առանց Firebug հավելվածի: Բայց մի մոռացեք, որ նրանք զբաղեցնում են style.css ֆայլի բովանդակության առյուծի բաժինը։ Այս թյուրիմացությունը շտկելու համար խորհուրդ է տրվում օգտագործել ավելի կարճ նկարագրություններ։ Օրինակ, ///* երկար քնարական դիգրեսիայի */// փոխարեն կարող եք օգտագործել հիշարժան /* Logo */:
Կան, իհարկե, օպտիմիզացման այլ մեթոդներ, բայց շատ ավելի հեշտ է դիմել հատուկ ռեսուրսների, որոնցով կարող եք օպտիմիզացնել CSS-ը անմիջապես բրաուզերից:
Դրանցից ամենաօրինակելիը CleanCSS.com-ն էր։ Այս կայքը առաջարկում է սեղմման մի քանի տարբերակներ՝ ցածր, ստանդարտ, բարձր, գերծանրքաշային և մաքսային: Ստանդարտ սեղմման տարբերակն ամենահավասարակշռվածն է քաշի և ընթեռնելիության միջև: Բարձր և ամենաբարձրը խորհուրդ է տրվում օգտագործել միայն այն դեպքում, եթե ապագայում որևէ փոփոխություն չես կատարի CSS-ում, քանի որ կոդը կդառնա ամբողջովին անընթեռնելի: Այն նաև առաջարկում է մի շարք լրացուցիչ տարբերակներ, ինչպիսիք են գույնի և տառատեսակի սեղմումը, տեսակավորման ընտրիչները և այլն: Դուք կարող եք ստանալ ավարտված արդյունքը կամ տեքստի տեսքով կամ արտահանել այն ֆայլ:
Ռուսական ծառայությունների շարքում CY-PR.com կայքում CSS օպտիմիզատորը արժանապատիվ արդյունքներ է ցույց տվել: Դրա ֆունկցիոնալությունը գործնականում չի տարբերվում CleanCSS-ից: Ստանդարտ պարամետրերով սեղմման հարաբերակցությունը կարող է հասնել 25%, առավելագույն պարամետրերով `ավելի քան 30%: Ցավոք, ֆայլի արտահանում չկա:
Այլ ծառայությունները նկարագրելն անիմաստ է, քանի որ դրանք աշխատում են նույն սխեմայով, ինչ վերոհիշյալ CleanCSS.com-ը և CY-PR.com-ը, բայց դրանք կան և բավականին ֆունկցիոնալ են:
Արդյո՞ք ընդհանրապես անհրաժեշտ է սեղմել CSS կոդը:
Նախ, եկեք որոշենք, թե ինչու պետք է սեղմել CSS կոդը: Եթե մեր css ֆայլերը փոքր են չափերով, ապա ցուցադրելու ոչինչ չկա, բայց եթե դուք զարգացնում եք ամուր նախագիծ, ապա սա բոլորովին այլ խոսակցություն է: Այսպիսով, դուք այստեղ եք սովորելու, թե ինչպես սեղմել CSS-ը: Ավելին... CSS սեղմումը կարող է իրականացվել մի քանի ձևով: Ստորև բերված է CSS սեղմման բոլոր մեթոդների ցանկը, որոնց մասին ես գիտեմ:
CSS սեղմման մեթոդներ
Նշումներ: ստատիկ սեղմում, սեղմում մինչև - 80%-90%
Նշումներ: դինամիկ սեղմում, սեղմում է մինչև -75%-95% (կախված է ձեզանից)
Նշումներ: ստատիկ սեղմում, կոմպրեսներ մինչև - 50%
Պարզապես ընտրեք css սեղմման մեթոդը, որը Ձեզ դուր է գալիս և սեղմեք դրա վրա, կամ կարդացեք բոլոր մեթոդները և կատարեք ձեր սեփական եզրակացությունները, ինչը ես խորհուրդ եմ տալիս:
Սեղմեք CSS-ը՝ օգտագործելով առցանց կոմպրեսորներ
Վերլուծելով css կոմպրեսորների աշխատանքը՝ css սեղմման աստիճանի վերաբերյալ կարող ենք անել հետևյալ եզրակացությունները. Փորձն իրականացվել է երկու css ֆայլի հիման վրա՝ հետևյալ պարամետրերով.
առաջին - 7372 բայթ
երկրորդ - 62,609 բայթ
Առաջին css-ը գրված է կարճ և ընթեռնելի, ուստի ավելի վատ կսեղմվի:
Առցանց կոմպրեսոր CleanCSS
Հասցե՝ www.cleancss.com
Բավականին ամուր ծառայություն, տեսնենք դրա css սեղմման արդյունքները։
Արդյունք:
առաջին - սեղմված մինչև 7075 բայթ (96%)
երկրորդը սեղմված է մինչև 52797 բայթ (84,3%)
Առցանց FormatCSS կոմպրեսոր
Հասցե՝ www.lonniebest.com/FormatCSS
Այս ծառայությունը նախատեսված է ավելի շատ css ֆայլերը ֆորմատավորելու համար, քան դրանք սեղմելու համար: Css տեքստը մուտքագրվում է copy/paste-ի միջոցով:
Արդյունք:
առաջին - սեղմված մինչև 8105 բայթ (109,9%)
երկրորդը սեղմված է մինչև 61715 բայթ (98,5%)
ԱռցանցկոմպրեսորRobson CSS կոմպրեսոր
Հասցե՝ iceyboard.no-ip.org/projects/css_compressor
Ծառայությունը ճկուն է css կոդերի բեռնման առումով: Դուք կարող եք բեռնել css-ը դրա մեջ տեղական գրացուցակից, ինտերնետից կամ պատճենել/տեղադրել: Եկեք նայենք css ֆայլերի սեղմման արդյունքներին:
Արդյունք:
առաջին - սեղմված մինչև 6326 բայթ (86.3%)
երկրորդը սեղմված է մինչև 48,985 բայթ (78,2%)
Առցանցcsshtml կոմպրեսոր Tabifier
Հասցե՝ tools.arantius.com/tabifier
Թույլ է տալիս սեղմել ոչ միայն css, այլ նաև html կոդը: Բայց արդյունքն այնքան էլ տպավորիչ չէ, ինքներդ եզրակացություններ արեք։
Արդյունք:
առաջին - սեղմված մինչև 7876 բայթ (106.8%)
երկրորդը սեղմված է մինչև 60706 բայթ (96.9%)
CSS-ի սեղմում PHP-ի միջոցով
PHP-ի միջոցով CSS սեղմումը հասանելի է մի քանի ձևով, բայց ես կտամ միայն մեկը, ամենահետաքրքիրը իմ հասկանալու համար: php-ում css սեղմման առավելությունը սեղմման կարգավորումների դինամիզմն ու ճկունությունն է, քանի որ դուք ինքներդ եք դրանք դնում՝ օգտագործելով ձեր սեփական php սկրիպտը: Իմ սցենարն այսպիսի տեսք ունի.
Շատ պարզ և հարմար կոդ, որը տեղադրում եք css ֆայլի մեջ, որը պետք է միացված լինի ամենածանօթ եղանակով։ Այս php սցենարի առանձնահատկությունը կանոնավոր արտահայտությունների օգտագործումն է, որոնք հեռացնում են բոլոր մեկնաբանությունները և բացատ նիշերը՝ այդպիսով սեղմելով css-ը։
Base 62 CSS սեղմում
Մեթոդը բավականին հետաքրքիր և արդյունավետ է, բայց այն ստատիկ է, այսինքն՝ ամեն անգամ, երբ փոխում եք ձեր css ֆայլը, անհրաժեշտ է անցնել css ֆայլը սեղմելու ընթացակարգը։ Այս ընթացակարգը նկարագրված է ստորև քայլ առ քայլ:
1. Սեղմումcss օգտագործելով կոմպրեսոր
Դուք պետք է օգտագործեք CSS կոմպրեսորներից մեկը՝ բոլոր բացատ նիշերը հեռացնելու և CSS կոդը մեկ տողի մեջ հավասարեցնելու համար:
2. Ստեղծագործությունjs ֆայլ
Դուք պետք է ստեղծեք js ֆայլ և դրանում տեղադրեք հետևյալ կոդը.
Document.write("");
/*ձեր ոճը */-ի փոխարեն տեղադրեք ստացված տողը սեղմման ընթացակարգի առաջին քայլում։
3. Base 62 սեղմում
Ինչպես տեսնում եք, այժմ դուք ունեք js ֆայլ, որը սեղմում եք ծառայության միջոցով Փաթեթավորողhttp://dean.edwards.name/packer/
Տեղադրեք ձեր js ֆայլի կոդը վերևի դաշտում և ընտրեք վանդակը Base62 կոդավորում, որից հետո արդյունքը կստանաք ստորին դաշտում։
Այս մեթոդը թույլ է տալիս սեղմել css ֆայլը՝ 15կբ-ից մինչև 8կբ, այսինքն՝ գրեթե 50%-ով: Նման բարդ ընթացակարգի առավելությունն այն է, որ ստացված կոդը տեղադրում եք js ֆայլի մեջ, որտեղ գտնվում են ձեր մնացած js սկրիպտները, և այն բեռնված է միասին:
Ես դրեցի իմ ամբողջ գիտելիքները սեղմման մասինcss. Եթե ավելի շատ մտքեր ունեք արդյունավետ ուղիներսեղմումcss, խնդրում ենք տեղադրել մեկնաբանություններում: Շնորհակալություն ուշադրության համար։
