Ize Як оптимізувати WordPress і прискорити веб для SEO

1. Підвищуйте швидкість і SEO вашого веб-сайту WordPress за допомогою цих трюків, а також поради щодо...
2. Швидкість і продуктивність хостингу
3. Як виміряти швидкість і продуктивність веб-сторінки?
4. Чому важливо оптимізувати свій сайт WordPress?
5. Оптимізуйте WordPress для SEO
6. Оптимізуйте WordPress для користувальницького досвіду
7. Як оптимізувати веб-сторінку WordPress і прискорити її швидкість, щоб поліпшити позиціонування SEO?
8. Як інтерпретувати результат аналізу в GTMetrix
9. Оцінка швидкості PageSpeed
10. YSlow Score
11. Повністю завантажений час
12. Загальний розмір сторінки
13. Запити
14. Водоспад
15. Час
16. Як покращити ці показники? GTMetrix рекомендації та рішення + трюки, щоб оптимізувати їх у повній мірі
17. 1. Оптимізація зображень 63%. Розчин
18. Як оптимізувати вагу зображень? Рішення для оптимізації зображень
19. Інші способи оптимізації зображень:
20. Що таке спрайт?
21. Чому ми мали цю проблему?
22. Рішення Як виправити зображення комбінату за допомогою CSS Sprites?
23. 3. Використовуйте кешування браузера 75%. Як це виправити
24. Як покращити кеш веб-сторінки WordPress? Можливі два випадки
25. 3.2. Якщо GTMetrix просить кешувати зовнішні URL-адреси служб
26. 4. Подавайте масштабовані зображення 79%. Розчин
27. Як розв'язати подані масштабовані зображення?
28. 5. Відкласти обробку Javascript 54%. Як його поліпшити
29. Як виправити Defer Parsing Javascript?
30. 2. Усунення запитів до файлів Javascript
31. 3. Асинхронне навантаження
32. 6. Видалення рядків запитів із статичних ресурсів 61%. Просте рішення
33. Як вирішити рядки видалення запитів зі статичних ресурсів?
34. Розширений режим
35. 7. Lazy Завантаження. Як оптимізувати завантаження зображень
36. Як зробити завантаження Lazy Завантаження зображень
37. 8. Кеш сервера. Як оптимізувати кеш
38. Що, на мою думку, є найкращим хостингом для WordPress?
39. Один з кращих хостингів WordPress, які я пробував
40. Остаточний результат оптимізації нашого сайту WordPress
41. Досягнута мета!
42. 10 основних моментів і необхідне для оптимізації WordPress. Декалог оптимізації веб-сторінки
43. Хочете залишити свою думку? Чи знаєте ви який-небудь інший трюк для оптимізації WordPress? У Вас є запитання?

Підвищуйте швидкість і SEO вашого веб-сайту WordPress за допомогою цих трюків, а також поради щодо оптимізації через реальний випадок. Оптимізаційні рішення

Оптимізація WordPress і прискорення швидкості вашого веб-сайту мають важливе значення для покращення SEO . Швидке завантаження сайту стало дуже важливим фактором у позиціонуванні пошукової системи.

WPO (оптимізація продуктивності в Інтернеті) є завданням, яке ви повинні вирішити вже, якщо ви хочете бути більш схильними до того, щоб бути на найвищих позиціях Google . У більшості випадків ви можете оптимізувати свій сайт, не будучи експертом і безкоштовно.

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

Які фактори роблять веб-сайт повільним чи швидким?

Існує кілька важливих аспектів, які впливають на швидкість завантаження веб-сайту. Я перерахую їх, а потім розповім , як ви можете вирішити їх крок за кроком.

Швидкість і продуктивність хостингу

Вага і розмір зображень

Кількість запитів або запитів

Кількість файлів CSS і JS

Кількість встановлених плагінів

Оптимізація шаблону коду

Як виміряти швидкість і продуктивність веб-сторінки?

Для аналізу вашого сайту, я рекомендую відмінний інструмент GTMetrix . Ця програма робить докладне вивчення вашого сайту і попереджає вас про те, які фактори уповільнюють навантаження, щоб ви могли їх вирішити.

У GTMetrix ви можете побачити, що таке рейтинг PageSpeed на вашому сайті, тобто відзначити, що Google надає вашому сайту багато факторів. Хороший PageSpeed ​​допомагає багато чого позиціонувати. У цьому посібнику я дам вам трюки, щоб максимально покращити його.

Щоб пояснити всі трюки, я візьму за приклад роботу, виконану на веб-сайті Aula CM.

Цей випадок пояснюється у статті про веб-оптимізацію на заході День маркетингу Pro , що відбувся 1 квітня в Мадриді.

У цій посаді я розповім вам все детально, щоб ви могли застосувати її у вашому власному веб-проекті.

Чому важливо оптимізувати свій сайт WordPress?

З двох основних причин:

Оптимізуйте WordPress для SEO

По-перше, SEO позиціонування . Google враховує швидкість завантаження веб-сайтів під час їх позиціонування.

Крім того, кожен день більше користувачів переглядають з мобільних пристроїв , і ви повинні запропонувати їм вміст, який завантажується плавно і адаптований за допомогою технології AMP .

Оптимізуйте WordPress для користувальницького досвіду

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

Як оптимізувати веб-сторінку WordPress і прискорити її швидкість, щоб поліпшити позиціонування SEO?

Введіть GTMetrix і зареєструйтеся . Реєстрація безкоштовна, вона займає хвилину і дозволяє налаштувати інструмент краще.

Після реєстрації натисніть Параметри аналізу та виберіть розташування якомога ближче до країни, де розміщено ваш веб-сайт.

Далі введіть повну URL-адресу свого веб-сайту у вікні Analyse Performance (Аналізувати ефективність ) та натисніть Analyze (Аналізувати) .

GTMetrix здійснює ретельну перевірку вашого сайту і через кілька секунд показує загальний висновок про стан оптимізації вашого сайту:

Як інтерпретувати результат аналізу в GTMetrix

Як ви бачите, результат аналізу дає нам ці основні показники:

Оцінка швидкості PageSpeed

Зверніть увагу, що Google надає продуктивності Інтернету. Дуже важливо

YSlow Score

Зверніть увагу, що Yahoo дає. Менш важливо, якщо вашою метою позиціонування є Google.

Повністю завантажений час

Час завантаження веб-сайту. Пам’ятайте, що це коливається, оскільки продуктивність хостингів є змінною. Тому рекомендується зробити кілька вимірювань і взяти середнє значення для отримання більш точних даних.

Загальний розмір сторінки

Розмір сторінки, що аналізується, безпосередньо пов'язаний з розміром зображень і елементами, які ви завантажуєте на ваш сайт.

Запити

Кількість запитів на різні послуги, зроблені вашим веб-сайтом для роботи, важливо завантажити до максимуму, щоб покращити рейтинг PageSpeed ​​Score.

Водоспад

У цьому розділі ви можете побачити час завантаження кожного з процесів, пов'язаних з вашим веб-сайтом.

Час

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

Як покращити ці показники? GTMetrix рекомендації та рішення + трюки, щоб оптимізувати їх у повній мірі

Крім цих суттєвих показників, GTMetrix пропонує нам дуже корисний список елементів, які погіршують продуктивність вашого сайту.

Беручи до уваги роботу з оптимізації, зроблену на веб-сайті Aula CM , я поясню їх один за одним, і я розповім, як ми оптимізували кожну з них.

Якщо ви подивитеся на попереднє зображення, ви можете побачити, що ми почали з PageSpeed ​​Score 70 , YSlow 60 , час завантаження приблизно 5 секунд , розмір сторінки 1,51 Мб і 131 Запити .

Крім цього, ми мали покращувані аспекти, пов'язані з різними елементами коду шаблону, плагінів тощо. Чому це відбувається?

Коли ви встановлюєте шаблон WordPress і створюєте веб-сайт, встановлюєте плагіни тощо, нормально знайти подібні показники, якщо ви ще не зробили оптимізацію. Тепер я детально розповім, як оптимізувати всі ці моменти:

1. Оптимізація зображень 63%. Розчин

Ця проблема була пов'язана з відсутністю оптимізації деяких зображень . Коли ви працюєте на своєму веб-сайті, іноді стрес щодня змушує забувати цей важливий аспект і завантажувати зображення занадто важко.

Як оптимізувати вагу зображень? Рішення для оптимізації зображень

У вас є кілька способів швидко вирішити цю проблему , легко і безкоштовно.

Ми зробили це дуже простим способом завдяки інструменту IMG Optimizer , який пропонує наш хостинг безкоштовно Webecompany , З одним клацанням миші і через кілька хвилин наші зображення були ідеально оптимізовані. Це так просто

Різниця між преміальним хостингом Webecompany та інші послуги з низькою якістю та надання послуг. Ми не граємо з цим.

На цьому зображенні можна побачити до і після оптимізації . Як ви можете бачити, поліпшення оптимізації зображень з 63% до 99% покращило основні показники веб-сторінок, особливо PageSpeed ​​Score.

Інші способи оптимізації зображень:

• Додатки WP Smush It. Безкоштовні плагіни, які дозволяють оптимізувати зображення в Інтернеті. Це трохи повільніше, ніж попередній, і результат не такий хороший, але це хороше рішення, якщо у вас немає преміум-хостингу.
• Інструменти, як Tiny PNG або JPG Mini. Безкоштовні онлайн-програми, що дозволяють оптимізувати вагу зображень. Недолік, що ви повинні завантажити зображення, передати їх через інструмент, а потім завантажити їх знову.

2. Комбінуйте зображення за допомогою CSS Sprites 0%. Розчин

Ця рекомендація GTMetrix стосується використання зображень спрайту для зменшення кількості запитів і підвищення швидкості завантаження.

Що таке спрайт?

Це файл зображення, який містить багато зображень сайту в одному файлі , а це означає, що замість завантаження декількох файлів потрібно лише завантажити один. Потім, за допомогою CSS, ви переміщуєте координати зображення так, щоб у кожному випадку відображався інший.

Чому ми мали цю проблему?

На нашому сайті ми маємо головне меню типу мега меню, з безліччю розділів з іконками. Щоб завантажити кожну піктограму, веб- сервер робить запит або запит до папки зображень на сервері, уповільнюючи завантаження і погіршуючи показники продуктивності.

Рішення Як виправити зображення комбінату за допомогою CSS Sprites?

1. Створення єдиного зображення, яке містить всі піктограми в одному файлі

2. Наведіть зображення як фон до всіх значків і перемістіть його на 40 пікселів вліво для кожного з них за допомогою CSS

Ось приклад коду, який використовується для піктограм

Для другої піктограми, у фоновому положенні, ми ставимо -40px 0px; Для третього ми ставимо -80px 0px; І так далі.

Перше значення відноситься до горизонтальної осі x координат, а друга - до вертикальної осі y. Кожна піктограма переміщує фонове зображення 40 пікселів вліво, і в кожному випадку інше зображення з'являється, навіть якщо це той самий файл.

Тут ви можете побачити оптимізацію до і після використання спрайтів. Покращення було брутальним, з 75% до 83% у рейтингу PageSpeed і другим меншим часом завантаження. Подивіться, як знизилися запити з 136 до 105.

3. Використовуйте кешування браузера 75%. Як це виправити

Це повідомлення вказує на необхідність збільшення кешування елементів полотна для поліпшення його швидкості завантаження.

Як покращити кеш веб-сторінки WordPress? Можливі два випадки

3.1. Якщо GTMetrix повідомляє, що URL-адреси, які потрібно кешувати, є внутрішніми для вашого веб-сайту

1. Встановлення плагінів кешу. Найкращими, на мій погляд, є WP Rocket (для оплати) і Загальний кеш W3 , WP Rocket є захоплюючим плагіном, ціна якого ніщо в порівнянні з тим, що ви отримуєте. Я використовую його у всіх своїх проектах, і різниця є чудовою.

1. Наймання хорошого хостингу. Хостинг хотів Webecompany Вона реалізує розширену систему кешування, таку як Magic Cache (на базі Varnish Cache), що значно покращує час завантаження.

3.2. Якщо GTMetrix просить кешувати зовнішні URL-адреси служб

Для кешування зовнішніх URL-адрес, таких як Analytics, Fonts, Maps, подія Facebook і т.д., процес є трохи більш просунутим і потребує допомоги експерта веб-коду. Покрокова процедура така:

1. Відображати в GTMetrix поле, яке попереджає вас про cacheado і спостерігати, які зовнішні файли він просить вас кешувати. Збережіть коди, які містять ці зовнішні файли, у внутрішніх файлах вашого власного хостингу.
2. Створіть скрипт, який запускається з завданням cron (запланованим завданням) кожні x годин, що зберігає в каталозі оновлені версії скриптів цих зовнішніх служб.
3. Відредагуйте файл header.php і змініть URL-адреси кодів, щоб дзвінки на ці файли були зроблені тим, кого ви завантажили на власний хостинг, і таким чином завантажилися локально.

Оптимізація до та після оптимізації показує покращення PageSpeed ​​на 83% до 87%, а також поліпшення у рейтингу YSlow, швидкості завантаження та розміру сторінки.

4. Подавайте масштабовані зображення 79%. Розчин

Ще одна проблема, яку GTMetrix попередив, - це завантаження зображень у розмірах, що перевищують необхідний, щось досить поширене на веб-сторінках.

Це попередження може мати дві різні причини :

1. Ви завантажили зображення вручну до розміру, що перевищує необхідний. Наприклад, для ящика шириною 300 пікселів завантажено зображення до 600 пікселів.
2. Шаблон автоматично показуватиме зображення з невиправдано більшим розміром. Наприклад, у вашому веб-вузлі є смуга, розділена на три колонки з останніми трьома статтями блогу.
   Зображення заголовків кожної публікації, незважаючи на розмір, менший за оригінал, залишаються такими ж, як і до ширини 900 пікселів, оскільки шаблон не відображає зображення, попередньо перероблені.

Як розв'язати подані масштабовані зображення?

1. Якщо ви завантажили зображення більшого розміру, ніж потрібно, оптимізуйте їх . Ви можете зробити це, завантаживши зображення, змінюючи масштаб їх за допомогою програми, наприклад Photoshop або безкоштовних онлайн-програм Фотор , Або набагато простіше, з безкоштовним плагіном Редактор фотографій ,
2. Якщо проблема з вашим шаблоном, з безкоштовним плагіном Відновлення ескізів Ви можете визначити точні розміри зображень у різних місцях веб-сторінки. Потім, трохи доторкнувшись до коду вашого шаблону, ви замовляєте його для показу цих точних розмірів на кожному сайті.
3. Використання зображень векторного типу SVG . Цей тип зображень, будучи векторними, завжди забезпечують максимальну якість і, якщо ви оптимізуєте їх, коли ви генеруєте їх векторно, вони можуть важити менше. Апріорі WordPress не дозволяє завантажувати векторні зображення, але з вільним плагіном Підтримка SVG Ви можете зробити це легко.

Як тільки це поліпшення було зроблено, ми збільшили Оцінку PageSpeed ​​до 88% і продовжуємо покращувати інші параметри

5. Відкласти обробку Javascript 54%. Як його поліпшити

Занадто багато запитів до файлів Javascript у заголовку сторінки. Це типова проблема з багатьма шаблонами WordPress, які не дуже добре оптимізовані і містять величезну кількість файлів JS.

Як виправити Defer Parsing Javascript?

1. Злиття файлів

Якщо ми хочемо скоротити виклики до файлів Javascript, одним із способів цього є зменшення кількості файлів JS.

Ви можете зробити це, об'єднавши файли з плагіном, таким як WP Rocket, який, як згадувалося вище, оплачується.

Безкоштовною альтернативою є плагін Оптимізатор сценаріїв JS & CSS ,

Примітка. До тих пір, поки ви об'єднуватимете файли, див. Нижче, що ваш сайт все ще функціонує правильно. Залежно від шаблону та встановлених плагінів, результат може змінюватися.

2. Усунення запитів до файлів Javascript

Це потрібно робити вручну, редагуючи код вашого шаблону, який вимагає трохи знань про веб-програмування.

Файли вашого веб-сайту можна редагувати за допомогою FTP, файлового менеджера панелі хостингу або безпосередньо з панелі адміністрування WordPress, у розділі Вигляд> Редактор.

Для цього перейдіть до файлу header.php шаблону, який динамічно генерує заголовок HTML вашого веб-сайту (це частина коду, що потрапляє між тегами <head> </ head>).

Іноді шаблони створюють запити до служб Javascript, які вам не потрібні. Якщо це так, усуньте ці запити.

Іншим рішенням може бути прийняття деяких запитів до колонтитулу сторінки . Це запобігає виникненню навантаження в перший момент.

В обох випадках завжди робіть це з знанням і великою обережністю, щоб уникнути проблем на вашому сайті.

3. Асинхронне навантаження

Асинхронне або затримане завантаження дозволяє здійснювати виклик файлам паралельно , якщо вони є файлами, які не потрібні негайно для завантаження веб-сайту.

Таким чином, ви зменшуєте кількість запитів до файлів Javascript у початковому завантаженні веб-сайту та уникайте вузького місця.

Асинхронну зарядку можна виконати за допомогою WP Rocket . Як бачимо, ми вже перерахували кілька поліпшень, які можна вирішити за допомогою WP Rocket, що виправдовує його придбання.

Якщо за допомогою одного плагіна ви оптимізуєте багато речей, вам не потрібно встановлювати занадто багато плагінів, а проблеми можуть призвести до ваги, підтримки та можливих конфліктів.

Однак, якщо ви віддаєте перевагу робити це безкоштовно , у вас є плагін Async Javascript.

Дізнайтеся, як оптимізація Javascript значно покращила продуктивність нашого веб-сайту, різко зменшивши кількість запитів або запитів з 105 до 72. Це дозволило нам завантажити сторінку PageSpeed ​​до 92% і меншу кількість разів завантаження.

6. Видалення рядків запитів із статичних ресурсів 61%. Просте рішення

Ще одна типова проблема багатьох шаблонів WordPress, пов'язаних з генерацією непотрібних рядків у певних запитах. Це не дуже серйозно, і його також легко вирішити. Очищаючи ці текстові рядки, ви можете покращити кешування та швидкість.

Як вирішити рядки видалення запитів зі статичних ресурсів?

Дуже простий спосіб

З плагіном типу WP Rocket. Знову ж таки, цей плагін дозволяє вирішити проблему без необхідності встановлювати інший плагін для кожного поліпшення.

Якщо ви хочете зробити це безкоштовно, у вас є цей плагін ,

Розширений режим

Редагування файлу functions.php вашого шаблону та вставлення цього коду

Оптимізація рядків запитів дозволила нам підняти оцінку PageSpeed ​​трохи до 93% і трохи поліпшити інші показники

7. Lazy Завантаження. Як оптимізувати завантаження зображень

Lazy завантаження зображень полягає в обслуговуванні зображень поступово по всій сторінці, не все відразу. На сторінці, завантаженій багатьма зображеннями, може бути дуже корисно знизити розмір сторінки та запити.

Це не є особливою проблемою, про яку GTMetrix попереджає нас, але важливо покращити ключовий аспект продуктивності: кількість запитів або запитів.

Як зробити завантаження Lazy Завантаження зображень

З плагіном типу WP Rocket (ще один!).

Щоб зробити це безкоштовно, у вас є дві дуже хороші альтернативи. BJ Lazy Load o Швидкість Booster Pack.

Як ви можете бачити на графіку, при здійсненні цього вдосконалення ми зменшили кількість запитів від 72 до 37 до звіра, завдяки чому всі інші показники покращилися, досягнувши PageSpeed ​​на 94%.

8. Кеш сервера. Як оптимізувати кеш

Як я вже згадував на початку, правильне кешування вашого хостингу може бути вирішальним елементом для поліпшення швидкості завантаження вашого WordPress .

Окрім удосконалень кешу, які можуть реалізувати плагіни, такі як WP Rocket або W3 Total Cache , є частина, яку повинен виконувати ваш сервер. Є преміум хостинг як Webecompany Це може бути вирішальним для поліпшення ваших показників і мати хорошу SEO в Google.

Наш хостинг Webecompany виконує кеш за допомогою інструменту, який називається Magic Cache (на основі Varnish Cache). Varnish Cache - це вдосконалена система кешування в оперативній пам'яті, яка скорочує час завантаження та покращує First Byte.

Що, на мою думку, є найкращим хостингом для WordPress?

Я завжди кажу це, але в цьому випадку з ще більшою причиною: мати хороший хостинг може мати вирішальне значення для вашого інтернет-бізнесу. Не грайте з цим.

Один з кращих хостингів WordPress, які я пробував

Webecompany

Якісний хостинг Webecompany дозволяє досягти більшого часу навантаження, ніж інші більш низькі якості розміщення, не кажучи вже про його величезну безпеку, відмінну підтримку і стабільність.

Майже всі наші проекти розміщуються на цьому хостингу і ми не можемо бути більш задоволені. Якщо ви хочете, щоб ваш сайт мав високу швидкість і працював професійно і уникав проблем, це , безумовно, варто.

Побачте різницю в продуктивності та швидкості після того, як інструмент Webempresa Magic Caché буде додано на наш веб-сайт.

Незважаючи на всі вдосконалення і усвідомлення складності поліпшення показників, на 94% ми піднялися до 96% рейтингу PageSpeed. Від 1,7 секунди швидкості завантаження ми опускаємося до 1,2 секунди.

Примітка: Ще один високоякісний хостинг, який я використовую на цьому веб-сайті, який ви читаєте Raiola Networks, Зокрема, оптимізована послуга VPS, яка пропонує брутальну швидкість і продуктивність і які допомагають мені позиціонувати себе на високих позиціях Google.

Остаточний результат оптимізації нашого сайту WordPress

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

Як ви можете бачити, оптимізація реалізованої системи допомогла поліпшити всі показники , збільшившись з 70% до 96% у рейтингу PageSpeed і скоротивши час завантаження з 4,9 секунд до 1,2 секунди.

Досягнута мета!

Далі, я покажу вам короткий виклад як перелік речей, які ви завжди повинні пам'ятати, якщо ви хочете, щоб ваш сайт WordPress пропонував хорошу продуктивність і швидкість.

10 основних моментів і необхідне для оптимізації WordPress. Декалог оптимізації веб-сторінки

1. Оптимізуйте вагу зображень і завжди розміщуйте їх у потрібному розмірі
2. Шукайте якомога більше своїх веб-сайтів і зовнішніх служб
3. Змініть і об'єднайте файли
4. Скорочення клопотань або запитів
5. Зробити асинхронне завантаження
6. Надішліть деякі скрипти та запити до веб- колонтитула
7. Аналізувати і оптимізувати вичерпно і постійно
8. США шаблонів швидко добре оптимізовані
9. Не витрачайте встановлення плагінів
10. Завжди використовуйте хороший хостинг

Я хочу подякувати Робер Ортега , партнер у класі CM, за його великий внесок у всю цю роботу з оптимізації і в роботі, яку ми зробили в Pro Marketing Day. Тріщина, яку я рекомендую вам слідувати, як це робить відмінну роботу.

Хочете залишити свою думку? Чи знаєте ви який-небудь інший трюк для оптимізації WordPress? У Вас є запитання?

Залиште мені коментар, і я з задоволенням відповім вам і допоможе вам оптимізувати ваш WordPress

Ize Як оптимізувати WordPress і прискорити веб для SEO

4,7 (94,62%) 52 голосів