Наверняка, вы часто сталкивались с ситуацией, когда нужный вам сайт грузился настолько долго, что в итоге вы попросту уходили за искомой информацией на другой ресурс? Эта ситуация довольно распространена, и если бы вопрос ожидания касался бы только степени терпения пользователей, всё было бы слишком просто. Дело в том, что поисковые системы указывают скорость загрузки в качестве одного из факторов, влияющих на ранжирование. Таким образом, ресурсы, у которых эта скорость недостаточно высокая, имеют все шансы потери позиций в выдаче.
Наверняка, вы часто сталкивались с ситуацией, когда нужный вам сайт грузился настолько долго, что в итоге вы попросту уходили за искомой информацией на другой ресурс? Эта ситуация довольно распространена, и если бы вопрос ожидания касался бы только степени терпения пользователей, всё было бы слишком просто.
Дело в том, что поисковые системы указывают скорость загрузки в качестве одного из факторов, влияющих на ранжирование. Таким образом, ресурсы, у которых эта скорость недостаточно высокая, имеют все шансы потери позиций в выдаче.
В этой статье мы подробно рассмотрим способы, которые помогут улучшить работу и скорость загрузки вашего ресурса и обозначим, как проверить сайт на ошибки в коде.
Проверка HTML
Что такое оптимизированный код HTML для SEO? Это код, который не содержит в себе ошибок, лишних элементов форматирования, тегов и другого «мусора». Оптимизация кода сайта может занять у вас достаточно много времени, но результат стоит того.
Как проверить html код на ошибки – существует ряд сервисов, позволяющих проверить валидность кода вашего сайта онлайн. Сайты, содержащие невалидный код, могут некорректно отображаться в разных версиях браузеров, что напрямую влияет на показатель отказов.
Наиболее удобный и распространенные сервисы проверки html кода – validator.w3.org, ошибок css – jigsaw.w3.org.
Просканировав сайт, валидаторы определяют соответствие текущим стандартам W3C. Для определения действий, необходимых для улучшения скорости загрузки сайта, лучше всего использовать сервис Google – PageSpeed.
Как оптимизировать код HTML
Далее приводим ряд основных рекомендаций, которые позволят понять, как исправить ошибки в коде, оптимизировать и ускорить загрузку страниц.
1. Сжимаем пробелы
Если объединить пробелы и переносы строк, которые повторяются, вы сможете уменьшить конечный размер страницы. Обратите внимание, что этот способ не подходит для прямого использования в случае с тегами <style>, <script>, <pre>, <textarea>.
Вот довольно часто встречающаяся картина:
Но можно сократить её следующим образом:
2. Уменьшаем контент в верхней части HTMLcode
Как наладить codeHTML таким образом? Используйте в верхней части кода исключительно то, что нужно для осуществления загрузки первого экрана. Остальной код и скрипты для HTML сайтов лучше расположить в нижней части страницы. Необходимые JavaScript и HTMLscriptCSS вы можете интегрировать непосредственно в код страницы.
Пример страницы HTML в данном случае:
Предположим, изначально документ выглядит так:
А файл CSScodestyle вот так:
В этом случае требуемый код CSS возможно встроить следующим образом:
И в дальнейшем файл small.css подгружаться будет уже после непосредственной загрузки страницы.
3. Заблаговременный DNS resolving
Данная codeoptimization позволяет передать браузеру информацию о том, какие адреса могут содержать изображения (в т.ч. backgroundimage), файлы стилей и какие-либо другие внешние ресурсы данной страницы. Таким образом, мы можем сразу же сделать преобразование DNS имён.
Вот пример ускорения процесса загрузки для аналитических систем:
4. Преобразуем URL для href и src
Ещё один способ сокращения кода состоит в том, чтобы преобразовать абсолютные URL в относительные путём удаления домена.
К примеру, вот что мы видим до удаления домена:
И вот, как меняется картина после удаления:
Оптимизация СSS
Как и в предыдущем разделе, здесь есть несколько возможностей реализации данного этапа. В каждом из них мы будем наглядно показывать, как выглядит оптимизированный CSScodeHTML.
1. Объединяем в единый файл все CSS
Так мы уменьшаем сумму запросов HTTP, необходимую в ходе загрузки страницы. Это играет весомую роль для мобильных сетей или медленного интернета.
До (обратите особое внимание на количество строк с linkrel):
После:
2. Минимизируем CSS
На этом этапе нужно удалить все комментарии и пробелы, а также использовать сокращённые названия цветов. Кстати, здесь вы можете подробнее узнать про HTMLcolor и коды цветов HTMLCSS. Кроме того, можно перенести небольшие описания стилей (до 1 КБ) в HTML – это сократит количество запросов к серверу.
Вот наглядный пример того, как выглядела ситуация до сокращения:
И как она выглядит после:
3. Перемещаем CSS в HEAD секцию
После этого визуальный рендеринг страниц браузером ускорится, а в отдельных случаях ещё и решится проблема с эффектом перерисовывания элементов в тех случаях, когда стили и textsize прописаны после элемента. Например:
И вот как это выглядит после:
4. Ставим файлы стилей CSS перед скриптами JavaScript
Такое перемещение позволит увеличить скорость рендеринга, а также более качественно разделить скачивание JavaScript и CSS файлов.
Оптимизация JavaScript
На этом этапе вам нужно:
- Объединить все JavaScript в единый файл, что сократит нужное количество запросов HTTP
- Минимизировать JavaScript (подчистить ненужные символы, сократить размер кода)
Оптимизация изображений
Финальным аккордом в процессе оптимизации ресурса должна стать работа с изображениями – реализация отложенной загрузки с помощью LazyLoad, комбинирование нескольких изображений в одно и т.д.
Напоследок рекомендуем вам почитать о том, какие бывают SEOscript – с их помощью можно значительно улучшить юзабилити ресурса, да и в целом способствовать более качественной оптимизации. Также советуем несколько сервисов, которые помогут вам не только проконтролировать уровень оптимизации вашего сайта, но и предоставят нужные рекомендации по улучшению:
- PageSpeed
- Pingdom
- WebPageTest
- GTmetrix
Надеемся, из нашей статьи вы получили исчерпывающий ответ на вопроскак оптимизировать код HTMLи скорость загрузки сайта.