39 съвета за оптимизиране на скоростта на уеб сайта Ви (намалете времето за зареждане)

39 съвета за оптимизиране и поддръжка на сайт

Съдържание

39 съвета за оптимизиране на Вашия сайт и за неговото изстрелване на върха на класациите в търсачките.

Скоростта на страницата е един от малкото фактори за класиране, публично потвърдени от Google.

Което означава … ускоряването на уебсайта ще осигури повече трафик от търсачките.

Добрата новина? Това ръководство е ПАКЕТИРАНО с полезни съвети за оптимизиране на скоростта на страниците, които можете да приложите ДНЕС, за да накарате уебсайта си да напредне в класацията. И евентуално да излезе пред конкурентите Ви.

(и като бонус … ускоряването на сайта ви също може да намали степента на отпадане, да доведе до повече трафик при повторение и дори да увеличи крайната ви позиция!)

Нека се потопим в изкуството на SEO с тези 39 съвета за оптимизиране.

Съкратено съдържание:

Как да проверите скоростта на вашата страница

Първо най-важното. Преди да започнете оптимизацията, ще ви е необходима базова линия.

И въпреки че има няколко страхотни инструмента за измерване на скоростта на страница като GTMetrix и Pingdom, все пак Гугълският PageSpeed Insights има всичко необходимо за измерване на текущите резултати.

PageSpeed ​​Insights съдържа много полезни показатели. Но нека улесним нещата. Това, което Ви интересува, е:

  1. Рейтинг показател на мобилната скорост на вашата страница от (0-100)
  2. „Време за интерактивност“ на вашата страница (когато потребителят започне да сърфира в нея)

Забележка: препоръчваме да се съсредоточите върху скоростта на мобилните страници, тъй като повечето сайтове (в крайна сметка всички) вече са с включени mobile-first indexing.

Например, началната страница на Tonevski в момента има мобилен резултат за скорост от 77 … и 96 за настолни компютри.

pagespeed insights tonevski mobile
pagespeed insights tonevski mobile
pagespeed insights tonevski desktop
pagespeed insights tonevski desktop

… и време за интерактивност от 1 секунда.

pagespeed insights tonevski data
pagespeed insights tonevski data

И така, какво Е добър резултат за скорост?

Колко бързо трябва да се зарежда вашият уебсайт?

Отговорът е прост. Трябва да се стремите към мобилен PageSpeed ​​резултат между 90 и 100.

Според Google всичко в този диапазон е „Добро“ и всичко под това или се „Нуждае от подобрение“ (50-89), или е „Лошо“ (0-49).

98-tonevski-page-speed-desktop
Скорост на зареждане резултати

Излишно е да казвам, че всеки иска резултат „Добро“.

Времето за интерактивност е малко по-сложно.

Няма твърдо и точно правило, но ние ще се постараем да запазим това под 3 секунди максимум, а в идеалния случай трябва да се стремите да го получите под 2 секунди.

И вие като нас ще искате да започнете първоначалното зареждане (т.е. потребителят започва да вижда съдържание) в рамките на 1 секунда.

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

Разгледайте Това ръководство от Hobo Web за някои статистики как забавянето и бъгването на един сайт кара потребителите да се разочароват със всяка една изминала секунда и дори да излизат от сайта.

Основните принципи за подобряване на скоростта на страницата

Преди да стигнем до съветите, нека да обхванем бързо това, което се опитваме да постигнем.

Накратко:

Всяко действие, което предприемаме за подобряване на скоростта на страницата, е предназначено да направи едно от следните неща:

  1. Да се подобри времето за изпълнение от страна на сървъра или да се намали времето за реакция на сървъра (подобряване на Time to First Byte или TTFB)
  2. Намалете размера и / или времето, необходимо за изобразяване на страница от страна на сървъра и изпращане на уеб съдържание към клиентския браузър
  3. Използвайте повторно съдържание и / или ресурси, за да спестите време за изтегляне на нови данни
  4. Намалете времето за изпълнение / оценка на страница от страна на клиента

И всеки съвет надолу води към решаването на тези цели.

Така че нека започваме …

Оптимизиране на вашия сървър и инфраструктура (съвети)

Преди да се занимавате със самия уебсайт, важно е да оптимизирате инфраструктурата, която го поддържа.

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

1. Надстройте до последната стабилна версия на PHP

Трудност: Лесно

Защо трябва да го правите?

Ако уебсайтът ви работи на PHP, надстройването до най-новата стабилна версия ще ускори автоматично Вашия сайт.

Защото бенчмарк тестове (като този) ни разкриват, че PHP става все по-бърз и по-бърз..

пхп бенчмарк тест тоневски
пхп бенчмарк тест тоневски

Как да го направя

Това ще варира според зависи – от хост до хост.

Но често ще бъде толкова просто, колкото да изберете нова версия на PHP от падащо меню или квадратче за отметка. Като този на Cloudways.

Cloudways избор на пхп
Cloudways избор на пхп

Или този в CPanel.

цпанел избор на пхп
цпанел избор на пхп

Допълнителна информация: Вземете по-бърз и по-сигурен уебсайт: актуализирайте PHP днес (wordpress.org)

2. Надстройте (или променете) вашия хост

Трудност: Лесно за Средно (надстройката със съществуващия ви хост трябва да е лесна, но преминаването към нов доставчик може да изисква стратегия за миграция)

Защо трябва да го правите?

Получавате това, за което плащате в живота. Уеб хостингът не е изключение.

И ако сте на евтин, споделен хост, значи че делите ресурси (памет, използване на процесора и т.н.) с много други уебсайтове. Което има ОГРОМНО влияние върху скоростта.

Как да го направя

Ако сте доволни от текущия си хост – и просто искате по-бърз сървър – това може да бъде толкова просто, колкото да ги помолите да надстроят вашия хостинг пакет. Съответно компании като СуперХостинг.бг ще изчислят колко сте заплатили до момента за хотинг и ще ви предложат вариант без да губите заплатеното.

Всъщност, ако сте на VPS, често ще можете да надстроите сървъра си чрез контролния панел.

мигриране на нов хост
мигриране на нов хост

Но мигрирането към нов хост ще бъде по-сложната работа.

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

3. Преминете към първокласен доставчик на DNS

Трудност: Средно (уверете се, че репликирате съществуващите си DNS настройки точно)

Защо трябва да го правите?

Когато потребител въведе домейна ви в адресната лента (или щракне върху страницата ви в Google), браузърът му трябва да преведе URL адреса в IP адрес. Този превод се обработва от DNS сървър и се случва преди посетителят да може да стигне до вашия сайт и да започне да изтегля съдържание.

днс диаграма

Бавният DNS сървър може да доведе до бавни връзки към вашия сайт. И ако вашият DNS сървър спре, тогава потребителят може изобщо да не може да се свърже и да отвори сайта.

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

Как да го направя

Има редица първокласни доставчици на DNS и процесът на превключване е доста ясен.

Всичко, което трябва да направите, е да насочите сървърите на имена на вашия домейн към новия доставчик, след което да репликирате съществуващите си DNS настройки.

Ако Ви се струва сложно пишете от ТУК и Уеб Дизайн Тоневски ЕООД ще ви съдейства.

Допълнителна информацияЗащо Premium DNS вече не е задължителен (Kinsta)

4. Активирайте HTTP/2 или HTTP/3

Трудност: Средна (промяна на конфигурацията на сървъра)

Защо трябва да го правите?

HTTP / 2, издаден през 2015 г., беше първото голямо подобрение на протокола, който хваща целия уеб трафик в интернет от 1999 г. насам.

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

Тук няма да се задълбочаваме в предимствата на HTTP / 2. Но ако уебсайтът ви не използва HTTP / 2 (можете да го тествате тук), и след това да преминете като следвате ръководството от тук.

http2-vs-http1-results

Вероятно ще ви е необходима подкрепата на Вашия хостинг провайдър, за да активирате това.

Но знаете ли, че дори HTTP / 2 страда от собствените си проблеми с производителността?

На HTTP2, когато един HTTP пакет се забави, той забавя ВСИЧКИ пакети, които идват след него, докато този конкретен пакет не бъде изпратен отново и получен.

HTTP/3 Е нов протокол, разработен от Cloudflare съвместно с основните браузъри като Chrome и Mozilla, който създава още по-нататъшни подобрения в производителността.

Как да го направя

Точно сега, за да активирате HTTP / 3, трябва да сте клиент на Cloudflare и да сте в техния списък на чакащите, но очаквайте това да стане по-широко разпространено в близко бъдеще.

Продължаваме с нов съвет от нашите 39 съвета за оптимизиране.

5. Активиране на TLS 1.3 за по-бързо „ръкостискане“

Трудност: Средна (промяна на конфигурацията на сървъра)

Много уебсайтове използват ранните версии на TLS (протоколът, който задвижва HTTPS), но по-късните версии на TLS имат много по-добро въздействие.

handshake performance

Чрез активиране на TLS 1.3 можете да спестите до 100ms от времето за зареждане.

Как да го направя

Проверете конфигурацията на вашия сървър, за да видите кои версии на TLS се поддържат в момента.

infrastructure-5-tls-version

Можете също да тествате вашия сайт тук.

Допълнителна информацияПреглед на TLS 1.3 – по-бърз и по-сигурен (Kinsta)

6. Активирайте кеширането на ниво PHP

Трудност: Средна (изисква да промените вашия php.ini файл)

Защо трябва да го правите?

PHP е интерпретиран език за програмиране. Което означава, че всеки ред код, който се изпълнява, се „превежда“ в инструкции на ниво машина всеки път, когато този ред се изпълни.

Повечето PHP сайтове обикновено изпълняват едни и същи няколко хиляди реда код отново и отново.

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

OpCode кеширането е начин за решаване на този проблем.

Това, което се случва тук, е, че преведените редове код (наречени opcode) се записват в паметта на сървъра.

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

Това значително подобрява производителността.

php-caching

Как да го направя

За да активирате кеширането на OpCode, ще трябва да промените файла php.ini.

Това ръководство от Cloudways Обяснява как да го направите, а също така се потапя малко по-дълбоко в предимствата на активирането на кеширането на OpCode.

7. Активирайте CDN за обслужване на статично съдържание от множество местоположения

Трудност: Средна (ще включва промяна на настройките на DNS на вашия уебсайт и / или път на файлове)

Защо трябва да го правите?

Има един ключов аспект, що се отнася до скоростта на уебсайта, над който имате контрол:

Действителното физическо разстояние от местоположението на клиентския браузър до сървъра на уебсайта.

Бихте могли (и трябва) да изберете сървърът ви да бъде разположен възможно най-близо до вашата клиентска база. Но с международна публика това става сложно и доста скъпо.

За щастие има лесно решение: използване на CDN. За който ще говорим в съвет № 7 от 39 съвета за оптимизиране.

CDN е мрежа от сървъри, която се разпространява физически по целия свят. Техните сървъри изтеглят изображения, CSS, Javascript и други предимно статични, тежки файлове към своите ‘крайни’ сървъри.

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

cdn
cdn

Тъй като статичните файлове обикновено са най-големите, CDN прави две неща:

  1. Поемане на тежестта и обслужването на тези файлове
  2. Обслужването им от място, което е по-близо до потребителя, значително подобрява ефективността на вашия сайт като цяло.

Как да го направя

Първо ще трябва да се регистрирате в CDN. Имате голям избор, така че Вижте тази публикация на Tech Radar ако искате някакъв съвет кой да изберете.

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

8. Използвайте домейни без бисквитки за статични файлове (CSS, скриптове и т.н.)

Трудност: Лесно до средно ниво (CDN обикновено правят това по подразбиране, но можете също да настроите свой собствен поддомейн без бисквитки)

Защо трябва да го правите?

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

Но те се възползват от ВСИЧКИ заявки, изпратени от браузъра. Така че, въпреки типично малкия си размер, те създават режийни и добавят допълнителна тежест към скоростта на зареждане на страницата.

Как да го направя

CDN обикновено премахва бисквитките от статични файлове по подразбиране.

Можете също така да промените WordPress, за да използвате домейни без бисквитки, като следвате тези инструкции.

9. Надстройте MySQL до MariaDB

Един практичен съвет от нашите 39 съвета за оптимизиране.

Трудност: Средна (Внимавайте и правете резервни копия – бекъпи)

Защо трябва да го правите?

Накратко:

MariaDB е по-бърз механизъм за бази данни от MySQL. Това е заместител за сваляне и ако в момента използвате MySQL, това е по-добрия вариант за скорост.

maria-db-performance
source

Как да го направя

Повечето хостове имат настройка с едно щракване, за да превключат на MariaDB.

Но ако искате да си изцапате ръцете, тогава вижте това ръководство за това как да го направите ръчно.

10. Активирайте кеширането на обекти за съхраняване на заявки към база данни

Трудност: Трудно (обикновено лесно за изпълнение, но има уловки при преминаване към конфигурация на сървъра)

Защо трябва да го правите?

Кеширането на обекти (като Redis) е метод за съхраняване на заявки към база данни, така че те могат да бъдат извлечени от кеша, вместо чрез многократно заявяване на базата данни.

Това кеширане помага на базата данни да подобри производителността на често срещани или повтарящи се заявки, които не се променят често. Ресурсите на базата данни след това могат да бъдат запазени за заявки с по-динамичен характер.

Как да го направя

Redis трябва да се поддържа на ниво сървър, така че трябва да го активирате чрез вашата VPS настройка.

Някои хостове имат настройка за активиране на Redis …

redis

…но ако Вашият няма ето как да го направите ръчно на сървър на Ubuntu.

Разбира се, ако това не е по Вашите сили, винаги можете да се обърнете към Уеб Дизайн Тоневски ЕООД от ТУК.

А сега нека продължим със следващия трик от всичките 39 съвета за оптимизиране, които сме Ви предложили.

11. Разменете Apache на Litespeed Server или NGINX

Трудност: Трудно (ако нямате опит с модифицирането на конфигурации на сървъра, може би е най-добре да накарате някой да се справи с това вместо вас или да ни пишете)

Защо трябва да го правите?

Apache продължава да бъде най-популярният уеб сървър в света. Според данни на w3techs.com, над една трета от уебсайтовете в момента работят на Apache.

infrastructure-11-apache-usage

Но това в никакъв случай не е най-бързо.

Преминаването към LiteSpeed ​​или NGINX може да донесе значителен тласък в производителността.

server-performance
производителност на сървъра

Как да го направя

LiteSpeed е заместващ Apache със значително по-добра производителност. И пътят за надстройка е относително ясен, така че ако използвате VPS, силно се препоръчва надстройка до LiteSpeed.

Преминаването към NGINX не е толкова просто и ще изисква повече тестове и настройки. Ето как да го направите на Ubuntu VPS.

12. Премахнете други уебсайтове от сървъра

Трудност: Средна към трудно (ще включва мигриране на други уебсайтове от сървъра, хостващ вашия „основен“ сайт)

Защо трябва да го правите?

Ако сте преминали от споделен хостинг към VPS (или сте надстроили текущия си VPS), тогава вече трябва да сте забелязали някаква солидна полза от скоростта на страницата.

Но ако стартирате няколко уебсайта и искате да подобрите своя „основен“ сайт, тогава е добра идея този да работи на собствен VPS със собствени специализирани ресурси.

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

Така че има смисъл да предоставите на вашия „основен“ уебсайт собствено пространство за дишане и растеж.

Как да го направя

Ако настроите нов сървър с текущия си хост, те трябва да се съгласят да ви помогнат да преместите вашите некритични сайтове на новия сървър.

Но ако решите да го правите сами, тогава вижте това ръководство на сеобилити.

13. Премахнете PHP модулите или задачите, от които не се нуждаете

Трудност: Трудно (деинсталирайте грешния модул и бихте могли да счупите сайта си!)

Защо трябва да го правите?

PHP има много модули, работещи по подразбиране, и (в зависимост от функционалността на вашия уебсайт) има голяма вероятност да не се нуждаете от някои от тях.

Премахването на PHP модулите, които не се изискват от вашия сайт, може да повиши скоростта и производителността.

Как да го направя

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

Ако използвате настройка на WHM, това е добро ръководство за следване.

Отиваме към втора част от нашите 39 съвета за оптимизиране.

Технически съвети за повишаване на скоростта на страницата

В този раздел ще разгледаме 13 съвета за повишаване на скоростта за вашия уебсайт; От настройка на кеширане на страници, до оптимизиране на изображения, скриптове, стилове и др.

1. Настройте кеширане на страници

Трудност: Лесно към средно (за повечето CMS системи това може да се обработи с приставка)

Защо трябва да го правите?

Динамичните уебсайтове работят, като съхраняват съдържание (статия, продукт и т.н.) в база данни (отделно от основния шаблон), след което създават пълна страница „в движение“, когато потребител посети.

Но извличането на съдържание от база данни за всеки посетител е изключително тежка операция.

Кеширането на страници решава този проблем.

Кеширането създава копие на цялата страница (т.е. шаблон със съдържание) при първото представяне и я съхранява на локалния диск на сървъра. Тази кеширана версия може да бъде извлечена стотици пъти по-бързо, отколкото ако бъде извлечена от базата данни и изобразена всеки път, когато страницата се зарежда.

uncached_workflow
източник

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

Как да го направя

В повечето CMS системи ще искате да позволите на приставка (или приложение) да обработва кеширането вместо вас.

Ако използвате WordPress, препоръчваме WP Rocket, заедно със СЕО компонента Rank Math Pro.

wp-rocket

Но има и безплатни приставки като W3 Total cache.

Имате също много възможности за избор на Shopify. Например HyperSpeed е добро всестранно приложение за скорост на страницата.

Потърсете прегледи на кеширащите (и скоростта на страницата) приставки за избрания от вас CMS.

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

Трудност: Лесно (повечето програми за редактиране на изображения могат да оптимизират)

Защо трябва да го правите?

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

Като съвет, извън другите 39 съвета за оптимизиране. Създавайте персонализирани изображения за всеки от нашите публикации в блога.

custom-featured-image

Но когато не са оптимизирани, те също могат сериозно да забавят вашия сайт.

Как да го направя

На първо място, уверете се, че вашите изображения са лениво заредени. Това е функция, при която изображенията се зареждат САМО когато потребителят е на път да ги види (например когато е на път да превърти това изображение в изглед).

Ако използвате WordPress, тогава, докато сте на версия v5.4 или по-нова, е вградено мързеливо зареждане. Но предишните версии ще се нуждаят от външен плъгин (като A3 lazy load) за да активирате функцията.

На второ място, трябва да се уверите, че изображенията, които използвате, са оптимизирани за мрежата.

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

Има няколко инструмента, които могат да ви помогнат с това.

Можете да запазвате изображения в мрежата с повечето инструменти за графичен дизайн, като Photoshop (по-долу). Или можете да използвате инструмент като TinyPNG за да оптимизирате изображенията поотделно.

technical-2-optimize

И ако искате да се справите с оптимизирането на изображения директно в WordPress, можете да използвате услуга като WPMU’s Smush, или Imagify.

3. Използвайте формати от следващо поколение като WebP

Трудност: Средно (конвертирането на изображения в WebP е лесно, но обслужването им ще отнеме малко повече време и умения)

Защо трябва да го правите?

Знаем, че трябва да оптимизираме изображенията. Но какъв формат на изображението е добър компромис между качеството и размера?

Google Pagespeed Insights препоръчва WebP. Това ще форматира изображението без загуби, специално за мрежата.

Какво означава без загуби?

Формати като JPG обикновено „губят“ част от качеството на изображението, за да намалят размерите на файловете си. Форматите на изображения без загуби като PNG и WebP не нарушават качеството на размера.

Как да го направя

(*Съвет извън другите 39 съвета за оптимизиране) Приставки като Imagify (споменати по-горе) или WebP Express могат да конвертират медиите ви в WebP, след което да използват този формат за показване на изображения.

Можете също да използвате този бецплатен инструмент за да конвертирате вашите изображения в WebP ръчно.

convert-to-webp

Допълнителна информация: Нов формат на изображението за мрежата (Google Developers)

4. Активирайте GZip компресия

Трудност: Лесно (малка настройка за конфигуриране)

Защо трябва да го правите?

Голяма част от съдържанието на уебсайта е текстово. Например HTML, CSS и Javascript са текст.

Това ни дава леснота в изпълнението. Тъй като текстовото съдържание е силно сгъваемо.

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

Забележка: макар да има малко въздействие на компресирането и декомпресирането на съдържание, има много по-голяма полза от намаляването на размера на трансфера.

Как да го направя

Активирането на GZip компресия обикновено може да стане чрез вашата хостинг услуга. На базирани на CPanel хостове трябва да намерите раздела Оптимизиране на уебсайта и да го активирате, както е показано по-долу.

gzip

5. Умалете своите JS, CSS и HTML

Трудност: Средно (лесно за изпълнение, но не забравяйте да тествате след това, за да сте сигурни, че всичко работи правилно)

Защо трябва да го правите?

Коментари, нови редове, раздели и друго празно пространство могат да бъдат премахнати от JS, CSS и HTML файлове, за да се намали размерът им.

Как да го направя

Може да използвате този безплатен инструмент за да минимизирате CSS, JS и HTML.

technical-7-minify

(и ако объркате нещо, можете също да използвате инструмента за „разкрасяване“, т.е. деминифициране на вашите скриптове)

(*Съвет извън другите 39 съвета за оптимизиране и поддръжка на сайт) Защо да минимизираме JavaScript кода? (Cloudflare)

6. Отложете синтактичния анализ на Javascript

Трудност: Лесно (може да се обработва от приставка или чрез ръчно добавяне на атрибут към скриптове)

Защо трябва да го правите?

Javascript библиотеките обикновено се включват в заглавката на страница. И по подразбиране, когато браузър достигне скрипт, ще трябва да изтегли файла и да го „анализира“, преди да продължи да зарежда друго съдържание.

Това е известно като блокиране на визуализация и може сериозно да забави уебсайта ви.

За щастие е лесно да се поправи. И ние разгледахме как точно да го направим в това Core Web Vitals ръководство.

7. Отложете некритичен CSS

Трудност: Средно (малко по-сложен от отлагането на Javascript)

Защо трябва да го правите?

Подобно на Javascript, CSS блокира визуализацията.

Така че, за да оптимизирате зареждането, трябва да вградите критичен CSS (стилове, необходими за изобразяване над съдържанието на сгъване), след което да отложите други некритични стилове.

Не е толкова ясен като отлагане на Javascript (освен ако не използвате приставка), но все пак е относително безболезнен.

Как да го направя

Това web.dev ръководство обхваща подробно процеса на отлагане на некритичен CSS.

Подробно ръководство, съобразено с Core Web Vitals на Гугъл.

8. Намалете общия размер на уеб страницата

Трудност: Трудно (комбинирайте много от съветите в това ръководство + анализирайте отделните заявки)

Защо трябва да го правите?

Какво е златното правило за ускоряване на зареждането на уебсайт?

Направете размера на всяка страница възможно най-малък.

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

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

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

Как да го направя

Освен да следвате стъпките в това ръководство, трябва да разгледате всичко, което страницата ви зарежда (заявки).

GTMetrix Ви позволява да анализирате всички заявки, които прави уеб страницата.

Погледнете всяка отделна заявка. Опитайте се да откриете източника и.

След това задайте следния въпрос:

„Може ли уебсайтът ми да живее без тази заявка? Наистина ли е необходимо? ”

Ще откриете, че можете да премахнете много от тях.

request

Ето няколко примера за заявки, които могат да бъдат премахнати, ако не ги използвате:

  • Facebook Pixel, Google Ads, Google AdSense
  • Други скриптове за реклами на трети страни или скриптове за проследяване на реклами (те са особено тежки)
  • Имейл маркетинг скриптове за проследяване
  • Disqus коментари (те включват скриптове за проследяване на трети страни – можете да се откажете от тях)
  • Намалете броя на различните шрифтове на Google, които използвате
  • Google Optimize, Hotjar или други скриптове за проследяване или оптимизиране на потребители
  • FontAwesome икони, ако те едва се използват
  • Map плъгини
  • YouTube или други вграждания

Вероятно ще откриете, докато ги преглеждате, че някои заявки са по-големи (и по-бавни) от други.

Направете преценка дали можете да ги спрете.

9. Хоствайте локална версия на скриптове, които не можете да премахнете (като Google Analytics)

Трудност: Лесно до средно (лесно е да се направи с приставка, по-напредналите могат и ръчно)

Защо трябва да го правите?

Въпреки че можете да контролирате изтичането на кеша на локалните скриптове (т.е. времето преди браузърът да изтегли нова версия), външните скриптове са извън вашия контрол.

Например Google Analytics има изтичане на кеша от само два часа.

Освен това разчитате на скоростта / надеждността на външния сървър. Не се притеснява много за повечето популярни сценарии, но хей, дори Google слиза от време на време.

Как да го направя

Технически всичко, което трябва да направите, е да отидете в скрипта, да вземете кода, да запазите копие, да го качите на вашия собствен сървър, след което да извикате това локално копие във вашия HTML.

Но разбира се, външният скрипт може да се променя от време на време.

Така че ще искате да настроите задание cron, за да изтегляте периодично най-новата версия на скрипта (Ето как да го направите за Google Analytics).

Или ако използвате WordPress, можете да използвате този безплатен плъгин, или оставете WP Rocket да се справи.

technical-11-ganalytics

10. Обединете Javascript/CSS (ще се подобри скоростта на страниците ви)

Трудност: Лесна към средна (Лесна за работа с приставка, но може да обърка функционалността и всъщност да не подобри производителността. Тествайте след извършване на операцията.)

Защо трябва да го направите?

Появата на HTTP2 направи това конкретно действие най-вече остаряло, но ние ще изброим тук плюсовете за пълнота.

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

Преди HTTP2 инициализирането на всяка заявка беше тежко и натоварваше сървъра, а уебмастърите се стремяха да намалят общия брой заявки, които браузърът изпраща.

Има обаче редица недостатъци.

  • Обединяването на тези файлове може да създаде конфликти и проблеми с определени приставки
  • Обединяването на тези файлове е тежка операция и може да окаже въздействие върху производителността, ако не се направи от професионалист

Как да го направя

Ако използвате WordPress, приставка за кеширане, като WP Rocket, ще можете да се справите сравнително лесно. Просто следвайте стъпките в програмата и задължително тествайте след това.

merge scripts to boost page speed

Проверете дали подобно обединяване всъщност помага или възпрепятства работата на вашия сайт. Ако срещате трудности просто ни пишете. Ние от Уеб Дизайн Тоневски ЕООД можем да извършим проверка на производителността на сайта ви напълно безплатно.

Нека се върнем сега към следващите 39 съвета за оптимизиране и поддръжка на сайт.

11. Проверете и коригирайте грешките в регистрационните файлове на уеб сайта

Трудност: Трудно (поправянето на тези грешки може да включва и промяна на основния код)

Защо трябва да го правите?

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

Но какъв е ефектът от тези скрити грешки?

Слабо представяне. Това е така, защото обработката на грешки изисква много ресурси.

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

Как да го направя

Грешките ще варират в зависимост от сайта.

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

Можете да проверите на следните места:

  • Грешка при влизане във вашия хостинг акаунт
  • PHP грешка влезте в основната директория на вашия сайт
  • Други области, които съхраняват регистрационни файлове / регистрационни файлове за грешки
  • Когато откриете грешки, проучете допълнително и предприемете стъпки за отстраняването им.

(*Съвет извън другите 39 съвета за оптимизиране и поддръжка на сайт): В C-PANEL има специална графа с логове за грешки.

12. Закъснение на скриптове на трети страни с Google Tag Manager или Lazy Load

Трудност: Трудно (скриптове със забавяне във времето могат да повлияят на производителността / проследяването)

Защо трябва да го правите?

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

Но можем ли да подобрим скоростта на страницата, като същевременно запазим тези скриптове?

Да, чрез метод, наречен закъсняло зареждане или мързеливо зарежданеLazy Load.

Как да го направя

Можете да забавите на зареждането на скрипт на трета страна чрез javascript (изисква разработка и настройка на вашата тема) или чрез Google Tag Manager.

time delay scripts

13. Използвайте Prefetch / Preconnect за „загряващи“ връзки

Трудност: Средно (сравнително лесен за изпълнение чрез добавяне на съответните тагове към вашия код)

Защо трябва да го правите?

Днешните браузъри обикновено зареждат съдържание и скриптове на трети страни отгоре надолу, когато ги срещнат.

Но не би ли било чудесно, ако браузърът вече знае какво ще трябва да зареди по-надолу по страницата?

Браузърът може да започне „предварително извличане“ на тези ресурси, така че след като те са необходими, да бъдат налични.

Маркерите за предварително извличане и предварително изобразяване правят точно това.

Как да го направя

Нека започнем с предварително извличане.

Това работи предимно за DNS заявки.

Ако знаете дали Вашият уебсайт използва ресурси на уебсайтове на трети страни, инструкция за предварително извличане на DNS ще стартира DNS разделителната способност на този URL адрес, така че да е готова за осъществяване на връзката.

Чрез добавяне на код като:

<link rel="dns-prefetch" href="//www.googletagmanager.com">

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

Preconnect работи по подобен начин, но вместо просто да изпълнява DNS заявката, той всъщност инициира връзката към сайта на трета страна, така че да е готов за използване.

Има и други инструкции, които можем да изпълним, за да помогнем на браузъра, включително:

  • Предварително извличане или предварително зареждане – предварително зарежда статични ресурси като изображения или CSS / Javascript файлове
  • Prerender – изтегля изцяло URL, за да го направи готов за достъп.

Има добро ръководство за всяка от тези команди тук.

Оптимизиране скоростта на WordPress сайтове (съвети)

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

1. Контролирайте WordPress Heartbeat

Трудност: Лесно

Защо трябва да го правите?

WordPress използва Heartbeat API за изпращане на данни между сървъра и браузъра в реално време. Това е полезна функция, която улеснява предаването като автоматично запаметява и заключва данните след публикуване в реално време.

Но при настройка по подразбиране API на Heartbeat „бие“ твърде бързо – изпраща заявка на всеки 15 секунди, когато администратор редактира публикация. Тази честота забавя всеки един сайт на WordPress.

За щастие е лесно да се поправи.

Как да го направя

Ако използвате WP Rocket, всичко, което трябва да направите, е да поставите отметка в квадратчето „control heartbeat“.

wordpress-1-control-heartbeat-wp-rocket
wordpress-1-control-heartbeat-wp-rocket

Или алтернативно, можете да използвате безплатния, самостоятелен HearBeat control плъгин.

(можете дори да деактивирате HeartBeat напълно, като редактирате функциите на вашата тема от файла function.php)

(*Съвет извън другите 39 съвета за оптимизиране и поддръжка на сайт)API на WordPress Heartbeat: какво е и как да го управлявате (GigaPress)

2. Ограничете публикациите в блога, показвани на архивни страници

Трудност: Лесно

Защо трябва да го правите?

WordPress ще ограничи броя на публикациите в блога, показани на страниците за архив (категория / таг), до десет. Така че, ако имате двадесет публикации в определена категория, WordPress ще ги раздели на две страници.

Но можете да зададете и на колкото броя искате. И така, защо не трябва да показвате повече публикации на една страница?

Тъй като повече публикации на страница означава повече итерации, през които WordPress може да премине (зареждане на сървъра) и повече изображения на страницата (по-бавно за потребителите).

Затова препоръчваме броят на публикациите на отделна страница да бъде максимум 10 (оформление с една / 2 колони) или 12 (оформление с три колони).

Как да го направя

Лесно. Просто отидете в настройки > четене и задайте броя публикации, които искате да се показват на една страница.

limit-posts

3. Оптимизирайте коментарите за ефективност

Трудност: Лесно

Защо трябва да го правите?

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

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

И ако вашите коментари включват аватари, както и допълнителното текстово съдържание, ще добавите и допълнителни изображения.

И така, ако вашият сайт привлича много коментари (което е добре!) Трябва да вземете мерки.

Как да го направя

Малко като архивите на публикациите, WordPress ви позволява да разделяте коментарите на страници.

Просто преминете към Настройки > Дискусия и задайте максимален брой коментари на страница.

wordpress-4-comment-settings

20-30 е добро средно положение.

Превъртете надолу страницата с настройки за дискусия и можете също да деактивирате аватарите.

wordpress-4-disable-avatars

4. Ограничете ревизиите на страници и публикации

Трудност: Лесно

Защо трябва да го правите?

Ревизиите са полезни. Те ви позволяват да се върнете и да възстановите по-стара версия на публикация, ако объркате нещо (а това се случва честичко).

Но твърде много от тях могат да запушат и забавят базата данни на WordPress. Затова препоръчваме да ограничите броя на съхранените ревизии за всяка публикация до максимум 5.

Как да го направя

Можете да ограничите ревизиите на публикациите, като добавите ред към вашия файл wp-config.php. В примера по-долу ограничаваме съхранените ревизии до 5.

define('WP_POST_REVISIONS', 5);

Или ако изобщо не искате никакви ревизии, можете да промените настройката на:

define('WP_POST_REVISIONS', false);

Ако това упражнение Ви се стори сложно, или не искате да ровичкате системни файлове, можете да се обърнете за помощ към Уеб Дизайн Тоневски ЕООД от ТУК.

5. Почистете базата данни на WordPress

Трудност: Лесно

Защо трябва да го правите?

С течение на времето базата данни на WordPress натрупва излишна шлака. Запазените ревизии, спам и изхвърлени коментари … всичко се добавя.

И това може да повлияе сериозно на производителността.

Как да го оправя

Ако използвате WP Rocket, е толкова просто, колкото да поставите отметки в съответните полета (намира се в раздела „База данни“), след което натискате „Запазване на промените и оптимизиране“.

wordpress-6-clean-database

(*Съвет извън другите 39 съвета за оптимизиране и поддръжка на сайт): Ако желаете пълната версия на WP ROCKET и на Вашия УордПрес сайт, моля, свържете се с Уеб Дизайн Тоневски ЕООД и ние ще я инсталираме и конфигурираме.

Но има и редица самостоятелни приставки (като тази) които ще се погрижат за работата.

6. Премахнете плъгините, които не използвате или използвате рядко.

Трудност: Средна (премахването или деактивирането на приставки може да промени функционалността и да счупи сайта Ви)

Защо трябва да го правите?

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

Така че, ако не използвате приставка (или тя не добавя нищо полезно към UX на вашия сайт), тогава я използвайте. UX (User Experience) – означава Потребителско Изживяване.

Как да го направя

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

wordpress-7-plugins

След това деактивирайте (или по-добре директно ги изтрийте).

И докато сте там … уверете се, че всички приставки, които ще поддържате, са актуални!

7. Комбинирайте функционалността в по-малко плъгини

Трудност: Средно

Защо трябва да го правите?

Всеки плъгин добавя режийни (може да има свои собствени скриптове, стилове и т.н.), така че колкото по-малко сте пуснали на вашия сайт, толкова по-добре.

Как да го направя

Потърсете отделни приставки „jack of all trade“, които предоставят същата функционалност като множество самостоятелни приставки.

WP Rocket е пример за многофункционален плъгин.

8. Деактивирайте тежки, интензивни функции, плъгини или компоненти

Трудност: Средно (преценете сами: дали подобрението на UX влушава скоростта на страницата?)

Защо трябва да го правите?

Искате готин уебсайт. И разбира се, искате да предоставите страхотно изживяване на потребителите си.

Но всяка блестяща джаджа, всеки допълнителен скрипт ще добави към времето за зареждане.

И в много случаи по-малкото е повече.

Как да го направя

Прегледайте уебсайта си с критично око и отговорете на следните въпроси:

  • Наистина ли се нуждая от тази функция?
  • Какво ми струва по отношение на скоростта?
  • Има ли някакъв начин, по който може тя да „отпадне“, за да го направя по-бърз?
  • Какви ползи носи на собственикът или на потребителите на сайта?

Подрежете ненужните и скоростта на уебсайта Ви ще се подобри.

9. Деактивирайте емоджитата

Трудност: Средно (ако не използвате приставка, това ще включва редактиране на functions.php. Но скриптът е с копиране и поставяне)

Защо трябва да го правите?

WordPress има поддръжка за емотикони. Но тази поддръжка стига до 10KB заявка за файл на всяка страница.

И така, бихте ли могли вместо това да използвате прости символи?

¯\_(ツ)_/¯

Как да го направя

WP Rocket деактивира емотиконите по подразбиране.

Но ако искате да го направите ръчно, Вижте това ръководство от Kinsta който включва и скрипта за functions.php.

10. Оптимизиране на Disqus коментари

Трудност: Трудно (деактивирането на рекламни проследяващи устройства е лесно, но за мързеливо зареждане ще е необходимо да се бъркате в кода)

Защо трябва да го правите?

Скриптове на трети страни (като Disqus) добавят допълнителна тежест към вашия сайт. Така че в дългосрочен план може да искате да се върнете към системата за коментари на WordPress.

Но ако решите, че искате да се придържате към Disqus (има основателни причини за това), тогава има смисъл да го ускорите възможно най-много.

Как да го направя

Първо, трябва да деактивирате Ad Trackers. Те генерират десетки допълнителни скриптове за проследяване с тежки ресурси.

Отидете на Разширени настройки на вашата Disqus страница и се уверете, че следните две квадратчета са деактивирани:

optimize-disqus

Втората оптимизация е малко по-сложна.

Възможно е мързеливо зареждане на коментари на Diqus.

Но докато това е добре за скоростта на страниците, трябва да отбележим, че натоварените с lazy load коментари на Disqus може да не бъдат индексирани от Google. И това може да има отрицателно въздействие върху SEO.

Ако искате да го направите, прочетете това ръководство от w3bits.

11. Променете темата си на лека тема, създадена за скорост

Трудност: Средно към трудно (от толкова просто, колкото натискането на бутон, до сложен проект, изискващ пълна стратегия за миграция на уебсайтове)

Защо трябва да го правите?

Няма как да се измъкнем, някои теми на WordPress просто не са създадени за скорост.

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

Как да го направя

Ако темата ви не е много силно персонализирана, може просто да изберете по-бърза тема и да превключите.

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

И така, към коя тема трябва да преминете? Нашият съвет е да изберете тема, която е изградена с оглед на ефективността на уебсайта.

Препоръчваме теми като Astra или Generate Press.

wordpress-11-generatepress

И двете са проектирани да бъдат възможно най-леки и да се представят добре.

(*Съвет извън другите 39 съвета за оптимизиране и поддръжка на сайт): Ако сте собственик на онлайн магазин, внимателно проверете дали woocomerce е съвместим с темата, към която желаете да мигрирате.

12. Избягвайте да използвате конструктори на страници

Трудност: Средно (ако в момента имате много страници изградени с помощта на конструктор на страници, първо ще трябва да ги „размотаете“. Тоест да ги отделите от конструктора.)

Защо трябва да го правите?

Конструкторите на страници (като Elementor и Thrive Architect) улесняват създаването на персонализирани оформления.

wordpress-12-elementor

Но тези страхотни оформления са с висока цена на скоростта на зареждане, тъй като добавяте допълнителен слой – рамка отгоре на WordPress.

Как да го направя

Гутенберг беше чейнджър за игри за УордПрес. И ако сте го избягвали, сега е моментът да се сбогувате с класическия редактор и да го инсталирате.

Ще можете да създадете някои доста сложни оформления.

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

Крайни добавки за Гутенберг е безплатна приставка, която ще ви доближи да желания ефект.

Но в зависимост от конкретните оформления, от които се нуждаете, може да се наложи да изберете приставка за премиум блокове от сорта на Qubely.

13. Идентифицирайте бавните приставки с помощта на Query Monitor

Трудност: Средно (Мониторът на заявки е сравнително интуитивен, но може да е малко плашещ за обикновения потребител)

Защо трябва да го правите?

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

И така, как да идентифицирате виновника?

Как да го направя

Query Monitor е приставка, която ви позволява да отстранявате слабо изпълняващи се плъгини и заявки.

query-monitor

След като определите кои приставки оказват влияние върху ефективността на вашия сайт, остава само да прецените дали искате да ги премахнете, да ги замените или да предприемете стъпки за коригиране на тяхната ефективност.

Обобщение

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

Искрено се надяваме това ръководство от 39 съвета за оптимизиране и поддръжка на сайт да ви даде поне малка насока в правилната посока. А тя е подсилване на потребителското изживяване, скоростта и мобилната версия на Вашия проект.

Крайната ви цел е да накарате уебсайта си да се зареди за по-малко от 2 секунди. И като следвате съветите в това ръководство, заедно с тези, в които специално ще наблегнем върху Core Web Vitals, Вие ще бъдете спокойни и в крак с новите промени в Гугъл. Влияещи пряко върху позицията на Вашия уеб проект и съответно Вашия бизнес.

Последвайте Уеб Дизайн Тоневски ЕООД във Фейсбук, за да получавате първи най-новите статии, съвети и проучвания, които се публикуват в сайта.

Публикуваме ръководства и статии като 39 съвета за оптимизиране по 2 пъти в седмица.

Резултатът ще бъде по-щастливи потребители, по-щастлив Googlebot и повече трафик от търсене.

Ако имате въпроси, просто ни оставете коментар по-долу. Абонирайте се също за полезни SEO съвети, уроци и трикове.

Информацията в ръководството 39 съвета за оптимизиране е взаимствана и от чужди източници, които сме изброили директно под съветите.

Венци Тоневски / SEO експерт

Занимавам се с уеб дизайн и програмиране от 2006та година насам. Имам сертификати от единствените през онова време колежи и академии за уеб дизайн у нас. Вижте повече за мен от тук.

Разгледайте списък със СЕО услугите ми от тук

Разгледайте последно завършените сайтове от Уеб Дизайн Тоневски ЕООД от тук

Свържете се с мен чрез мейл формата от тук

Пишете ми във Фейсбук от тук

Следете страницата ми за нови статии, промоции и СЕО информация от тук

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

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

Call Now Button
Покажи
Скрий