Поиск
Тарифы

Нет времени читать? Получите статью на электронную почту

RBK.money логотип

Оптимизация кода сайта



Определение скорости загрузки сайта

Google Speed test для сайта

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

Проверить скорость загрузки вашего интернет-портала можно на специальных сервисах:

  • tools.pingdom.com
  • webpagetest.org
  • developers.google.com/speed/pagespeed/insights/
  • gtmetrix.com.

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

Для оптимизации HTML-кода необходимо

Оптимизация HTML
  1. Уменьшить размер кода. Страницы станут загружаться значительно быстрее.
  2. Прописать в HTML-коде заголовки Н1 - Н6 для индексации поисковиками.
  3. Поисковые системы лучше ранжируют сайты, лишенные вирусов. Следует проверить ресурс на его наличие и удалить вредоносное ПО.
  4. Наполнить сайт уникальным контентом.
  5. Сделать внутреннюю перелинковку и прописать мета-теги.
  6. Сжать пробелы. Размер страницы уменьшается при переносе строк и объединении повторяющихся пробелов. 
  7. Скорость загрузки заметно увеличится, если в верхней части HTML-кода страницы прописывать только данные загрузки первого экрана. Все остальное нужно перенести в нижнюю часть страницы. Блоки JavaScript и CSS можно встроить непосредственно в HTML-код.
  8. Ускорить загрузку с помощью предварительного преобразования DNS-имен. Браузер заранее получает информацию о внешних адресах структурных элементов сайта.
  9. Сделать из абсолютных URL относительные. Для этого из атрибутов src и href, входящих в URL удаляется название доменного имени.

Оптимизация CSS

Оптимизация CSS

CSS (Cascading Style Sheets — каскадные таблицы стилей) отвечает за визуальное отображение документа в браузере. Задает шрифты и цвета. Файл CSS весит менее 100 кб, однако не стоит недооценивать его оптимизацию.

Ухудшают SEO-оптимизацию такие элементы дизайна как фреймы и флеш. Они украшают ресурс, однако непрактичны. 

Фрейм, от английского “кадр, рамка”, - часть страницы в браузере, являющаяся отдельным окном. В этой области страницы может содержаться независимый от другой части страницы HTML-документ. Фрейм повышает кликабельность, но снижает продвижение в Google и Yandex. Не все браузеры распознают структуру, входящую в сам фрейм. А его адрес совпадает с адресом страницы, на которой он находится, что ухудшает индексацию. Фрейм лучше заменить технологией фонового обмена информацией между браузером и сервером - Ajax. Asynchronous Javascript and XML позволяет не полностью загружать страницу, что повышает скорость загрузки.

Технология Adobe Flash делает интернет-ресурс более привлекательным. Появляются анимация, голосовое сопровождение. Однако минусов у нее больше. Сайт долго грузится из-за сложностей с кешем. Информация заполняет большое количество оперативной памяти ПК. Для отображения требуется установка Adobe Flash player. Google и Yandex индексируют только главную страницу подобного сайта. Для продвижения в поисковиках придется сделать еще один сайт на HTML. Также флеш-эффекты не поддерживаются на гаджетах от Apple.  

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

Для ручной оптимизации CSS требуется

  • Убрать затрудняющие работу поисковых роботов избыточные разрывы строк и пробелы.
  • Заменить дубли команд одной обобщающей.
  • Применить краткие и отличающиеся друг от друга мета-теги.
  • Сократить количество ключевых слов. Указывать в keywords.
  • Комментарии писать простыми и понятными словами.
  • Применять для изображений распознаваемые поисковиками Alt и Title.
  • Прописывать заголовки в H1 - H6 для последующей индексации.
  • Использовать для обозначения нестандартных шрифтов стили, а не картинки. Это делает их более понятными для Yandex и Google.
  • Переместить CSS в Head. Благодаря этому ускорится визуальный рендеринг браузера. А при условии, что стили прописаны после Head, в отдельных браузерах не произойдет эффекта перерисовки элементов.
  • Вставить файлы со стилями CSS для JavaScript. Благодаря этому действию повысится скорость рендеринга и скачивания JavaScript и CSS будут происходить одновременно.
  • Минимизировать число запросов к серверу за счет переноса описания стилей весом до 1 кб в HTML. 

Оптимизация JavaScript

JavaScript - язык программирования для браузера. который добавляет страницам интерактивности. Улучшение его кода положительно отражается на SEO-продвижении. Для этого необходимо:

  • уменьшить число запросов HTML при загрузке страницы за счет объединения похожих файлов;
  • сократить размер кода с помощью удаления лишних символов из файла, помогает в этом сервис developer.yahoo.com/yui/compressor/.

Как оптимизировать картинки на сайте

Вес изображений заметно влияет на скорость загрузки интернет-ресурса. Оптимизировать картинки можно 

  1. загружая их из видимой области при помощи библиотеки Lazyload. что уменьшит нагрузку на сервер и сократит первоначально загружаемую информацию;
  2. уменьшив число HTML запросов с помощью объединения изображений в одно.

Сервисы для автоматической HTML и CSS оптимизации

Оптимальным вариантом является Clean CSS.com. Этот сервис позволяет контролировать процесс сжатия. С его помощью вы можете независимо друг от друга оптимизировать картинки, шрифты, удалить пробелы. Также предусмотрена возможность выбрать среднюю скорость сжатия. Это существенный плюс, поскольку при высокой и низкой скоростях код становится нечитаемым для дальнейшей корректировки. Результатом сжатия в CleanCSS.com будет текстовый файл. Он покажет произошедшие изменения, в том числе в синтаксических конструкциях контента.

Существуют также сервисы CSS Optimizer, CY-PR.com, CSS Compressor и плагин Autoptimize. Каждый из них одновременно со сжатием может удалить нужные элементы кода и нарушить работу сайта.

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

Автоматически проверить результат оптимизации позволяют сервисы: 

  • seo-чеклист, который выдает результат по пунктам;
  • optimization.com;
  • плагин Firebug.

Окончательную проверку ресурса на наличие ошибок стоит провести с помощью валидатора validator.w3c.org.


Продвигаешь свои товары и услуги в интернете? У нас для тебя еще больше инструментов, лайфхаков и вдохновения на Яндекс.Дзен.Подписывайся!