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

Определение скорости загрузки сайта
Количество посетителей на сайте напрямую связано со скоростью загрузки интернет-ресурса. Вы не будете ждать, пока загрузятся картинки или другая информация. Проще уйти к конкурентам. Представьте, что необходимо приобрести несколько товаров на сайте, а каждую страницу приходится ждать по минуте. Когда-то через модемы страницы появлялись в браузере спустя несколько минут. Эти времена прошли. Еще одним фактором в пользу ускорения загрузки страниц ресурса является поисковая выдача. Более быстрый сайт занимает более высокие строчки в Google.
Проверить скорость загрузки вашего интернет-портала можно на специальных сервисах:
- tools.pingdom.com
- webpagetest.org
- developers.google.com/speed/pagespeed/insights/
- gtmetrix.com.
Вместе с данными о времени загрузки сайта вы прочтете советы по оптимизации. Есть способ проверить, каким видят сайт поисковые роботы. Для этого требуется отключить файлы, содержащие скрипты и стили. Если в результате информация страниц появляется медленно и неверно отображается, код нужно изменить. Одновременно с подобными проблемами поисковики не определяют логику URL сайта.
Для оптимизации HTML-кода необходимо
- Уменьшить размер кода. Страницы станут загружаться значительно быстрее.
- Прописать в HTML-коде заголовки Н1 - Н6 для индексации поисковиками.
- Поисковые системы лучше ранжируют сайты, лишенные вирусов. Следует проверить ресурс на его наличие и удалить вредоносное ПО.
- Наполнить сайт уникальным контентом.
- Сделать внутреннюю перелинковку и прописать мета-теги.
- Сжать пробелы. Размер страницы уменьшается при переносе строк и объединении повторяющихся пробелов.
- Скорость загрузки заметно увеличится, если в верхней части HTML-кода страницы прописывать только данные загрузки первого экрана. Все остальное нужно перенести в нижнюю часть страницы. Блоки JavaScript и CSS можно встроить непосредственно в HTML-код.
- Ускорить загрузку с помощью предварительного преобразования DNS-имен. Браузер заранее получает информацию о внешних адресах структурных элементов сайта.
- Сделать из абсолютных URL относительные. Для этого из атрибутов src и href, входящих в URL удаляется название доменного имени.

Оптимизация 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/.
Как оптимизировать картинки на сайте
Вес изображений заметно влияет на скорость загрузки интернет-ресурса. Оптимизировать картинки можно
- загружая их из видимой области при помощи библиотеки Lazyload. что уменьшит нагрузку на сервер и сократит первоначально загружаемую информацию;
- уменьшив число HTML запросов с помощью объединения изображений в одно.
Сервисы для автоматической HTML и CSS оптимизации
Оптимальным вариантом является Clean CSS.com. Этот сервис позволяет контролировать процесс сжатия. С его помощью вы можете независимо друг от друга оптимизировать картинки, шрифты, удалить пробелы. Также предусмотрена возможность выбрать среднюю скорость сжатия. Это существенный плюс, поскольку при высокой и низкой скоростях код становится нечитаемым для дальнейшей корректировки. Результатом сжатия в CleanCSS.com будет текстовый файл. Он покажет произошедшие изменения, в том числе в синтаксических конструкциях контента.
Существуют также сервисы CSS Optimizer, CY-PR.com, CSS Compressor и плагин Autoptimize. Каждый из них одновременно со сжатием может удалить нужные элементы кода и нарушить работу сайта.
После процедуры оптимизации интернет-ресурса нужно проверить полученный результат. Оптимально, если загрузка сайта длится не более 5 секунд. а текстовый контент и детали дизайна выглядят корректно.
Автоматически проверить результат оптимизации позволяют сервисы:
- seo-чеклист, который выдает результат по пунктам;
- optimization.com;
- плагин Firebug.
Окончательную проверку ресурса на наличие ошибок стоит провести с помощью валидатора validator.w3c.org.
Продвигаешь свои товары и услуги в интернете? У нас для тебя еще больше инструментов, лайфхаков и вдохновения на Яндекс.Дзен.Подписывайся!
