Скоростта на уеб сайтовете - какво да направим, за да зарежда сайтът ни по-бързо?

speed 001

Уеб сайтовете предоставят възможността за бърза и лесна комуникация и разнообразни развлечения. Те са основен източник на информация. Потребителите използват интернет страниците с всякаква цел - забавление, работа, проучване и други. За тях е важно както страницата да съдържа необходимия за тях ресурс, така и да зарежда бързо без да “зависва”. Дългогодишни проучвания сочат, че има пряка връзка между скоростта на зареждане и задържането на посетителите.

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

Как да определим скоростта на уеб сайта си?
В мрежата има много инструменти, които предлагат бърз тест за определяне скоростта на даден сайт. Изключително полезни и удобни са тези, които освен скорост, дават варианти за оптимизацията и по-бързата му работа.

Реални ли са очакванията на потребителите?
Много проучвания сочат, че около 40% от потребителите напускат страницата, ако й отнема повече от четири секунди да зареди, а над 47% очакват да зареди за по-малко от две. Толкова биха отделили повечето потребители преди да преминат по-нататък. На въпроса дали тези представи са реални... вероятно да, след като съществуват сайтове, които набират популярност и имат голяма посещаемост. Всеки един сайт би могъл да бъде сред тях стига да разчита на висококачествена оптимизацията.

speed 002

Как да увеличим скоростта за зареждане на сайта?
Дори и да нямате никакъв опит с поддръжката на уеб сайтове, има няколко изпитани и лесни трика, гарантиращи добър резултат (или поне приличен).

1. Прилагайте основно статични страници
Ключова стъпка, за да зарежда сайтът по-бързо е употребата на статични страници. Изпълнението на скрипта на сървъра изисква време за изпълнение. Отделно от това визуализираната информация трябва да достигне до крайния потребител - тези процеси са сравнително бавни, особено ако връзката на сървъра и на потребителя не е към бърз интернет. Ако прилагате готови html страници в сайта си, те ще бъдат изпратени на потребителя мигновено. Когато това е възможно – правете го.
В реалността, особено при ползване на системи за управление на съдържание (CMS), към html кода има тонове php, javascript и друг код, вследствие на което страницата “зависва”. Изпълнението на скрипта, връзката с база данни и крайната визуализация са взаимозависими процеси, които отнемат време, за да се изпълнят последователно. В много случаи резултатът от това може да се кешира, т.е. да се запази готовият резултат без нужда от ново обръщение към базата данни за известно време. Това кеширане ще разгледаме по-нататък.

2. Минимизиране и комбиниране на CSS, JS и HTML файлове

По статистически данни на Yahoo! над 80% от времето за зареждане на страницата се използва за изтегляне на различните файлове

Друг метод, който можете да приложите, за да зарежда по-бързо страницата ви е да компресирате и комбинирате CSS и JavaScript- а на страницата. Много от системите, предназначени за управление на съдържанието на сайта, идват с тази опция. Употребата на статични JavaScript файлове изисква друг компресор, който работи на същия принцип. Редукцията на “динамичния код” допринася за по-бързото зареждане на страницата. Комбинирането на различните файлове осигурява максимално бързо зареждане на страницата. Важно е подборът на елементи да е добре преценен в противен случай можете дори повече да забавите зареждането.

Плъгин за WordPress:
Плъгинът WP Rocket се използва с тази цел. Ако го имате инсталиран, потърсете полето Static Files. Там отбелязвате кои файлове искате да комбинирате и минимизирате.

speed 003

3. Асинхронно зареждане на CSS и JS файлове
Асинхронното зареждане на файлове означава, че те ще се заредят едновременно без значение от последователността си в страницата. Това гарантира много по-бързо зареждане на сайт. Така, ако елемент по-напред в кода не се е заредил, той не спира процеса на зареждане на останалите елементи в страницата. Асинхронното зареждане на сайта подлежи на професионална оптимизация на кода.
За WordPress отново можете да използвате плъгина WP Rocket > Static files > Render-blocking CSS/JS.

speed 004

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

Инструментът Plugin Performance Profiler е много удобен за употреба. Инсталирайте го и сканирайте сайта, за да получите резултат, който показва кои плъгини ускоряват зареждането на сайта и кои го товарят.

speed 005

speed 006

5. Компресирайте големите изображения
Намалете размера на изображенията на страницата. Ако крайната ви цел е бърза скорост, това е правилният подход. Приложението на изображения с голям размер крайно забавя зареждането на страницата. Ако все пак е необходимо да се вмъкнат такива снимки, то можете да използвате различни инструменти, които позволяват да манипулирате размерите и формата им.
Според изследвания оразмеряването на 2.2 MB изображение до 300 KB е скъсило времето за зареждане с над 70%. От следното сравнение личи, че на изображения се падат около 40% от съдържанието на страница, затова намаляването на размера им би имал чувствителен ефект върху скоростта.

speed 007

За WordPress много удобен инструмент за промяна размера на изображенията е WP Smush. Ако не използвате WordPress друг инструмент е Compressor.io.

6. Lazy loading на изображенията
Lazy loading или мързеливото зареждане на изображения е скрипт, чиято функция е да отложи зареждането на изображения, които не са полето на видимост на страницата. Това ускорява в пъти зареждането на страницата, защото се зареждат единствено видимите изображения, а не всички накуп. Вземете за пример сайт на онлайн магазин, който предлага няколко хиляди продукта. Ако към всеки има прикачено изображение, при отваряне на страницата ще се заредят само тези, които са в полето на видимост на потребителя. Ако всеки път се зареждаха изображенията на всеки продукт в магазина, страницата вероятно изобщо не би заредила.

Плъгинът за това, при WordPress, се инсталира и задейства лесно:

speed 008

7. Компресия на файлове чрез GZIP инструмент
Всички файлове в сайта ви се нуждаят от време, за да се заредят напълно от браузъра. Колкото по-големи като размер и повече като брой са те, толкова повече време ще отнема сайтът да се зареди. Това автоматично влияе негативно върху потребителската заетост и върху SEO оптимизацията на сайта ви. Функцията GZIP ви позволява да намалите размера на тези файлове, което може да ускори зареждането на страницата с до 70%.

GZIP компресиране за сайтове на WordPress:
Има два начина за използване на GZIP в сайтове, създадени на WordPress. Първият е по-сложен за реализация, затова често не е предпочитан. Трябва да създадете конфигурационен файл с разширение .htaccess и да го качите на хостинга си. В края на стандартен .htaccess файл се добавя GZIP компресията. Ето как би изглеждал такъв файл с добавката:

# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

По-широко разпространени методи за използване на компресията в сайт е чрез няколко плъгина. Първият е W3 Total Cache, който може да бъде активиран от полето за настройки Browser Cache. Важно е да запазите промените в настройките, след като сте отбелязали, че позволявате gzip компресиране на файловете.
Друг плъгин е WP Super Cache. Ако го имате инсталиран, в полето Advanced позволявате компресирането на файлове.
Последният плъгин е WP Rocket, който има вградена функционалност за компресиране на файлове.

Тестване на промените
Онлайн можете да намерите много инструменти, за да проверите дали компресирането на файлове работи. Необходимо е просто да въведете URL адреса на сайта си и да сравните резултатите. Пример от използването на подобен инструмент:

speed 009

 

Активиране на GZIP разширението за Joomla
Първо проверете дали не е инсталирано вече. Ако е, не е необходимо да правите нищо. Ако не е следвайте няколко лесни стъпки и ще го активирате без проблем. Можете да използвате gzip компресирането на файлове както на ниво Joomla, така и на сървърно ниво. За да активирате разширението само за конкретен сайт, следвайте пътя: System > Global Configuration > Server - тук ще имате опция за gzip компресиране на страницата > Yes.

Ако използвате CPanel на вашия хостинг и искате всеки сайт, хостван на сървъра ви, да използва разширението, намерете в настройките на устройството Optimize Website (повечето версии го имат), където отбелязвате Compress All content.

speed 010

speed 011

Така лесно можете да подобрите скоростта на сайта си с над 80%:

speed 012

 

8. Използвайте CDN
Ако искате страницата да зарежда по-бързо, използвайте CDN. Мрежата за пренос на данни ви позволява да запазите статичното съдържание (изображения, видеоклипове, аудио) на сайта ви на множество сървъри, освен на вашия собствен. Тази хитринка позволява на сървърите, намиращи се по-близо до крайния потребител, да зареждат по-бързо страницата на устройството на потребителя.
Сравнение преди и след инсталация на CDN:

speed 013

Едни от най-качествените CDN инструменти са MaxCDN и Cloudflare.
MaxCDN предлага само CDN услуги, докато Cloudflare ги комбинира с инструменти за оптимизация.

9. Кешираща система
Ако страницата ви се нуждае от често обновяване, можете да използвате услугите на готови платформи. Те ви позволяват неограничен достъп за добавяне на съдържание. Тези системи работят с бази данни и използват php скрипт, за да четат и записват информация, а това както видяхме по-горе забавя зареждането на страницата. Решението на този проблем е използването на кешираща система. Тя генерира статична страница след всяко потребителско посещение на динамичната страница. Новата информация се предоставя на потребителя от статичната страница, а при необходимост от промяна на съдържанието, кешираната страница се обновява самостоятелно. Това гарантира да не се показва старо съдържание на потребителя. Сред основните предимства на системата е, че осигурява по-бързо зареждане на страницата. Освен това уеб сайтът, който се възползва от кеширащи услуги, използва по-малко процесорни ресурси. Скъсеното време за изпълнение спестява огромно количество средства за уеб хостинг планът, който използвате.

За WordPress има удобен плъгин, който върши необходимата работа - W3 Total Cache > Page Cache > General Settings и изберете Enable.

speed 014

В Joomla кеширането се настройва от контролния панел – отново, това е вградена функция.

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

11. Изчистете кода
Премахването на излишен код от сайта може чувствително да подобри скоростта му. Разбира се, трябва за целта да имате поне базови познания за начина, по който кодът работи. Вместо непрестанно да вкарвате CSS и HTML файлове, прегледайте кода и премахнете тези от тях, които страницата не използва. Излишният код единствено натоварва сайта, което води до бавно зареждане.

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

speed 015


Печат   Е-мейл