Як оцінити, що ваш сайт працює досить швидко і не втрачає відвідувачів з пошукових систем, лояльність користувачів і конверсію через повільну завантаження сторінок? Які кроки допоможуть збільшити швидкість завантаження сайту на «Бітрікс», і скільки часу це займе? Читайте в покрокової інструкції, складеної нашим технічним фахівцем.
Повільну швидкість завантаження сайту можна порівняти з чергами в реальному магазині. Необхідність чекати викликає роздратування і невдоволення - ніхто не хоче даремно гаяти свій час. В умовах, коли переключитися на сайт конкурента можна буквально за секунду, залучити й утримати відвідувачів можуть тільки дуже «швидкі» сайти.
Отже, давайте приймемо за даність три факти:
- Швидкість завантаження сторінок сайту впливає на його конверсію і лояльність користувачів.
- «Швидкі» сайти зручні для перегляду і здійснення покупок з мобільних пристроїв - частка мобільного трафіку зростає з кожним днем.
- Швидкість завантаження сторінок сайту впливає на його ранжування в пошукових системах, тобто на його видимість щодо конкурентів.
Через зволікання завантаження сайту в пару секунд ви можете втратити «гарячого» покупця назавжди.
Графік 1. Швидкість відтворення сторінок за даними Яндекс.Метрика до і після оптимізації сайту
Графік 2. Динаміка числа запитів, за якими сайт вийшов в ТОП пошукової системи GOOGLE в Московському регіоні. Всього було проаналізовано 85 запитів. Після збільшення швидкості завантаження сторінок число запитів в рамках ТОП-10 залишилося незмінним. Однак було відмічено явне поліпшення позицій за запитами в рамках ТОП-3
Міркування про те, наскільки сильно впливає, залишимо для окремої статті з кейсами і результатами експериментів. Сьогодні про те, як правильно вимірювати швидкість завантаження, і які кроки допоможуть прискорити сайт на «Бітрікс».
Як виміряти швидкість сайту?
Щоб об'єктивно оцінити швидкість завантаження сайту - виконати разову перевірку або постійно відслідковувати зміни, ви можете використовувати такі інструменти:
1. Сервіс Pingdom (pingdom.com).
Працює в трьох режимах:
- Для разової експрес-перевірки зручно використовувати інструмент https://tools.pingdom.com/ . З його допомогою ви можете дізнатися точну швидкість завантаження сайту в секундах, оцінку сайту в балах по PageSpeed Insights, вага сторінки, а також подивитися розгорнутий звіт за технічними параметрами.
- Page Speed Reports - синтетичні тести швидкості завантаження. Отримуємо загальну інформацію на основі регулярних тестів швидкості завантаження головної сторінки сайту, включаючи час «підтягування» елементів з усіх зовнішніх джерел, з інформацією про розмір і тип завантаження контенту.
- Real User Monitoring Reports (RUM) - агрегована інформація про швидкість завантаження всіх сторінок сайту у реальних користувачів. Для використання потрібна установка на сайт JavaScript коду. Ви отримуєте докладний звіт про швидкість завантаження сторінок з сегментацією по регіонах користувачів, браузерам, пристроїв (mobile / desktop / tablet), а також інформацію про розподіл часу за етапами завантаження - мережеві запити, відповідь сервера, завантаження статики.
Малюнок 1. Повний звіт RUM від сервісу Pingdom
2. Перевірка від Google PageSpeed Insights .
Сервіс дозволяє визначити фактори, що впливають на швидкість завантаження сторінок всього сайту, - окремо для мобільного і деськтопной версії:
- Зменшення розміру зображень,
- обсяг JS коду,
- час відповіді сервера і інші.
В результаті перевірки сервіс запропонує рекомендації по впровадженню тих чи інших змін.
Найчастіше пропонуються наступні напрямки оптимізації:
- використовуйте кешування,
- позбудьтеся від зайвого коду або стисніть його,
- змусьте сервер відповідати швидше,
- зменшите «вагу» зображень.
За підсумками перевірки виставляється бал від 0 до 100. Цей показник серед інших рівних враховується при ранжуванні сайту в пошуковій видачі Google.
3. Для сайтів на «Бітрікс» - сервіс «Швидкість сайту».
Вбудований моніторинг продуктивності можна використовувати як засіб «розбору польотів» і для виявлення проблемних ділянок на сайті - сервіс допомагає локалізувати «гальмуючий» компонент. Застосовується для разового аналізу, не підходить для регулярного моніторингу.
нормальні показники
Як зрозуміти, чи не втрачаєте ви відвідувачів сайту через повільного завантаження сайту?
Порівняйте отриману в результаті тестів швидкість завантаження сайту з цільовими показниками:
Сервіс Нормальний показник завантаження сторінки для невеликих сайтів Нормальний показник завантаження сторінки для складних інтернет-магазинів Pingdom RUM 1,5-3 з 3-4 з PageSpeed Insights від 80 балів Сервіс «Швидкість сайту» в Бітрікс до 1 с до 2 с
Таблиця 1. Цільові показники швидкості завантаження сайту з різних сервісів
Якщо значення будуть відчутно відрізнятися в більшу сторону - це проблема. Значить ваш сайт необхідно оптимізувати з точки зору швидкості його завантаження.
детальний аудит
Коли проблема повільного завантаження сайту визначена, потрібно виконати детальний аудит.
Стадія технічного аудиту є обов'язковим для проектів зі складною структурою каталогу і великою кількістю фільтрів, де є кастомний функціонал (технічні доопрацювання). Дуже часто такі сайти мають погане технічне спадщина і проходження стандартні заходи не дає очікуваного результату.
В цьому випадку краще довіритися технічного спеціаліста, у якого є досвід оптимізації різних сайтів.
Швидкість завантаження сайту складається з двох показників:
- швидкість генерації сторінок сервером;
- швидкість завантаження і відтворення сторінок і всього контенту на них браузером.
Щоб зробити об'єктивні висновки, фахівець в своїй роботі спирається на дані, отримані за допомогою різних сервісів.
Спочатку фахівець перевіряє сайт за допомогою сервісу PageSpeed Insights.
Отриманий результат служить відправною точкою для аналізу конкретних факторів, що впливають на швидкість завантаження сайту:
- швидкість генерації сторінок сервером,
- структура html-коду,
- розмір зображень,
- розмір css файлів і т.д.
За підсумками детального аудиту фахівець запропонує вам конкретні кроки по оптимізації сайту.
Крім того, фахівець визначить, наскільки стратегічно вірно допрацьовувати існуючий сайт. У деяких випадках найкращим рішенням буде створити новий сайт - це актуально, якщо вартість технічних доробок становить хоча б половину вартості розробки нового сайту. »
Для розуміння процедури технічного аудиту, ви можете вивчити внутрішні документи нашої компанії:
Як оптимізувати швидкість завантаження сайту?
Роботи по оптимізації швидкості завантаження сайту можуть зажадати від 0,5 год до N годин роботи технічного фахівця. Складність, а значить і тривалість робіт залежить від стану сайту та причин низької швидкості завантаження: в деяких випадках досить просто зменшити вагу зображень, для інших сайтів необхідно переробляти код.
Розберемо варіанти реалізації найпопулярніших рекомендацій в контексті сайтів на «Бітрікс».
«Бітрікс» - одна з найпопулярніших платформ для створення сайтів. Низький поріг входу для розробників призводить до частого впровадження неякісних технічних рішень, які знижують швидкість завантаження сторінок сайту.
Схема 1. Кроки з оптимізації швидкості завантаження сайту і середній час, який витрачає технічний фахівець на їх реалізацію
1. Оптимізувати зображення - 0,5-4 + 1-6 годин роботи.
Правильний підхід - налаштовувати коректно ресайз зображень при виведенні, і розміщувати в контенті заздалегідь підготовлені стислі зображення.
Картинки елементів / розділів Інфоблоки і інших сутностей бази даних (наприклад, зображення товарів в каталозі інтернет-магазину) можна стиснути при генерації шаблонів компонентів. Залежно від кількості шаблонів це може зайняти 0,5-4 години роботи програміста.
Зображення в статичному контенті (наприклад фотографія, вставлена в статтю через візуальний редактор) і елементи дизайну сайту необхідно стискати вручну за допомогою сторонніх сервісів. Зазвичай на це йде 1-6 годин.
2. Скоротити час відповіді сервера - 10-16 годин.
Саме в цьому блоці робіт виправляються помилки, допущені при плануванні структури даних і в процесі програмування.
Цей блок опрацьовують в два етапи:
- Технічний аудит, складання рекомендацій - 10-16 годин.
- Впровадження рекомендацій і рефакторинг - 12-24 години.
Необхідні трудовитрати залежать від стану сайту: цілому функціоналу проекту, якості коду і технічних рішень, негативного спадщини проекту.
Бувають, звичайно, особливо запущені випадки або просто дуже великі проекти, коли потрібно вкласти більше 40 годин, але це швидше виняток.
3. Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки - від 0,5 ч.
Видаліть JavaScript.
В налаштуваннях головного модуля «Бітрікс» є галочка «Перемістити весь Javascript в кінець сторінки». Вона переміщує вниз сторінки все JS з шаблону сайту, що частково вирішує питання. Чи включається за 2 хвилини. Але бувають випадки, коли це призводить до поломки JS плагінів або обробників, доводиться розбиратися і вручну виправляти колізії, тоді рішення задачі може зайняти більше часу.
Видаліть CSS.
При стандартному підключенні стилів в «Бітрікс» їх не можна перемістити вниз, вони завжди підключаються спочатку сторінки. Якщо підключати скрипти нестандартно, то губляться інші переваги, такі як об'єднання / стиснення стилів і розміщення стилів в CDN. І те й інше впливає на швидкість завантаження сторінки більше, ніж переміщення стилів вниз сторінки.
4. Скоротіть CSS - 0,5-1 годину.
Для стиснення CSS можна використовувати ці інструменти: https://developers.google.com/speed/docs/insights/MinifyResources.
Також в настройках головного модуля «Бітрікс» є галочка «Об'єднувати CSS файли», яка склеїть кілька CSS файлів в один.
5. Скоротіть JavaScript - 0,5-1 годину.
Алгоритм дій аналогічний стисненню CSS. У верстці потрібно використовувати стислі версії js-бібліотек або можна стиснути їх за допомогою сторонніх сервісів.
Також потрібно включити галочку «Об'єднувати JS файли» в настройках головного модуля - вона склеює все js-скрипти в один файл.
6. Увімкніть стиснення - 0,5 ч.
На більшості віртуальних хостингів стиснення включено за замовчуванням. Якщо немає, то можна спробувати включити його тільки через файл .htaccess (mod_deflate), так як доступу до повноцінних налаштувань сервера зазвичай немає. На виділених серверах це робиться в налаштуваннях сервера (apache / nginx).
7. Використовуйте кеш браузера - 1-2 години.
На віртуальних серверах ця опція повинна бути налаштована автоматично. Якщо немає, також через .htaccess потрібно вказати заголовки для певних типів файлів (скрипти, стилі, картинки). На виділених серверах - знову коригуємо настройки сервера (apache / nginx).
Оптимізація за пунктом 6 і 7 актуальна тільки для локальних ресурсів.
8. Оптимізуйте завантаження видимого контенту.
Рекомендується змінити структуру HTML таким чином, щоб спочатку завантажувався важливий контент, що розміщується у верхній частині сторінки. Це може виявитися складним або навіть нездійсненним доопрацюванням, так як доведеться міняти структуру верстки і порядок завантаження елементів сторінки. «Бітрікс» не дозволяє повністю поміняти порядок завантаження: стилі не переносяться вниз. Верстальщику буде не просто розміщувати блоки в ідеальному для завантаження порядку.
9. Скоротіть HTML.
У цей пункт входить скорочення CSS і JS, про які сказано вище. Щоб скоротити сам HTML код, необхідно переробити верстку шаблонів, якщо це можливо.
Додаткові можливості «Бітрікс»
Якщо продовжувати розмову про «Бітрікс», то в ході комплексної роботи над прискоренням сайту потрібно обов'язково звернути увагу на наступні технології, пропоновані CMS:
- CDN ( https://www.1c-bitrix.ru/products/cms/features/cdn.php ),
- Композитний сайт ( https://www.1c-bitrix.ru/composite/ ).
З їх допомогою можна добитися ефективного прискорення сайту, але процес впровадження в багатьох випадках вимагає серйозних технічних доробок.
Так, технологія «Композитний сайт» відмінно працює тільки в проектах, які ідеально відповідають стандартам - таких сайтів дуже мало. Зазвичай необхідно спочатку довести сайт за допомогою доробок до такого стану, щоб він міг підтримувати цю технологію.
Швидкість і стабільність роботи сайту - важливі фактори, які безпосередньо впливають на конверсію сайту та позиції в пошуковій видачі. Економити на цьому питанні не варто. Якщо немає можливості виділити разом необхідний ресурс для технічної оптимізації сайту, потрібно провести технічний аудит і в комфортному темпі усувати всі виявлені зауваження. При цьому почати варто з тих рекомендацій, які при мінімальних затратах забезпечать найкращий ефект.
Ми здійснюємо технічну підтримку проектів на довгостроковій основі і знаємо секрети успішного прискорення сайтів на «Бітрікс». Звернувшись до нас, ви можете бути впевнені, що ваш сайт буде правильно оптимізований з точки зору технічних можливостей платформи: ми не йдемо на поступки перед совістю і пропонуємо дійсно ефективні рішення.
Детальніше про послугу технічного супроводу сайтів і варіанти оплати: https://www.directline.pro/web-razrabotka/support/
Як оцінити, що ваш сайт працює досить швидко і не втрачає відвідувачів з пошукових систем, лояльність користувачів і конверсію через повільну завантаження сторінок?Які кроки допоможуть збільшити швидкість завантаження сайту на «Бітрікс», і скільки часу це займе?
Як виміряти швидкість сайту?