Оптимизация веб сайта под Google Page Speed Insights // Зеленая зона -  легко! // Ускорение сайта! - YouTube

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

Сторінки повинні швидко завантажуватися і сайт повинен коректно відображатись на всіх моб. пристроях та браузерах.

Цей вид оптимізації сайту відноситься до білого сео і є обов’язковим для будь-якого успішного проекту!

Отже, почнемо нудну, але корисну процедуру!

Поспішатимемо повільно і все робити по кроках!

Пропоную розпочати оптимізацію сайту під Google

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

Серед сеошників ходять наполегливі чутки, що якби Гугл захотів, то давно б потіснив Яндекс у Рунеті.

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

І все-таки чому саме під Google?

Існує багато аргументів, чому бажано орієнтуватися саме на цей сервіс.

По-перше, Google — це пошуковик №1 у всьому світі.

З його допомогою шукають інформацію мешканці всіх куточків нашої планети. В Америці, Європі, Азії, Австралії, Африці і навіть у холодній Антарктиді люди користуються інтернет-павутиною за допомогою Google.

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

По-третє, Google регулярно оновлює бази видачі. У списку ресурсів з’являються останні новинки, яких доведеться ще довго чекати на інших пошукових системах. Сторінки вашого веб-порталу швидко індексуються. Значить, сайт при правильному підході просування, незабаром займе перші місця серед найбільш популярних конкурентів. А що ще потрібне власнику Інтернет-ресурсу?

Ось два сервіси Гугла, які варто взяти в закладки і регулярно перевіряти свій сайт і все нові сторінки та статті, якщо хочете, щоб вони виходили в ТОП.

1.PageSpeed Insights або як його зазвичай називають новачки developers-Google- сервіс перевірки швидкості завантаження сторінок сайту.

2. Сервіс перевірки під мобільні пристрої від Google

Чому потрібно перевіряти постійно, та ще й нові сторінки-запитайте ви!

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

Почнемо із першого сервісу.

Сервіс видає результати за 100-бальною системою та плюс ще умовно ділить на світлові сектори.

за допомогою Гугл.optimizacia-site1

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

Я прискорюватиму свій сайт WP-home.info  який я використовую для свого відеокурсу –Сайт на WordPress

Зараз у нього досить скромні червоні результати всього

55 бал для мобільних та 62 для комп’ютерів. Загалом зі старим шаблоном вони були ще гіршими, тут хоч якісь бали дає непогана тема від майстра Гудвіна.

Я не буду прагнути сотні балів, достатньо вийти на зелений колір.

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

Хоча на смак і колір – кожному своє!

1. Включаємо оптимізацію сайту на сервері.

Майже всі сучасні хостинги дозволяють увімкнути на стороні сервера gzip стиснення, деякі взагалі за замовчуванням включають.

Перевірити чи увімкнена у вас ця функція можна ось за цим посиланням

Включена добре немає стиснення значить варто його ввімкнути.

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

optimizacia-site4

Далі вмикаємо стиск для всіх файлів.

optimizacia-site5

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

2. Включаємо кешування на стороні браузера.

Закешувати файли можна кількома способами, я даю той, який працює у мене на сервері.

Для цього відкриваємо файл .htaccess і вставляємо туди такий код.

<ifModule mod_headers.c>
# Усі html і htm файли зберігатимуться в кеші браузера один день
<FilesMatch “\.(html|htm)$”>
Header set Cache-Control “max-age=43200”
</FilesMatch>
# Усі css, javascript та текстові файли зберігатимуться в кеші браузера один тиждень
<FilesMatch “\.(js|css|txt)$”>
Header set Cache-Control “max-age=604800”
</FilesMatch>
# Усі флеш файли та зображення зберігатимуться в кеші браузера один місяць
<FilesMatch “\.(flv|swf|ico|gif|jpg|jpeg|png)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>

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

Після того як закачаєте новий файл .htaccess на сервер, можете перевірити сайт на спідтестері, напевно позиції підросли.

АЛЕ може показати, що не всі файли та скрипти кешируються на стороні браузера.

Це файли різних пузомірок типу Google аналітики та Яндекс-Метрики.

Теоретично є способи їх загнати в кеш, але особливого результату це не дасть.

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

3. Ставимо зв’язку хороших плагінів, що кеширують.

Перший-WP Fastest Cache

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

У платній є функції оптимізації HTML та скриптів.

Ми ці функції додаємо плагіном Autoptimize

Як налаштувати дані плагіни, я показав у відео.

У статті додаю скрини налаштувань як у мене. Але рекомендую почаклувати і спробувати різні варіанти т.к. у всіх різний набір плагінів та різні теми WordPress.

optimizacia-site7

Усі налаштування мені в малюнок не влізли. Ось додаю повний список налаштувань, які рекомендую відзначити, плагіна Autoptimize

Оптимізувати код HTML?

Оптимізувати JavaScript?

Look for scripts тільки в <head>? (Deprecated)

Чи оптимізувати код CSS?

Inline all CSS?

Save aggregated script/css as static files

Мені ж достатньо і 1,2 та 4

По ідеї найнеприємніший запис -Видалить код JavaScript і CSS, що блокує відображення верхньої частини сторінки

Маю піти.

АЛЕ! Якщо Ви використовуєте липке меню або плагін фіксований віджет, то вони не працюватимуть!

Тут варто вибирати! Я, на жаль, вирішив, що липке меню і віджет важливіше.

Чи довелося пожертвувати пунктом -Look for scripts only in <head>? (Deprecated)

4. Оптимізуємо зображення, скрипти та CSS файли.

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

optimizacia-site8

Закачати їх і замінити можна за допомогою будь-якого FTP-менеджера, наприклад, тієї ж ФайлЗилою

Перед заміною обов’язково створіть резервні копії файлів, особливо якщо змінюєте скрипти або файли стилів.

Мої результати після закінчення всіх процедур 97 для комп’ютерів і 95 для мобільних. Цілком прийнятний результат

optimizacia-site9

Для тих хто воліє дивитися і вчитися на відео я записав докладний відео урок-Як прискорити оптимізувати свій сайт під Google.

https://www.youtube.com/watch?v=WSeYtPBQQnI

Так само на моєму сайті Ви можете переглянути ще більш докладну статтю про те, як прискорити сайт на WordPress

Про те, як оптимізувати свій сайт під мобільні пристрої, я розповім Вам у наступному пості.

Всім вдалого продовження дня і чекаю питань у коментарях!

Пропоную хвалитися своїми результатами прискорення у коментарях!

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *