#1 Написать действительный и читаемый DOM

Первый может показаться несколько очевидным, но есть пара вещей, о которых я хотел бы упомянуть здесь, поскольку я часто сталкиваюсь с такими проблемами:

  • Сначала пишите в нижнем регистре. Часто я вижу базовую структуру, написанную заглавными буквами, например, <HTML> или <BODY> или, что еще хуже, весь HTML. Каждый тег должен быть в нижнем регистре, поэтому не используйте заглавные буквы в тегах HTML.
  • Отступ является ключом к удобочитаемости. Используй это. В противном случае ваш документ будет выглядеть плоским и все в нем будет выглядеть загроможденным. Повышение читабельности также означает, что это сокращает время разработки.
  • Закрытие самозакрывающихся тегов когда-то было обязательным, но с HTML5 это не обязательно и зависит только от разработчика. Либо используйте его на всех тегах, либо не используйте его вообще. Ключ здесь является последовательным. И, конечно же, не забудьте закрыть обычные теги.
  • Избегайте чрезмерного использования комментариев. Если у вас не установлена система сборки или вы не используете движок шаблонов, они действительно могут добавить и увеличить вес вашего html-файла, что замедляет вашу начальную скорость загрузки страницы и может заставить ваших пользователей ждать и, в конечном итоге, заставлять их уходить.
  • Организация DOM: всегда учитывайте, нужен ли вам дополнительный элемент div или дополнительный элемент, попробуйте создать только абсолютно необходимые элементы и разделите только большие части своей страницы не с элементами div, а с семантическими элементами html. То же самое относится и к другому месту; Если вы можете, всегда используйте html5 семантические элементы, поскольку это помогает поисковым системам знать, какая часть важна на вашей странице, а какая нет. Помните, всегда спрашивайте себя, действительно ли вам нужен этот дополнительный div, избавьтесь от лишних вещей.

#2 Не используйте встроенные стили и скрипты

В противном случае ваш документ быстро станет загроможденным и нечитаемым. Всегда используйте внешние таблицы стилей. Также старайтесь избегать использования операторов импорта в ваших CSS-файлах, так как это вызывает дополнительный запрос к серверу.

Вам также следует объединить их вместе, чтобы уменьшить количество запросов, или в случае огромных размеров пакетов вы можете воспользоваться разбиением домена и разделить их на 2–4 более мелких фрагмента.

То же самое касается встроенного JavaScript, как и встроенного CSS. Помимо проблем с читабельностью, это сделает ваш документ тяжелее и сложнее в обслуживании.

#3 Встроенный критический CSS

Мы только что обсудили, почему вы не должны указывать свой CSS, теперь давайте обсудим, почему вы должны; Рассмотрите возможность размещения критических CSS на вершине. Таким образом, пользователи смогут быстрее увидеть первую часть вашей страницы. Только встроенный критический CSS и ничего более

Критический css — это минимальный набор css, необходимый для отображения верхней части вашей страницы, которую пользователь видит первым при входе на ваш сайт.

Также имейте в виду, что порядок тегов ссылок может переписывать правила, поэтому размещайте их осторожно. Если у вас есть отдельный файл для сброса или сторонних библиотек, поместите их сначала, а затем остальные.

#4 Поместите теги скрипта внизу

Поместите теги сценария внизу документа. Официально теги сценария находятся внутри заголовка, но если мы разместим их в нижней части документа, перед закрывающим тегом тела, мы можем отложить их загрузку и разрешить первой загрузке нашего документа в dom показать его пользователю. а затем запросить сценарии.

Это работает так, потому что браузер интерпретирует ваш документ сверху вниз, строка за строкой. Когда он попадает в голову и сталкивается с тегом скрипта, он запускает запрос к серверу, чтобы получить файл. Если он огромный, он продолжит загружаться, и пользователь увидит только пустую страницу, потому что он все еще загружает голову, поэтому переместите их вниз. Таким образом, все содержимое тела будет загружено до того, как мы загрузим содержимое тега script, поэтому мы можем заставить наших пользователей поверить, что наша страница чертовски быстро загружается. Вы также можете добавить тег defer в теги сценария, чтобы убедиться, что HTML-файл загружается первым.

Чтобы получить представление о том, что делает атрибут defer, взгляните на следующее сравнение:

Differences between normal, async and defer script tags

Читат также HTML: недооцененные теги

#5 Позаботьтесь о доступности

Знаете ли вы, что, по данным WHO, 15% населения мира живет с какой-то инвалидностью? Это более 1 миллиарда человек, которые потенциально могут иметь проблемы с использованием вашего сайта. В настоящее время у нас так много интерактивности на наших сайтах, что доступность легко сделать хитом. Потратьте некоторое время, чтобы украсить свои сложные элементы пользовательского интерфейса некоторыми атрибутами aria, чтобы вернуть поддержку вспомогательных технологий и охватить более широкую аудиторию.

#6 Используйте alt теги для изображений

Тег alt указывает альтернативный текст для изображения, поэтому в случае, если он не может быть отображен по какой-либо причине, этот текст будет показан вместо. Поисковые системы не любят, когда вы пропускаете alt-теги для изображений, и в результате могут ранжировать вашу страницу.

#7 один h1 на страницу

Используйте только один h1 на страницу, поместите туда самый важный текст, который описывает содержание вашей страницы, например, сообщение в блоге или заголовок статьи. Использование нескольких тегов h1 на странице не обязательно является хорошей идеей и не рекомендуется, потому что это может повредить результатам вашей поисковой системы. Это помогает поисковым системам правильно проиндексировать ваш сайт. Также это определено в спецификациях W3C, и содержание вашей страницы должно быть описано в любом случае одним тегом. Так что держите его до одного h1 на страницу.

#8 Используйте заголовок и метатеги правильно

Используйте заголовок для своей страницы и правильные, описательные метатеги. Они подобраны вашим местным поисковиком и использованы для индексации вашего сайта, поэтому помогите ему, предоставив ему эту полезную информацию. Всегда используйте мета-тег viewport, чтобы ваш сайт отображался в соответствии с размером экрана устройства. Также рассмотрите возможность использования тегов с открытым графиком, чтобы превратить ссылки на ваш сайт в богатый контент на платформах социальных сетей.

#9: Сжать

Когда вы закончите со всем и будете готовы оживить свой сайт, сожмите его. Вы можете использовать сторонние библиотеки, специальные программы или инструменты, называемые инструментами сборки, или даже онлайн-приложения. Это сделает ваш документ меньше, что приведет к более быстрой загрузке страницы. Чтобы продвинуться дальше, включите сжатие brotli или gzip на стороне сервера. Это может оказать огромное влияние на скорость страницы.

#10 Проверьте ваш HTML

И последнее, но не менее важное, всегда проверяйте ваш HTML. Валидаторы могут обнаруживать дефекты или неправильный код, чтобы вы могли их устранить. Вы можете использовать валидатор w3c, например, вы можете проверить свой сайт по URL, прежде чем начать работу, загрузив его, или вы можете также подтвердить путем прямого ввода.
Еще лучше, если вы можете установить линтер, который автоматически проверяет наличие таких проблем, прежде чем совершать код.
Выполнение этих 10 простых шагов поможет вам активизировать html-игру и повысить рейтинг своего сайта, что приведет к увеличению трафика и ускорению процесса оптимизации, что приведет к большему взаимодействию с пользователем. В конце концов, это не только предоставит вам больше посетителей, но и больше счастливых посетителей, и это самое главное.

About the Author

Ergashev Lazizbek

Добрый день, дорогие мои читатели, позвольте мне рассказать вам немного о себе. Я Лазизбек Эргашев, я веб-разработчик из Узбекистана. В основном я использую laravel/php для бэкэнда и vuejs/javascript для фронтэнда. Основная цель моего блога - поделиться с вами своим опытом и знаниями.

View All Articles