Сегодня оптимизация страниц сайтов снова стала очень актуальна. И если на заре Интернета причиной для экономии трафика было медленное соединение обычного Интернета, то теперь «виновниками» стали многочисленные мобильные устройства, через которые все большее число пользователей ходят в Интернет.
На что обращают внимание разработчики:
- Графика. Оптимизируются картинки, анимация, оформление управляющих элементов и т.д.
- Как известно, скрипты – ресурсоемкая часть кода, а потому на оптимизацию JavaScript обращают особое внимание.
- Применение CSS. Разнообразные хитрости при использовании стилей.
Но почему-то практически все веб-мастера забывают о возможностях HTML кода, хотя именно он является основным web-языком. В результате HTML-страницы становятся все тяжелее, они включают тысячи строк кода, многие из которых на самом деле не нужны.
Основные советы и принципы:
- Код должен быть аккуратным. Используйте стандарты и удобный набор инструментов для того, чтобы поддерживать единое форматирование и структуру кода.
- Код должен быть чистым. Не забывайте во время работы об инструментах валидации кода.
- Изучайте язык и его возможности. Применяйте семантичную разметку.
- Разделяйте ответственности правильно. HTML должен применяться для задания структуры страниц, а не для внешнего отображения.
- Обеспечивайте доступность страницы в разных условиях. Применяйте ARIA атрибуты, а также возможности резервного содержимого.
- Тестируйте свою работу. Всегда проверяйте качество отображения сайта и его работу на разных экранах и на разных устройствах.
HTML, CSS и JavaScript: что, где и как?
Очень важно помнить, что HTML – это язык разметки, предназначенный для создания структуры и добавления содержания. Не стоит его применять для выбора стиля отображения. Если вам нужно сделать заголовок «больше» или создать дополнительный отступ для блока текста, используйте правила CSS.
Если вы не задали собственную таблицу стилей, то элементы HTML по умолчанию будут отображаться так, как это задано в конкретном браузере. Internet Explorer, Opera, Chrome, Firefox и другие браузеры имеют свои таблицы стилей.
Основные принципы работы с HTML, CSS и JavaScript:
- HTML используется для структуры, CSS – для задания внешнего вида элементов, JavaScript – для поведения.
- Первым применяется HTML, затем описываются стили CSS, и только после этого при необходимости добавляется JavaScript.
- Код CSS и JavaScript держите в отдельных файлах! Не объединяйте никогда их с HTML. Таким образом, у вас появится возможность кэширования в браузере, а отладка станет удобнее и проще.
Грамотная структура документа
Наиболее понятный, удобный и экономичный сегодня тип документа – это HTML5. Пример структуры, которой нужно при этом придерживаться:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Recipes: pancake</title> </head> <body> <h1>Pancake </h1> <p>Pancake is good!</p> </body> </html> |
Все ссылки на CSS файлы размещайте вверху страницы в элементах блока head:
|
1 2 3 4 5 |
<head> <title>My pancake recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head> |
Благодаря такому подходу браузер получит информацию о стилях до того, как начнется парсинг HTML.
Переходим к JavaScript. Его лучше всего подключать в нижней части кода перед закрывающим тегом </body>. Так вы сможете ускорить загрузку страницы, так как еще до загрузки JavaScript браузер сможет отобразить практически все элементы. Кроме того, такой подход позволит JavaScript точно обращаться к нужным вам элементам страницы, так как все они уже будут загружены.
|
1 2 3 4 5 |
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body> |
Все обработчики событий следует добавлять в файлы с JavaScript. Это поможет вам избежать многих ошибок и поддерживать код без особых сложностей.
Валидация
Любые современные браузеры умеют отображать невалидный HTML-код, существуют даже стандартизированные правила отображения невалидного кода. Такой подход позволил вебу активнее развиваться, но разработчики по самым разным причинам стали забывать о валидации.
И все же, валидный HTML – это очень важно. Он быстрее загружается, требует меньше ресурсов для парсинга, удобней в работе. Использование невалидного кода часто мешает созданию качественной адаптивной верстки.
Особенно важна валидация кода при работе с шаблонами: то, что будет красиво выглядеть и хорошо работать на отдельном фрагменте кода, может некорректно сочетаться с другими фрагментами и шаблонами.
Для того чтобы писать качественный валидный код, достаточно просто выбрать удобный редактор (среду) для разработки и включить там проверку валидности кода. Также проверку на валидность нужно подключить в процесс сборки, например, при помощи инструмента HTMLHint для Grunt.
Используйте HTML5
Убедитесь в корректной иерархии HTML-кода: все элементы должны быть правильно вложены друг в друга, все теги должны быть закрыты. В процессе отладки имеет смысл добавлять комментарии к сложным фрагментам кода, особенно важно применение комментариев при создании шаблонов.
В HTML5 для закрывающих элементов списка теги не являются обязательными, и некоторые веб-мастера их предпочитают не ставить. Избегайте этой ошибки! Убедитесь, что вы закрыли каждый элемент вашего списка.
Также обязательно закрывайте теги элементов video и audio. Они не являются «самозакрывающимися»:
|
1 2 3 4 5 6 |
<!-- неверно: может вызвать проблемы отображения --> <video src="foo.webm" /> <!-- так лучше --> <video src="foo.webm"> <p>Video element not supported.</p> </video> |
С другой стороны, в некоторых местах можно наоборот избавиться от лишнего кода. Например, добавлять закрывающий «слеш» к таким элементам, как <img> или <link>, не обязательно. В логических атрибутах не нужны значения «true», они установлены по умолчанию. Также нет нужды указывать атрибут type для CSS и JavaScript, он также определяется автоматически.
Семантическая разметка
Применяйте семантическую разметку. Такой код становится более осмысленным, его проще читать, так как названия и атрибуты элемента описывают роль его содержимого.
На любой странице нужно использовать:
- Теги <h1>, <h2>, <h3> и т.д. для заголовков и подзаголовков.
- Теги <ul> или <ol> для создания списков.
- Теги <header>, <footer>, <nav> и <aside> для структурирования страницы (задают область «шапки», «подвала» и т.д.).
- В тексте применяйте тег <p>, не стоит использовать разметку HTML5 или <div> для форматирования текстового содержимого. Используйте теги по их назначению.
- Применяйте <em> и <strong> вместо <i> and <b>. Вариант <em> и <strong> добавляет не только стиль, но и смысл.
- Не смешивайте элементы и текст внутри другого элемента, это часто приводит к ошибкам.
- Избегайте тега <br> при форматировании текста. Этот тег применяют достаточно редко, только при необходимости избежать стандартного отступа.
- Не используйте <hr> для создания горизонтальных линий. Они создаются при помощи CSS border-bottom.
- Избегайте ненужных дивов: div считается последним средством, которое применяют тогда, когда не подходит ни один другой элемент. Стилизацию лучше проводить при помощи display: block.
Самое главное при создании качественного высокопроизводительного HTML – это строгое следование правилу: HTML – для структуры, CSS – для стилей, JavaScript – для действий. В случае соблюдения изложенных выше правил и рекомендаций, ваша работа с кодом будет намного проще, а сайт станет легче и быстрее.
