Как да ускорим уебсайта си

09.12.2020 1 399 11

Скоростта е важна в модерния свят. Хората очакват всичко да става бързо. Интернет страниците не са изключение. Има много системи за оценка и правила, които измерват колко бърз е даден сайт и как се представя. Бързите сайтове получават не само по-добри отзиви от потребителите, но и по-високи места в резултатите на търсачките (когато качеството на съдържанието е на ниво).

А с подобряването на хардуера и все по-бързите интернет връзки, става лесно за потребителите да преценят дали даден сайт работи добре и бързо или не. За съжаление, ускоряването на сайт може да е трудна задача, особено ако човек няма много опит с писането на код. От друга страна, вече същесвуват по-лесни начини за подобряване времето за зареждане на даден сайт и постигане на добри резултати, които да подскажат на потребителите и търсачките, че се грижите за интернет страницата си добре.

А когато това е видимо, резултатите ще са добри. Експертът по SEO Нийл Пател пише в блога си, че 47% от потребителите очакват дадена страница да се зареди за 2 секунди или по-малко. 40% ще затворят сайт, който се зарежда повече от 3 секунди! А само 1 секунда забавяне в реакцията на сайт, може да намали конвертираните клиенти с цели 7%!

Защо сайтът е бавен

Преди да ускорим сайта, трябва да открием причините защо е бавен. Това може да варира значително от типа код, платформата, плъгини, хардуер, хостинг и т.н. Самото съдържание също играе важна роля – дали имате качени много изображения и дали са с много висока резолюция или не. Също така може да е важно дали има автоматично тръгващи клипове или друго интерактивно съдържание.

Може да отнеме време да се открият точните причини. Инструменти като PageSpeed Insights на Google могат да помогнат в локализирането на проблемите. Въпреки това не трябва да приемате резултатите на тези инструменти за абсолютната истина. Те не са перфектни. Могат да „видят“ грешки, където няма такива. Можат да кажат, че даден елемент е приемлив, въпреки че е очевидно, че влияе на производителността на сайта – например премахването на скрипт, който има важна роля в правилното изобразяване на сайта.

И все пак тези инструменти са добра отправна точка и могат да спестят време в откриването на потенциални проблеми. Те помагат да помогнат и да проверим какви резултати сме постигнали след направените промени. Само помнете да не приемате крайния резултат от техните оценки за окончателна присъда. Реалната оценка ще дойде от потребителите и техните реакции. За съжаление, за да получим достатъчно подходяща информация от потребителите, е нужно търпение. С това наум, нека да разгледаме съветите за ускоряване на уебсайт.

Съвети за ускоряване на уебсайт

Почистете кода

Всеки сайт всъщност е просто много код, който браузърите „четат“ и обработват. Колкото повече код има, толкова повече време отнема зареждането му. Трудната част е да се знае кои елементи на кода могат да се премахнат и кои да не се пипат. Ако се махне дори една погрешна запетая, може да си причините големи главоболия.

За щастие има и много инструменти, които да помогнат. Точният процес се нарича минификация. Когато използвате PageSpeed и там има препоръка да се minify-не нещо, Google има предвид именно „смаляване“ на кода. Могат да се минифицират HTML, CSS и JavaScript и има различни инструменти за постигането на това. За WordPress, например, има много плъгини за оптимизиране на страниците, които предлагат почти всички инструменти, за които ще говорим.

Имайте предвид, че това често е и „проблемно място” за PageSpeed. Може да ви каже да минифицирате нещо и когато го направите, да не отчете промяната. Понякога дори може да каже, че собствени скриптове на Google или AdSense трябва да бъдат преработени. Приемете това като знак, че останалото вече е добре оптимизирано.

Асинхронно зареждане на CSS и JavaScript

Това е друга функция, която е лесно достъпна пред плъгините за оптимизация. Когато зареждате скриптовете синхронно, те се зареждат един след друг според реда си на страницата. Когато изберете async опцията, някои скриптове ще се зареждат заедно с други елементи. Това ще намали цялостното време за зареждане на страницата.

„Отклоняване“ на скриптове

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

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

Компресирайте сайта

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

Проверете скоростта на DNS

Докато говорим за сървъри, добра идея е да се провери и DNS-а, който използвате. Ако е бавен, това ще добави няколко милисекунди време за реакция. Резултатът ще е по-бавно първоначално зареждане на сайта. Избирането на по-бърз DNS ще подобри скоростта. Дали може да смените DNS-а може да зависи от хостинга, който използвате.

Оптимизирайте изображенията

Споменахме това по-рано. Големите изображения могат да бъдат една от основните причини за бавен сайт. Не е нужно обаче да правите всички изображения 250х250 пиксела. Особено в ерата на 4K резолюциите, които вече са на толкова много смартфони, лаптопи и монитори. Има много услуги за „smush”, „компресиране“ или „оптимизиране“ на изображения чрез различни алгоритми за компресия. Те могат да смалят файловия размер на изображение дори наполовина, но да запазят качеството доста приемливо.

Освен това предварителната подготовка и оразмеряване на изображенията също ще помогне. Няма смисъл да качите 20МР снимка, която ще стои във фиксиран квадрат 800х800. Подобни кадри могат да се оразмерят и да се спести място, трафик, и така да се увеличи скоростта.

Използвайте Lazy load

Lazy load е подход, който е сходен с „отклоняването“ на скриптове, но се концентрира върху снимки, клипове и iframe елементи. Той ще зарежда тези елементи, когато потребителят достигне до тях. Така се съкращава времето за зареждане на сайта и той става доста „по-пъргав“. Това е функция, която вече е част от доста платформи или лесно може да се добави чрез плъгини.

Използвайте кеширането на браузъра

Това е още едно „задължително“ изискване от PageSpeed Insights, но често води и до проблеми. Идеята е проста. Браузърът ще кешира някои от елементите на сайта, които не се сменят често – например логото, основният HTML код, CSS, JavaScript и др. По този начин ще се зареждат само новите неща като постове и друго съдържание.

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

Премахнете ненужните елементи

Ако използвате платформа като WordPress, е лесно човек да се „отнесе“ с толкова много плъгини. Те са чудесни, но ако не ги използвате – премахнете ги. Дори и да ги изключите от настройките, някои от тях могат да използват ресурси и ще взимат място. Така че премахнете плъгините, които не ви трябват. Винаги може да ги изтеглите и запаметите, ако очаквате да ви потрябват по-натам. Също така премахнете и ненужните уиджети от сайта.

Проучете възможностите за CDN

Ако имате сайт, който е с много визуално съдържание, използването на Content Delivery Network (CDN) може да е добро решение. Тази мрежа ще съхранява тези елементи и ще ги зарежда в самия сайт. Така вашият сървър няма да се занимава с тежки изображения и видео и ще зарежда сайта по-бързо.

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

Не може да платите за CDN? Може да си направите „частичен“ CDN чрез платформа като YouTube, в която да качите клиповете и да ги внедрите в клипа. Може да използвате и услуга за хост на снимки за големите изображения. Това отваря възможност и за привличане на още посетители, които ще откриват снимките и клиповете чрез тези платформи.

Намалете пренасочванията

Пренасочванията тип 301 са лесен начин потребителите автоматично да достигнат до новото място на дадена страница. Това е по-добро решение от грешките 404, но твърде много 301-ици ще увеличи времето за зареждане на страницата. Има услуги, които проверяват за наличието на такива пренасочвания, например Google Search Console. Поправянето им може да бъде лесно – промяна на .htaccess, за да сочи директно към новата версия.

Почистване на базата данни

Ако имате сайт, който използва много съдържание и много нови постове, това може да увеличи базата данни доста бързо. WordPress също така пази много чернови на постове и временни файлове, които могат да „надуят“ базата данни без реална необходимост. Затова плъгин като WP-Optimize може да помогне за редовна проверка и почистване на базата данни от ненужни елементи. По-малка база данни ще помогне за по-бърз сайт.

Трябва ви навик

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

И още нещо: представянето на сайта може да варира според това дали се използва компютър или мобилно устройство. Някои сайтове използват същия код, но зависи много и от типа устройство. Може да се наложи да изберете кое да оптимизирате, в зависимост дали имате повече посетители през смартфони или през компютри. Ако са сравнително по равно, тогава ще трябва да приемете компромисно решение, за да могат и двете аудитории да имат приемливо преживяване.