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

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

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

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

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

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

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

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

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

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

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.