Որպես կայքի սեփականատեր, գիտեք, որ այն պետք է արագ լինի: Եվ դուք արդեն կարդացել եք տարբեր հոդվածներ այն մասին, թե ինչպես արագացնել ձեր կայքը, գուցե նույնիսկ ինչ-որ բան արդեն իրականացվել է: Հաջորդը հետաքրքիր է դառնում, թե որքան արագ է բեռնվում կայքը: Այստեղ դուք գնում եք Google PagesPeed պատկերացումներ, որպես ամենատարածված գործիք, կստանաք գնահատական \u200b\u200bեւ առաջարկությունների ցուցակ Google- ից: Եվ ահա մեզանից շատերը կորչում են.
- Էջերի ցուցանիշը SEO- ի համար պատկերացումների ցուցանիշն է:
- Ինչու է իմ կայքի գնահատումը առավելագույնը:
- Ինչ են նշանակում այս բոլոր առաջարկությունները:
Նախկինում դուք ներառել եք տեղում պահելը եւ ակնկալվում է, որ էջի վարկանիշը գրեթե կատարյալ կլինի, եւ այժմ կարծում եք, թե ինչու է այս plugin- ը արագորեն շտկել բոլոր խնդիրները: Միգուցե դա շատ լավը չէ: Կարճ պատասխան է.
Google PagePeed ցուցանիշը նշանակություն չունի:
Այո, այդպես է ... Բայց ինչու դա նշանակություն չունի:
Էջի արագությունը VS PagePeed Insights
Արագությունը (կայքի ներբեռնման ժամանակը) կարեւոր է եւ կարեւոր մետր է SEO- ում, ինչպես նաեւ ազդում է օգտվողի փորձի վրա: Երբ Googlebot- ը ինդեքսավորում է կայքը, նա չի տեսնում էջերի վարկանիշի ցուցանիշը, բայց միայն ինքնությունն ինքնին գիտի: Գիտեք, որ Google Pagespeed Insights- ը չի չափում ձեր կայքի արագությունը: Այո, նորից կարդացեք.
Google PagePeed Insights- ը չի չափում կայքի արագությունը:
Բարեւ, հարգելի բլոգային ընթերցողների կայք: Այսօր գրառումը նվիրված կլինի Google էջի օժանդակության հիանալի գործիքին, ինչը թույլ է տալիս փորձարկել ցանկացած էջ, ուսումնասիրելու դրա բեռնման արագացման հնարավորությունները ():
Գաղտնիք չէ, որ որոնիչները, հատկապես Google- ը, վերջերս լուրջ ուշադրություն են դարձնում այս ասպեկտին, ուստի արագ կայքերը ստանում են որոշակի առավելություն որոնման արդյունքներում դասակարգման եւ ավելի բարձր դիրքերում:
Google Page Speed \u200b\u200bInsights- ը ոչ միայն հայտնաբերում եւ ցույց է տալիս բոլոր պատճառները, թե ինչու է էջը բավարար չափով բեռնված չէ, այլեւ առաջարկում է դրանք վերացնելու հատուկ եղանակներ, եւ հայտնաբերված որոշ խնդիրներ կարող են հեշտությամբ վերացնել սպասարկման ուժերը ավտոմատ ռեժիմով:
Որոնք են օպտիմիզացման գործիքները, որոնք ամեն դեպքում օգտագործում են Google- ը:
Սկզբունքորեն, ձեր նախագծի յուրաքանչյուրի համար ես վճարում եմ բավականաչափ ժամանակ `էջերը օպտիմալացնելու համար, որոնք նպաստում են դրանց արագ ներբեռնումին: Այն իսկապես բլոգի չի հասել միայն բլոգի վայրից առաջ, որն ըստ էության տեսողական ձեռնարկ է սկսնակ վեբ վարպետների համար, ոչ թե զուրկ առողջ ամբիցիաներից եւ գանձվում է նպատակին հասնելու համար:
Բայց, քանի որ բնության կողմից ես կատարելագործում եմ, չէր կարող թույլ տալ, որ տեղեկատվական վեբ ռեսուրսը կրի, այնպես որ խոսելու, զանգվածի իմացության մեջ կլինեն տեսակետների մեջ: Հետեւաբար, որոշվեց առավելագույն ջանքեր գործադրել այն օպտիմալացնելու համար, ներառյալ էջը ՁԻԱՀ-ի առաջարկությունները:
Հետեւաբար, այն անմիջապես դիմում է այս գործիքի նկարագրությանը, որպեսզի կարողանաք գնահատել դրա գործունակությունը եւ կիրառել գործնականում `ի շահ ձեր վեբ ռեսուրսների:
Նախկինում հնարավոր էր օգտագործել զննարկիչների ընդարձակման տեսքով եւ ներբեռնման հղումներ, որոնք մասնակցում էին Google- ի հատուկ էջում: Ավելին, այն լեռան մեջ կիրառելու համար, նախ անհրաժեշտ էր, որտեղ ներկայացված էր պոչի ՁԻԱՀ-ը, որպես իր լրացում.
Այժմ այլեւս հնարավոր չէ ընդարձակումներ կիրառել Google- ից զննարկիչների համար, չնայած նույն plugins- ը, բայց մի քանի այլ մեկնաբանություններում առկա են պաշտոնական Chrome եւ Masisle կայքերում: Բացի այդ, բավականին ֆունկցիոնալ մոնիտոր կա Առցանց ծառայություն Google- ը նույն ֆունկցիոնալ եւ ոչ պակաս հնարավորություններով: Եթե \u200b\u200bգնում եք մշակողների բաժին, կտեսնեք հղում էջի արագության գործիքին.
Ի դեպ, նույն էջում «Էջեր Ինչ գործիքներ» Գոյություն ունեն Google- ի բոլոր առաջարկները արագացնող կայքերի համար: Կարծես թե «Լավ կայսրության» մշակողները լրջորեն ընդունեցին օպտիմիզացում եւ ամբողջ ինտերնետային տարածքի արագացում, քանի որ մշակողների մեջ դուք կգտնեք օպտիմիզացման գրադարանի հղում ( Ինտեգրվել էջերի որոնման օպտիմիզացման գրադարանը) Բաց կոդ:
Բաց կոդի առկայություն ծրագիր Այս նախագիծը գործում է մոդուլի հիման վրա » mod_pagespeed«Այն, որը տեղադրված է Apache սերվերի վրա (, ի դեպ, ճնշող մեծամասնությունը) նշանակում է, որ այն կարող է բարելավել կամ թարմացնել որեւէ մեկին:
Այսինքն, այս եղանակով բավականին իրատեսական է Ինտերնետ համայնքի հաշվին `կատարյալ արագացման գործիքին մոտ: Ինչպես է զբաղվում գործնականում, ժամանակը ցույց կտա: Բնականաբար, լիարժեք ներդրման եւ այս բեկումի հաջողության հասնելու համար անհրաժեշտ է լինել բավականին որակավորված ծրագրավորող:
Եթե \u200b\u200bնայեք վերին սքրինշոթին (տեղեկատվությունը շրջանառվում է կանաչ շրջանակով), կտեսնեք հղում, այնտեղ պատրաստի մոդուլի վերջին տարբերակը տեղադրելու համար: Կարող է հետաքրքիր լինել այն տերերի համար, ովքեր կարող են տեղադրել այն իրենց սերվերներում, ապահովելով այնտեղ տեղակայված կայքերի ավտոմատ արագացում:
Ավելին, Էջի ՁԻԱՀ-ի մոդուլ կա երկու փոփոխություն. Ուղղակի apache սերվերներ Իսկ Bundle Apache + Nginx- ի համար, որտեղ երկրորդը խաղում է վստահված սերվերի դերը.
Ի դեպ, ժամանակակից պայմաններում ապարանք եւ նեգնիկի մասնաբաժինը առավելագույն պահանջարկ ունի եւ օգտագործվում է առավել առաջադեմ հորձանուտների (ներառյալ, օրինակ, Spritthost), քանի որ այն ապահովում է ռեսուրսների արդյունավետ օգտագործում: Այսպիսով, եթե հետաքրքրված եք կայքերի ավտոմատ արագացման այս մեթոդով, կարող եք կցել այս ձեռքին կամ լարվել ձեր Hoster- ին:
Google »- ի էջերը խորհուրդ են տալիս (էջի բեռնման կայքի արագությունը բարձրացնելու ուղիներ)
Վերեւում մենք նայեցինք հնարավորությանը, այսպես ասած, կայքերի ներբեռնելու արագության գլոբալ բարձրացումը, որը պահանջում է հատուկ գիտելիքներ (հավանական է, որ այդ տեղեկատվությունը օգտակար կլինի որեւէ մեկի համար):
Բայց ընթերցողների հիմնական մասի համար, այսինքն, պարզ վեբ վարպետներ, ավելի համապատասխան տարբերակ պարզ եւ հասանելի է այստեղ եւ այժմ: " Պարզապես նման պայմանները լիովին համապատասխանում են PagePeed Insights ծառայությանը, որը կխոսի: Կայքի առանձնահատուկ էջը վերլուծելու համար մուտքագրեք դրա URL () այս էջում.
Վերլուծելուց հետո կտեսնեք Google- ի կանոնները եւ, ինչպես վերաբերում է դրան Բջջային սարքերեւ ԱՀ, որը հատկապես արժեքավոր է: Այս օրինակում, այս բլոգի հիմնական էջի համար, բջջային հեռախոսներից 100-ից 76 հավատարմագրեր միջին արդյունք են, որը կարող է զգալիորեն բարելավվել, եթե օգտվեք առաջարկություններից:
Ավելին, յուրաքանչյուր ռեսուրսը օպտիմալացնելու համար, որը դանդաղեցնում է էջի բեռը, հղումները տրվում են համապատասխան բաժիններին (ստացման նպատակով սեղմեք հղումը) «Ինչպես շտկել»:), որտեղ կգտնեք անհրաժեշտ գործողությունների նկարագրությունները `թերությունները վերացնելու համար:
Բայց այստեղ դուք պետք է կարեւոր դիտողություն կատարեք: Անհրաժեշտ Վերլուծեք էջերը Տարբեր տեսակներ Ընդհանուր առմամբ, ներբեռնման ժամանակի ներբեռնման ժամանակի նվազման համար: Օրինակ, ստանդարտ բլոգի «Վորդփու» համար, հիմնական, սյուների, ստատիկ էջերի եւ գրառումների այս տեսանկյունից օպտիմիզացման մակարդակը կարող է բոլորովին այլ լինել:
Վերեւում ես օրինակ բերեցի Գլխավոր էջՈրի վրա ցուցադրվում են հաղորդագրությունները, բայց հոդվածներից մեկը ՁԻԱՀ-ը շատ ավելի ցածր գնահատական \u200b\u200bէ տվել.
Դա տեղի է ունեցել, քանի որ հաղորդագրությունները սովորաբար շատ ավելի մեծ են եւ ներառում են շատ տարբեր ռեսուրսներ եւ բովանդակություն (պատկերներ, տեսանյութեր, գրություններ): Հետեւաբար, ավելի լավ է սկսել դրանցից օպտիմիզացման ստուգում: Ի դեպ, այս տեսանկյունից հետ մղեք այդ գնահատականը Էջի արագությունը նախատեսում է բջջային հեռախոսներՔանի որ նման սարքերի վրա պարկեշտ բեռի արագության հասնելը պահանջում է շատ ավելի շատ հեռուստատեսություններ:
Բայց նույնիսկ գրառումների տարբեր գրառումները կարող են տարբերվել որակով: Դա տեղի է ունենում, ներառյալ, քանի որ նրանցից ոմանք կատարում են լրացուցիչ սցենարներ, որոնք դանդաղեցնում են ներբեռնումը: Օրինակ, այս տաճարներից մեկի օպտիմիզացման մակարդակը ինձ ոչ միայն զարմացրեց, այլ իսկական ցնցում.
Հասկանալի է, որ 100 հնարավորից 62 միավորը այն արդյունքն չէ, որով դուք պետք է ձգտեք: Եւ բոլորը, քանի որ գրառումների այս եւ մի քանի այլ էջերում ես ունեմ Syntaxhighlighter Plugin Script, նախաձեռնող Գեղեցիկ ձեւավորում Լուսավորված կոդեր:
Կայքում կարող են լինել մի քանի նման ընդլայնումներ: Յուրաքանչյուր դեպքում անհրաժեշտ է ինքներդ ձեզ համար լուծել, թե որքան կարեւոր է հավելվածը ձեր ռեսուրսի համար այն ցուցանիշից, որն իր տրամադրում է այն ֆունկցիոնալության տեսանկյունից: Եվ կախված դրանից, անհրաժեշտ է դա ջնջել կամ միջոցներ ձեռնարկել, որոնք կօգնեն արագացնել էջի բեռը:
Վերոնշյալը հատկապես ճիշտ է աշխարհի ամենատարածված CMS- ում, ինչը վայելում է վեբ վարպետների ճնշող թիվը: Այս բազմաֆունկցիոնալ շարժիչը լավն է, բայց այն պետք է անընդհատ կարգաբերվի սերվերի վրա բեռը նվազեցնելու եւ էջի բեռնման ժամանակը նվազեցնելու առումով: Հետեւաբար, WP- ում աշխատող վեբ ռեսուրսների տերերը պետք է ձեռնարկեն այս գրությունը: Եվ նման ծառայության մատչելիությունը, որպես էջի օգնություն, ինչպես դա հնարավոր չէ:
Համոզվեք, որ կարդացեք այս բոլոր հոդվածները առնվազն դիտման ռեժիմում, կտտացնելով վերը նշված հղումներին, կարող եք ինքներդ ձեզ համար շատ օգտակար գտնել: Ապագայում ես նախատեսում եմ վերադառնալ վեբ ռեսուրսների արագացման խնդրին, եւ, հետեւաբար, կարող եք բաժանորդագրություն տրամադրել այս թեմայի վերաբերյալ թարմ հրապարակումների արդյունքը չթողնելու համար:
Եզրափակելով, տեսեք այն օգտակար տեսանյութը, որից դուք կսովորեք, թե ինչու Էջի արագության խորհուրդները առաջարկվող բնույթ են կրում եւ ինչի համար չպետք է հետեւեն նրանց:
Module Google Pagespeed կայքի համար. Ինչ կարող է եւ ինչպես օգտագործել
Մենք որոշեցինք փորձեր կատարել եւ ավելացնել արագացուցիչը Google- ից երեք նախագծերից: Ինչ է պատահել դրանից `պարզեք:
Կայքերը պետք է անմիջապես բեռնաթափեն: Օ Oh, ոչ, տեղերը չպետք է որեւէ մեկը: Գնացեք տրոլեյբուս եւ նստեք այն ուսանողի կողքին, ով նստում է iPhone- ով: Տեսեք, արդյոք նա պատրաստ է սպասել, մինչեւ որոշ առցանց խանութ բեռնվի: Եկեք պարզապես ասենք. Երեք վայրկյան, եւ ներդիրը փակվում է: Հաջորդ արդյունքը որոնման արդյունքներից հետեւյալ արդյունքն է:
Ի դեպ, Pro Որոնման թողարկում, Կայքի ներբեռնման արագությունը ազդում է որոնիչներում դասակարգման վրա: Prufs եւ. «Թորինգ» կայքերը ավելի քիչ հավանական են, որ կանչեն ռոբոտներ, եւ դա նշանակում է, որ ավելի քիչ հաճախ ինդեքսավորված է: Դրանից տեղ կա անհրաժեշտ տեղեկատվություն գտնելու արտահանձնման եւ հարմարության մեջ:
Անընդհատ մտածեք այն մասին, թե ձեր էջը կբեռնվի ավելի դանդաղ սմարթֆոնի վրա, քան ԱՀ-ն: Եվ եթե այդպես է, ապա մենք, ամենայն հավանականությամբ, մենք պետք է իջեցնեն այն արտահանձնման մեջ:
- Matt Katts, Google
Google- ը աշխատել է եւ թողարկել է իր գործիքը `արագությունը ստուգելու համար - PagePeed. Գտեք արգելակման բեռնման տարրերը պարզապես գնացեք այստեղ Եվ միակ դաշտում նշեք այն հասցեն, որը ցանկանում եք փորձարկել: Մեկ րոպե, մանրամասն ներկայացման զեկույցը պատրաստ կլինի: Արդյունքը կցուցադրվի թութակներում: Իդեալում, նրանց սպասարկման կայանը, բայց փորձեք հասնել: Նույնիսկ Google- ն ինքն ուժի տակ չէ. Ստուգեք նրա ծառայությունները :)
Թեստեր են իրականացվում կայքի աշխատասեղանի եւ բջջային տարբերակի համար: Կենտրոնացեք ավելի լավ գույնի մասշտաբով. Դեղին գոտին ցույց կտա, որ կան տարրեր, որոնք արժե օպտիմիզացնել, կանաչը կհաղորդի, որ ամեն ինչ կարգին է: Եթե \u200b\u200bԿարմիր գոտում կայքը պտուտակեք արագությունը եւ օպտիմիզացրեք: Հակառակ դեպքում անդունդից առաջ. Մինչ էջը բեռնված է, օգտագործողը արդեն կգնա մեկ այլ կայքի :)
Կարող եք կայքը օպտիմիզացնել երկու եղանակով:
Ձեռնարկի օպտիմիզացում
1. Քամեք Photoshop- ի նկարները կամ վազեք Optimizilla: , օրինակ
Որքան փոքր է նկարները կշռում են, այնքան ավելի շատ կոշիկները ավելի արագ են բեռնվում: Մենք սեղմում ենք, բազմաբնույթ մասնիկների նկարները թաքնվում են կատվի տակ: Բավական է 640 × 480: Ավելի քիչ նկար - քնած կայք:
Նույնիսկ միացված Սկիզբ էջը Google Developers Graphics- ը կարող է սեղմվել 71% -ով:
2. Պատկերները միացնելով ինքնուրույն կայքից եւ դրանք Google- ով չխփեք
Minus - մինչ զննարկիչը չի բեռնել տառատեսակը, օգտագործողը կտեսնի ձանձրալի արիալ կամ Թահոմա:
3. Օգտագործեք զննարկչի քեշը առավելագույնը
Երբ կայքը մասամբ պահպանվում է հաճախորդի կողմից. Ներբեռնումը շատ ավելի արագ կընթանա:
4. Նվազեցրեք JavaScript- ը եւ CSS- ը
Սցենարները չեն խմբագրվում ազատ արձակվելուց հետո ամեն օր `իմաստ չունի դրանք սեղմել ճանճը: Բավարար չափից հետո մեկ անգամ օպտիմալացնելու համար: JS Templates- ը ավելի լավ է կարգավորել սերվերի վրա, ներբեռնելուց հետո ներկառուցեք արդյունքները HTML եւ օգտագործեք հաճախորդի ձեւանմուշները:
5. Նվազեցրեք HTML- ը
Գործնականում - ավելորդ բացերի, ներդիրների, գծերի հեռացում:
6. Delete նջել չօգտագործված ծածկագիրը:
Կարող է կառուցվել «քրոմ» աուդիտի մեջ: Կտտացրեք F12- ը եւ գնացեք աուդիտի ներդիր: Ստորեւ ներկայացված է միակ գործարկման կոճակը: Այն, ընդհանուր առմամբ, նույնն է, ինչ pages- ը: Միայն իրական ժամանակում:
Ավտոմատ օպտիմիզացում
City անկացած կայք բաղկացած է դինամիկ եւ ստատիկ տարրերից: Դինամիկ տարրեր - HTML կոդ, որը ձեռք է բերվել PHP- ի եւ տվյալների բազայի պահանջներից: Իսկ մնացածը ստատիկ է: Սրանք նկարներ, javaScript եւ CSS են:
Ավտոմատ օպտիմիզացրեք կայքը կարող է կտրուկ լինել Google- ի կողմից - PagePeed Insights. Այս մոդուլը տեղադրված է Nginx սերվերի վրա եւ սեղմում է իրական ժամանակում պարամետրերից հետո: dofig Info , ի թիվս այլ բաների, գրաֆիկական:
PagePeed Insights- ը կարող է վերլուծել HTML- ը եւ օպտիմալացնել ռեսուրսները: Մաքուր, կարճ: Աղբյուրի կոդում ռեսուրսները կլինեն մեկ այլ ուղու վրա, ոչ թե ինչով է սահմանվում լուսանկարը ծրագրավորողին սեղմելու համար: Այն պետք է հաշվի առնել: Բայց ռեսուրսների դրսեւորումը չի փոխվի: Քաշը կնվազի: Այնպես որ, դա կբարձրացնի էջի ներբեռնման արագությունը, եւ այցելուները կբավարարվեն :)
Այնուամենայնիվ, Pagespeed Insights- ը սահմանափակումներ ունի: Այն կարող է տեղադրել միայն NGINX- ի վրա, գործարկվել է կամ Վիրտուալ սերվեր, Ոչ, Գերմանիայում ինչ-որ տեղ վարձակալված է, ընդհանուր սերվերը չի համապատասխանի:
Երկրորդ սահմանափակումն ասոցացվում է հավերժական պատերազմի զննարկիչների հետ: PagePeed Picture- ը վերածվում է ձեւաչափի: WebP- ի, որը միայն հասկանում է «քրոմը» (հանրաճանաչ սիրելիում Internet Explorer. 6 Այս բանը չի անցնի): Մեջ Վերջին տարբերակները Նման նկարների ցուցադրումը սովորել է եւ «օպերային»: Քանի որ շարժիչը փոխվել է:
Էջերի օգտագործման պատկերացումների օրինակներ
Մենք տեղադրեցինք PagePeed Insights Module- ը երեք նախագծերի վրա `ձեր նոր կայքում եւ երկու հաճախորդի վրա: Մոդուլը տեսնում է, որից զննարկիչը գալիս է հարցում, նայում է, արդյոք այն պատրաստված է վեբ ձեւաչափի ցուցադրում եւ տալիս է օպտիմիզացված պատկեր կամ սովորական JPEG:
Սիբիասում տեղադրումը տեւեց մոտ կես օր: Ինչ-որ բան ստիպված էր կատարել էմպիրիկ. Փոխվել է, դիտել կատարվածը: Երբեմն գոտին կանաչ էր, եւ դեղին թռչելը կարող էր ամբողջովին անկանխատեսելի լինել:
Այժմ երկու տարբերակները կանաչ գոտում են: Այնպես որ, արագություն չի լինի: Եթե \u200b\u200bկապի արագությունը լավն է, ոչ մի եզր, մի քանիսը :)
Ներսում Տեխնիկական աջակցություն Մենք որոշեցինք փորձել եւ տեղադրել էջերի տպագրության մոդուլը դրա վրա:
Google PagesPeed- ը գործիք է, որը թույլ է տալիս ստուգել կայքի արագությունը: Այն թույլ է տալիս գնահատել ստացիոնար ԱՀ-ների եւ շարժական սարքերի արագ ներբեռնումը եւ առաջարկություններ, որոնք կարող են օգտագործվել օպտիմալացնելու համար:
Կայքի բեռնման արագության վերլուծության արդյունքը այսպիսին է.
Ստուգեք կայքի արագությունը Google PagePeed Insonles- ի եւ սպասարկման առաջարկություններից
Կայքի բեռնման արագությունը վերլուծելուց հետո հետեւյալ առաջարկությունները կարելի է ստանալ առավել հաճախ.
Պատկերները օպտիմիզացնել
Առավել հաճախ հանդիպած ծառայության առաջարկությունը կապված է Օպտիմալ ընտրություն Պատկերներ կայքի համար: Գրաֆիկական բովանդակությունը շատ ծանր է եւ կարող է մեծապես դանդաղեցնել ռեսուրսների էջերի ներբեռնումը: Ամենատարածված առաջարկությունները բաղկացած են ճիշտ ձեւաչափի ընտրության հարցում (առավել հաճախ իմաստ ունի օգտագործել PNG), չափի եւ պատկերի որակը: Այնքան մեծ, ֆոնը, որն օգտագործվում է որպես ֆոն, երբեմն կարող է դանդաղեցնել կայքի բեռնման արագությունը: Միշտ անհրաժեշտ է ստուգել պատկերները եւ առավելագույնի հասցնել դրանց չափը եւ որակը (չափը եւ պատկերի որակը իմաստ ունի որոշակի ռեսուրսի համար ընդունելի դարձնել նվազագույնը):
Միացնել սեղմումը
Համացանցային սերվերը սեղմում է կարեւոր պարամետր, որն արագություն է ապահովում: Այն ընդգրկված է MOD_DEFLATE մոդուլով Apache- ում կամ NGINX հրահանգի հաշվին:
Լծակների զննարկչի պահոց
Որոշում է, թե վերնագիրը փոխանցվում է, եւ օգտագործողի զննարկչի տվյալները պահվում են: Caching- ը կարող է զգալիորեն նվազեցնել սերվերին ուղղված բողոքների քանակը, ինչը նվազեցնում է դրա վրա բեռը եւ մեծացնում է ստատիկ տվյալների վերադարձի արագությունը (որն առավելագույնը ցանկացած կայքում է) հաճախորդին
Վերացրեք Render-Blocking JavaScript- ը եւ CSS- ը վերեւում գտնվող բովանդակության մեջ
JavaScript The Default Code- ը կատարվում է որպես էջը բեռնված է, նման ձեւը մշակվում է CSS- ի կողմից: Նրանք: Եթե \u200b\u200bJS սցենարը միացված է փաստաթղթային մարմնում, ապա դրա մատուցումն ընդհատվում է ամեն անգամ, մինչեւ սցենարը կատարվի: Դուք կարող եք խուսափել դրանից, ավելացնելով, երբ կապված է JavaScript- ի եւ HTML- ի հետ, էջի մարմինը կտրամադրվի անկախ գործադիր կոդից:
Օրինակ, ասինխրոն ռեժիմով JS- ը կարող է կապված լինել այսպես.
Minify CSS
Минификация CSS предполагает удаление лишних пробелом и переносов строк, что позволяет сократить время обработки браузером и увеличить скорость загрузки страницы для клиента
Minify HTML
Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.
Avoid landing page redirects
Определяет используются ли редиректы, любые заданные перадресации с одного домена на другой и с одного сервера на другой означают дополнительные циклы запрос-ответ (запрос к серверу DNS и запрос непосредственно данных), что, естественно, увеличивает время через которое конечный пользователь получит контент сайта. Редиректов по возможности стоит избегать.
Prioritize visible content
В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.
Reduce server response time
Pagespeed Insights выдает предупреждение о медленном ответе сервера в случае если содержимое страницы отдается менее, чем за 200 мс.
Google PageSpeed является очень полезным инструментом при оптимизации работы сайтов, но не следует доверять ему безоговорочно. Информация, выдаваемая Google PageSpeed не всегда корректна и чтобы понять критерии, которые оцениваются лучше обратиться к документации.
В частности, часто будет отображаться предупреждение, что не используется кэширование, хотя фактически
Скорость загрузки сайта является одним из важнейших показателей юзабильности ресурса, и что немаловажно, это один из сотни факторов ранжирования . Действительно, современный пользователь, который кликнул по ссылке, не ждет загрузку страницы более 5 секунд. Поэтому, чем дольше грузится ваш сайт, тем больше вы теряете потенциальных клиентов.
Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта "Monitor Backlinks".
Мотивация
Сайт-образец и так загружается довольно быстро, поэтому в данном случае будут улучшаться результаты до возможного максимума.
Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств - 59/100. Ситуация с версией для стационарных устройств была лучше - 92/100.
Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?
Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.
Стартовые показатели подопытного сайта - 87/100.
В итоге, после применения определенных манипуляций, было получено следующие результаты:
О том, как удалось достичь таких показателей, читайте далее.
Как ускорить загрузку страниц?
Прежде чем приступить к пошаговым действиям согласно инструкции, позвольте отметить, что инструмент PageSpeed является всего лишь ориентиром для веб-мастеров на пути оптимизации ресурса. К тому же инструмент содержит рекомендации по ускорению загрузки страниц вашего сайта, а достижение положительных результатов во многом зависит от настроек сервера.
Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).
Итак, приступим:
Шаг № 1: Оптимизация изображений
Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:
- Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
- Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.
Согласно вышеупомянутым правилам каждое изображение на сайте было загружено, а также вручную сжато и подогнано по размерам. А чтобы не заморачиваться с оптимизацией изображений после их загрузки на сайт, лучше выработайте привычку изначально оптимизировать все новые изображения, загружаемые на сервер. Каждое новое изображение должно быть сжато и подогнано до необходимых параметров.
PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.
Шаг № 2: Минимизация JavaScript, CSS и HTML
В примере, Google предлагает сократить объемы JavaScript и CSS файлов.
Процесс минимизации позволяет сократить объемы файлов, устраняя ненужные пробелы, переносы, строки, символы и комментарии в JavaScript и CSS файлах. Программисты часто оставляют много места и комментарии во время кодирования, что может удвоить объем JavaScript и CSS файлов.
Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.
Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.
Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.
Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.
Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите "Сократить HTML". Чтобы оптимизировать код кликните на "Просмотреть оптимизированное содержание".
Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:
Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.
Вот результаты, полученные после минимизации JavaScript и CSS:
Шаг № 3: Использование кэш браузера
Для многих веб-мастеров этап использования кэширования браузера является самым сложным.
Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).
CDN представляет собой сеть серверов, расположенных в различных местах по всему миру. Они кэшируют статические версии веб-сайтов, такие как изображения, файлы JavaScript и CSS. На серверах CDN хранятся копии содержимого сайта, а при заходе на этот сайт, статическое содержимое загружается с ближайшего сервера.
Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.
Вот визуализация того, как работает CDN:
На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.
После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:
Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.
Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.
Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.
Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.
В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.
А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.
Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.
Шаг № 4: Удаление блокирующих кодов
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать - это ревизия всего кода JavaScript начиная сверху от "header" и "body" до расположенного внизу "footer" на всех страницах сайта.
Если ваш сайт на платформе Wordpress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в
снимите отметку с "Force JavaScript" и установите ее на "Inline all CSS".Шаг № 5: Включение сжатия
Шаг № 6: Оптимизация мобильного формата
Анализ мобильного формата показывает адаптивность мобильной версии сайта под различные типы разрешения, использование подходящих шрифтов, и наличие хорошей навигационной системы.
С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите "Дополнительные инструменты → Инструменты разработчика". На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:
В случае примера, не потребовалось каких-либо радикальных изменений.
Вывод
В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта "Monitor Backlinks". В итоге была оптимизирована не только главная страница, но и все внутренние страницы.
Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:
- Использование CDN.
- Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
- Оптимизация размеров и сжатие изображений.
Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.
Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.
Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях.
Также не забывайте о том, что специалисты UAWEB всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!