Скорост на зареждане на уеб сайт. Защо е толкова важна?

Годината е 2020, уеб технологиите се развиват и всеки ден при нас идват нови клиенти, които търсят  изработка на сайт и питат каква е скоростта на зареждане на сайта. Скоростта на зареждане на уеб страниците вече е задължително условие при класирането в Google. До скоро време в интернет беше пълно с големи и тежки сайтове, които зареждат бавно и е абсолютно невъзможно да бъдат заредени през мрежата на който и да е мобилен оператор, особено в режим на EDGE. В началото на 2019 година настана масова борба за привличане на посетители и потенциални клиенти в интернет пространството. Ето защо хората притежаващи собствен бизнес сайт, електронен магазин или друг тип онлайн бизнес веднага се ориентираха как да бъдат повече от конкуренцията си.

Защо скоростта на зареждане на сайта е толкова важна?

1. Хората стават все по-нетърпеливи.

Покрай социалните медии, новите технологии, по-бързите процесори, по-добрите алгоритми на Google, хората вече нямат търпението да стигнат до информацията, която им е необходима. Свикнали са с написването на няколко ключови думи да постигат резултат за секунди. Дори и да се класирате на първо място, ако не отговаряте на въпроса им или сайта ви зарежда бавно, тезнаят, че имат хиляди опции да намерят информацията на друго място. Нашият източник сочи че:

  • Времето за зареждане от 1-3 секунди увеличава вероятността за напускане на сайта с 32%
  • Времето за зареждане от 1 до 5 секунди увеличава вероятността за напускане на сайта с 90%
  • Времето за зареждане от 1-6 секунди увеличава вероятността за напускане на сайта с 106%
  • Времето за зареждане от 1-10 секунди увеличава вероятността за напускане на сайта с 123%

2. Зареждането на бавни сайтове е почти невъзможно на EDGE

EDGE е остаряла технология, но въпреки това тя се използва и до ден днешен. Свикнали сте да отваряте страници на LTE мобилна връзка (4G) за секунди. Добре, обаче излизате извън града и отивате в планината, някое село, а може би и в друг град например Лондон. Телефона ви губа обхват и съответно връзката преминава на най-бавната възможна – EDGE. В големите градове като Лондон връзката е многократно по-слаба, заради претоварването на клетките в мрежата. Говоря от лични преживявания. В момента, в който ви открият в Google и цъкнат на резултата се появява една бяла страница и кръгче, което върти безкрайно. Както се досещате никой не би искал да има такова преживяване. След първите няколко секунди посетителя натиска бутона “назад” и се връща обратно в резултатите. Това, обаче се отразява на позицията на сайта ви моментално и то в негативен аспект!

3. Увеличава се баунс рейта (броя хора, които си тръгват в първите няколко секунди)

Както вече споменахме се увеличава броя хора, които напускат в първите секунди. Търсачката си прави извод, че нещо не е наред със скоростта на зареждане, информацията или броя реклами на вашият сайт и потребителите не го намират за толкова полезен. Макар сайта ви да има добра on page оптимизация по ключови думи, мета тагове и други, всъщност търсачката въобще не стига дотам да оцени този плюс. Вместо това отсъжда, че не сте конкурентни по бързина на сайтове.

3. Забелязали ли сте как Android у-вото ви непрекъснато се препълва?

Броят на мобилните търсения и зареждането на сайт от различни от компютърни устройства като телефони, таблети и други на първо място изисква адаптивен дизайн. В последно време броят на мобилните търсения се е покачил до 65%. Хората се прибират изморени вечер, не им се отваря компютъра, сядат на дивана и докато гледат телевизия, търсят решение на проблемите си. Това повишаване на процента, може само да ни говори, че е изключително важно да направим необходимото, за да задържим по-голямата част от аудитория си.

Случва ви се понякога да видите грешка, че свободната памет на вашия Andorid е към края си. Освен автоматичните обновления, които трупат информация по устройството ви, една от причините може да бъде кеширането на информация от браузване на уеб страници. Когато сайтовете, които отваряте не са оптимизирани за мобилни устройства, често изтегляте излишно големи изображения (и други файлове) по 3-4mb, като препоръчителната средна големина на сайт, за да зарежда той бързо е максимум 2-3mb.

Какви са най-честите причините за бавното зареждане на сайта ви? Решения на практически проблеми.

1. Лошо написан код HTML5, CSS3, Javascript

Лошо написания код предполага най-различни видове проблеми, един от които е Javascript blocking-а или блокирането на Javascript. Такъв конфликт се получава, по различни причини, но най-често поради извикване на JS на неправилно място,  извикване на две различни противоречащи си версии на една и съща библиотека. Причините може да бъдат и други. JS блоутуеър е израз, който уеб разработчиците използват, за да опишат претъпкването на страницата с анимирани ефекти, летящи бутони, плъзгащи се елементи и др.

За HTML и CSS3 само ще спомена, че използването на препроцесори като LESS и SAAS, както и организирана програмна среда IDE или програмен редактор като Visual Studio, Atom и др. помага значително за ориентацията и бързото обновяване на кода. Това са добрите практики, които избираме като решение в повечето случай. За лошите можем да говорим много. Изисква се само въображение и неграмотност, а примерите за такива сайтове са безбройни.

Спагети код също е израз, който много често ще чуете. Това е код, който е написан като спагети. Дори да намериш единия край на спагетата дргуия не е ясно точно къде е, защо е там и какво прави там. Обикновено това е ниско качествен, неоптимизиран код, написан от някой лаик-любител, който код затруднява зареждането на страницата с излишната си сложност на интерпретиране.

2. Лошо оптимизирани шрифтове и изображения

Има много стъпки за оптимизиране на изображенията. Само една от тях е размера им да бъде намален или компресиран. Въпреки, че вече говорихме за CSS3 много ми се иска да засегна темата за CSS Sprites или използването на спрайтове при оптимизиране на сайта. Спрайтът позволява много малки изображения да бъдат формирани в едно голямо и помага за това браузърът да направи само една заявка, за да изтегли едно изображение, вместо 25 заявки, за да изтегли по една малка иконка например. Спрайтовете изискват грамотност, защото не са никак лесни за изработка и костват часове работа, за да бъдат направени добре. Причината е, че програмистът трябва да каже на браузъра как да интерпретира картинката и да я разпредели по пиксели на определените за целта места.

Съвсем малко ще спомена за шрифтовете използващи SVG икони, но същото правило важи и за библиотеките като Bootstrap, React и други. Чрез премахване на ненужните, неизползвани в проекта части от библиотеките, може да увеличите времето за зареждане на уеб сайта многократно. Лично ние сме изработвали сайтове, които изглеждат изключително добре само с 15% от библиотеките, останалите 85% пространство могат да бъдат лесно спестени като ги отстраните от оригиналната библиотека. Въпреки, че звучи като проста техника много колеги не я практикуват, причината е, че нямат конфигуриран GIT и при ъпдейт, много лесно могат да забравят, шляпвайки отново пълната библиотека върху текущата вече оптимизирана такава.

3. Неминифициран код

Минификацията на кода го прави неприветлив и на пръв поглед нечетлив, защото изважда разстоянията, коментарите и други части от него, с цел към браузъра да се изпраща по-малко код. Това намалява големината на страницата и позволява по-бързото зареждане на уеб сайта. На браузъра не му трябва да чете коментарите в кода, те са за програмистите. Това им помага да проследят какво са направили и да работят съвместно.

4. Множество пренасочвания (DNS; .htaccess и други)

Вижте Rewrite модулa в .htaccess. Много често се допуска конфликт при пренасочването на и по-специално проблем с rewrite модула.

DNS пренасочванията също могат да създадат конфликт, ако в apache2 конфигурационния файл на сървъра сте задали друг вид пренасочване. Вижте дали в SSL-conf файла в Apache няма конфликт противоречащ на конфигурацията за не SSL версията. Вижте какво е SSL сертификат, който ние от Вземи Сайт включваме като безплатна добавка за много от клиентите си.

Има и други видове PHP и JS пренасочвания, които могат да създадат проблеми. Редовно оправяме подобни грешки на нови клиенти, които идват при нас, търсейки помощ след некачествено направен сайт.

5. Зареждане на твърде големи външни ресурси

Ние сме в непрекъснат дебат за външните ресурси. Някои твърдят, че те са неизбежни, но истината е съвсем различна. Да, Google, Facebook, Linkedin и други социални мрежи тъпчат неимоверно количество код по сайтовете ви, за да покажате страницата си при тях, за да следят посещаемостта ви, за да показват рекламите си, за да следят споделянията и какво ли още не. Когато правим оптимизация на сайт ние не пренебрегваме външните ресурси.

Те могат да се окажат голяма пречка за бързината на зареждане на сайта, защото влачат стотици и хиляди редове код от чужди сървъри, принуждавайки посетителите ви да ги изтеглят. Можем например да използваме различен подход и да преместим шрифтовете на Google локално. Имате опция за чат с потребителите на трета страна? Да, но тя забавя зареждането на сайат ни двойно. Как да решим този проблем? От Вземи Сайт предлагаме хостинг на собствен чат модул, който върви с много от пакетите ни. Най-препоръчван е за клиентите със собствен онлайн магазин, които непрекъснато имат наплив от посетители с множество въпроси.

    Вашият коментар

    Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *