Самостоятельный аудит сайта: часть 1. Технический аудит

Технический аудит выявляет программные и технические неполадки на сайте. От них зависит функционирование ресурса, его продвижение в поисковиках и удовлетворенность пользователей. Рассмотрим основные моменты.

Ошибки в разметке HTML и CSS

Ошибки в HTML и CSS приводят к неправильному отображению страниц сайта, потере позиций в поисковой выдаче и даже попаданию под фильтр поисковиков.

Самые распространенные ошибки в HTML и CSS:

• используется не рекомендованный тег;
• не рекомендованные символы в ссылках;
• не указан обязательный атрибут;
• не закрыт тег;

Сервисы для проверки HTML и CSS сканируют код и выдают подробный отчет на предмет ошибок.

• HTML Validator
• CSS Validator

Отправить код для проверки сервисами можно по ссылке, загрузить из файла или скопировать текст кода в соответствующее поле.

Почитать по теме:
Проверка валидации кода: как найти ошибки в HTML и CSS

Корректность кодировки

Из-за некорректной кодировки контент сайта может отображаться неправильно. Помимо того, что посетителям это не понравится, сайт не проиндексируется или попадет под фильтр поисковиков.

Чтобы узнать кодировку, посмотрите ответы сервера в специальных сервисах. К примеру, поможет сервис на нашем сайте.

О кодировке сообщает строка Content-Type.

Content-Type: text/html; charset=utf-8

— говорит о том, что у вас кодировка UTF-8.

Далее проверьте, соответствует ли кодировка, которую отправляет сервер, реальной кодировке сайта. Откройте исходный код страницы сайта и найдите строку, содержащую слово charset внутри тега head.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

— на странице сайта используется кодировка UTF-8.

Если такой строчки нет, вставьте строку с кодировкой между открывающим и закрывающим тегом head, чтобы указать кодировку сайта в файле шаблона сайта,.

Кодировки Windows-1251 и UTF-8 правильно отображают сайт и поддерживают кириллические символы. 

Почитать по теме:
Как настроить кодировку сайта самостоятельно

404 Not Found

Страница ошибки 404 отображается, когда посетитель сайта пытается попасть в несуществующую часть ресурса. Если у вас много страниц с ошибкой 404, ваш сайт будет раздражать пользователей и упадет в выдаче.

Почему пользователи попадают на несуществующую страницу:

• страница перемещена или удалена, но осталась в индексе поисковика и пользователь получил на нее ссылку в выдаче;
• страница перемещена или удалена, но на ресурсе остались внутренние ссылки на нее;
• страница перемещена или удалена, но на нее ссылаются сторонние ресурсы;
• опечатка в адресной строке браузера.

Почитать по теме:
Коды ответов сервера — подробное описание

Оптимизация страницы 404 происходит в два этапа:

1. Сделайте так, чтобы пользователи не попадали на несуществующую страницу

Проверьте сайт на «битые» ссылки — внутренние и внешние.

Для этого можно использовать панели вебмастеров Яндекс и Google, бесплатную программу Xenu's Link Sleuth или плагин для WordPress Broken Link Checker, если используется соответствующая CMS. Используйте сразу несколько средств, чтобы наверняка найти все нерабочие ссылки.

Ищет битые ссылки и сервис Анализ сайта. В проверке внутренних страниц вы получите данные о кодах ответов сервера, мета-тегах, анализ оптимизации контента со списком ошибок и пояснениями. По кнопке «Страницы сайта» появится список страниц с фильтрами для удобного изучения.

Фильтр «код ответа 404» выведет список битых ссылок, а результаты можно скачать в таблице.

Проверка внутренних страниц работает на тарифах «Начальный» и «Профи», они платные, но для тестирования сервиса есть недельный триал. Количество страниц зависит от тарифа.

Дальше определите, что делать с каждой из «битых» ссылок:

• Если ошибку выдает сайт по внешней коммерческой ссылке, свяжитесь с рекламодателем и сообщите, что его сайт не работает;
• Если страница по ссылке была перемещена, настройте 301 редирект;
• Если целевая страница внутренней ссылки удалена, удалите ссылку или заполните несуществующую страницу контентом. О том, как оформить страницу 404 — ниже.

После исправления ссылок необходимо удалить несуществующие страницы из индекса поисковых систем. Это делается средствами уже упомянутых панелей вебмастеров Яндекс и Google.

Чтобы страница удалилась из индекса, сервер при обращении к ней должен возвращать ошибку 404. Если страница существует, но не должна участвовать в поисковой выдаче, закройте ее от индексации правилами robots.txt или мета-тегом noindex.

При следующем обходе сайта роботом запросы на удаление будут выполнены, а страницы исчезнут из результатов поиска. 

Почитать по теме:
Чем вредят сайту битые ссылки? Поиск ссылок и способы их исправить

2. Создайте оригинальную страницу 404 Not Found

Если пользователь попадет на несуществующую страницу, сервер покажет страницу 404 по умолчанию. В лучшем случае, это краткое пояснение, что пользователь "не туда попал" и реклама вашего хостера. Скорее всего, пользователь покинет сайт, увидев такую страницу. Оригинальная страница 404 поможет удержать посетителя на сайте.

Требования к странице 404:

• Оригинальная страница 404 должна соответствовать дизайну и идее вашего сайта. Пользователь должен понять, что попал именно на ваш сайт;

• Страница 404 не должна быть «тупиковой». Разместите на ней ссылки на основные разделы, поиск по сайту, ссылки на группы в соцсетях;

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

• Смешные изображения, видеоролики, интересные интерактивные элементы помогают сгладить разочарование от попадания на страницу 404.

Примеры оформления страницы ошибки 404: раз, два, три.

Чтобы указать серверу, куда перенаправлять пользователей, если возникает ошибка 404, используется директива ErrorDocument в файле .htaccess в корневой папке сайта:

ErrorDocument 404 http://example.com/404.html

Где http://example.com/404.html — адрес вашей оригинальной страницы 404.

Таким же способом с помощью файла .htaccess вы можете обрабатывать и другие ошибки сервера:

• 401 ошибка (ErrorDocument 401 http://example.com/page.html) — требуется авторизация;
• 403 ошибка (ErrorDocument 403 http://example.com/page.html) — доступ запрещен;
• 500 ошибка (ErrorDocument 500 http://example.com/page.html) — внутренняя ошибка сервера.

Скорость загрузки страниц

Низкая скорость загрузки страниц не нравится ни пользователям, ни поисковикам. Проверить скорость загрузки можно с помощью нашего сервиса. Оптимальная скорость загрузки сайта на десктопе — не более 3 секунд, на мобильных устройствах — 7-9 секунд.

Как увеличить скорость загрузки страницы:

1. Сократите размер кода CSS и JavaScript

Онлайн-сервисы для упрощения JavaScript и CSS удаляют из кода пробелы и комментарии, сокращая время его загрузки.

Советуем эти:

• Refresh-SF
• YUI Compressor
• CSSResizer
• JSCompress

Размещайте CSS-файлы в начале страницы, а JS-файлы — перед закрывающим тегом body. До момента отображения контента страницы браузер должен загрузить только стили, а скрипты — в последнюю очередь. Так пользователь быстрее увидит содержимое страницы. Если стили тоже перенести в низ страницы, то разметка после загрузки будет не стилизована, до момента загрузки стилей это будет выглядеть некрасиво.

Почитать по теме:
Как ускорить загрузку: оптимизируем код верхней части страницы

2. Уменьшите объем загружаемых страниц

Используйте сжатие gzip, это сократит время передачи файлов браузеру.

• По умолчанию конфигурационный файл Nginx называется nginx.conf и расположен в каталоге /usr/local/nginx/conf, /etc/nginx или /usr/local/etc/nginx. Для включения сжатия gzip в Nginx, добавьте в этот файл эти строки:

server {
 ....
 gzip on;
 gzip_disable "msie6";
 gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
}

Nginx позволяет регулировать уровень сжатия от 1 до 9 строкой:

gzip_comp_level 5;

Оптимальный уровень — 5.

Для включения сжатия gzip в Apache убедитесь, что подключен модуль mod_deflate. Далее, добавьте в файл .htaccess следующие строки:

AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE text/css 
AddOutputFilterByType DEFLATE application/xml 
AddOutputFilterByType DEFLATE application/xhtml+xml 
AddOutputFilterByType DEFLATE application/rss+xml 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/x-javascript

Проверить работоспособность и степень сжатия gzip вашего сайта можно с помощью сервиса GIDZipTest.

Почитать по теме:
Как уменьшить вес сайта и ускорить загрузку страниц с помощью gzip, brotli, минификации и других способов

3. Оптимизируйте изображения

Оптимизируйте размер изображения под сайт. Не загружайте изображение на хостинг в разрешении 4000x3000, если отображаться оно будет в 800x600 без возможности увеличения по клику.

Бесплатные онлайн-сервисы для редактирования изображений:

• PicMonkey
• Pixlr
• BeFunky

Формат JPEG лучше всего подходит для фотографий. PNG лучше сжимает однотонные участки и градиенты, поддерживает прозрачность. Используйте его для иконок, иллюстраций и пр.

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

JPEG Оригинал 95 Кб	JPEG Сжатие 27 Кб

Онлайн-сервисы для сжатия изображений:

• CompressJPEG
• PunyPNG
• TinyPNG

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

В любой CMS можно указать желаемые ширину и высоту изображения в редакторе изображений. Если нет возможности использовать инструментарий CMS, задайте с помощью атрибутов width (ширина) и height (высота).

Пример:

    <img src="photo.jpg" width="640" height="480">

С осторожностью используйте изображения для оформления сайта. Везде, где это возможно, вместо изображений пользуйтесь CSS для создания фона.

Почитать по теме:
Как оптимизировать загрузку картинок: настройка lazy loading изображений

4. Включите кэш данных

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

Для веб-сервера на Nginx используется модуль expires в файле конфигурации:

location ~* \.(js|css|png|jpg|jpeg|gif)$ {
    expires 86400s;
    log_not_found off;
    }

В строке location ~* \.(js|css|png|jpg|jpeg|gif)$ { перечисляются типы файлов, которые требуют кэширования. Допускается использование нескольких блоков для более гибкой настройки.

Строка expires 86400s; указывает, сколько будет храниться кэш. Можно указывать значения:

• в секундах - s;
• часах - h;
• днях - d;
• месяцах - m;
• навсегда - max.

Либо можно указать дату в формате RFC 1123, когда кэшированный файл потеряет актуальность:

    expires Fri, 24 Nov 2017 01:01:01 GMT;

Строка log_not_found off; отключает ведение лога сообщений с 404 ошибкой для указанных типов файлов. Это помогает снизить нагрузку на сервер.

Настройка кэширования на серверах Apache происходит в файле конфигурации или в файле .htaccess. Поддерживается как модуль expires, так и альтернативный способ Cache-Control.

Expires:

    <ifmodule mod_expires.c="">
     ExpiresActive On
     ExpiresDefault "access plus 2 month"
     ExpiresByType image/gif "access plus 4 months"
     ExpiresByType image/jpeg "access plus 4 months"
    </ifmodule>

Строка ExpiresActive On включает кэширование.

Строка ExpiresDefault "access plus 2 month" устанавливает срок кэширования по умолчанию в 2 месяца.

Строки ExpiresByType image/gif "access plus 4 months" и ExpiresByType image/jpeg "access plus 4 months" задают срок кэширования 4 месяца для GIF- и JPEG-файлов.

Поддерживаются значения в:

• Годах — years, year
• Месяцах — months, month
• Неделях — weeks, week
• Днях — days, day
• Часах — hours, hour
• Минутах — minutes, minute
• Секундах — seconds

Cache-Control:

<ifmodule mod_headers.c="">
     <filesmatch "\.(js|css)$"="">
     Header set Cache-Control "max-age=604800"
     </filesmatch>
     <filesmatch "\.(ico|gif|jpg|jpeg|png)$"="">
     Header set Cache-Control "max-age=2628000"
     </filesmatch>
    <filesmatch "\.(php|cgi)$"=""> 
    Header unset Cache-Control 
    </filesmatch>
    </ifmodule>

Этот код устанавливает время хранения JS- и CSS-файлов в кэше в 1 неделю, для файлов с расширением .ico, .gif, .jpg, .jpeg и .png - 1 месяц, а для .php и .cgi - запрещает кэширования.

Для Cache-Control время хранения файлов можно задать только в секундах. Самые популярные значения:

• Одна минута: max-age=60;
• Один час: max-age=3600;
• Один день: max-age=86400;
• Одна неделя: max-age=604800;
• Один месяц: max-age=2628000;
• Один год: max-age=31536000.

5. Избавьтесь от лишних редиректов

Везде, где возможно, избавьтесь от редиректов, чтобы посетители сайта сразу направлялись на нужную страницу. Редирект увеличивает время загрузки страницы, а поисковые системы могут расценить множественные перенаправления как проблемы на сайте.

Использование редиректа оправдано в случаях, если адреса страниц меняются по техническим причинам, для склейки доменов с www и без www и для перенаправления на мобильную версию сайта. 

Почитать по теме:
Как настроить 301 редирект самостоятельно

6. Уменьшите количество запросов к серверу

Объедините все файлы JavaScript в один. О том, как это сделать, читайте тут.

---

Внимание! При обнаружении в JavaScript-файле ошибки браузер прекращает обработку этого файла. Поэтому, перед объединением всех файлов в один убедитесь в их полной работоспособности.

---

Чтобы обнаружить ошибки в JS, воспользуйтесь консолью веб-браузера. В Firefox и Chrome она есть по умолчанию.

В Firefox нажмите правой кнопкой в окне браузера, в контекстном меню выберите пункт «Исследовать элемент». Появится панель, в которой мы можем исследовать и отлаживать наш код. Рядом со вкладкой «Инспектор» есть вкладка «Консоль», она то нас и интересует. Переключитесь на нее, обновите страницу, и вы увидите все ошибки JavaScript.

В Chrome консоль вызывается из контекстного меню или клавишей F12.

Объедините мелкие графические элементы сайта в CSS-спрайты.

Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. Благодаря CSS можно отображать каждый элемент отдельно.

Подробнее об использовании CSS-спрайтов читайте здесь.

Это первая из трех статей о комплексном аудите сайта. В следующих статьях рассмотрим SEO- и юзабилити-аудит. А если не хотите разбираться самостоятельно, проведите анализ сайта у нас.

Продолжение серии:
Самостоятельный аудит сайта: часть 2. SEO-аудит
Самостоятельный аудит сайта: часть 2. SEO-аудит, продолжение