Що JavaScript робить на звичайному сайті
Сторінку сайту можна уявити як три шари: HTML задає вміст, CSS — зовнішній вигляд, а JavaScript — поведінку. Без нього сайт залишається набором статичних сторінок, де кожна дія вимагає перезавантаження.
Типові задачі JavaScript на корпоративних сайтах і в магазинах:
- фільтри й сортування каталогу без перезавантаження сторінки;
- кошик, що оновлюється одразу після додавання товару;
- калькулятори вартості, конструктори, вибір кольору чи розміру з оновленням фото й ціни;
- перевірка форм, маски телефонів, підказки під час введення;
- відправлення подій в аналітику: що людина натиснула, яку форму почала заповнювати.
Чистий JavaScript, jQuery чи фреймворк
Чистий JavaScript сьогодні вміє все, заради чого колись підключали jQuery: шукати елементи на сторінці, обробляти натискання, надсилати запити. Для інтерактивних блоків на сайті це найлегший і найшвидший варіант.
jQuery — бібліотека, яка багато років спрощувала роботу з JavaScript і досі працює на величезній кількості сайтів, зокрема в темах WordPress і шаблонах OpenCart. Для нових проєктів ми її не радимо, але й переписувати робочий код лише через «застарілість» не поспішаємо.
Фреймворки на кшталт React чи Vue потрібні, коли інтерфейс складний і має багато взаємозалежних станів. Для слайдера й форми зворотного зв’язку вони надмірні.
Переваги JavaScript без важких бібліотек
- Швидкість. Браузер завантажує й виконує лише потрібний код, тож сторінка стає інтерактивною раніше.
- Сумісність з будь-якою CMS. Скрипт можна вбудувати в шаблон WordPress, OpenCart чи самописного сайту без зміни архітектури.
- Менше залежностей. Немає ризику, що бібліотека перестане оновлюватися або конфліктуватиме з іншими.
- Простота підтримки. Код зрозумілий будь-якому фронтенд-розробнику без вивчення окремого інструменту.
Обмеження й типові проблеми
- Складні інтерфейси важко тримати в порядку. Коли на сторінці десятки пов’язаних елементів, код без фреймворку перетворюється на заплутаний клубок обробників.
- Старі версії jQuery і плагінів мають вразливості. Частина популярних плагінів давно не оновлюється, і з часом це стає ризиком для безпеки сайту.
- Конфлікти скриптів. На старих сайтах часто підключено кілька версій jQuery одночасно або плагіни, що перезаписують поведінку один одного.
- Помилки «мовчать». Зламаний скрипт може непомітно вимкнути форму заявки чи кнопку купівлі, і власник дізнається про це з падіння продажів.
Коли варто перейти на інші інструменти
Якщо сайт поступово перетворюється на сервіс — з кабінетом, складними формами, великою кількістю даних — звичайного JavaScript стає замало. Тоді нові частини краще робити на фреймворку, а для коду, який розростається й над яким працює кілька розробників, варто розглянути TypeScript: він допомагає ловити помилки ще до запуску.
Як ми працюємо зі старим кодом на jQuery
Сайт на jQuery — не вирок. Ми не пропонуємо переписати все з нуля, а діємо поетапно:
- спершу оновлюємо jQuery до підтримуваної версії й прибираємо дублікати бібліотеки;
- замінюємо плагіни з відомими вразливостями або ті, що давно не оновлювалися;
- виправляємо помилки, що заважають продажам і заявкам;
- частини, які найчастіше змінюються, переписуємо на чистий JavaScript;
- решту залишаємо, доки вона стабільно працює і не заважає.
Такий підхід дешевший за повне переписування і не створює ризику зламати сайт одним великим оновленням.
Сторонні скрипти та швидкість сторінок
Часто сайт гальмує не через власний код, а через сторонні сервіси: онлайн-чат, кілька рекламних пікселів, віджет відгуків, карти, лічильники. Кожен з них завантажує власний JavaScript, і разом вони можуть важити більше, ніж сам сайт.
Ми перевіряємо, які сервіси ще використовуються, прибираємо зайві, а решту підключаємо відкладено — після того, як відвідувач побачив основний вміст. Події для аналітики налаштовуємо через Google Tag Manager, щоб маркетологи могли додавати їх без втручання в код. Технічну частину збору даних детальніше описуємо на сторінці налаштування аналітики.
Безпека й робота в різних браузерах
Код у браузері бачить кожен відвідувач, тому все важливе — ціни, знижки, права доступу — ми завжди перевіряємо на сервері, а не лише в JavaScript. Інакше хитрий користувач може змінити суму замовлення прямо в браузері.
Ще кілька правил, яких дотримуємося:
- не вставляємо на сторінку текст, введений користувачем, без очищення, щоб через поле форми не можна було впровадити чужий скрипт;
- не зберігаємо в коді ключі доступу до платних сервісів;
- перевіряємо, як поводиться сторінка, якщо скрипт не завантажився: основний вміст і форма заявки мають залишатися доступними;
- тестуємо в браузерах, якими реально користуються ваші відвідувачі, за даними аналітики.
Що впливає на вартість і терміни
- Обсяг і складність інтерактиву: один калькулятор чи цілий конструктор з десятками параметрів.
- Стан наявного коду: кількість скриптів і плагінів, версії jQuery, наявність конфліктів.
- Зв’язок з сервером: чи потрібно отримувати й надсилати дані, чи є для цього готові адреси на бекенді.
- Вимоги до підтримки браузерів і пристроїв.
- Кількість сторонніх сервісів, які треба інтегрувати чи оптимізувати.
Невеликі задачі оцінюємо одразу після опису, для старих сайтів спершу робимо короткий аудит скриптів.
Часті запитання
Чи потрібно повністю відмовлятися від jQuery? Не обов’язково. Якщо бібліотека оновлена, без вразливих плагінів і не заважає швидкості, її можна залишити й замінювати поступово.
Чому в нас не працює форма, хоча ніхто нічого не змінював? Найчастіше причина в оновленні CMS, плагіна чи стороннього сервісу, після якого один зі скриптів перестав працювати. Шукаємо помилки в консолі браузера й виправляємо причину.
Чи можна додати калькулятор або конфігуратор на наявний сайт? Так. Робимо його окремим блоком, який вбудовується в сторінку і не впливає на решту сайту.
Чи вплине оптимізація скриптів на позиції в пошуку? Швидкість сторінок — один із сигналів, які враховують пошукові системи, і вона напряму впливає на поведінку відвідувачів. Але позиції залежать і від багатьох інших факторів, тому окремо від контенту й структури чудес не буде.
Ви підтримуєте сайти, зроблені іншими розробниками? Так, у межах технічної підтримки: виправляємо помилки, оновлюємо бібліотеки, додаємо нові функції.
Чому Promodex
Від 2015 року через руки команди Promodex пройшло 750+ проєктів, тож ми бачили сайти в найрізноманітнішому стані — від свіжих до тих, що роками обростали скриптами. У команді Promodex 30+ людей — фронтенд- і бекенд-розробники, маркетологи, SEO-спеціалісти, — і ми не залучаємо субпідрядників, тому зміни в коді узгоджуються з аналітикою та пошуком. Ми прямо кажемо, що варто переписати, а що краще залишити, і після запуску продовжуємо доглядати за сайтом.
