Оптимизация кода сайта: рекомендации по улучшению

обновлено: 03.04.2020 1497975938
Александр Коваленко, CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Канал автора в телеграм: @seomnenie
0
20.06.2017

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

Наверняка, вы часто сталкивались с ситуацией, когда нужный вам сайт грузился настолько долго, что в итоге вы попросту уходили за искомой информацией на другой ресурс? Эта ситуация довольно распространена, и если бы вопрос ожидания касался бы только степени терпения пользователей, всё было бы слишком просто.

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

В этой статье мы подробно рассмотрим способы, которые помогут улучшить работу и скорость загрузки вашего ресурса и обозначим, как проверить сайт на ошибки в коде.

 

Проверка 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и скорость загрузки сайта.

Рейтинг
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Завантаження...
Avatar photo
CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Канал автора в телеграм: @seomnenie

Новые материалы

Подписаться на телеграм канал СEO Advermedia Мнение SEO

Публикуем интересные материалы из блога и разбираем вопросы по SEO от подписчиков!

https://t.me/seomnenie Подписаться

Перезвоните мне




    «*» - поля обязательные для заполнения.