Ошибки HTML-кода создают вагон
проблем: поисковики отказываются продвигать сайт, а пользователи грустно
закрывают вкладку браузера, потому что ничего не работает.
Задание 1. Проверить HTML-код сайта валидатором W3C
Как пользоваться валидатором
Валидатор — это сервис проверки валидности HTML,
который быстро находит ошибки в коде и помогает их исправить. Подобных
сервисов несколько, но разработчики часто используют официальный валидатор
W3C. В нём можно найти ошибки тремя способами: указать URL сайта,
загрузить HTML-документ или HTML-код.
Валидатор не сделает
сайт идеальным, но поможет избавиться от ошибок, которые мешают пользователям,
браузерам и поисковикам.
Что проверяет валидатор
Сервис проверяет синтаксис кода: например, верно ли
указаны тип документа и кодировка, нет ли в коде пропущенных элементов.
Также происходит проверка соответствию DTD (Document Type Definition) —
валидатор смотрит, соответствует ли код типу документа.
DTD — это инструкция для браузера, которая помогает
ему правильно отображать HTML-документ.
Как интерпретировать результат
Валидатор делит проблемные части кода на предупреждения и ошибки. Для удобства они выделены разными цветами, чтобы сразу было понятно, каким проблемам стоит уделить особое внимание.
Пример результатов проверки, который
наглядно показывает, что такое ошибка валидации. Предупреждения выделены
желтым, ошибки — красным. (Скриншот: validator.w3.org)
Предупреждения
Незначительные проблемы. Сайт, скорее всего, не
сломается, но всё равно не соответствует спецификациям W3C.
Это означает, что при прочих равных сайты конкурентов
будут лучше работать на разных устройствах и эффективнее продвигаться
в поисковых системах.
Ошибки
Серьезные проблемы. Есть риск, что сайт будет
отображаться некорректно, часть контента окажется скрытой или пользователь
вообще не сможет просматривать страницы.
Ошибки следует исправлять в первую очередь,
но хорошим тоном будет избавиться вообще от всех проблем: это поможет
сайту работать нормально.
Зеленая строка — то, что хочет увидеть
разработчик, когда проверяет качество кода. (Скриншот: validator.w3.org)
Задание 2. Проверить CSS-код валидатором W3C
Инструмент от W3C для проверки CSS, есть русский язык. Работает по такому
же принципу, анализирует стили на предмет ошибок и предупреждений. Первым идет
блок ошибок, предупреждения собраны ниже отдельно.
Проверка CSS
Задание 3. Ускорить загрузку страниц с помощью сервиса PageSpeed
После указания URL-адреса сайта и недолгой загрузке,
сервис укажет на слабые стороны в оптимизации сайта. По возможности
их нужно устранить.
Задание 4. Оптимизировать изображения на сайте
С графическим контентом нужно поработать так, чтобы в итоге добиться скорости загрузки на уровне до 2,5 секунды. Именно такой показатель Google считает быстрым.
Попробуйте 2 способа и зафиксируйте результат. В итоге вы выберите способ при котором будет наименьшая скорость загрузки страницы без потери качества изображений.
1 способ. Сжатие изображений через онлайн сервисы
- Compressor. Загружать можно картинки размером до 10 мегабайт, зато этот сервис абсолютно бесплатный. Позволяет сжимать файлы до 90%, не теряя при этом их качества. Поддерживаемые форматы: .jpg, .png;
- Kraken. Сервис, которые позволяет одновременно оптимизировать несколько картинок. Используя Kraken, вы можете сразу получить архив с сайта со сжатыми файлами, стоит только ввести URL в специальном поле;
- ImageOptim. Программное обеспечение для Mac. С его помощью в режиме онлайн уменьшают файлы в форматах .jpg, .svg, .png. Можно оптимизировать сразу несколько изображений. Если у вас Windows, то в качестве аналогов можно использовать FileOptimizer или pngquant;
- EWWW Optimizer. Бесплатно распространяемый плагин, поддерживающий форматы .jpg, .png, .gif. Может автоматически сжимать файлы во время загрузки на сайт. В этом плагине нет ограничений ни по весу, ни по количеству картинок, так как работает он на ваших серверах;
- Robin Image Optimizer. Плагин, сжимающий файлы в форматах .jpg и .png на 80% без ухудшения качества (непрофессионал не заметит никакой разницы с оригиналом). Умеет оптимизировать картинки по ходу загрузки;
- reSmush.it Image Optimizer. Этот плагин также в автоматическом режиме оптимизирует картинки во время загрузки, а также предлагает опцию массовой оптимизации для уже имеющихся на сайте файлов;
2 способ. Использование Webp формата
Этот формат впервые появился в 2010 году, а его создателем выступила сама Google. WebP прекрасен тем, что в отличие от .jpg позволяет делать оптимизацию изображений без потери качества на 70% эффективнее. Использование этого формата в среднем ускоряет загрузку сайта в 2 раза.
В этом вам помогут такие сервисы, как Image Online-Convert, Convertio или ILoveIMG.
Комментарии
Отправить комментарий