Технический аудит сайтов

11 Июля 2014 11:59
0

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

Начнем с того, что определим список того, что именно можно измерить:

1. Скорость работы ресурса.

Этот показатель зависит от очень многих факторов: размера и степени оптимизации изображений, доля которых на большинстве ресурсов занимает более 70% от всего контента, загрузки сервера и качества его настройки, качества разработки в целом (оптимизация исходного кода и sql-запросов).

Инструментарий в этом плане существует очень разнообразный. Обратим Ваше внимание всего лишь на несколько наиболее удобных и популярных сервисов. Во-первых, Google PageSpeed - http://developers.google.com/speed/pagespeed/insights/.

Сервис выдает список рекомендаций по оптимизации работы ресурса - как для отображения стационарных ПК, так и на мобильных устройствах. Результат - оценка ресурса по шкале от 1 до 100. По нашему опыту, нормой для большинства ресурсов является значение в пределах от 50 до 70. К примеру, результат анализа сайта http://google.ru (доступен по ссылке) дает нам 79/100 для мобильных устройств и 92/100 для стационарных ПК.

Технический аудит сайтов

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

  1. Кэш браузера, штука прекрасная и важная. Загруженные изображения можно один раз сохранить в кэш браузера и использовать оттуда. Но часто разработчики не обращают на заголовки (http headers) должного внимания, и результатом является кэширование статики на срок не более 2 часов, хотя сами изображения могут обновлять не реже, чем 1 раз в год или больший промежуток времени. Среднестатистический размер изображения, являющего частью верстки, может быть в пределах 100-300 кб. Зачем их грузить каждый раз одному и тому же клиенту при каждом обращении? Ответ - незачем. Правильно настроенное кэширование, схема которого указывается в ответах со стороны сервера, решает данную проблему и разгружает канал.
  2. Сжатие gzip. На клиента можно грузить не просто гипертекст, а гипертекст сжатый. Это поддерживают все современные браузеры. И почему многие это не используют?
  3. Далее следует async для скриптов js (<script async src="путь"></script> вместо <script src="путь"></script>Технический аудит сайтов. При дефолтном способе загрузки страницы она начинает отображаться только после загрузки всех зависимых объектов (указанных в секции head), хотя первичного для отображения страницы нужно только (внимание!) 5-10% от всего объема. Большую часть выводимых элементов можно стилизовать css, а не скриптами. Скрипты же загружать асинхронно, то есть после загрузки html и вывода страницы пользователю (разумеется, есть нюансы, когда асинхронная загрузка работать не будет, например, если в скриптах используетсяdocument.write, но желательно от этого уходить и искать альтернативные способы реализации). Тогда он получит контент намного раньше.
  4. Сжатие css/js. Обычно, при выкладывании на продашкшн css/js можно прогнать через оптимизатор, удалив лишнее (разделители, пробелы, комментарии и т.п.). То же самое, что сделано в используемых сторонних скриптах, например, в используемой многими jquery.min.
Второй инструмент, который появился относительно недавно и заслуживает внимания - http://sitespeed.ru/. При проверке указывается местоположение точки, откуда запущено тестирование и версия браузера. Результат сохраняется по временной ссылке, отображаемой в адресной строке. Время выполнения теста - около 2-х минут.

Технический аудит сайтов

Что мы увидим в результате тестирования на Sitespeed:
  • общее время загрузки страницы, включая весь зависимый контент;
  • время генерации страницы (ответа) сервером;
  • общий размер загруженного контента в мб;
  • показатель качества скорости загрузки в % в интервале о 1 до 100.
В нижней части даны рекомендации по оптимизации, разбитые на блоки:
  • скорость соединения;
  • настройки кэширования (nginx, keepalive, скорость генерации страницы, сжатие, кэширование статики);
  • разработка и наполнение сайта (css, js, размер изображений).
Из общего: в качестве веб-сервера на фронтенде настоятельно рекомендуем использовать nginx. В качестве бэкенда - apache (httpd) или связка через fastcgi nginx+php-fpm+fastcgi (но, увы, без .htaccess).

Теперь поговорим о нагрузочном тестировании интернет-ресурса. Первыми идут инструменты командной строки, такие как curl, siege, apache benchmark ab. Мы предпочитаем siege, как наиболее удобный и универсальный инструмент. Так, результат тестирования google будет выглядеть следующим образом:

$ siege -c20 www.google.co.uk -b -t30s
...
Lifting the server siege... done.
Transactions: 1400 hits
Availability: 100.00 %
Elapsed time: 29.22 secs
Data transferred: 13.32 MB
Response time: 0.41 secs
Transaction rate: 47.91 trans/sec
Throughput: 0.46 MB/sec
Concurrency: 19.53
Successful transactions: 1400
Failed transactions: 0
Longest transaction: 4.08
Shortest transaction: 0.08


Из веб-мониторинга можно отметить несколько сервисов. Это http://loadimpact.com/:

Технический аудит сайтов

И http://loadstorm.com/.

Технический аудит сайтов

Подробнее о них написано здесь - http://habrahabr.ru/post/77593/.


2. Качество верстки и критерии отображения ресурса в различных браузерах.

Ну, это классика - валидация на соответствие или, хотя бы, приближенное соответствие стандарту W3C (в качестве валидатора можно использовать, например, http://validator.w3.org/). Иногда, количество критических ошибок превышает 200, 500, а то и 1000 штук на страницу. А бедный браузер отчаянно старается отобразить страницу правильно. Незакрытые теги типа div это ну очень, очень плохо. Возможный результат - разваливающая страница, ошибки при индексировании и многое другое. Валидация прекрасна, удобна, и стандартам все-таки надо соответствовать (ну или, хотя бы, не допускать критических ошибок).

Технический аудит сайтов

Желательно проверять вручную отображение сайта в различных версиях браузеров, таких как ie>8, chrome, firefox, opera, safari + на мобильных устройствах ipad/iphone + android. Кстати, оптимальным способом для выявления списка версий браузеров, где необходимо делать ручные проверки, является отчет Яндекс.метрики (или Google analytics). Я.Метрика и/или GA - необходимые инструменты для получения статистической информации. Обычно срок выполнения работ по техническому аудиту сайта составляет не менее 2 недель, и в первые дни начала работ проверяется наличие счетчиков Я.Метрики или GA. Если они установлены, то в аккаунт владельца добавляется представитель (сотрудник компании, выполняющей аудит). Если нет, то первое, что делается - добавляется код Я.Метрики без информера для сбора статистики и оценки общей нагрузки на ресурс.

Помимо этого существует ряд онлайн сервисов для тестирования отображения ресурса в различных версиях браузеров. Об этом достаточно подробно написано в сети, поэтому остановимся только на списке ресурсов (часть перечисленных сервисов являются платными):

- http://browsershots.org
- http://ipinfo.info/netrenderer
- http://www.my-debugbar.com/wiki/IETester/HomePage
- http://crossbrowsertesting.com
- http://litmusapp.com
- http://mogotest.com
- http://www.multibrowserviewer.com
- http://saucelabs.com
- http://spoon.net/browsers
- http://www.browsera.com

3. Степень оптимизации ресурса под поисковые системы.
Не вижу смысла повторяться, подробнее о SEO тут - http://ttcsoft.ru/blog/prodvijenie/chasto-dopuskaemye-oshibki-po-seo-pri-zapuske-internetresursov/