Оптимизация для HTML должна привести код в аккуратный вид, максимально сокращая размер страницы, благодаря чему будет уменьшено время на ее загрузку.
Проверьте код на содержание тегов. Обязательно присутствие тега title, текст разбивается на абзацы p, не должно быть больше одного h1, никаких усилений типа strong для любых заголовков. Тогда разметка будет считаться правильной.
Объединение всех стилей в один общий файл снизит количество обращений к странице во время загрузки. Полезно для пользователей с медленной скоростью интернет-соединения.
Как и в случае с HTML, убираем из кода все дублирующиеся друг за другом пробелы и строки, объединив их вместе.
Комментарии тоже занимают пространство, прибавляя количество лишних строк.
Если можно сократить написание атрибутов и элементов, то обязательно сокращайте. Часть из них может спокойно уместиться в одной строке и в одном атрибуте.
Например, один background объединяет в себе background-color, background-image, background-repeat и background-position, поэтому не за чем растягивать код на 4 строки, если можно все уместить в одну.
То же самое касается font, border, margin и так далее.
Помимо классической блочной модели и выравнивания элементов с помощью float, padding и margin, существуют новые технологии, типа Flexbox и CSS Grid. Их использование значительно сократит код и сэкономит время его на написание.
Выносим файл стилей перед скриптами. CSS прогружается легче, чем JavaScript, так что такой порядок уравновесит скачивание и отображение файлов.
Тяжелые изображения легко заменяются эффектами CSS. Градиенты в CSS могут быть линейными, повторяющимися и радиальными, любого цвета, с любым углом градиента.
Плюсы SVG в том, что этот формат масштабируется в любой размер, не теряя качество изображения. Заменяет необходимость загружать на сайт несколько версий одного изображения.
Слишком большое количество этого правила в CSS заставляет браузер тратить время на проверку кода. По возможности, лучше не использовать его вообще.
Сократим нагрузку путем использования библиотеки Lazyload, которая позволяет загружать только те изображения, которые расположены в пределах части открытого окна браузера на момент просмотра.
Все изображения, использованные для оформления сайта, можно объединить в одно целое – спрайт. Дальше потребуется лишь указать точное местоположение изображения на спрайте в значении background-position.
Существуют специальные сервисы, создающие спрайты с указанием положения каждого элемента.
CSS оптимизация схожа с HTML по принципу действий. Тут так же нужно уменьшить размер кода и правильно расставить всё по своим местам. Помимо этого приведем в порядок картинки.
В теге head должны размещаться только те скрипты и стили, которые используются в загрузке первого экрана. Все оставшееся помещается в конце страницы.
Можно сделать предварительное разрешение DNS, указав браузеру, где могут быть расположены внешние ресурсы страницы.
Задавая атрибутам href и src относительные URL вместо абсолютных с указанием домена, получим сокращенный код.
Работа с JavaScript пойдет по тому же принципу, как и в предыдущих типах оптимизации.
Смысл тот же, как и с CSS – поместив в один файл все скрипты, снизим количество запросов к странице при загрузке.
Скрипты можно уменьшить, зачистив их от ненужных символов и сократив переменные. Для этого существуют компрессоры кода, которые существуют как в режиме онлайн-сервиса, так и в виде отдельного софта.
Объединив все методики вместе, получаем правильный красивый код, который не тормозит загрузку страниц сайта и делает его посещение удобным для пользователей. За услугой по оптимизации Вы можете обратиться ко мне через этот сайт, просто нажав на кнопку Оставить заявку на услугу.
