Сейчас в сети: 770
Сейчас в сети: 770
Ознакомьтесь с нашими мероприятиями и спецпроектами!
star_border

Інструкція для підвищення швидкості мобільного веб-сайту!

Чому важливо покращувати швидкість вашого сайту на мобільних?

 

Користувачі мобільних пристроїв хочуть, аби мобільний веб-сайт завантажувався надзвичайно швидко. Статистичні дані свідчать про те, що 53% усіх переходів на веб-сайт з великою ймовірністю не завершуються, якщо сторінка відкривається довше 3 секунд (1). Тому, швидше за все, користувачі покинуть ваш сайт, якщо він довго завантажується. Крім того, дослідження показують, що веб-сайти з швидким завантаженням мають нижчий показник відмов, більшу середню тривалість сеансу та вищий коефіцієнт конверсій, тому поліпшення швидкості сайту ​​має вирішальне значення для будь-якого бізнесу (2). На жаль, не усі власники бізнесів розуміють важливість швидкого завантаження мобільного веб-сайту. Саме тому ми підготували  інструкцію, яка допоможе оцінити стан вашого сайту, а також дасть поради щодо підвищення швидкості його завантаження.

 

Як правильно оцінити швидкість власного веб-сайту?

 

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

  1.  Перейдіть на ваш сайт та відкрийте Chrome DevTools, натиснувши Ctrl + Shift + j чи F12, якщо ви використовуєте Windows. Натисніть CMD + Option + i, якщо ви використовуєте Mac.
  2. Натисніть на вкладку “Networks”. Після цього виберіть “enable recording”, “disable cache”, щоб зімітувати перше відвідування сайту, і після цього оберіть “Regular 3g” та перезавантажте сторінку (ctr + R  для Windors та cmd + R для Mac).

    Дивіться скріншот нижче.

    2017-05-17
    Більше інформації ви можете знайти
    за даним посиланням (англійською).

  3.  Перевірте час завантаження DOM та час завантаження всіх елементів. Якщо час завантаження перевищує 3 секунди, то веб-сайт потребує вдосконалення.

    Дивіться скріншот нижче:

    2017-05-17
  4. З’ясуйте, які скрипти блокують або сповільнюють завантаження сторінки. Для цього виберіть відповідний скрипт та відкрийте вкладку “Preview”.

    Деталі зображені на скріншоті нижче:

    2017-05-17

    В даному випадку на скріншоті відображений скрипт, який затримує завантаження на 4 секунди.
     
  5.  Перегляньте “важкі” файли  і спробуйте стиснути деякі із них. Ви можете легко організувати файли в залежності від їх “ваги” (дивіться колонку “Size”).

 

Скріншот нижче:

 

2017-05-17

 

Додатково ви можете використовувати інші інструменти:

  • http://www.webpagetest.org/ (лише англійською мовою), який показує швидкість завантаження та додаткову інформацію про швидкість завантаження зображень, скриптів і т.д.
  • Testmysite.thinkwithgoogle.com (російською, англійською) сканує ваш веб-сайт на мобільних пристроях та комп’ютерах, і формує звіт про швидкість його завантаження та поради для її покращення.
  • PageSpeed Insights (англійською) який також аналізує сайт на мобільних та комп’ютерах, і формує звіт з порадами для оптимізації швидкості завантаження.

 

Що потрібно виправити на сайті?

 

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

 

Виправте зараз

  1. Зменшіть розмір зображень
    Великі зображення є частою причиною повільного завантаження. Спробуйте зменшити розмір  зображень, або ж відображайте різний розмір зображення для кожного пристрою - показуйте більший розмір на комп’ютерах і  менший  на мобільних пристроях  (рекомендований розмір зображення - до 100K).

  2. Об’єднуйте ресурси (JS, CSS та малі зображення)
    Кожен ресурс вимагає додаткового запиту на сервері. З'єднуйте однотипні файли (наприклад, JS з JS, CSS з CSS, і т.д.), щоб зменшити кількість запитів. Маленькі зображення (<10KB) можуть бути також об'єднані в один запит.

  3. Зменшіть ресурси з допомогою GZIP
    GZIP може зменшити розмір таких текстових ресурсів, як CSS або JS на цілих 70-80%. Сервер відправляє стислий файл, а браузер розпаковує його. Всі сучасні браузери підтримують функцію GZIP.


Виправте цього місяця 

 

  1. Не завантажуйте зображення, яких користувач не бачить
    Іноді сайт може завантажити зображення, але не відобразити його на мобільному пристрої. Уникайте цього і завантажуйте тільки ті зображення, які точно відображаються на даному пристрої.

  2. Уникайте переадресації
    Час від часу виникає необхідність переадресовувати  користувача з одного URL на інший (наприклад, з example.com на m.example.com). Варто пам’ятати, що кожна переадресація потребує додаткових запитів з сервера, які затримують відображення вмісту, тому краще використовувати її якомога рідше.

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


Виправте цього кварталу

 

  1. Мінімізуйте ресурси
    Видалення пробілів та коментарів в  JS / CSS допоможе стиснути дані і зменшити час, який браузер витрачає на їх обробку, що пришвидшить завантаження сайту.

  2. Завантажуйте контент перед CSS і JS
    Якщо веб-сайт завантажує CSS і JS файли перед видимим контентом, то користувач побачить порожній екран. Саме тому, необхідно в першу чергу показувати основний контент, а вже потім завантажувати CSS і JS файли в разі необхідності.

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

 

Автор: Борис Ходан

Матеріал підготовлений за джерелами:

 

  1. The need for mobile speed: How mobile latency impacts publisher revenue
  2. Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.7K, Global, March 2016