Бърз сайт с WordPress – пълно ръководство

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

Защо бързината на сайта е основен критерий за качество?

Представете си следната ситуация – имате 2 напълно еднакво изглеждащи сайта. Единият зарежда за 2 секунди, а другият за 7-8 при напълно идентична визия и функционалности. Това означава, че са допуснати фундаментални грешки в изграждането на втория уебсайт, които със със сигурност влияят пряко (тъй като сама по себе си скоростта на зареждане е фактор за класиране в Google) и непряко (защото вероятно в темата има тонове излишен markup и структурата не е добра) върху цялостното представяне на сайта. С други думи, проблемът със скоростта изисква комплексен подход и неглижирането му ще доведе до изпускане на основни предимства, заради които всъщност сте решили да представите бизнеса си онлайн.

Активиране на GZIP компресия, кеширане и CDN

GZIP компресиране

Това е може би най-лесната, но същевременно много ефективна оптимизация, която да направите на сайта си. Можете да активирате GZIP компресията на данни от Вашия хостинг контролен панел (в моя случай – cPanel). Текущата хостинг компания е избрала да кръсти менюто Optimize Website, но то може да се казва по различен начин. След като отворите страницата ще имате опция да компресирате цялото съдържание или само специфични MIME типове, като в масовия случай използването на първата опция е достатъчно.

CDN – Cloudflare

Надали някой ще се изненада от препоръката за използване на Cloudflare. Това е мощен инструмент, който ще помогне за:

  • Филтриране на лошия трафик (защита от DDoS атаки)
  • Надеждно кеширане и отваряне на сайта от най-близък до потребителя data center (задължително в случаите, когато искате да развивате дейност в повече от 1 държава)
  • Автоматично прилагане на браузър кеширане
  • AlwaysOnline технология (дори и сайтът да е паднал поради технически проблем, потребителите ще виждат последната версия, която е била достъпна)

Безплатният план е достатъчен за почти всички наши клиенти. За да го настроите е необходимо само да направите регистрация и да смените DNS записките на домейна с посочените от тях.

Сайт кеширане

Ако четете тази статия, то може би вече имате инсталиран кеш плъгин на сайта. Няма да обръщам много внимание на тази стъпка – важно е да знаете, че разширения като WP Super Cache са много полезни в битката за по-бързо зареждане, но това е само една от многото стъпки.

Избор на подходяща тема

Безспорно най-важната стъпка от списъка!

Нека дефинираме понятието “добра тема”

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

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

Твърде много излишен markup

Основен проблем при по-голямата част от темите, които се продават – добавяне на твърде много HTML елементи, които по никакъв начин не допринасят за структурата. Така, например, вместо съдържанието да се появи по следния начин:

Правилен markup на съдържанието
Правилна структура без излишен markup

То ще се появи “опаковано” в тонове излишен markup. На снимката виждаме страница, изградена чрез един от популярните page builders. Докато нашият сайт използва само един <div> преди параграфите и заглавията, на по-долния пример наблюдаваме повече от 7 елемента след единствения необходим – <section>.

Това е голям проблем, който може да бъде решен лесно чрез използване на чист html и css в страницата.

Моята препоръка за WordPress тема – GeneratePress

GeneratePress е добър пример за лека тема, която е подходяща за всякакъв тип сайтове – основните елементи са лесни за редактиране, а това позволява да изградите сайта си по индивидуален дизайн без да правите промени по нито един от файловете. Може да ползвате библиотеката с оптимизирани готови дизайни за основа в premium версията, която е на цена от 49$. Важно е да споменем, че това не е претрупана от функционалности тема и ще са Ви необходими базови познания по HTML и CSS.

Използване на visual builders

Както поясних малко по-горе, page builder-ите често не са добро решение – от една страна генерират твърде много излишен CSS и JS, а от друга – добавят маркъп, който не бихте използвали, ако правите страницата без тяхна помощ. Инвестицията на повече време в изграждането без drag-and-drop builder ще се отплати във времето с реализиране на повече конверсии и по-добро класиране в търсачките.

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

Ако вече сте се опитвали да оптимизирате скоростта на зареждане със сигурност сте срещали препоръка от сорта на “Serve scalled images” или “File can be compressed – X% reduction”. Изображенията трябва да се качват в точния размер, в който искате те да се показват. Намаляването на размера чрез CSS може да е по-лесно и обикновено платените WP теми разполагат с това удобство, но зареждането на страницата ще се забави значително. Може да видите кои картинки не са в подходящ размер автоматично, използвайки инструмента GTMetrics (детайлно описание в следващите точки).

Друга важна стъпка е компресирането. Ако сайтът ви е тип landing page и има 10-20 изображения може да използвате ръчно компресиране или GTMetrix вградения инструмент, който ще компресира всички проблемни изображения, които вие само да свалите по-късно (прочетете повече в следващите редове).

Не така стоят нещата ако имате онлайн магазин с няколко хиляди продукта или стотици снимки от предишни проекти, например. В този случай ще се наложи да инсталирате допълнителен plugin за целта. За съжаление не мога да предложа нито едно достатъчно добро безплатно решение, на което да разчитате – добри плъгини са Smush Pro и нетолкова популярния, но много ефективен Ewww image optimizer. Споделям с вас въпросните разширения с уговорката, че те не са панацея – ако продължите да качвате изображения в неподходящ размер няма нищо, което да помогне.

Използване на шрифтове

Шрифтовете също могат да създават сериозни проблеми със скоростта. Един от най-добрите начини да проверите до каква степен комбинацията от шрифтове, която сте избрали се отразява негативно на скоростта е като използвате официалния сайт на Google Fonts.

Google Fonts

След като сме избрали шрифтовете, които искаме да използваме чрез натискане на бутон “+” под всеки един от тях ще се появи кутия в долния десен ъгъл на екрана, която изглежда като снимката по-горе. Там ще видите информация за embed кода, който трябва да поставите на сайта си и какво ще е зареждането на страницата ако използвате всички шрифтове от селекцията. При тези двата Load Time е Moderate. Ако избера други 2 шрифта получавам следния резултат:

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

Важно: Винаги използвайте стандартния embed код за вграждане вместо @import метода!

Тестване на сайта

Ако искате да разберете до каква степен сте успяли да оптимизирате сайта си ще имате нужда от няколко лесни за употреба и безплатни инструмента. Ето моите препоръки:

#1 Pingdom.com

Безплатен инструмент, с който да проверите бързо и лесно скоростта на сайта си от различни точки на света. Регистрираните потребители получават нотификации при падане на сайта и отчет за представянето му, но можете да използвате основните функционалности и като гост. Важно е да знаете, че не сте тук за оценката в цифра – интересувате се само от времето за зареждане и статистиката по заявки. В нашия случай това е малко под 2 секунди.

Статистика по заявки

Една от най-големите ползи от използването на въпросния инструмент е възможността да видите колко време отнема и какъв е размерът на всеки един файл, който се зарежда. По този начин може да разберете лесно и бързо кои са заявките, които трябва да оптимизирате – най-често това са js или css файлове.

#2 GTMetrix.com

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

За целите на теста добавихме снимки на нашите проекти от портфолиото в реален размер. Ето какво се получи:

Както виждате, инструментът показва с точност кои са файловете, които трябва да бъдат оптимизирани. Дори можете да видите текущия размер, в който посетителите ги виждат (в случая – 560x261px) и този, в който сте ги качили. Разликата при малки снимки като нашите е огромна – над 90% reduction.

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

Google AMP – струва ли си?

Accerelated Mobile Pages или AMP е сравнително нова услуга, за чието имплементиране се твърди, че ще направи сайта Ви по-бърз и удобен за потребителите. Тук изниква въпросът дали наистина има смисъл от него. Моето лично мнение за AMP е, че този инструмент може и да е от полза за новинарски сайтове и блогове с много съдържание, но е напълно излишен за бизнес такива. Ако все пак сте решили да го използвате в WordPress сайта си по-добре се подгответе за доста работа по първоначалното конфигуриране – инсталирането на официалния плъгин е само първата стъпка. Възможно е да видите голямо количество страници с грешки в Search Console при неправилна настройка.

Надявам се, че материалът е бил полезен!