В статье:
Технический аудит выявляет программные и технические неполадки на сайте. От них зависит функционирование ресурса, его продвижение в поисковиках и удовлетворенность пользователей. Рассмотрим основные моменты.
Ошибки в разметке HTML и CSS
Ошибки в HTML и CSS приводят к неправильному отображению страниц сайта, потере позиций в поисковой выдаче и даже попаданию под фильтр поисковиков.
Самые распространенные ошибки в HTML и CSS:
- используется не рекомендованный тег;
- не рекомендованные символы в ссылках;
- не указан обязательный атрибут;
- не закрыт тег;
Сервисы для проверки HTML и CSS сканируют код и выдают подробный отчет на предмет ошибок.
Отправить код для проверки сервисами можно по ссылке, загрузить из файла или скопировать текст кода в соответствующее поле.
Почитать по теме:
Проверка валидации кода: как найти ошибки в 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, используется директива 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 удаляют из кода пробелы и комментарии, сокращая время его загрузки.
Советуем эти:
Размещайте 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 без возможности увеличения по клику.
Бесплатные онлайн-сервисы для редактирования изображений:
Формат JPEG лучше всего подходит для фотографий. PNG лучше сжимает однотонные участки и градиенты, поддерживает прозрачность. Используйте его для иконок, иллюстраций и пр.
Добейтесь баланса между сжатием и качеством изображения. Используйте максимально возможное сжатие, но следите, чтобы не было излишней размытости, пикселизации или артефактов.
JPEG Оригинал 95 Кб |
JPEG Сжатие 27 Кб |
|
|
Онлайн-сервисы для сжатия изображений:
Укажите ширину и высоту всех изображений. Браузер отображает страницу еще до загрузки изображений, если известны размеры места, которое зарезервировано для них. Укажите эти размеры, чтобы ускорить загрузку страницы и сделать ее удобной для пользователей.
В любой 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.
Почитать по теме:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте
5. Избавьтесь от лишних редиректов
Везде, где возможно, избавьтесь от редиректов, чтобы посетители сайта сразу направлялись на нужную страницу. Редирект увеличивает время загрузки страницы, а поисковые системы могут расценить множественные перенаправления как проблемы на сайте.
Использование редиректа оправдано в случаях, если адреса страниц меняются по техническим причинам, для склейки доменов с www и без www и для перенаправления на мобильную версию сайта.
Почитать по теме:
Как настроить 301 редирект самостоятельно
6. Уменьшите количество запросов к серверу
Объедините все файлы JavaScript в один. О том, как это сделать, читайте тут.
Внимание! При обнаружении в JavaScript-файле ошибки браузер прекращает обработку этого файла. Поэтому, перед объединением всех файлов в один убедитесь в их полной работоспособности.
Чтобы обнаружить ошибки в JS, воспользуйтесь консолью веб-браузера. В Firefox и Chrome она есть по умолчанию.
В Firefox нажмите правой кнопкой в окне браузера, в контекстном меню выберите пункт «Исследовать элемент». Появится панель, в которой мы можем исследовать и отлаживать наш код. Рядом со вкладкой «Инспектор» есть вкладка «Консоль», она то нас и интересует. Переключитесь на нее, обновите страницу, и вы увидите все ошибки JavaScript.
В Chrome консоль вызывается из контекстного меню или клавишей F12.
Объедините мелкие графические элементы сайта в CSS-спрайты.
Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. Благодаря CSS можно отображать каждый элемент отдельно.
Подробнее об использовании CSS-спрайтов читайте
здесь.
Это первая из трех статей о комплексном аудите сайта. В следующих статьях рассмотрим SEO- и юзабилити-аудит. А если не хотите разбираться самостоятельно, проведите анализ сайта у нас.
Продолжение серии:
Самостоятельный аудит сайта: часть 2. SEO-аудит
Самостоятельный аудит сайта: часть 2. SEO-аудит, продолжение