Хуткасць загрузкі сайта - як яе праверыць і павялічыць

1. Як праверыць хуткасць свайго сайта
2. 1. PageSpeed ​​Insights
3. 2. Pingdom Tools
4. 3. GTmetrix
5. Як паскорыць прагляд
6. 1. Старонкі вялікага памеру
7. 2. «Цяжкія" малюнкі
8. 3. Шмат запытаў ад браўзэра
9. 4. перагружанасці код JavaScript і CSS
10. 5. Вялікая адлегласць паміж серверам і карыстачом
11. 6. Павольны хостынг
12. Як рэгулярна маніторыць хуткасць сайта

Матэрыялы для запампоўкі

Шаблон справаздачы з тэхнічнымі паказчыкамі эфектыўнасці сайта

Нават цяпер, калі хуткасць інтэрнэту ў большасці правайдэраў перавышае 100 Мбіт / сек, а мабільныя аператары развіваюць 5G, пытанне аб хуткасці загрузкі сайта застаецца актуальным. Гэты параметр істотна ўплывае на канверсію, паказчык адмоваў, наведвальнасць і іншыя важныя для бізнесу KPI. Таму што пры іншых роўных умовах чалавек абярэ той сайт, які хутчэй загружаецца і не прымушае яго чакаць. Пра гэта нам кажуць логіка, асабісты карыстацкі вопыт і шматлікія даследаванні на тэму, якія можна знайсці ў сеткі. Вось, напрыклад, вычарпальная падборка кейсаў з лічбамі , Як кампаніі эксперыментавалі з хуткасцю загрузкі.

Усе даследчыкі сыходзяцца ў меркаванні, што аптымальны час загрузкі - ад 1,5 да 3 секунд. Калі старонка грузіцца даўжэй, то больш за палову карыстальнікаў пакідаюць яе, так і не дачакаўшыся цуду.

У артыкуле мы распавядзем:

Пералічым асноўныя недахопы павольнага сайта, актуальныя як для дэсктоп, так і для мабільных версій:

1. Кліенты сыходзяць да канкурэнтаў - ім прасцей вярнуцца ў пошукавік і выбраць наступны сайт.
2. Затрымка загрузкі на 0,1 секунду памяншае канверсію на 7% (паводле даследаванню Akamai ).
3. Зніжаецца верагоднасць, што карыстальнікі вернуцца на сайт. Google кажа , Што з-за негатыўнага карыстацкага досведу верагоднасць паўторнай куплі зніжаецца на 60%. Праўда, гаворка пра мабільныя версіі.
4. хуткасць загрузкі ўплывае на ранжыраванне сайта у пошукавіках. Калі сайт доўга грузіцца, робат пошукавай сістэмы можа не паспець яго цалкам праіндэксаваць.

Окей, мы пераканаліся, што хуткасць працы сайта крытычна важная. Зараз разбяромся, як яе праверыць.

Як праверыць хуткасць свайго сайта

Ёсць шмат онлайн-сэрвісаў, якія дазваляюць праверыць шпаркасць загрузкі старонак - дастаткова ўвесці патрэбны URL. Разгледзім тры самых цікавых, на наш погляд. Для прыкладу будзем выкарыстоўваць сайт https://shop.googlemerchandisestore.com/ .

1. PageSpeed ​​Insights

Гэта бясплатны інструмент ад Google. З яго дапамогай можна даведацца, як хутка загружаюцца старонкі на кампутары ці мабільных прыладах. Калі коратка, то сэрвіс бярэ ключавыя метрыкі аб вопыце рэальных карыстальнікаў па ўсім свеце з Chrome User Experience Report і параўноўвае іх з вашымі. У выніку вы бачыце сярэднюю хуткасць загрузкі сваёй старонкі і ўзровень аптымізацыі, а таксама долю загрузак, якія праходзілі на павольнай, сярэдняй і высокай хуткасці.

Калі старонка паказвае не самыя лепшыя вынікі (як у нашым прыкладзе), сэрвіс дае канкрэтныя парады, як яе аптымізаваць.

Больш падрабязна пра тое, як працуе сэрвіс і разлічваюцца метрыкі, вы можаце пачытаць ў кіраўніцтве для распрацоўшчыкаў .

Дарэчы, рэкамендацыі PageSpeed ​​Insights можна ўбачыць у справаздачы Google Analytics «Паскарэнне загрузкі», калі клікнуць на спасылку ў адпаведным слупку:

Наогул, група справаздач «Хуткасць загрузкі сайта» (Site Speed ​​reports) у GA - карысная штука. Калі раней вы не надавалі належнай увагі гэтых справаздачах, рэкамендуем перыядычна іх праглядаць, каб адсочваць паказчыкі ў дынаміцы і своечасова рэагаваць на праблемы.

Напрыклад, справаздачу "Час загрузкі старонак" дапамагае зразумець, наколькі хутка загружаецца ваш сайт у розных краінах або браўзэрах і наколькі аператыўна ён рэагуе на дзеянні карыстальнікаў.

Дапусцім, ваша мэтавая аўдыторыя знаходзіцца ў Германіі. Калі вы паглядзіце на справаздачу вышэй, то ўбачыце, што адна з важных старонак вашага сайта ў гэтай краіне грузіцца вельмі павольна (19,24 сек.), Пры гэтым у яе 140 праглядаў. Каб паскорыць прагляд, трэба аптымізаваць старонку. Калі ж у гэтым рэгіёне або ў гэтага правайдэра хуткасць інтэрнэт-злучэнні занадта малая для вашага сайта, можна стварыць альтэрнатыўныя старонкі, адаптаваныя для нізкай прапускной здольнасці.

2. Pingdom Tools

Гэта адзін з самых інфарматыўных і папулярных сэрвісаў для праверкі хуткасці. У яго ёсць бясплатная і платная дэсктоп-версіі, а таксама мабільнае прыкладанне з 14-дзённым trial.

У бясплатнай версіі можна правесці хуткі аналіз і ўбачыць прадукцыйнасць, час загрузкі, памер вашай старонкі, а таксама магчымыя праблемы, якія запавольваюць яе працу. Кожную праблему можна «разгарнуць», клікнуўшы па стрэлцы насупраць, і пачытаць падрабязнасці.

Акрамя таго, у бясплатнай версіі Pingdom Tools вы можаце:

• Адсочваць гісторыю прадукцыйнасці сайта пасля зменаў. Знаходзіць памылкі 404 і 500, каб своечасова іх устараняць.
• Праглядаць памер змесціва старонкі па тыпу кантэнту і дамену, а таксама колькасць запытаў браўзэра.
• Тэставаць загрузкі сайта з розным месцазнаходжаннем.
• Дзяліцца вынікамі аналізу з калегамі.

3. GTmetrix

Па функцыянале гэты сэрвіс вельмі падобны на Pingdom Tools, хіба што падае інфармацыю ў больш зручным і арганізаваным выглядзе. Бясплатная версія паказвае браўзэр і лакацыі сервера, якая выкарыстоўваецца для тэставання, прадукцыйнасць старонкі (PageSpeed ​​і YSlow), час загрузкі, колькасць запытаў і агульны памер старонкі. Улічваючы, што сэрвіс захоўвае гісторыю праверак, гэтых метрык будзе дастаткова, каб аналізаваць хуткасць загрузкі вашага сайта ў дынаміку.

Калі ж вы хочаце дэталёва разабрацца, чаму ваш сайт тармозіць і што з гэтым зрабіць, можна выкарыстоўваць пашыраную платную версію. Яна дазваляе выбіраць лакацыі сервера і браўзэр, аўтаматызаваць тэставанне і многае іншае.

Пасля праверкі сайта вы можаце прыкінуць, колькі запрацуеце, калі паскорыце загрузку. Напрыклад, з дапамогай калькулятара ад Google або Sharpe Digital .

Як паскорыць прагляд

Можна вылучыць 5 асноўных прычын, якія запавольваюць працу сайта. Разбярэмся, што рабіць з кожнай з іх.

1. Старонкі вялікага памеру

Каб скараціць аб'ём дадзеных, якія перадаюцца ў браўзэр карыстальніка, выкарыстоўвайце сціск GZIP. Гэта дазволіць паменшыць памер вэб-файлаў на 70% без пагаршэння іх якасці. Праверыць, ці даступны гэты метад сціску для вашага сайта, можна з дапамогай сэрвісу GiftOfSpeed або GTmetrix .

2. «Цяжкія" малюнкі

Малюнкі вялікага памеру і дазволу значна тармозяць загрузку старонкі. Каб гэтага пазбегнуць, выкарыстоўвайце JPEG малюнкі замест PNG - яны важаць у 5 разоў менш, ня саступаючы пры гэтым у якасці. Паменшыць памер выявы вы можаце з дапамогай любога онлайн-аптымізатар: Optimizilla , Compressor , Imagify , TinyPNG і г.д. Ці, напрыклад, можна прагнаць карцінку праз Photoshop і захаваць яе ў спэцыяльным фармаце, прызначаным для вэб-сайтаў. Галоўнае - не перашчыраваць і знайсці залатую сярэдзіну паміж якасцю і памерам файла.

3. Шмат запытаў ад браўзэра

Чым вышэй колькасць элементаў на старонцы, тым больш запытаў да сервера адпраўляе браўзэр, і тым больш павольна адбываецца загрузка. Каб разарваць гэты заганны круг і скараціць лік запытаў, вы можаце:

• Выдаліць лішнія малюнка, JS-файлы, коды іншых сэрвісаў.
• Аб'яднаць некалькі невялікіх элементаў (абразкі, кнопкі) у адзін CSS-спрайт з дапамогай CSS Sprites generator , CssSpritegen , Spritebox або любога іншага генератара.
• Выкарыстоўваць кэшаванне. Кожны раз, калі чалавек заходзіць на сайт, яго браўзэр загружае ўсё вэб-файлы з сервера. Калі ўключыць кэшаванне, браўзэр захавае дадзеныя на кампутар карыстальніка і пры паўторных візітах будзе загружаць іх ужо адтуль. Вы можаце падабраць сабе кэш-убудова для паскарэння працы сайта ў залежнасці ад таго, якая ў вас CMS. Напрыклад, для WordPress падыдуць WP Super Cache , W3 Total Cache , Hyper Cache .

4. перагружанасці код JavaScript і CSS

Калі код JavaScript і CSS занадта доўгі, утрымлівае шмат лішніх элементаў (прабелы, каментары і да т.п.), то старонка можа загружацца з затрымкамі. Каб аптымізаваць код, вы можаце:

• Скараціць назву функцый і пачысціць код з дапамогай спецыяльных сэрвісаў, напрыклад: JavaScript / CSS / HTML Compressor , CSS Compressor , JSCompress .
• Размесціце CSS-файлы ў самым пачатку старонкі - так яна будзе адлюстроўвацца паступова, па кампанентаў.
• Вынесіце JS-файлы ў канец старонкі. Дзякуючы гэтаму браўзэр будзе спачатку загружаць кантэнт старонкі, а і ўжо потым скрыпты.

5. Вялікая адлегласць паміж серверам і карыстачом

Чым далей ад кампутара знаходзіцца сервер вашага хостынг-правайдэра, тым павольней загружаецца сайт. «Скараціць» гэта адлегласць дапамогуць сеткі дастаўкі кантэнту CDN: Amazon CloudFront , Incapsula , Akamai і іншыя. Калі чалавек заходзіць на сайт, CDN загружае вэб-файлы са свайго сервера, які знаходзіцца бліжэй за ўсё да карыстача. Гэтая схема выдатна ілюструе прынцып працы CDN-сетак:

6. Павольны хостынг

Калі вы паспрабавалі ўсе апісаныя вышэй парады, а хуткасць сайта пакідае жадаць лепшага, праверце час адказу сервера. Напрыклад, гэта можна зрабіць у справаздачы Google Analytics «Хуткасць загрузкі сайта» → «Агляд»:

На скрыншоце мы бачым, што сярэдні час адказу сервера 0,8 секунд. Гэта не вельмі добра, бо ў ідэале яно не павінна перавышаць 0,2 секунды. Калі ў вас гэты паказчык нашмат больш, магчыма, варта задумацца аб змене хостынг-правайдэра.

Як рэгулярна маніторыць хуткасць сайта

Як вы ўжо зразумелі, хуткасць сайта - гэта праблема не толькі распрацоўніка або маркетолага, але і ўсяго бізнэсу. Кампаніі, якія не надаюць ёй належнай увагі, губляюць вельмі шмат патэнцыйных лидов і кліентаў. Таму маніторыць і аптымізаваць прадукцыйнасць сайта трэба на рэгулярнай аснове.

Калі вы збіраеце дадзеныя ў Google BigQuery з дапамогай OWOX BI Pipeline і хочаце адсочваць асноўныя тэхнічныя паказчыкі сайта, запоўніце форму - і мы дашлем вам шаблон дашборда, які можна скапіяваць, а таксама гайд, як яго наладзіць.

Атрымаць шаблон дашборда

У выніку ў вас атрымаецца зручны справаздачу, які складаецца з 5 старонак. На першай старонцы вы зможаце праглядаць усе важныя паказчыкі:

1. Колькасць карыстальнікаў.
2. Колькасць сеансаў.
3. Колькасьць праглядаў старонак.
4. Памылкі JavaScript.
5. Памылкі 404.
6. Сярэдні час загрузкі старонак.
7. Сярэдні час злучэння з серверам.

На другім лісце можна даведацца падрабязную інфармацыю па памылак JavaScript:

• Агульная колькасць памылак на абраны перыяд.
• Колькасць памылак на старонку.
• Колькасць сесій з памылкамі.
• Колькі працэнтаў карыстальнікаў сутыкнуліся з памылкамі.
• На якіх старонках і тыпах старонак адбываюцца памылкі (для адсочвання тыпаў старонак, неабходна ўкараніць pageType на сайце, а таксама стварыць карыстацкую зменную ўзроўню хіта hits.page.pageType ).
• У якім браўзэры і яго версіях адбываюцца памылкі.

На трэцяй старонцы прадстаўлена падрабязная інфармацыя пра памылкі 404:

• Агульная колькасць памылак.
• Колькасць памылак на старонку.
• Колькасць сесій з памылкамі.
• Колькасць карыстальнікаў, у якіх узніклі памылкі.
• А таксама Рэфералы, пасля якіх паўсталі памылкі.

На двух апошніх лістах можна паглядзець, як мянялася хуткасць загрузкі старонак у разрэзе розных тыпаў старонак, браўзэраў і прылад.

На чацвёртай старонцы інфармацыя па дэсктопу:

На пятай старонцы дадзеныя па планшэта і мабільным прыладам:

Цяпер вы ведаеце, як прымусіць свой сайт «лётаць» :) Калі ў вас засталіся пытанні ці вы ведаеце іншыя спосабы паменшыць час загрузкі старонак, пішыце іх у каментарах.

выкарыстаныя інструменты