Що таке кросбраузерність і як цього домогтися

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

Швидкість завантаження сайту залежить від безлічі факторів:

• кількість і вага контенту на сторінці – особливо сильно впливають картинки з високою роздільною здатністю, вбудовані відеозаписи, динамічні елементи;
• тип і можливості движка сайту, кількість встановлених плагінів, розширень і скриптів;
• технічна складність сайту, якість верстки;
• продуктивність комп'ютера, який відправляє запит серверу, отримує від нього відповідь і завантажує у себе сторінку веб-сайту;
• швидкість підключення до мережі Інтернет;
• тип браузера – на якому він рушії працює, як добре оптимізовано його код, які плагіни підтримує тощо;
• продуктивність самого сервера.

Впливає, зокрема, і тип хостингу. Наприклад, виділені сервери і VPS, які не відчувають перевантажень, здатні забезпечити вищу швидкість завантаження сайту – просто за рахунок того, що їм вистачає апаратних ресурсів для обробки всіх вхідних запитів. Тому важливо стежити, щоб навіть за пікових навантажень на сервері залишалося 20-30% вільних потужностей у плані процесора й оперативної пам'яті.

Що таке кросбраузерність сайту

Під цим поняттям мають на увазі коректність візуального відображення сайту на будь-яких браузерах. Реалізується за допомогою верстки HTML і CSS, а також низки додаткових інструментів або плагінів. Щоб сайт коректно відображався на всіх популярних браузерах, таких як Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge і Vivaldi, розробник повинен написати кілька "хаків" – рукописного коду, селекторів або правил, які розуміє конкретний браузер.

Найпростіше реалізується кросбраузерність для браузерів на базі одного движка - наприклад, Chromium. У цьому разі "хаки" потребуватимуть мінімальної адаптації, що заощадить час і сили. Проблема полягає в кількості наявних браузерів, і для кожного з них писати окремий "хак" не завжди можливо, адже це дорогий і трудомісткий процес. Тому часто розробники застосовують хитрість – вони просто вручну працюють із тими елементами, які після верстки HTML-коду некоректно відображаються на тих чи інших браузерах.

Інструменти для перевірки кросбраузерності

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

CrossBrowserTesting

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

Окремо варто відзначити наявність функції "Живого тестування", коли за допомогою онлайн-сервісу ви зможете наочно оцінити, який вигляд матиме сайт на тому чи іншому браузері. Тестування саме що живе – тобто ви можете перевірити роботу всіх інтерактивних елементів, гіперпосилань, форм зворотного зв'язку.

CrossBrowserTesting – один із найкращих інструментів, але в нього є недолік у вигляді високої вартості. Утім, перед підпискою можна спробувати 14-денний тестовий період без необхідності залишати дані своєї кредитної картки.

Browsershots

Інструмент, що дає змогу подивитися скріншоти візуального відображення сайту, зняті з кількох десятків браузерів. На сьогодні платформа підтримує понад 60 браузерів різних версій. Досить ввести в спеціальне поле URL сайту і вибрати в списку знизу всі браузери, які вас цікавлять. За необхідності можна також вказати певну роздільну здатність дисплея і налаштувати інші візуальні параметри.

"Живого" тестування тут немає, тож ні про яку інтерактивність не йдеться. Але оцінити суто візуальне відображення можна – подивитися, чи коректно розташовано логотип, рекламні банери, списки меню і все таке інше.

LambdaTest

Дає змогу протестувати кросбраузерність сайту на більш ніж 2000 різних віртуальних пристроїв з усіма популярними браузерами та операційними системами. Проєкт працює в хмарі, тож жодне ПЗ не потрібно встановлювати на комп'ютер – це підвищує безпеку і позбавляє від необхідності захаращувати комп'ютер тимчасовим софтом. Сервіс якісно взаємодіє з інтегрованими скриптами Selenium, що є величезним плюсом.

LambdaTest дає змогу проводити три варіанти тестування:

• у реальному часі;
• автоматичне тестування;
• тестування мобільних застосунків у хмарній інфраструктурі на предмет сумісності з усіма актуальними смартфонами та іншими пристроями.

Для тестування кросбраузерності підходять перші два режими. Ви можете вибрати тип браузера, його версію, потім вказати операційну систему і вибрати роздільну здатність екрана. Зазначений в адресному рядку сайт буде протестовано за кілька секунд, і ви зможете побачити результат наочно – з можливістю взаємодіяти з усіма інтерактивними елементами на екрані.

За фактом сервіс безкоштовний, але розширені можливості доступні тільки для передплатників. Сама підписка коштує набагато дешевше, ніж CrossBrowserTesting – за LambdaTest потрібно заплатити лише 15 доларів на місяць, якщо для ваших завдань достатньо 1 доступного потоку тестування. Якщо потрібно більше – без проблем, тільки кожна нова "паралель" обійдеться ще в 15 доларів. Таким чином, ви можете в режимі реального часу дивитися до 25 сайтів і браузерів у повністю інтерактивному форматі.

Оптимізація кросбраузерності для веб-сайту

Верстальники HTML домагаються коректного відображення сайту різними способами, і ось найпопулярніші з них:

1. Використання префіксів до назв CSS-властивостей для конкретних браузерів. Деякі властивості пишуться для конкретного браузера, і з метою оптимізації їх не вносять до стандартного списку властивостей, тому потрібно прописувати вручну.
2. CSS-хаки. З їхньою допомогою ми прописуємо спеціальні властивості для сайту, які розумітимуть тільки певні браузери.
3. Поділ стилів. Раніше використовувалися для підтримки Internet Explorer. Оскільки зараз браузер "мертвий", метод втратив актуальність.
4. Використання при верстці сайту універсальних елементів, які однаково добре функціонують і коректно відображаються на будь-яких браузерах. Такий підхід гарний ще й тим, що позбавляє необхідності масштабувати обсяги коду – як наслідок, сайт буде менш громіздким і швидшим.

При створенні сайту на базі популярних CMS, таких як WordPress, проблем із реалізацією кросбраузерності буде найменше, тому що про це заздалегідь подбали розробники движка.

Підбиття підсумків

Якщо залишилися запитання, звертайтеся до наших фахівців за вказаними на сайті номерами. Ми допоможемо з вибором найшвидшого VPS для вашого сайту, а також відповімо на будь-які інші запитання профільного характеру.