Как да ускорим WordPress

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

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

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

👉 Виж още: 5 чести причини защо WordPress е бавен

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

1. Намаляване на размера на страницата

Първо едно уточнение — размерът на страницата е размерът на съдържанието и ресурсите, използвани за зареждане на URL адрес. Или иначе казано, размерът на страницата е общата сума на всички елементи, необходими за зареждане на един URL адрес в интернет. По-долу е списък на това какви биха могли да бъдат тези елементи, които съставляват размера на страницата:

• Текстово съдържание
• Мултимедийно съдържание (изображения, видео, аудио)
• Видео / Аудио плейъри
• CSS / JavaScript файлове

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

Когато мислиш за WordPress скорост, мисли за думата НАМАЛЕНИЕ. Колкото повече намаляваш всичко необходимо за зареждане на уеб страница, толкова по-бързо ще се зареди тя и ще бъдете по-щастливи ти, посетителите и Google останалите търсачки.

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

⚡️ Текстово съдържание

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

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

⚡️ Мултимедийно съдържание

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

Трябва да се увериш, че изображенията в съдържанието на страниците имат същите размери като това, което реално се показва. Ненужно е да се качва изображение с ширина 2000px и след това да се мащабира (scaling) до 700px, което да се покаже на сайта. Да, изображението се показва в желания от теб размер, но браузърът все още зарежда изображение с ширина 2000px вместо 700px. Мащабирането на изображение в страницата (напр. добавяне на style=”width:700px”) не е намаляване на размера!

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

ПОЛЕЗНИ ПЛЪГИНИ ЗА ОПТИМИЗАЦИЯ НА ИЗОБРАЖЕНИЯ:
EWWW Image Optimizer — https://wordpress.org/plugins/ewww-image-optimizer
Smush Image Compression — https://wordpress.org/plugins/wp-smushit
ShortPixel Image Optimizer — https://wordpress.org/plugins/shortpixel-image-optimiser
Imagify Image Optimizer — https://imagify.io

БОНУС:
TinyPNG — https://tinypng.com
В Pixadoro най-често използваме TinyPNG / TinyJPG за оптимизация и намаляване на размера на файла на изображения преди да ги качим в WordPress. С този инструмент често постигаме до 70% намаление на размера. Имат и WordPress плъгин.

👉 Виж още: Оптимизация на изображения — бързо зареждане на WordPress

⚡️ Видео / аудио плейъри

Това често се пренебрегва при оптимизацията на скоростта. Нека използваме за пример — вграден YouTube плейър (embedded). Има няколко начина, по които можете да ембеднете видео от YouTube, но най-често използваният начин е чрез поставяне на URL адреса в редактора на страницата на WordPress или вземане на кода за вграждане директно от YouTube. И в двата случая изходният резултат е IFRAME, зареждащ видеото. Този IFRAME трябва да извика ресурси от YouTube, за да зареди видеоклипа. Тези рикуести не могат да се ускорят, тъй като те не са хостнати на твоя сайт, така че трябва да се направи нещо друго наречено LazyLoad. Тази техника е страхотна, тъй като ще изчака зареждането на IFRAME, докато първо се зареди / покаже уебсайта на пторебителя, вместо да зареди айфрейма преди всичко, при първото зареждане на страницата.

По-долу има няколко безплатни приставки, които да направят точно това:

БЕЗПЛАТНИ ПЛЪГИНИ ЗА LAZYLOAD:
BJ Lazy Load — https://wordpress.org/plugins/bj-lazy-load/
a3 Lazy Load — https://wordpress.org/plugins/a3-lazy-load/
Easy Lazy Loader — https://wordpress.org/plugins/easy-lazy-loader/

Още нещо: някои теми поддържат API-та на различните услуги като YouTube, Vimeo, SoundCloud и др., които не са необходими за вграждане на видео на сайта. Прегледай настройките на темата и при нужда ги изключи.

Още нещо: някои теми имат настройка за lazyload и може да не е нужно да се инсталира допълнителен плъгин.

⚡️ CSS/JavaScript файлове

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

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

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

БЕЗПЛАТНИ ПЛЪГИНИ ЗА МИНИФИКАЦИЯ:
Autoptimize — https://wordpress.org/plugins/autoptimize/
Minify Javascript — https://wordpress.org/plugins/optimize-javascript/
CSS Minify — https://wordpress.org/plugins/css-optimizer/
Fast Velocity Minify — https://wordpress.org/plugins/fast-velocity-minify/

2. Намаляване на заявките (requests)

Ето какво се случва всеки път, когато някой посети уеб страница: Браузърът (Chrome, Firefox и др.) пингва уеб сървъра, който хоства уеб страницата, която се опитва да посети потребителят — в този случай уеб страница на твоя уебсайт. Браузърът иска сървърът да му изпрати файловете, съдържащи съдържанието на сайта. Тези файлове съдържат всеки текст, изображения и мултимедия, които съществуват на тази уеб страница.

Тази заявка се нарича HTTP заявка. HTTP означава „Hypertext Transfer Protocol”, което е просто друго име за процеса когато уеб браузър, изпращащ заявка за файл, и сървъра, изпращащ (връщащ) този файл към браузъра.

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

Какъв е проблемът: Браузърът трябва да направи отделна HTTP заявка за всеки отделен файл на уебсайта. Ако твоят уебсайт няма много файлове, тогава няма да отнеме много време да се заявят и изтегли съдържанието. Но повечето добри уебсайтове имат много файлове, включително големите изображения с висока разделителна способност.

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

И така, след като стана ясно какво е заявка, можем ли да ги намалим, за да ускорим зареждането на уеб страниците?

⚡️ Премахване на ненужните изображения

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

⚡️ Премахване на ненужните плъгини

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

Плъгините със сигурност е един от най-големите причинители за бавна скорост на зареждане. Разгледай активните плъгни и прецени дали имаш наистина 100% нужда от всеки по отделно. Запитай се дали сайтът може и без този и този плъгин. Ако може да работи безпроблемно без даден плъгин го изключи и премахни.

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

Има приставки, които се използват за добавяне на функционалност, но е възможно да се постигне същия резултата без да се инсталира плъгин. Чудесен пример за това е използване на плъгин за Google Analytics за добавяне на проследяващия код. За да се добави Google Analytics не е необходим отделен плъгин. Можете просто да поставиш проследяващия код директно във хедър/футър файла на темата или в настройките на самата тема.

⚡️ Премахване на добавки от трети страни

Акаунтите в социалните мрежи, добавени към сайта, могже да са чудесен начин за увеличаване ангажираността на потребителите, но със сигурност забавят сайта. Едно от най-лошите неща е извличане на съдържание от Instagram. За показването на Instagram снимки е нужно да се зареди цял куп код от сайта на трета страна (3rd party — Instagram).

Това важи и за всяко друго съдържание от трети страни, което се изтегля, за да се визуализира на твоя сайт. Някои често срещани примери, различни от Instagram са Facebook, Twitter, YouTube, Vimeo, SoundCloud, както и всякакви решения за чат на живо като Zendesk, Tawk.to, абониране за имейли — Mailchimp, Mailerlite и др.

Най-лесното нещо, което може да се направите е просто да се премахне съдържанието от трети страни и ще видиш как времето за зареждане ще се подобри. Ако това обаче не е вариант за теб и искаш да показваш това съдържание на сайта, единственото друго нещо, което може да направиш, за да ускориш сайта, е да включиш LazyLoad. По-горе говорихме за това. Типът LazyLoad, за който говорим тук, е JavaScript LazyLoading. Плъгинът Swift Performance позволява да се изберат JavaScript файловете на трети страни и да се заредят след като видимата част на страницата е показана за потребителите.

👉 Научи повече за нашата услуга по Оптимизация за скорост на WordPress и WooCommerce.

Originally published at https://pixadoro.com on May 30, 2021.