Готуй фронтенд правильно: 6 лайфхаков по оптимізації сайту

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

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

Преамбула. Філософське питання №1. Які браузери мені потрібно підтримувати?

З цього питання (як і по кожному предмету холивара) існує цілий ряд точок зору. Наведемо деякі з них:

  • Потрібно підтримувати всі існуючі браузери. Потрібно розробляти сайти так, щоб вони коректно відображалися навіть на нікому не відомих браузерах з китайської провінції, якими користується їх розробник, його мама, тато і ще пару друзів.
  • Потрібно розробляти сайти у відповідності зі стандартами. Звірі ніби IE8 йдуть лісом. Та хто в здоровому глузді користується IE8 в 2016? Та й взагалі, якщо хлопці з Microsoft забили на стандарти десять років тому, чому це має хвилювати мене в 2016?
  • Пишемо милиці для IE8 (ну і ще на всякий випадок протестуємо сайт на Safari і теж напишемо пару милиць), для всіх інших браузерів за замовчуванням припускаємо, що вони коректно підтримують стандарт.
  • В якості аргументу в подібній суперечці, часто наводиться статистика поширеності браузерів від того чи іншого ресурсу. «Дивіться, браузер (вставити пропущене) використовує лише 1% людей», «У тебе неправильна статистика, дивись тут (вставити посилання на дійсно заслуговує поваги ресурс)», «А що якщо у твого ресурсу мільйонна відвідуваність? Адже 1% – це 10 000 користувачів!». І спорів сім немає числа.

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

    Ви розробляєте сайт, агрегатор або блог ком’юніті для IT-фахівців? Тоді підтримка старих браузерів буде марною тратою часу (заради ввічливості, все ж варто потурбуватися приємною «заглушкою» з пропозицією оновити браузер).

    Ви розробляєте сайт візитку для компанії, що поставляє металопрокат роздрібним продавцям по всій Росії? Тоді слід потурбуватися адекватним відображенням сайту в IE8 і старше плюс всі сучасні браузери (автор даного поста, до речі, одного разу працював в компанії, системний адміністратор якої був переконаний, що використання всіма співробітниками Internet Explorer a значно сприяє безпеці внутрішньокорпоративної мережі).

    У будь-якому випадку, веб-розробнику слід мати хоча б загальне уявлення про те, що працює, а що не працює на тих чи інших браузерах. Адаптуючи улюблений шаблон для DLE (вже не кажучи про розробку власного) варто уважно вивчити шапку в шаблоні main.tpl, а також, хоча б мигцем, продивитися CSS.

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

    Порада №1. Використання умовних коментарів для IE.

    Щоб полегшити розробникам написання милиць, старі браузери IE вміють розуміти спеціальну конструкцію типу:

    HTML
    В даному прикладі, IE віком до 8 включно відображає HTML код укладений між і . У цьому коді ми можемо підключити спеціально для них окремий css або jаvascript файл. Використання такої конструкції вкрай зручно: адже всі інші браузери будуть вважати наші милиці простим коментарем. Ну, втім, ви напевно про це все знаєте. З повним переліком умов і їх синтаксисом можна ознайомитися тут: http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii

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