Оптимізація на сайті: як і для чого це робити

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

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

Наскільки важлива швидкість завантаження сайту?

Насамперед давайте визначимо, що я маю на увазі під «завантаження сайту». На мою думку, в даному контексті, «завантаженням сайту» варто називати не повне і 100% завантаження всього, що є на сторінці, а завантаження достатньої кількості контенту, щоб відвідувач міг без перешкод та дискомфорту почати взаємодіяти з сайтом. Чому я даю саме таке визначення – поясню згодом.

Є чимало різноманітних статистик та досліджень в сфері відвідуваності сайтів в залежності від їх швидкості завантаження. Середньо-статистично можна відзначити дві ключові межі: тривалість завантаження сайту до 5 секунд призведе до втрати, щонайменше, половини відвідувачів; тривалість завантаження сайту до 10 секунд призведе до втрати практично всіх відвідувачів сайту.

В наш час користувачі Інтернету звикли, що взаємодіяти з сайтом можна через 2-3 секунди. Здавалося б, секундою більше, секундою менше – невже це має вплив? Хоч уже й минуло трохи часу, та колись компанія Amazon порахувала, якщо їх сайт буде завантажуватися на 1 секунду довше – це може призвести до втрати 1,6 мільярди доларів в рік. Лише одна секунда – і такі наслідки. Гарна причина задуматися про оптимізацію, вірно?

Що впливає на швидкість завантаження сайту?

З свого досвіду можу виділити ряд проблем, з якими доводиться боротися, щоб оптимізувати сайт:

• не оптимізовані зображення;
• відео на сторінці;
• сторонні сервіси;
• шрифти;
• анімація при завантаженні.

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

Не оптимізовані зображення

Я не даремно зазначив зображення на сайті першим пунктом проблем з оптимізацією. Не оптимізовані зображення – це серйозна проблема, яка досить легко виправляється і впоратися з цим може навіть користувач, що не розбирається в розробці сайтів. Часто буває, що на етапі розробки все було з швидкістю добре, але під час експлуатації швидкість значно знизилася. Тут вже питання, в значній мірі, не до розробника сайту, а до модератора, який наповнює його контентом.

Із зображеннями є кілька проблем, перша – не виправдано велике розширення (ширина і висота). Часто при наповненні сайту контентом модератор додає зображення, не звертаючи увагу на їх розширення. Це призводить до того, що в блок шириною, наприклад, 1200 пікселів вставляють зображення шириною, іноді, й 5000 пікселів. Очевидно, що таке розширення зображення надлишкове і не те, що користі не приносить, а й навпаки – зайве навантажує трафік при завантаженні сторінки сайту, адже розширення зображення напряму впливає на його розмір (мегабайти).

Друга проблема із зображеннями – це розмір, ті самі мегабайти. Є різні формати зображень, на сайтах найчастіше зустрічаються такі: JPG, PNG, WEBP. Кожний формат має свої переваги й недоліки, якщо коротко:

• JPG – гарно оптимізується, але не має прозорості;
• PNG – має прозорість, але погано оптимізується;
• WEBP – має прозорість гарно оптимізується, але не підтримується браузером Safari.

Який формат зображення використовувати – обирайте зважаючи на те, де зображення буде використовуватися. Для пересічного модератора практично завжди вистачає формату JPG. Але кожне зображення треба оптимізувати і бажано без втрати якості. Проведімо експеримент, чи помітите Ви різницю в якості між зображенням справа і зліва?

Обидва фото мають формат JPG і однакове розширення. Зліва той файл, який я отримав з свого фотоапарата і він має розмір 2,57 мегабайти, справа – оптимізоване зображення і воно менше на 70%, всього 770 кілобайт. 70% економії трафіку і часу відвідувача.

А тепер уявімо, що на сторінці десяток-два не оптимізованих зображень – і не оптимізовані зображення стають серйозною проблемою.

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

Я не просто так на початку цього допису давав своє визначення «Швидкості завантаження сайту». Ціль розробника сайту – зробити так, щоб відвідувач почав взаємодію з сайтом якомога швидше. І тут в контексті десятка фотографій розкиданих по всій сторінці виникає запитання: а навіщо їх усі завантажувати відразу, якщо відвідувачеві нижні зображення знадобляться лише коли він до них долистає сторінку? Для рішення цієї проблеми є так зване «ліниве завантаження». По суті це функціонал сайту (який може бути реалізований в різний спосіб), який дозволяє не завантажувати зображення, доки воно не опиниться в полі зору відвідувача.

Отже, як вирішити питання з оптимізацією зображень на сайті?

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

Відео на сторінці

Зазвичай на сайт вбудовують відео з YouTube. Потрібно розуміти, що разом з блоком відео з YouTube також завантажуються стилі, скрипти і саме відео. Навіть одне відео впливає на швидкість, а якщо їх цілий ряд (наприклад слайдер з відеовідгуками) – це серйозна проблема. Та це не означає, що потрібно відмовитися від використання відео, потрібно лише його правильно використовувати. І тут теж знадобиться певний варіант «лінивого завантаження». Але на цей раз мова не про завантаження контенту коли він опиниться в полі зору відвідувача, а про завантаження відео, коли відвідувач клікне по ньому. Для цього варто на місце відео поставити прив’ю відео і додати скрипт, який би міняв прив’ю на код вставки YouTube при клікові по прив’ю. Для розробника сайту зробити такий функціонал не проблема, а на швидкості завантаження сторінки це помітно позначиться. Але потрібно зважати на доцільність, якщо відео є ключовим контентом сторінки і користувач практично відразу розпочинає взаємодію з ним – то немає потреби додавати «ліниве завантаження».

Сторонні сервіси

Це, можна сказати, що поле бою між різними фахівцями, що працюють над розробкою сайту і його просуванням в пошуку. Різноманітні сервіси від Google, чати, виринаючі контактні форми й купа інших різноманітних сторонніх сервісів. В більшості інструкцій до таких сервісів написано, що скрипт потрібно розмістити в межах тега HEAD на кожній сторінці. Я розумію, що для просування сайту важливо відстежувати різноманітну статистику і поведінку відвідувачів і спонукати їх до певних дій (придбати товар, підписатися на новини тощо), але ж ми сайт робимо, щоб ним було зручно користуватися, а що отримує відвідувач? А він змушений чекати доки завантажаться статистики і лічильники, які не те що йому не потрібні, він навіть їх не побачить, і чати, ніби першим ділом, що буде робити відвідувач – писати повідомлення. Потрібно розуміти, що кожний такий сервіс – це запит на сторонній сервер і отримання від нього відповіді, а іноді вона не миттєва. Все це витрачає час, час коли відвідувач вже повинен мати змогу взаємодіяти з сайтом.

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

Шрифти

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

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

Рішення проблем з шрифтами очевидне – не перевантажувати сайт шрифтами і дозволити відображення тексту до завантаження шрифту.

Анімація при завантаженні

Все рідше і рідше, але ще трапляються прелоадери, робота яких «зайняти чимось» відвідувача доки завантажується контент сайту. Але в наш час швидкість підключення до Інтернету достатня, щоб передати відвідувачеві весь необхідний контент для початку взаємодії з сайтом. Прелоадери – зло, яке потрібно винищити на всіх сайтах. Звісно, що є винятки – сервіси і сайти, які змушені витрачати значний час на завантаження. До прикладу та ж «гугл статистика» – там потрібно показати, що триває завантаження і сайт не підвис. Але знову ж, прелоадер має виграти секунду-дві часу, а не бути в ролі гарної анімації з сфери «дивіться як гарно крутиться пісочний годинник».

На завершення

Власне це всі основні проблеми, які мені зустрічалися в роботі. Як бачите, рішення прості і не замислуваті, але ефективні.

Потрібно оптимізувати швидкість Вашого сайту? Я надаю послуги з аудиту сайтів: мої контакти.

Яка собівартість сайту. Формування ціни Мільйони фахівців по всьому світі займаються розробкою сайтів і в кожного свої розцінки. То ж з чого формується ціна, та як розрахувати бюджет сайту?