Защо уебсайтът ви се зарежда бавно (и как да го поправите): 22 стъпки, които направих, за да получите 100% GTmetrix PageSpeed ​​Scores & Instant Load Times

Бавно зареждане на уебсайт


Имайте бавен уеб сайт за зареждане?

Ами ако ви кажа, че сайтът ми се зарежда <1 с 100% GTmetrix резултати? И че вече написах едно от най-популярните ръководства за скорост на WordPress онлайн с над 400 коментара?

Някои оптимизации са специфични за WordPress, други са универсални. Но всички те са най-добрата практика, дори ако използвате Squarespace, Shopify, Wix и други платформи за изграждане на уебсайтове.

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

Contents

1. Тествайте уебсайта си в GTmetrix

GTmetrix показва:

  • Време за зареждане (първичен показател)
  • Който снимки трябва да бъдат оптимизирани
  • Който плъгини се зареждат бавно (проверете раздела Водопад)
  • Вашият време за първи байт (показва скоростта на вашия хостинг)
  • Независимо дали си кеш приставка върши работа (препоръчвам WP Rocket)
  • Независимо дали използвате a мрежа за доставка на съдържание (Препоръчвам Cloudflare)
  • Бавно зареждане външни ресурси (Вграждания на AdSense, Maps, YouTube / Facebook)

Бързи корекции?
Хостингът е фактор №1 в официално ръководство за оптимизация на WordPress (далеч). Може да не подобри GTmetrix резултата, но може да подобри времето за зареждане с няколко секунди, особено ако преминавате от бавен хост (Bluehost, HostGator, GoDaddy) към бърз хост (SiteGround, Cloudways). Тези двама домакини бяха оценени най-високо в 40+ анкети във Facebook, които събрах от Facebook групи.

Приставките за кеш имат най-голямо влияние върху резултатите и също подобряват времената на зареждане. WP ракета е по-добър от W3 Total Cache или WP най-бързият кеш, тъй като има повече функции (като мързеливо зареждане, почистване на базата данни и оптимизация на Google Font + Analytics), докато другите приставки за кеш не.

Видео урок за WordPress Speed
Ако използвате WordPress, прекарах много часове, създавайки този 42-минутен видеоклип в ускоряване на WordPress сайтове. Можете да използвате времеви отметки в описанието на видеото, за да преминете към конкретни секции.

Доказателството е в пудинга:

2019-GTmetrix-Доклад

2. Преоразмерете големи изображения

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

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

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

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

Подаване на мащабирани изображения

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

  • Лого: 200 x 58px
  • Favicon: 16 x 16px
  • Плъзгачи: 1903 x 400px
  • Изображения на въртележка: 115px
  • Изображения на приспособления: 420 x 250 px
  • Препоръчани изображения: 250 x 250px
  • Изображения в блог с пълна ширина: 680px
  • Yoast Twitter OG Изображение: 1024 x 512px
  • Yoast Facebook OG Изображение: 1200 x 630px

Squarespace, Wix, и WordPress темите трябва да включват инструкции за промяна на размера на изображенията.

3. Компресиране на изображения

Това е какво оптимизирайте изображенията означава в GTmetrix.

Има много инструменти за това (използвам приставката ShortPixel WordPress). Бъди сигурен за Премахване EXIF данни за да се заредят изображенията още по-бързо, което може да се направи и в някои от инструментите по-долу.

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

Инструменти за компресиране на изображения

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

4. Добавете кеширане

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

Ако използвате WordPress, запитайте се:

  • Използвате ли приставка за кеш?
  • Коя приставка за кеш използваш?
  • Конфигурирали ли сте го на оптималните настройки?

Тези 3 фактора ще имат най-голямо въздействие върху вашите резултати в GTmetrix, Google PageSpeed ​​Insights и почти всички инструменти за тестване на скоростта. Кеширането и хостингът са супер важни!

Коя приставка за кеш е най-добра?
препоръчвам WP ракета което е премиум кеш приставка. Той се предлага с много функции, които други приставки за кеш не правят (почистване на базата данни, контрол на сърдечната дейност, мързеливо зареждане, оптимизация на Google Fonts + Analytics, интеграция на CDN). Ако искате да използвате тези функции с други приставки за кеш, ще трябва да инсталирате около 6 допълнителни приставки, за да се грижите за тези оптимизации, докато WP Rocket има всичко вградено. Най-близкият плъгин за безплатен кеш, който прави това, е Swift.

WP Rocket също беше оценена №1 в множество анкети във Facebook:

2016 най-добрата анкета за приставки за кеш

Анкета за приставки за кеш 2019

Swift срещу WP Rocket

Анкета за приставки за кеш 2016

Анкета за най-добри кешови приставки 2018

wp ракета срещу w3 totla кеш

5. Надстройка до PHP 7.3

Това важи само ако сте закупили хостинг (напр. SiteGround, Bluehost, GoDaddy).

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

WordPress PHP бенчмарки

Етап 1: Влезте в хостинг акаунта си и намерете мениджъра на версии на PHP (или подобен).

Стъпка 2: Надстройка до най-високата версия на PHP, налична във вашия хостинг акаунт (напр. PHP 7.3).

Стъпка 3: Тествайте уебсайта си за грешки. Ако виждате такива, вероятно това се дължи на несъвместими плъгини за WordPress, в който случай можете да използвате PHP Съвместим Проверка. Този инструмент ще ви покаже несъвместими плъгини; трябва или да ги изтриете, или да се върнете към по-ранна версия на PHP.

Стъпка 4: Поддържайте актуалната версия на PHP. Ако хостът ви пусне нова стабилна версия на PHP, използвайте го.

6. Проверете времената за реакция на сървъра

Google PageSpeed ​​Insights ви казва, ако имате бавен времена за отговор на сървъра (Google препоръчва тя да е под 200 мс). Сървърите очевидно се контролират от вашия хостинг.

Намалете времето за реакция на сървъра

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

  • Вземете по-добър хостинг (напр. Cloudways или SiteGround)
  • Стой далеч от EIG домакини които са позорно бавни
  • Уверете се, че имате активиран кеш на вашия уебсайт
  • Използвайте мрежа за доставяне на съдържание като CDN на Cloudflare
  • Елиминирайте всички тежки и неизползвани приставки на вашия уебсайт
  • Използвайте първокласен доставчик на DNS (получете това чрез вашия хост)

7. Изберете Правилния хостинг

Хостингът е фактор №1 на скоростта на уебсайта досега:

Много уроци ще се опитат да ви насочат към Bluehost, HostGator, GoDaddy и Марки EIG.

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

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

SiteGround и Cloudways обикновено са №1 и №2 в 40+ анкети във Facebook. SiteGround е подходящ за споделен хостинг, а Cloudways за облачен хостинг. И двамата домакини предлагат безплатни миграции на уебсайтове.

Юли 2019 г. Хостинг Препоръка

Препоръки за хостинг на Elementor

2017-WordPress-хостинг-FB-Poll

Анкета за хостинг препоръки

WordPress-домакин-Poll-Aug-2018

Споделено-хостинг-анкета на 2017 г.

2019-хостинг-Poll

Go-To-хостинг-компания

WordPress-хостинг-анкета на 2017 г.

2018 хостинг препоръки

Любим хостинг за Elementor

2016-WordPress-хостинг-FB-Poll

WordPress хостинг анкета

WordPress хостинг анкета септ 2018.png

Сайтът се поддържа-WordPress-хостинг-анкета на 2017 г.

2019-домакин-Poll-1

Хостинг-Анкета-за-Speed

WordPress-хостинг-Анкета на юни-1

Мигрирането към по-бърз хостинг прави голяма промяна:

Преминаване към SiteGround

Миграция на времето за зареждане на SiteGround

Bluehost към SiteGround GTmetrix

HostGator към SiteGround

SiteGround Google PageSpeed ​​Статистика на Google

SiteGround GoGeek Време за зареждане

Намалено време за натоварване с SiteGround

Нови времена за реакция на SiteGround

Време за реакция в облаци

HostGator към SiteGround миграция

Време за реакция на SiteGround на Joomla

Превключва към хостинг на сайта

SiteGround Rocket Представете комбо

SiteGround PageSpeed ​​Insights

SiteGround Blogging Миграция

Ново време за реакция на SiteGround

Подобряване на времето за реакция на SiteGround

неозаглавен

8. Добавете CDN на Cloudflare

А CDN (мрежа за доставка на съдържание) означава, че уебсайтът ви се хоства в множество центрове за данни по целия свят. Това намалява географско разстояние между вашия сървър и посетител, докато разтоварвате ресурси към тези центрове за данни (облекчаване на натоварването на вашия собствен сървър). Можете дори да използвате множество CDN като StackPath или KeyCDN което добавя още повече центрове за данни.

CDN-WordPress-Препоръка

Cloudflare е безплатна и има 200+ центрове за данни което е много над повечето премия CDN.

Етап 1: Проверете дали хостът ви позволява да активирате Cloudflare в профила си. Ако го направят, активирайте Cloudflare, тогава сте готови. Ако не го направят, ще трябва да промените сървърите на имена, като започнете от стъпка 2.

Стъпка 2: Регистрирайте се за Cloudflare, изберете безплатния план, добавете уебсайта си и след това оставете Cloudflare да стартира сканирането им. Cloudflare ще ви преведе през набор от страници, докато не ви присвоят 2 сървъра на имена.

Стъпка 3: Влезте в регистратора на вашия домейн и намерете опцията да зададете персонализирани сървъри на имена (Google „персонализирани именни сървъри в хостинг компания XYZ)“. Заменете тези сървъри на имена с Cloudflare.

9. Деактивирайте горещата връзка

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

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

Защита от гореща връзка от Cloudflare

10. Минимизирайте файловете

GTmetrix ви казва да минимирате HTML, CSS и JavaScript файлове.

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

11. Комбинирайте файлове

Ако имате множество CSS или JavaScript файлове, опитайте да ги комбинирате в 1 един файл.

Колкото по-малко CSS и JavaScript файлове имате, толкова по-малко заявки ще бъдат заредени на вашия уебсайт.

Етап 1: Намерете вашите CSS (или JavaScript файлове).

Стъпка 2: Копирайте / поставете съдържанието, така че да са всички в един файл.

Или повечето кеш приставки имат опция за комбиниране на CSS + JavaScript:

Съкратете комбинирайте JavaScript файлове

12. Избягвайте тежки добавки

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

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

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

Бонус: Селективно деактивиране на приставки
Използвайте плъгин като Мениджър на активи за селективно деактивиране на плъгините да се пускат на определени страници. Например, ако използвате само формата си за контакт на страницата с контакти, деактивирайте я навсякъде другаде.

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

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

Можете да почистите вашата база данни с помощта на безплатния WP-оптимизиране на плъгин, или използвайте WP Rocket:

WP-оптимизиране на чиста база данни

14. Оптимизиране на външните ресурси

Външни ресурси са нещо от вградените видеоклипове в YouTube до шрифтове в Google, Google Analytics, Gravatars и всичко, което изисква изтегляне на информация от външен уебсайт. Те могат да унищожат отчета ви за GTmetrix, особено Google AdSense, тъй като той се показва на всяка страница.

Съвети за оптимизиране на външни ресурси

15. Комбинирайте Google Шрифтове

Използвате ли шрифтове на Google, шрифтове Awesome или други външни шрифтове?

Те вероятно ще причинят допълнителни заявки в GTmetrix, тъй като те са външен ресурс.

Google-Fonts-GTmetrix

Съвети за оптимизиране на Google Шрифтове

  • Домакирайте Google Шрифтове локално
  • Изберете само шрифтове / тегла, от които се нуждаете
  • Комбинирайте множество файлове с шрифт в 1 файл (ръчно или чрез WP Rocket или Autoptimize)

16. Мързеливо зареждане на изображения + видеоклипове

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

Вградените видеоклипове могат да бъдат един от най-тежките елементи на страницата – мързеливо зареждане на 2 видеоклипа (и заместване на рамката с изображение с преглед) обръсна огромни 4 секунди от един от моите публикации.

За WordPress можете да използвате WP Rocket, WP YouTube Lyte или плъгинът Lazy Load.

За Squarespace опитайте това Функция за мързеливо зареждане.

WP-ракета-Lazy-Load

17. Избягвайте рекламите

Google AdSense е известен с това, че кара уебсайтовете да се зареждат бавно и дори не е толкова изгодно. Можете да опитате Рекламен баланс и Ракетен товарач, но ще имате много грешки в отчета си за GTmetrix, независимо и ще е по-добре да печелите от партньорски маркетинг. Забравете AdSense – най-успешните хора, които печелят $ 50 000 +, използват партньорски връзки, които не забавят вашия сайт.

GTmetrix-Реклами

18. Помислете за AMP

AMP (ускорени мобилни страници) правят мобилните ви страници да се зареждат по-бързо, докато ви дават AMP печат в резултатите от мобилното търсене. Проблемът е, че това променя дизайна на вашите мобилни страници. Можете да използвате AMP за WP плъгин да ги персонализирате, но просто не е същото. Реализациите на Kinsta спаднаха 58% при добавяне на AMP, така че всъщност реших да ги деактивирам в моя собствен сайт. Но си струва да се обмисли Ето го AMP урок за Squarespace ако използвате това.

19. Намерете бавни страници в Google Analytics

Можете да намерите най-бавните си страници за зареждане в Google Analytics при Поведение → Скорост на сайта → Предложения за скорост.

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

Speed-Предложения-който използвате Google Анализ

20. Оптимизации за специфични за WordPress

Вече обхванах доста специфични за WordPress оптимизации, но ето още няколко.

  • Използвайте приставка с кеш с най-висок рейтинг като WP Rocket
  • Използвайте добър плъгин за оптимизиране на изображението като ShortPixel
  • Използвайте приставката Heartbeat Control, за да деактивирате API на Heartbeat
  • Изтрийте всички приставки, които не използвате, и използвайте леки приставки
  • Почиствайте често своята база данни, използвайки WP-Optimize или WP Rocket
  • Кеширайте Gravatars с помощта на плъгин като Harrys Gravatar Cache, FV или Optimum
  • Използвайте Asset Manager, за да забраните избирателно плъгините за зареждане на определени страници
  • Хоствайте Google Analytics локално, използвайки приставка като WP Rocket или CAOS Analytics
  • Хоствайте Google Шрифтове локално, използвайки плъгин като OMGF или Самостоятелно хоствани Google Шрифтове

21. WooCommerce Optimizations

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

Фрагменти на количката на WooCommerce

Деактивирайте фрагментите на количката – фрагментите на количката актуализират елементите и общия брой в количката, но те могат да отнемат от 1 секунда до толкова, колкото 10 секунди, за да се заредят. Най-добрият ви залог е да деактивирайте фрагменти от кошницата на началната страница + публикации, тъй като там не се използват Следвайте този урок.

Деактивирайте скриптове за WooCommerce – WooCommerce може също да зареди около 8 различни скрипта на вашия уебсайт. За да ги деактивирате, вземете това код от Github и го добавете към файла function.php.

Деактивирайте стилове на WooCommerce – WooCommerce също има стилове, които се зареждат на всяка една страница. Ето едно ръководство за деактивирането им.

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

Изчистване на клиентските сесии – ако вашият сайт WooCommerce е бавен, опитайте да изчистите клиентските сесии.

Увеличете лимита на паметта до 256MB – WooCommerce изисква да увеличите ограничението на паметта си до 256MB, но наистина трябва да направите това за повечето уебсайтове. Ето а настойнически за това.

22. Наемете някой, който знае какво правят

Нуждаете се от помощ за коригиране на вашия уеб сайт с бавно зареждане?

Работя с няколко разработчици, които са специализирани в оптимизацията на скоростта на WordPress. Можете да разгледате портфолиото им на тази страница и аз ги кредитирам да получат моите резултати от GTmetrix до 100%. Коул управлява всички проекти за оптимизиране на скоростта, можете да се свържете с него на [email protected]

23. Често задавани въпроси

&# X1f680; Какви фактори оказват най-голямо влияние върху времето за натоварване?

Изборът на правилния хостинг, плъгини и кеш плъгин може да окаже най-голямо влияние върху времето за зареждане. Оптимизирането на изображения и избягването на външни ресурси като Google AdSense също са много важни. Използването на безплатна мрежа за доставка на съдържание като Cloudflare също ще помогне.

&# X1f680; Кой инструмент е най-подходящ за тестване на скоростта?

GTmetrix има най-стабилните препоръки от всички инструменти за тестване на скоростта. Google PageSpeed ​​Insights е полезен преди всичко за едно нещо – измерване на времето за реакция на сървъра.

&# X1f680; Как мога да разбера какво забавя моя уебсайт?

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

&# X1f680; Какви са някои по-малко известни съвети за скорост?

Много хора не надграждат своята PHP версия или оптимизират външни ресурси като Google Fonts и YouTube видеоклипове. Мързеливо зареждане на изображения и видеоклипове и хостинг на Google Шрифтове и Google Analytics локално може да поправи много елементи в GTmetrix. Трябва също да се присъедините към Facebook групи, за да получите безпристрастни мнения за най-добрите хостинг доставчици, за да избегнете партньорски капани.

&# X1f680; Кой хостинг е най-добър?

SiteGround и Cloudways са 2 солидни хостинг доставчици, които бяха оценени високо в анкетите във Facebook. SiteGround е един от най-популярните споделени хостове и Cloudways за облачен хостинг. Обикновено това са топ 2 в класа си.

&# X1f680; Коя приставка за кеш е най-добра?

WP Rocket беше оценена като кешинг плъгин №1 в множество анкети във Facebook, тъй като се предлага с много функции за оптимизация на скоростта, повечето кеш приставки не (мързеливо зареждане, почистване на база данни, хостинг на Google Fonts и Google Analytics на местно ниво). Трябва да получите оптимални резултати с WP Rocket, в противен случай Swift Performance е добра алтернатива за безплатни плъгини.

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

Наздраве,
мъжко животно

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map