Оптимизация на скоростта на уебсайтове: Как да го направите през 2020 г. # Стъпка по стъпка

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


В допълнение на SEO ползи от оптимизацията на скоростта, Времето за зареждане на страницата е важно за определяне колко потребители остават на вашия уебсайт. HubSpot съобщава това спад в реализацията е свързан с увеличаване на пъти за зареждане на страницата – едно секундно забавяне на времето за зареждане може да доведе до намаляване на конверсията с ~ 20-30%!

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

През последните няколко години се наблюдава увеличение на средния размер на страницата. Всъщност през 2018г, средно размерът на страницата е над 2 MB! Значителна част от зареждането на тази страница се състои от изображения, статични файлове и видеоклипове.

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

Contents

Оптимизация на скоростта на уебсайта: Какво ви трябва, преди да започнем

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

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

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

Започнете с оптимизация на скоростта на уебсайта

Анатомия на уеб страница

анатомия

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

  • HTML кодът, който дава структура и съдържание на уеб страница – дори и когато WordPress управлява партито на вашия сайт, всичко, което прави, е да вземе това, което е в базата данни – цялото съдържание – и да го преобразува в статичен HTML изход
  • Статични файлове, които помагат в дизайна, функционалността и интерактивността (CSS, JavaScript)
  • Изображения за фонове, лога и съдържание

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

Разберете къде се намирате: инструменти за оптимизиране на скоростта на уебсайта

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

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

Тест за скорост на PingdomИнструменти за Pingdom за тестове за скорост

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

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

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

Стъпка 1: Оптимизиране на статични файлове

Първата стъпка от това ръководство се фокусира върху оптимизирането на статични файлове – най-често под формата на таблици стилове (CSS файлове) и скриптове (JS файлове).

(a) Преместете CSS на главата, JS надолу

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

  • Като цяло таблиците със стилове са с по-малък размер от скриптовете
  • След като таблиците стилове се заредят в маркера, преди браузърът да представи тялото на страницата, всички елементи, които се изобразяват в страницата, ще имат правилна стилизация
  • Функционалността на скриптите обикновено се играе, след като съдържанието на страницата е заредено, така че скриптите обикновено могат да бъдат поставени в долната част

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

За да обработите бързо частта от скриптове, можете да инсталирате приставката Scripts to Footer за WordPress. Работи на автопилот и върши добре работата.


Сценарии до футера Сценарии до футера

Автор (и): Джошуа Дейвид Нелсън

Текуща версия: 0.6.4.1

Последна актуализация: 15 април 2020 г.

scripts-to-footerphp.0.6.4.1.zip


94% Ratings


20000 + инсталирания


3.1.0Requires

(b) Настройка на минификация

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

  • бели пространства за отстъп
  • коментари
  • дълги имена на функции и променливи
  • неизползван код

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

в) Използвайте асинхронно зареждане

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

Ето го списък с плъгини, които ви помагат при асинхронно зареждане в WordPress.

(d) Използвайте GZIP компресия

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

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

GZip компресията е част от няколко WordPress кеширащи приставки като WP Fastest Cache.

(д) Използвайте Google CDN за популярни библиотеки

Крайната техника за оптимизация в тази стъпка е да използвате или Google, или Microsoft CDN, когато извличате общи библиотеки, които се използват на вашия сайт. Причината за това е проста – поради популярността на тези CDN-та е вероятно посетител да има вече кеширана версия на ресурса в браузъра си.

Стъпка 2: Оптимизиране на изображения

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

Дори погледнете собствените номера на CodeinWP:

зареждане на изображението

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

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

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

(a) Качете изображения с подходящ размер

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

Защо два пъти? Това също ще позволи на темата да показва версии с качество на ретината на изображенията.

(b) Използвайте правилния тип изображение

Двата най-често използвани вида изображения в мрежата са JPG и PNG.

Не си приличат.

  • JPG изображенията са предназначени за снимки и други сложни изображения с много цветна информация в тях
  • PNG изображенията са идеални за графики, които имат малко цветова информация, като екранни снимки на интерфейса.

Пример за PNG изображениетеми

(в) Оптимизирайте изображенията локално преди качването

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

  • За уеб решение опитайте TinyPNG
  • За десктоп опитайте ImageOptim

tinypng
imageoptim

(г) Мързеливо заредете вашите изображения

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

lazyload демонстрацияДемонстрация на мързеливо зареждане на CodeinWP

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

(д) Вземете плъгин за оптимизиране на изображението

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

Тук са Сравнени 6 от най-добрите плъгини за оптимизиране на изображения.

Ако имате нужда от бърза препоръка, разгледайте нашата собствена Optimole. Той осигурява високоефективно компресиране на изображението, в допълнение към CDN в безплатния план! Optimole също така дава някои звездни резултати, когато се поставя срещу основните си конкуренти:

Резултати за оптимизация на PNG

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88,7%Загуба и без загуба
Imagify301 KB67 KB77,7%със загуби
TinyPNG301 KB79,7 KB73,5%със загуби
ShortPixel301 KB90,4 KB69,96%със загуби
Smush301 KB247 KB17,9%Lossless
EWWW301 KB257,4 KB14,6%Lossless

Резултати за оптимизация на JPG

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%със загуби
TinyPNG518 KB248,6 KB52%със загуби
Optimole518 KB274 KB47%Загуба и без загуба
Imagify518 KB338,7 KB34,64%със загуби
EWWW518 KB488,9 KB5,7%Lossless
Smush518 KB493 KB4,9%Lossless


Оптимизация на изображения и мързеливо зареждане от Optimole Оптимизация на изображения & Мързеливо натоварване от Optimole

Автор (и): Optimole

Текуща версия: 2.3.1

Последна актуализация: 21 април 2020 г.

optimole-wp.zip


96% Оценки


50000 + инсталирания


WP 4.7 + Изисква

Стъпка 3: Оптимизиране на HTTP заявки

По-рано в публикацията обсъждахме, че когато потребителски браузър започне да зарежда уеб страница, реалните трансфери се извършват чрез индивидуални HTTP заявки. Една заявка извлича всеки ресурс. Следователно, увеличаването на броя на тези заявки увеличава времето за зареждане на вашата уеб страница.

заявки от сайтаHTTP заявки на уеб страница

(а) Комбинирайте файлове

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

Отново тези мини плъгини за WordPress може да ви помогне да направите това.

(б) Минимизиране на DNS търсене

Когато е направена HTTP заявка към домейн като www.codeinwp.com, се извършва търсене на DNS (система от имена на домейни), за да се намери IP адресът на сървъра. Следователно, целта ви също трябва да бъде да намалите броя DNS търсене във всички заявки, за да ускорите зареждането на уебсайтове.

Ето а готин наръчник от Kinsta как да направите това.

(в) Активирайте поддържането на живи

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

Можете да активирате поддържането на живота по следните начини:

(d) Минимизиране на пренасочванията

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

д) Използвайте CDN

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

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

Имаме отделен ресурс, сравняващ най-добрите CDN решения за WordPress сайтове, заедно с информация за това как да се гледате.

Стъпка 4: Кеширане

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

Кеширането се отнася до феномен на съхраняване на ресурс във временно хранилище, за да го извлечете бързо, когато се налага. Има различни форми на кеширане:

  • Кеширане на страници: статична HTML версия на страница, съхранявана на сървъра
  • Кеширане на база данни: Резултатите от общи заявки към база данни (като топ 10 публикации на вашия сайт), съхранявани на сървъра
  • Кеширане на браузъра: Съхраняване на части от страницата ви в браузъра

В тази публикация сравнихме най-популярните приставки за кеширане на WordPress. TL; DR: Отиди да провериш WP ракета ако търсите цялостно решение. Ако предпочитате нещо безплатно, ето ръководство за това как да конфигурирате W3 Total Cache.

Стъпка 5: Оптимизиране за мобилни устройства

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

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

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

В допълнение към тези фактори AMP (Ускорени мобилни страници) е проект, който цели създаването на бързо и последователно съдържание на устройства.

Ето ръководство за започване на работа с AMP в WordPress.


AMP

Автор (и): Сътрудници на проекта за AMP


74% Ratings


500 000 + инсталирания


WP 4.9 + Изисква

Повече информация

amp.1.5.3.zip

Текуща версия: 1.5.3

Последна актуализация: 15 април 2020 г.


74% Ratings


500 000 + инсталирания


WP 4.9 + Изисква

Страница на приставката за WordPress.org


AMP

заключение

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

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

  • Стъпка 1 обхвана оптимизацията на статични файлове под формата на таблици на стилове и скриптове
  • Стъпка 2 се справи с изображенията и тяхната оптимизация
  • Стъпка 3 беше свързана с техники за оптимизиране на HTTP заявки
  • Стъпка 4 обсъди няколко популярни техники за кеширане
  • Стъпка 5 обхвана оптимизацията за мобилни устройства

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

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление, представяне и редактиране от Karol K.

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