Как да направите по-малко HTTP заявки в WordPress & GTmetrix YSlow

Трябва да направите по-малко HTTP заявки на вашия WordPress сайт?


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

Направете по-малко HTTP заявки

Комбинирането на CSS и JavaScript файлове може да помогне, но има и други оптимизации, които могат да намалят HTTP заявките, като избирателно деактивиране на приставки, които не е необходимо да се зареждат на конкретни страници, деактивиране на скриптове и стилове на WooCommerce на страници, които не са електронна търговия или избягване на висок процесор приставки, които генерират голям брой заявки и забавят вашия сайт.

Извършване на по-малко HTTP заявки е препоръка в GTmetrix, Pingdom и други инструменти за тестване на скоростта. Препоръките по-долу ще ви помогнат да намалите заявките и да направите вашия сайт по-бърз.

Contents

1. Комбинирайте CSS таблици за стилове + JavaScript

Комбиниране на CSS стилеви таблици + JavaScript означава, че трябва да копирате / поставите всичко във вашите CSS файлове в 1 един файл. Това позволява на браузърите да отправят 1 единична заявка за CSS файл вместо няколко заявки. Повечето приставки за кеш имат опция за комбиниране на вашите CSS + JavaScript файлове.

Етап 1: В настройките на приставката ви за кеш намерете опцията за комбиниране и минимизиране на CSS + JavaScript.

Стъпка 2: Активирайте всяка настройка една по една и тествайте резултатите в GTmetrix.

Минимизирайте комбинирането на CSS файлове

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

Стъпка 3: Проверете за видими грешки на вашия уебсайт. Ако видите грешки, прегледайте изходния код, намерете проблемните файлове и ги изключете от вашите настройки за минимизиране на CSS или JavaScript. Например, ако плъзгачът ви изчезне при активиране на определена настройка, проверете вашите плъзгачи в изходния код и изключете проблемния файл. Ако не виждате грешки, няма нужда от това.

Освен това можете ръчно да комбинирате CSS файловете си в WordPress под Appearance > Тема редактор. Просто бихте копирали и поставили съдържанието във всички файлове в 1 един CSS файл.

WordPress CSS файлове

2. Селективно деактивиране на приставки

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

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

Чрез деактивиране на приставки на страници, където не е необходимо да се зареждат, това води до по-малко HTTP заявки. Това не е ограничено до приставки; скриптове и стилове също могат да бъдат деактивирани на определени страници (напр. скриптове на WooCommerce, стилове, фрагменти от колички могат да бъдат деактивирани на страници, които не са електронна търговия).

Етап 1: Инсталирайте активацията CleanUp или Perfmatters (и двете ви позволяват избирателно да деактивирате плъгини).

Стъпка 2: Редактирайте страница или публикация, превъртете надолу до секцията за изчистване на активите и прегледайте кои CSS + JavaScript файлове се зареждат на страницата. Те могат да бъдат от плъгини, теми или външни скриптове.

Деактивирайте WordPress външни скриптове

Стъпка 3: Деактивирайте всички приставки и заявки, които не са ви необходими на тази страница. Можете да ги деактивирате на 1 една страница в целия ви сайт, по вид публикация или да използвате RegEx (редовни изрази), за да ги деактивирате по конкретни модели на URL адреси. регулярен израз се включва само с Perfmatters или Asset CleanUp Pro.

3. Деактивирайте скриптове, стилове, фрагменти от количката на WooCommerce

Сайтовете на WooCommerce естествено генерират повече HTTP заявки.

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

Използвайки Asset CleanUp или Perfmatters, деактивирайте тези на страници, където не е необходимо да се зареждат:

Актив на CleanUp WooCommerce

Освен това Perfmatters ви позволява да ги деактивирате с едно кликване:

perfmatters оптимизация на woocommerce

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

Високите CPU приставки могат да генерират множество HTTP заявки.

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

Етап 1: Проверете за бавни приставки в GTmetrix водопад или Монитор на заявките.

Бавно WordPress Plug-in-

Стъпка 2: Избягвайте известни плъгини с висок процесор.

  1. Добави Това
  2. Мониторинг на измами с кликване в AdSense
  3. Календар на събитията „Всичко в едно“
  4. Резервен приятел
  5. Beaver Builder
  6. По-добри WordPress Google XML Sitemaps
  7. Проверка на прекъсната връзка (използвайте Dr. Link Check)
  8. Постоянен контакт за WordPress
  9. Форма за контакт 7
  10. Вижте всички 65 бавни приставки

Стъпка 3: Заменете бавните приставки с по-бързи и леки приставки. Изискват се изследвания и тестване.

5. Заменете приставки с код

Можете да избегнете много плъгини, като ги замените с код.

Примери:

  • Google Fonts: хоствайте шрифтовете си локално
  • Проследяващ код на Google Analytics: поставете ръчно
  • Съдържание: проектирайте го ръчно в HTML + CSS
  • Вградени туитове или Google Maps: вместо това направете екранна снимка
  • Вградена джаджа във Facebook: заменете с действителната джаджа във Facebook

Консолидиране на приставки също помага. Един класически пример е използването на WP Rocket, която се предлага с хостинг шрифтове, анализи и Facebook Pixel локално, мързеливо зареждане на изображения + видеоклипове, почистване на базата данни, предварително зареждане, контрол на сърдечната дейност и интегриране както на Cloudflare, така и на множество CDN. С други приставки за кеш (тъй като повечето от тях нямат тези функции), трябва да инсталирате 6-7 допълнителни приставки, за да получите тези оптимизации на скоростта, когато са вградени в WP Rocket.

6. Елиминирайте външните скриптове

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

Google Шрифтове могат да се комбинират в 1 файл. Видеоклиповете могат да бъдат мързеливи и iframe да се замени с изображение за визуализация. Много скриптове могат да бъдат оптимизирани, други не могат. По-долу са дадени няколко примера.

  • Google Шрифтове: комбинирайте шрифтове и ги хоствайте локално, използвайки плъгини като WP Rocket, Автоматично оптимизиране, OMGF, Самостоятелно хоствани Google шрифтове и Asset CleanUp.
  • Google Analytics: код за проследяване на хост локално в WP Rocket / CAOS Analytics.
  • Google AdSense: заредете асинхронно и опитайте Cloudflare Rocket Loader.
  • Google Maps: направете снимка на Google Map и включете линк към упътвания за шофиране, когато хората кликнат върху изображението (това изглежда също толкова добре, колкото и картата)!
  • Google Мениджър на маркери: обикновено прави повече вреда, отколкото полза, когато се опитвате да комбинирате множество скриптове. Трябва да се използва само за големи неоптимизирани сайтове.
  • Вградени видеоклипове: използвайте WP Rocket или WP YouTube Lyte, за да мързеливо зареждате видеоклипове и замествайте iframe с изображение за преглед (видеоклиповете са много тежък елемент).
  • Вградени джаджи + публикации: вземете скрийншоти, вместо да ги вграждате.
  • Facebook Pixel: WP Rocket може да добави кеширане на браузъра към Facebook Pixel.
  • Gravatars: нищо не ми подейства освен деактивирането на Gravatars (WP Rocket също не ги използва в блога си). Но можете да опитате Harrys, FV или Optimum Gravatar Cache или да опитате да разбиете или скриете разширяеми коментари.
  • Приставки за социално споделяне: позорно генерира заявки от Facebook, Twitter и социални мрежи, за да се освежи като брой. Опитайте по-бърз плъгин като Социален мопс, Mashsharer, Social SnapAddToAny, WP Социално споделяне, или Лесен социален дял

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

Google Шрифтове могат да се комбинират за генериране на 1 заявка вместо няколко заявки.

Google-Fonts-GTmetrix

Следните приставки имат опции за оптимизиране на Google Fonts:

  • WP ракета
  • Активиране на актива
  • Autoptimize
  • OMGF

Най-добрият метод обаче е да хоствате локално Google Fonts. Това включва изтегляне на вашите шрифтове директно от уебсайта на Google Fonts, като същевременно е минимално с броя на шрифтовете и теглото на шрифта. След това използвайте инструмент като Transfonter или да конвертирате шрифтовете в уеб файлове с шрифтове. След това ще качите новите файлове с уеб шрифт в папката си wp-content / uploads, ще добавите персонализиран шрифт към CSS и ще тествате шрифта, за да се уверите, че работи. Отново вижте тази връзка за пълен урок.

Transfonter-Google-Font-преобразуване

7. Минимизирайте HTML, CSS, JavaScript

Минимирането на файловете обикновено се извършва от приставката ви за кеш (вижте стъпка 1).

Но понякога това може да наруши вашия уебсайт. В този случай ще трябва да тествате всяка настройка една по една, да проверявате за проблемни файлове в изходния код, след което да изключвате тези файлове от минимизиране с помощта на приставката си за кеш. Ако не виждате видими грешки, не е необходимо да правите това.

8. Оптимизирайте доставката на CSS

Това трябва да оправи ресурси, блокиращи визуализацията елемент в PageSpeed ​​Insights.

WP Rocket, Autoptimize и други подобни приставки трябва да имат опция за оптимизиране на доставката на CSS. Просто влезте в настройките си и се уверете, че сте активирали това и трябва да го поправите.

Оптимизирайте доставката на CSS

9. Отложете / Заредете комбинирани JavaScript файлове асинхронно

Асинхронен JavaScript означава, че файловете се зареждат след страницата завършва с изтегляне.

Това може да стане с помощта на WP Rocket или Async JavaScript и трябва да поправи премахнете блокирането на визуализация на елемента Javascript. Async JavaScript ви дава пълен контрол към кои скриптове да добавите асинхрон „async“ или „defer“, докато WP Rocket отлага JavaScript автоматично с 1 щракване.

JavaScript файлове

10. Мързеливо зареждане на видеоклипове

Вградените видеоклипове са външни ресурси, които генерират HTTP заявки.

Те могат да отнемат 2+ секунди за зареждане! Въпреки че не можете да ги премахнете напълно, можете забавете зареждането на видеоклипове докато потребителите превъртете надолу (мързелив товар) и щракнете върху бутона за възпроизвеждане (леко вграждане).

Тук имате няколко опции: можете да използвате WP Rocket, за да активирате мързеливо зареждане и да замените iframe на YouTube с изображението за визуализация. Но ако нямате WP Rocket, можете или да опитате WP YouTube Lyte плъгин или следвайте това урок за леки вграждания в YouTube. И двете работят добре.

Ето един пример (и страхотно видео на WordPress Speed):

11. Добавете CDN

CDN могат да ви помогнат да направите по-малко HTTP заявки.

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

Множество CDN = повече центрове за данни = по-бърза доставка на съдържание и повече разтоварване на ресурси. Много хора започват с Cloudflare, след което в крайна сметка се вглеждат в StackPath, когато използват множество CDN (в момента използвам и двете). KeyCDN също е добър. Това се нарича „верига“ от CDN.

Настройка на няколко CDN
С Cloudflare ви присвояват 2 имена, които променяте в регистъра си на домейни. С други CDN като StackPath и KeyCDN, те ви присвояват CDN URL, който ще поставите в полето за CDN URL в приставката за кеш (повечето от тях го имат) или използвате CDN Enabler.

Множество CDN

12. Минимизиране на пренасочванията

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

Ще трябва да разгледате отчета си GTmetrix, за да видите какво причинява тази грешка. Генерира ли се от външен скрипт или плъгин на вашия сайт? Опитвали ли сте да оптимизирате този скрипт или търсите по-лек плъгин? Дали защото сте променили версията на вашия домейн на не-WWW или HTTPS, но не сте актуализирали всички връзки / изображения на вашия сайт, за да отразявате новата версия?

Минимизиране на грешките при пренасочване

Чести причини

  • Лоши плъгини
  • Външни скриптове
  • Променено на WWW срещу Non-WWW, но не са актуализирани връзки
  • Променен на HTTPS спрямо non-HTTPS, но не са актуализирани връзки

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

За да намалите HTTP заявките, причинени от изображения, има 3 основни начина за оптимизиране на изображенията:

Подаване на мащабирани изображения: преоразмерявате големи изображения, за да са по-малки. GTmetrix ви казва кои изображения са твърде големи и правилните размери, които трябва да бъдат изрязани / оразмерени. Опитайте да създадете матрица за измерение на изображението, като измерите размерите на вашите плъзгачи, изображения в блога с пълна ширина, джаджи и други области на вашия уебсайт. След това се уверете, че преоразмерите изображенията до тези правилни размери, преди да качите. Ако направите това, никога не би трябвало да имате грешки в изображението.

Оптимизиране на изображенията (без загуба на компресия): използвайте приставка като ShortPixel (препоръчително), Smush или Imagify, за да компресирате изображения. Въпреки че тези приставки казват загуба, понякога може да забележите малка загуба на качество. Ето защо е най-добре да архивирате вашите изображения и да тествате няколко от тях, преди групово да оптимизирате всички изображения на уебсайта си, за да сте сигурни, че сте доволни от качеството.

Укажете Размери на изображението: добавете ширина + височина към HTML или CSS на изображението. Това се прави автоматично във Visual Editor, но не и персонализиран HTML, някои създатели на страници и евентуално други области на вашия WordPress сайт. GTmetrix ще ви покаже кои изображения имат тези грешки и ще ви предостави правилните им размери. За да коригирате грешката, ще трябва да намерите изображението в таблото за управление на WordPress, да редактирате HTML или CSS, след което да добавите ширина + височина.

Все още трябва да направите по-малко HTTP заявки?

Ако все пак се нуждаете от помощ, оставете ми коментар. Най- WordPress Speed ​​Up Facebook Group също е полезно или можете да ни наемете за услуги за скорост на WordPress с преди + след отчетите на GTmetrix.

WordPress Speed ​​Up Facebook Group

често задавани въпроси

&# X1f680; Какво причинява HTTP заявки?

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

&# X1f680; Кои са 5 неща, за да намалите HTTP заявките?

5 лесни неща, които можете да направите, са да комбинирате CSS + JavaScript файлове, мързеливи зареждащи изображения и видеоклипове, избягвайте нашия списък с високи CPU приставки, избирателно деактивирайте приставки от определени страници / публикации с Perfmatters или Asset CleanUp и оптимизирайте шрифтовете си..

&# X1f680; Дали приставката за кеш ще помогне за намаляване на HTTP заявките?

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

&# X1f680; Поправянето на други елементи на GTmetrix ще намали HTTP заявките?

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

&# X1f680; Кой пристав за кеш най-много намалява HTTP заявките и как да го конфигурирате?

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

Благодаря за четенето :)

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

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