За всеки собственик на уеб сайт е важно на първо място той да изглежда добре. Да е добре структуриран, с ясна навигация, полезна информация и ясно позиционирани call to action секции.
Но дори и най-красивият, с най-полезна за потребителите информация уеб сайт би могъл да бъде с висока степен на отпадане, на …17-та страница в резултатите от търсенето или иначе казано – да е в изгнание.
Причините могат да бъдат много и разнородни, но основната, за която трябва да се погрижиш и да анализираш е скоростта на зареждане на уеб сайта.
Във времена, в които имаме instant articles от Facebook (с цел ускорено сервиране на съдържанието), 4G интернет връзка и 16-ядрени процесори в мобилните ни устройства, е недопустимо да оставим потребителя да изчаква за рендериране на съдържание над 1.8 секунди (препоръчаното максимално време за зареждане, в чиито параметри е добре да попада и твоят уеб сайт).
Според проучвания на Google, потребителите изчакват 3 до 4 секунди до пълното зареждане на даден уеб сайт, и в случай, че това не се осъществи, се връщат към SERP резултатите или просто отварят нов уеб сайт.
И тъй като WordPress е системата, използвана за над 30% от всички уеб сайтове в мрежата (и заема почти 60% дял сред системите за управление на съдържанието), реших да разгледам няколко способа и инструмента, чрез които всеки WordPress базиран уеб сайт може да подобри скоростта си на зареждане.
В следващите редове ще ти разкажа за средствата и методите, които аз използвам, що се касае до оптимизиране скоростта на зареждане на WordPress уеб сайт.
Ето и над какво смятам да наблегна:
- Как да провериш текущото състояние на уеб сайта си и скоростта му на зареждане?
- Оптимизиране на базата данни (WP Optimize)
- Използване на CDN (Content Delivery Network)
- Оптимизиране на изображения
- Избор на подходящо разширение за слайдер
- По-малко разширения = по-бързо зареждане
Как да провериш текущото състояние на уеб сайта си и скоростта му на зареждане?
На първо място, за да се вземе в предвид текущото състояние на уеб сайта, е редно да се направи анализ на скоростта и оптимизацията му. За целта аз използвам два инструмента – GTMetrix и Pingdom.
С безплатната версия на GTMetrix може да тестваш скоростта на сайта си през следните локации:
Ванкувър, Канада
Далас, САЩ
Хонг Конг, Китай
Лондон, Обединено кралство
Мумбай, Индия
Сидни, Австралия
Сао Паоло, Бразилия
Pingdom от своя страна предлага избор на следните локации:
Стокхолм, Швеция
Мелбърн, Австралия
Калифорния, САЩ
Ню Йорк, САЩ
Така че, в зависимост от местоположението на потребителите ти, избери най-близката възможна локация.
Оптимизиране на базата данни (WP Optimize)
Поддържането на чиста и структурирана база данни е от изключително значение, що се касае до оптимизация скоростта на зареждане.
В нея се съхранява всичко, от което уеб сайта ти се нуждае, плюс много неща, от които няма нужда. Например, експериментирал си с различни темплейти или разширения, но вече не ги ползваш.
Също, към неизползваемите ресурси, могат да се добавят и стари версии на публикации (ревизии), смап, изтрити или неудобрени коментари и пр.
Всички тези елементи правят зареждането на базата бавно и тромаво, което пък води до цялостно забавяне на зареждане на уеб сайта.
За мое (и предполагам не само) щастие, има WordPress разширение, което се грижи за всички тези неприятности по незабележим и елегантен начин, а именно – WP Optimize.
WP Optimize е плъгин, позволяващ бърза и лесна оптимизация на базата данни, което включва:
- премахване на ревизиите за всяка от статиите и страниците на уеб сайта;
- почистване на таблиците в базата и тяхното структуриране;
Използване на CDN (Content Delivery Network)
На първо място – кратко разяснение. Какво е CDN? CDN е голяма разпределителна система на прокси сървъри, разположени в множество центрове за данни в Интернет. Целта на CDN е да обслужва съдържание за крайни потребители с висока надеждност и добра производителност. CDN обслужва голяма част от съдържанието на интернет сайтовете днес, включително и уеб обекти (текстови, графични и скриптове), сваляеми мултимедийни файлове, софтуер, документи и приложения.Портали за електронна търговия, Live-Streaming медийни сайтове, както и някои от социалните мрежи.
Все повече от хостинг доставчиците интегрират облачни технологии в предоставяните от тях услуги. В случая, аз използвам Superhosting, а те от своя страна имат интеграция с CloudFlare. Благодарение на това, съдържанието на уеб сайта ти бива кеширано (с изключение на HTML файловете, което не вреди на оптимизацията за търсещи машини) и се сервира от най-близката локация до тази на посетителя на сайта. Резултатът – бързо зареждане на уеб страниците и тяхното съдържание.
Повече за интеграцията на Superhosting с CloudFlare може да научиш от този ресурс.
Оптимизиране на изображения
За всички ни е ясно, че уеб сайт без изображения би изглеждал като… държавен вестник 🙂
Затова и за всички ни е важно да имаме добре подбрани и релевантни на съдържанието снимкови материали. А що се касае до фотографски уеб сайт, то именно снимките са съдържанието.
Затова те трябва да бъдат внимателно обработени и най-вече – оптимизирани. Лично аз се старая да преоразмеря изображенията, които поставям по уеб страниците още преди да ги поставя по местата им. Когато обаче не си сигурен какъв точно размер ти е необходим, то има няколко решения.
В практиката си съм тествала най-различни разширения (плъгини) за оптимизиране на изображения, но един от тях безспорно ме грабна, както с лекотата си, така и с ефективността си.
Говоря за EWWW Optimizer.
След като инсталираш и настроиш EWWW Image Optimizer, той автоматично ще оптимизира всички изображения, качени в уеб сайта, стига да са в JPG, PNG или GIF формат. Разширението също така включва функция за оптимизиране на целия ти медиен каталог, в случай че вече имаш много качени.Едно от предимствата на EWWW Image Optimizer е, че процесът на оптимизация се осъществява по подразбиране в собствените сървърни ресурси на уеб сайта, вместо да се свързва с услуга на трета страна. Това означава, че задачите за оптимизация ще изискват по-малко време, което може да бъде полезно при справянето с големи медийни библиотеки, тъй като оптимизирането на файлове с нормален размер (<1mb) трябва да отнема най-много няколко секунди.
Избор на подходящо разширение за слайдер
Тенденциите в уеб дизайна през последните няколко години ни уверяват в не едно и две неща, а едно от тях е – ако желаеш да имаш привлекателен за потребителите уеб сайт, то още с първоначалното му зареждане трябва да покажеш интересно и примамливо съдържание. А какво по-подходящо от ротиращи се изображения (слайдер) с текст върху тях?
Дотук чудесно, но избора на разширение, предоставящо ти тази възможност, трябва да е наистина прецизен и внимателен. Всеизвестен факт е, че наистина голям брой от WordPress темплейтите идват с предварително инсталиран Revolution slider.
В практиката си съм използвала това разширение нееднократно. И изхождайки от наблюденията си, мога да заключа следното – този плъгин значително забавя скоростта на зареждане на уеб страницата, на която е поставен.
И не само той, а и почти всички сходни на него разширения. Причината – стотици редове JavaScript (jQuery) се зареждат, за да накарат тези букви да се появят динамично, да анимират определено изображение, да карат слайдовете да се сменят автоматично и пр. Също така – на мобилни устройства (от каквито идва по-голямата част от трафика), слайдерите не изглеждат така привлекателно, както на десктоп машина.
Освен, че забавя зареждането на уеб сайта, употребата на слайдер има и значително влияние върху оптимизацията за търсещи машини, както и за потребителското изживяване.
Според създателите на небезизвестният плъгин за оптимизиране на съдържанието за търсачки – YoastSEO, слайдер, употребен на началната (а и не само) страница, не носи никакви ползи, а дори напротив. В тяхна статия, придружена от проучвания, посочват, че голям брой от потребителите пропускат съдържанието на слайдерите (т.нар. банерна слепота), почти никой не клика върху бутоните, поместени на тях и като цяло – приемат слайдера за поредния банер/реклама и твърде често пропускат реалното и ценно съдържание.
По-малко разширения = по-бързо зареждане
Допълнителните функционалности, които искаш уеб сайта ти да притежава, си имат своята цена. А именно – забавяне скоростта на зареждане.
Понякога е изкушаващо да инсталираш “само още един” плъгин, да речем, за граватар, за статистика, за автоматично споделяне в социалните мрежи…
Попадала съм на уеб сайтове, използващи абсолютно различни разширения за свързване с различните социални мрежи. В случая, моят съвет е – комбинативност и използване на разширения, които наистина добавят стойност към уеб сайта ти. Стремежа ми е да използвам плъгини с разширени функции, като така си спестявам както мегабайти в базата данни, така и риска от “счупване” на сайта поради ъпдейт на даден плъгин или конфликт между два и повече такива.
Със сигурност има какво да се добави към съветите за оптимизация скоростта на зареждане на WordPress уеб сайт, но мисля да спра до тук и да ти покажа един наистина много добър пример 🙂
http://motherfuckingwebsite.com/
Изкушаваш ли се да провериш скоростта му на зареждане 😀
Front-end Developer от 2011 година, специализиращ тясно в изграждане на онлайн магазини, базирани на WordPress CMS + WooCommerce. В практиката си, освен да намира и създава решения за клиентите си, е била гост лектор в WordCamp и SHEleader@digital, финалист в конкурса за дами предприемачи Entrepregirl v 4.0, както и keynote speaker в множество семинари и работилници в България и чужбина.
Снимка: 
Снимка: 
Снимка: 
Снимка: личен архив