Технічне SEO для автосалонів: Частина 2. Підвищуємо швидкість завантаження сайту

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

Використовуйте кешування браузера

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

Рішенням може стати кешування браузера: воно зберігає деякі об’єкти локально в браузері користувача. Після першого відвідування сайту постійні елементи сторінок зберігаються і при наступних зверненнях беруться безпосередньо з кешу браузера користувача. Отже, навантаження на сервер скорочується на 80%.

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

технічне seo для автосалонів: оптимізація швидкості завантаження сторінки

Помістіть CSS в хедері, а JS – в футері

Оскільки спочатку браузер чекає поки завантажаться CSS (Cascading Style Sheets – каскадні таблиці стилів), то важливо зробити все можливе, щоб прискорити цей процес. Дуже простий спосіб посприяти цьому – помістити потрібний для завантаження першого екрану CSS-файл в хедері сторінки. Таким чином, браузер відображатиме сторінку в правильному порядку: спочатку заголовок, потім логотип, навігація і т. д. Якщо помістити CSS в футері, то сторінка буде завантажуватися довго і хаотично, що погіршить загальне враження користувача.

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

Крім цього, слід винести таблицю зі стилем в окремий файл (традиційна назва style.css). Якщо застосовувати її в кожному коді сторінки, то це вплине на загальну вагу коду і на швидкість завантаження сторінки.

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

Безкоштовна консультація по технічному SEO-аудиту для вашого автосалону!

Введіть номер телефону

Мінімізуйте CSS і JS-файли.

Частково повільне завантаження сторінки може бути пов’язане з великою кількістю файлів Javascript або CSS, тому необхідно їх мінімізувати.

У веб-розробці “мінімізація” – це процес підвищення ефективності коду шляхом видалення непотрібних даних (пробіли, розриви рядків, коментарі програмістів, тощо). Також це стиснення життєво важливого коду, без порушення його нормального функціонування.

Наприклад:

Можна

написати

речення

у

такий

спосіб.

Або можна зробити це більш звичним способом.

Швидше за все, ви витратили більше часу на читання першого речення, ніж другого. Аналогічно і браузер вимагає більше часу і зусиль для обробки довгого переліку інструкцій.
“Styles.css” (все, що відноситься до стилю оформлення сайту – кольори, шрифти, розміри, і т. д.) – це тисячі рядків з великою кількістю пробілів між кожним позначенням стилю. Для браузера обробка такої кількості інформації є також навантаженням. Одним з недоліків WordPress і інших систем управління контентом полягає в тому, що при кожній установці нових плагінів додаються нові JS або CSS-файли.

Однак, якщо ви об’єднаєте JavaScript- і CSS-файли і помістите в один рядок, то браузер зможе обробляти їх набагато швидше! Один рядок, ось і все. Це абсолютно не вплине на їх функціональність. Фактично ви скорочуєте час завантаження сторінки і зменшуєте кількість запитів на сервер. Подивіться на скріншот нижче. Зліва – це вигляд вихідного файлу. Праворуч – скорочена версія того ж коду. На перший погляд може здатися купою рядків, але якби на зображенні було достатньо місця, то все помістилося б в одну лінію.

 Технічне SEO для автосалонів:

Отже, як мінімізувати код? Існує безліч інструментів, в яких ви можете просто скопіювати і вставити код, натиснути кнопку “minify” і отримати оптимізований код. Якщо ви користуєтесь WordPress, то WP Minify – плагін, який автоматично зробить все це за вас.

Оптимізуйте зображення

Медіафайли (зображення, відео) знаходяться в топі елементів сайту, що сповільнюють його завантаження, але, тим не менш, вони також є відмінною можливість виділити себе! За допомогою оптимізації зображень можна видалити непотрібну інформацію, яка в них зберігається. Це зменшує розмір файлу в залежності від його місця розміщення на веб-сайті. Часто буває, що зображення відображаються з меншим розміром, ніж вони завантажуються з бази даних. Це призводить до додаткових витрат при завантаженні сайту. Подібна помилка виникає під час автоматичного масштабування великих зображень. Тільки уявіть: вихідний розмір зображення 1920 х 800, а на сайті воно відображається в меншому, наприклад, 996 х 415, настільки більше місця воно займає.

Важливий момент, про який не слід забувати ні в якому разі – це прописування мета-тегів зображень. Найголовніші значення, які слід прописати, – title (назва картинки, яка висвічується при наведенні курсору) і alt (короткий опис картинки з додаванням ключового слова, саме його зчитують пошукові системи). Для чого це потрібно? Для SEO-просування медіафайлів, щоб вони потрапили в пошук по зображеннях.

SEO-оптимізація зображень може підвищити загальну швидкість завантаження сторінки на 80 відсотків.

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

технічна seo-оптимізація медіафайлів сайту автосалону

Стиснення зображень

Щоб зменшити розмір вашого зображення, не жертвуючи якістю, ви можете скористатися однією з цих двох форм стиснення:

Стиснення з втратами: деякі дані з вихідного файлу будуть втрачені без можливості повернення змін. Чим більше стискається файл, тим більше даних втрачається. Однак стиснення з втратами призводить до значного зменшення розміру файлу. JPEG і GIF – це популярні формати зображень для компресії з втратами.

Без втрат: зображення, збережені у форматі стиснення без втрат, залишаються якісними незалежно від того, скільки разів їх стискали і відновлювали. Стиснення без втрат видає якісніші файли, ніж з втратами, але вони все одно залишаються “важкими”. RAW, BMP, GIF і PNG – формати зображень для компресії без втрат.

Для ефективного просування логотипи, іконки варто залишати в форматі .svg або .png, а зображення для публікацій і товарів -.jpg.

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

Google рекомендує використовувати WebP – формат стиснення зображень, який забезпечує чудову компресію без втрат і з втратами для публікацій в інтернеті. З його допомогою можна отримати більш якісні зображення навіть при мінімальному розмірі файлу. Наприклад, у порівнянні з PNG формат WebP на 26% краще стискає картинки без втрат і на 25-34% з втратами, ніж JPEG.

Використовуйте CDN (мережу доставки контенту)

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

Інструменти для перевірки швидкості

Але як же визначити слабкі місця свого сайту? Зробити це можна за допомогою таких інструментів:

  • Google PageSpeed ​​Insights. Цей сервіс призначений для оцінювання швидкості будь-якої веб-сторінки як на десктопах, так і на мобільних пристроях (за шкалою від 0 до 100). Після проведеного тесту він вкаже вам на помилки, які потрібно виправити для поліпшення швидкості завантаження сторінок.
  • Pingdom Tools  – ще один сервіс виміру швидкості сайту. Вставте потрібний URL вашого сайту в рядок для аналізу і ви отримаєте дані про час завантаження сторінки, документу і кількості запитів для формування сторінок. Виступає в якості допоміжного інструменту до Google PageSpeed ​​Insights.
  • WhichLoadFaster. Інструмент для порівняння свого сайту і з сайтом конкурента. Він продемонструє який сайт працює швидше і в скільки разів.

Існує більше десятка сервісів для перевірки швидкості завантаження сторінок, але найпопулярнішим для більшості веб-майстрів все ж залишається Google PageSpeed ​​Insights.

Підсумок

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

Це стане великим плюсом в просуванні сайту вашого автосалону. У наступній статті ми розповімо про одну з найважливіших ​​частин внутрішньої SEO-оптимізації – розмітці структурованих даних.

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

 

0 відповіді

Залишити коментар

Хочете приєднатися до обговорення?
Ласкаво просимо!

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

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