Коли користувачів просять поділитися своїм досвідом щодо взаємодії з тим чи іншим сайтом, вони насамперед згадують про швидкість загрузки сторінок. Враховуйте ще й проблему людського сприйняття: навіть якщо сторінка завантажується досить швидко, користувачу здається, що цей процес триває на 15% довше, ніж насправді. А коли будуть ділитися своїм досвідом, то вкажуть час завантаження на 35% більше реального – звичка перебільшувати. Це все результати маркетингових досліджень.
Так яка швидкість вважається оптимальною для сайтів на WordPress? Відвідувач хоче побачити перші дані за 1 секунду і повну загрузку сторінки за 3-4 секунди. Умови використання швидкісного інтернету і потужного гаджету – дефолтні.
Оптимізація сайту під швидкість – це завжди компроміс і задача девелоперів та seo-шників – знайти золоту середину.
- З одного боку, відвідувачам хочеться дивитися на великі, якісні картинки і користуватися різними віджетами: кнопками, формами, полями – всі ці зручності «обтяжують» сторінку.
- З іншого боку, пошуковий бот надає перевагу «облегшеним» сторінкам – такі краще індексуються і опиняються на вищих позиціях видачі. Пошукова система лояльніше відноситься до тих сайтів, на котрі тратить менше ресурсів.
Пройдемся по критичним елементам, котрі впливають на «вагу» сторінки.
КАРТИНКИ, ФОТО, ІЛЮСТРАЦІЇ
Розберемся с форматами. Оптимальний формат зменшує вагу візуального контенту в середньому на 50%.
- Якщо це фото, інфографіка, або складне зображення – вибирайте .jpg. Додатково рекомендується використовувати декодери для стиснення файлів цього формату без втрати якості (що важливо). Наприклад, пакет Mozilla JPEG, або утиліту Jpegtran.
- Якщо це схеми, ілюстрації, картинки с прозорим фоном чи текстом – вибирайте .png. Утиліти для стискання без втрати якості: сайт Compressor (вибрати функцію Lostless), OptiPNG, PNGout.
- Також не забуваємо про старий-добрий Photoshop – при зберіганні зображення можна виставити якість замість 100% до 90%, наприклад.
Тепер розглянемо функцію ресайзінгу – який розмір оптимальний для фото і картинок?
- Для анонсів до статті достатньо ширини в 600-700 пікселів.
- Для ілюстрації статті візуальним рядом – графіки, малюнки, схеми, інфографіка – не вартує виходити за розміри 1000 пікселів в ширину. Корисний лайфхак – використовувати функцію – «натисніть, щоби збільшити зображення». Що роблять хороші контент-редактори, якщо автор намалював велику, складну схему, детальну інструкцію, наприклад на 3000 пікселів? Зберігаємо цей файл в форматі gif або pdf, загружаємо на сервер. В тілі статті створюємо міні-версію графіку, лінкуємо картинку посиланням на зображення оригінального розміру, дописуємо «жміть сюди, щоби збільшити». Якщо читачу буде цікаво, він відкриє детальне зображення в новій вкладці, якщо нецікаво, цей «масштабний» контент не буде загружати сторінку, але буде доступним.
- З карточками товарів в інтернет-магазинах все не так однозначно. Треба врахувати, що є фото-превью в стрічці товарів і є детальні зображення в карточці товару. Головна помилка девелоперів – використовувати одне фото для двох «ракурсів» шляхом масштабування. Насправді, це лінь. Логічніше для стрічки товарів створити окремі зображення попереднього перегляду. Достатній розмір для таких картинок – не більше 500 пікселів по ширині. Суть в тому, що відвідувачі інтернет-магазинів 90% свого часу листають загальну стрічку товарів в тій чи іншій категорії, і рідше клікають по карточці конкретного товару. Тому стрічка, на котрій можуть знаходитися десятки (навіть сотні) «превьюшок», повинна завантажуватися максимально швидко. Тепер щодо детальних зображень в кожній карточці. На окремій сторінці товару бажано витримувати розмір кожного фото до 1000 пікселів, якщо деталей в товарі небагато, або товар невеликого розміру, наприклад, іграшка. Якщо мова йде про демонстрацію одягу на моделях або меблі, мінімальний розмір зображення – 2000 пікселів, хоча покупці хочуть бачити не менше 3 000.
ІКОНКИ
Елементи маленького розміру, але буває, що сторінка усіяна ними, тому загрузка гальмує на секунду-другу. Як виправити таку незручність?
- Якщо ви добуваєте підходящі векторні іконки з фотостоків чи інших ресурсів, зберігайте ці компоненти в форматі SVG. Це хороший підхід, якщо на сторінці використовується до 10 одиниць іконок.
- Любителям прикрашати сторінку over 30 штук, рекомендується використовувати іконочний шрифт (підключити шрифтові іконки). Юзайте сервіси Font Avesome, Octicons, Glyphicons та подібні.
ВІДУО
Тут прогрес все придумав за нас – заводьте канал на YouTube і завантажуйте свої відосіки туди, на сайт вставляєте лише «шлях» – код. Заодно можна назбирати додатковий трафік. Якщо ж мова йде про короткі ролики – до хвилини часу, наприклад, відеодемонстрація одягу на моделі на 360 градусів, то надійніше такий контент тримати на власних серверах (ціліше будуть, а в чужому «монастирі» відео можуть і заблокувати).
МІНІФІКАЦІЯ КОДУ
Ви постаралися, написали прекрасний файл з css, js чи html-кодом, не поспішайте завантажувати рядочки в оригінальному вигляді, адже можна зменшити розмір такого файлу принаймні на 10-20%. Видаляємо всі пробіли, переноси рядків, коментарі, зайві таби, зберігаємо мініфіковану копію в окремий файлик. Вийшла «кучка маленька»? Не біда, пошуковому роботу байдуже, що читати.
ПЛАГІНИ ТА ІНШІ ЕЛЕМЕНТИ
Правило просте – чим менше, тим краще. Якщо можна обійтися без окремої кнопки або функції (наприклад, віртуального помічника, котрий вискакує на кожній сторінці, незалежно від потреби), то краще утриматися від подібного «декору». Тут треба поставити себе на місце користувача, ідеально – залучити маркетологів, щоби провести split-тестування.
ІНСТРУМЕНТИ, КОТРИМИ МОЖНА ПРОТЕСТУВАТИ ШВИДКІСТЬ ЗАГРУЗКИ САЙТУ
Як то кажуть, досконалості немає меж. Ви зробили все можливе, щоб «облегшити» сторінку? Тепер оцінюємо результати. В допомогу матьорому девелоперу рекомендуємо:
- Google Pagespeed Insights.
- GTmetrix.
- Вкладка Audit в браузері Chrome.
- PR-CY.
На цих сервісах можна перевірити Page Speed та отримати толкові рекомендації – що допрацювати. Вносимо зміни, насолоджуємся тим, що ваш сайт літає наче ракета!