Использование Web Page Test для оценки влияния сторонних сервисов на сайт проверка страниц и


Содержание материала:

Как протестировать работу сайта

Вступление

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

1. Верстка

Несмотря на то, что сайт представляет собой определенный (и единственный в своем роде) HTML-код, в разных браузерах ваш сайт может отображаться по-разному. Поэтому крайне важно убедиться, что каждый из ваших посетителей увидит именно то и именно так, как вы это задумали.

На данный момент можно выделить следующие известные браузеры (от наиболее популярного к наименее популярному):

  1. Google Chrome
  2. Internet Explorer/Edge
  3. Firefox
  4. Safari
  5. Opera

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

Есть два пути сделать это:

  1. Установить каждый из браузеров и вручную проверить каждую страницу вашего сайта.
  2. Воспользоваться одним – или сразу несколькими подходящими сервисами.

Выбирайте на свой вкус:

  • http://browsershots.org/ — на главной странице перечислены все основные браузеры и операционные системы – выбирайте необходимые и смело тестируйте свой сайт. Единственный минус – проверяться будет одна страница и одно разрешение экрана (указать этот и остальные параметры можно внизу страницы), и на это потребуется время, зато пользоваться сервисом можно абсолютно бесплатно;
  • http://ipinfo.info/netrenderer/ — сервис проверяет сайт только в Internet Explorer’е, зато он быстрый и бесплатный;
  • https://crossbrowsertesting.com/ — платный сервис, который позволяет проверить ваш сайт в разных браузерах, операционных системах и даже устройствах! Последнее особенно актуально, ведь сейчас все больше людей выходят в интернет через портативные устройства (мобильные устройства на Android, iPad, iPhone), сервис также предоставляет пробный период длиной в 7 дней;
  • http://www.multibrowserviewer.com/ — приложение, которое поможет вам протестировать сайт на предмет корректности визуального отображения, есть бесплатный и платный тарифный план;
  • http://spoon.net/browsers/ — бесплатный онлайн-эмулятор программ; вы сможете запустить каждый из браузеров и собственноручно протестировать в нем работу своего сайта.

Также при тестировании верстки сайта зачастую советуют проверить ее валидность. Сделать это можно при помощи сервиса http://validator.w3.org/. Впрочем, валидность (то есть соответствие HTML-кода сайта стандартам, разработанным World Wide Web Consortium) это не обязательное требование, а скорее, пожелание (которое тоже должен, но не обязан учитывать разработчик). Но если проверка показала наличие большого количества несоответствий, то, безусловно, это повод поговорить с разработчиком сайта.

2. Функционирование

ЧПУ

Начну с того, на что первым делом может обратить внимание посетитель вашего сайта – на адреса страниц. ЧПУ – или человекопонятный урл (url) – это обязательное требование к сайту, которое, во-первых, будет удобно для клиента; во-вторых, положительное влияет на SEO (продвижение сайтов в поисковых системах).

Как выглядит ЧПУ? Например, вот так: yoursite.ru/novosti/oktyabr. Прочитав подобный адрес, вы, скорее всего, догадаетесь, что на странице будут рассказаны какие-то новости, случившиеся в октябре. А что вы сможете сказать о странице yoursite.ru/page.php?page_ >

Транслитерировать или переводить? Зависит от вас и вашего желания. Единственное, что делать не стоит – это использовать без надобности кириллические ссылки, так как они превращаются вот в такую абракадабру:

Административная часть

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

Тестирование

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

  • функциональное тестирование – правильно ли работают все функции сайта? Если речь об интернет-магазине, то нужно проверить, корректно ли происходит поиск и оформление заказа, редактирование корзины, навигация в целом. Протестируйте работу скидок и акций (если они у вас предусмотрены), проверьте еще раз заполнения всех форм. Желательно сделать это не в одном, а хотя бы в нескольких браузерах;
  • юзабилити тестирование – удобно ли пользователям пользоваться вашим сайтом? Вам нужно протестировать, насколько понятен ваш сайт для пользователей: все ли выглядит логичным и необходимым? От лишних деталей лучше избавиться и, наоборот, добавить что-то, если навигация по сайту кажется неочевидной;
  • нагрузочное тестирование – выдержит ли ваш сайт нагрузку в n-ное количество пользователей? Ваш сайт может привлечь гораздо больше посетителей, чем вы предполагаете – и из-за такой приятной причины он может просто перестать работать.

Чтобы такого не случилось, проведите тест! Для этого, к примеру, можно использовать сторонние сервисы:

  1. https://loadimpact.com/ — для быстрого тестирования. Примерно в течение 15 минут на вашем сайте будут находиться 50 посетителей – совсем немного, но достаточно для того, чтобы проверить, что от такой нагрузки ваш сайт не «ляжет».
  2. http://loadstorm.com/ — для более серьезного тестирования, где можно создать сценарии поведения виртуальных пользователей.
  3. https://www.neustar.biz/security/web-performance-management/load-testing – тестирование не только с виртуальными, но и с настоящими пользователями.

3. Безопасность

Тестированием безопасности пренебрегать не стоит – каждый год эта проблема становится все более актуальной.

Вообще для тестирования безопасности – если для вашего проекта это действительно важно – я советую обращаться к специалистам; неспециалисты вряд ли сходу разберутся во всех тонкостях и смогут дать адекватную оценку. Вам нужно понимать, чем вы рискуете: если тестирование безопасности будет выполнено лишь поверхностно с заключением «ну вроде бы все хорошо», то опытному хакеру будет совсем легко найти какую-нибудь лазейку и получить доступ к закрытым данным или даже к самому сайту.

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

  • http://www.acunetix.com/ — серьезный инструмент для тестирования безопасности вашего сайта;
  • http://sqlmap.org/ — абсолютно бесплатный OpenSource-проект, который можно использовать для тестирования всевозможных SQL-инъекций и других брешей в коде вашего сайта;
  • https://portswigger.net/burp/ — еще один сервис (но платный), предоставляющий услуги по тестированию безопасности вашего приложения;
  • http://find-xss.net/scanner/ — сканер, который ищет опасные и безопасные функции, описанные в разных файлах, и на их основе формирует отчет;
  • http://www.seegnal.ru/test/ — сервис позволяет быстро проверить сайт на наличие уязвимостей;
  • https://github.com/zaproxy/zaproxy – один из самых известных бесплатных инструментов для тестирования безопасности;
  • https://www.kali.org/ — прекрасная платформа для тестирования, которая имеет богатый инструментарий; однако подойдет только тем, кто обладает определенными знаниями и навыками программирования.

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

Самостоятельно вы можете также проверить, к примеру, загрузку файлов на ваш сайт (в том случае, если это предусмотрено) – формат файлов обязательно должен проверяться, иначе злоумышленник сможет загрузить на ваш сайт все, что угодно. Например, если загружать можно только картинки, то возможными доступными вариантами станут форматы jpg, jpeg, gif, png, svg и, при желании, некоторые другие (raw, tiff, cdr и т.д.).

Также проверять уязвимости нужно не только на самом сайте, но и на сервере (для этого лучше нанять специалистов).

Вместо заключения

Ко всему вышесказанному хочу еще добавить, что тестировать сайт нужно не только после того, как он был создан, то и после всех более-менее глобальных – а может, и не очень глобальных – изменений. Как правило, ошибки рождаются либо в результате плохого образования (когда программист не знает, что в его коде содержатся «дыры»), либо в результате человеческого фактора (когда программист случайно или по невнимательности написал не то, что нужно). Поэтому даже если над вашим сайтом работают самые профессиональные профессионалы, все равно лишний раз проверьте и протестируйте его.

Сканирование и анализ веб-сайтов: подборка полезных сервисов

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

YSlow

YSlow — проведёт небольшой анализ загрузки не только страницы, но и отдельных составляющих сайта. Сервис проверяет вынесение заголовков, использование компрессии, а также вынесение скриптов в индивидуальные файлы, после чего предоставляет информацию по улучшению проекта. За основу берутся исследования Yahoo. Сервис предоставляется в виде расширения для всех топовых браузеров.

Web Developer Checklist

Web Developer Checklist — ещё один интересный сервис для веб-разработчика, который поможет по пунктам проверить готовность проекта к запуску. Доступен в виде сайта и расширения.

Site Scan

Site Scan — инструмент от Microsoft, который проведёт сканирование вашего проекта и подскажет, как реализовать изменения, если они требуются.

PageSpeed Insights

PageSpeed Insights — один из инструментов PageSpeed Tools от Google. Он анализирует содержание и технический стек вашего сайта и предлагает решения, позволяющие ускорить его загрузку. В параметры оценки входит не только скорость, но и удобство использования. Советы могут иметь желательный и критический характер. К критическим относятся такие вещи как, например, блокировка отрисовки страницы небрежно вставленным в header JavaScript-кодом.

Test My Site

Test My Site — еще один инструмент от Google, который позволяет протестировать скорость загрузки страниц сайта на мобильных устройствах. Его отличительная особенность в том, что в конце анализа отображается процент пользователей, которые уходят с сайта, не дождавшись загрузки. По словам Google, для того, чтобы соответствовать ожиданиям, сайт должен грузиться не более 3 секунд.

GTMetrix

GTMetrix — разработка хостинг-провайдера GT, которая объединяет в себе сервисы PageSpeed Insights и Yahoo YSlow, описанные выше, что позволяет получить наиболее полный анализ в едином интерфейсе и применить лучшие практики двух корпораций.

WebPageTest

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

SEO Чеклист

SEO Чеклист — поможет вам ничего не забыть при проведении SEO-оптимизации сайта. Помимо простой оптимизации для поиска, можно отмечать ход проведения технического аудита сайта, оптимизации ссылок, а также исследование соцактивности. В список можно добавлять свои собственные пункты, а также экспортировать его в PDF.

Browser Shots

Browser Shots — сервис, зайдя на который, вы наверняка поймете, как мало браузеров знаете. На нем можно проверить, как будет выглядеть ваш сайт во всех (или почти всех) когда-либо существовавших браузерах. Сервис бесплатный, использовать его можно и без регистрации, но если вы собираетесь проводить дотошную проверку каждой страницы, придется завести аккаунт.

Screenfly

Screenfly — служит логическим продолжением предыдущего сервиса. С его помощью можно взглянуть на сайт глазами владельца Kindle, iPad и еще целого списка устройств, не имея их на руках — просто введите в поле адрес вашего сайта и затем выбирайте устройства в меню сверху. Доступны в том числе и экзотические модели вроде телефонов BlackBerry и Motorola и смарт-телевизоров. Кроме того, можно указать произвольный размер окна в пикселях.

Observatory

Observatory — проверит безопасность вашего сайта (например, соответствие политике защиты контента, использование cookies, очевидные XSS-уязвимости). По итогам вашему сайту будет выставлена оценка от A до F. Сайт умеет хранить историю исследований — с её помощью можно проследить, становится ли ваш сайт лучше со временем.

Nibbler

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

Dotcom-tools

Dotcom-tools — инструмент, позволяющий тестировать сайт из 25 точек мира, которые находятся на всех 5 континентах. Кроме того, по результатам проверки предоставляется многосторонний отчёт производительности, включающий в себя такие параметры, как:

  • Проверка ошибок и диагностика;
  • 10% самых быстрых и самых медленных элементов;
  • Понятное описание скорости и прочих данных на диаграмме;
  • Разбивка по элементам хоста.

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

10 лучших инструментов для проверки скорости загрузки страниц сайта

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

1. Google PageSpeed Insights

Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.

2. Pingdom Tools

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

3. WhichLoadFaster

Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.

4. Web Page Performance Test

Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе ( США ).

5. GTmetrix

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

6. Load Impact

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

7. Monitis Tools

Анализирует загрузку сайта с разных участков Земли — серверы в США , Европе и Азии. Отображает сводную статистику по каждому тесту.

8. SiteSpeed.me

Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.

9. PR-CY

Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.

10. WebPage Analyzer

Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.

Если вы используете какие-то другие бесплатные онлайн-инструменты для проверки скорости загрузки страниц сайта, делитесь ими в комментариях.

Анализ сайта

Анализ сайта в один клик от Be1.ru поможет проверить состояние важных при продвижении показателей и факторов, от которых напрямую зависят позиции ресурса в выдаче поисковых систем.

  • количество страниц в индексе Яндекс и Google;
  • проверка ИКС и PR;
  • наличие фильтров.
  • список запросов, по которым сайт занимает позиции;

  • количество эффективных показов;
  • график общей динамики видимости.
  • ТОП конкурентов сайта;
  • данные о пересечениях с конкурентами в выдаче;
  • детальный отчет с экспортом.
  • title;
  • description;
  • keywords.
  • отчет по количеству уникальных ссылок;
  • упоминания в социальных сетях;
  • типы ссылок по органичности.
  • проверка текстов на плагиат;
  • тошнотность текстов;
  • равномерность распределения слов.
  • скорость загрузки ресурса;
  • whois данные о владельце;
  • оценка рыночной стоимости сайта.

Зачем проводить анализ сайта?

Поисковые системы ранжируют сайты в своей выдаче по собственным сложным алгоритмам. Учитывая ряд внутренних и внешних факторов, которые так или иначе демонстрируют качество ресурса, поисковики стремятся подобрать самые подходящие ответы на запрос пользователя. Анализ сайта сервисами помогает автоматизировать процесс проверки веб-ресурса по ряду ключевых SEO-значимых факторов, которые влияют на его позиции в выдаче поисковых систем.

Пользователи, которые используют наш сервис, прямо сейчас активно занимают лидирующие позиции в выдаче поисковых систем по ряду запросов своего семантического ядра. Набор SEO инструментов и сервисы Be1.ru проектируются исключительно опытными оптимизаторами со стажем более 10 лет!

Какую информацию я получу после анализа?

Количество страниц в индексе Яндекс и Google, наличие в каталогах, данные о ИКС, PR, посещаемость, наличие вирусов, оценка стоимости сайта, определение уникальности текста и его тошноты, данные Whois, проверка на фильтры, поисковая видимость сайта, количество внешних ссылок, поиск конкурентов и многое другое.

Могу ли я анализировать сайты конкурентов?

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

Откуда сервис берет информацию о сайтах?

Мы используем API MegaIndex. В основном с его помощью мы получаем дефицитную информацию о сайтах, которую предоставляем в открытом бесплатном доступе. Большая часть инструментов и алгоритмов является собственными разработками команды Be1.ru.

Перетащите букмарклет себе в закладки и пользуйтесь инструментом проще!

Анализ сайта

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

Вам будет интересно

Какую информацию я получу после анализа домена?

Проведя анализ домена, вы сможете ознакомиться с такими показателями сайта, как тИЦ и ИКС Яндекса, наличие сайта в каталоге Яндекса, узнать количество проиндексированных страниц поисковыми системами, определить количество упоминаний о вашем домене, а также полный список всех ссылающихся страниц. Кроме того будет показана сводка о возрасте сайта, указана компания-хостер, где размещается ресурс физически, и IP адрес вашего сайта.

Могу ли я проанализировать сайт конкурента?

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

Как часто необходимо анализировать сайт?

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

Проводится ли SEO проверка сайта?

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

WebPageTest

Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Топ-пост этого месяца:  Как функционирует сайт общие принципы работы веб-ресурса

If you have any performance/optimization questions you should visit the Forums where industry experts regularly discuss Web Performance Optimization.

Особенности тестирования веб-приложений

При взгляде на эти баснословные цифры становится понятным, почему в мире разрабатывается так много новых веб-приложений. Этот процесс приводит к необходимости привлечения большого количества специалистов. То, что веб (в широком смысле) будет продолжать наращивать темпы своего развития, подтверждается и набирающим силу «мейнстримом»: всё «переезжает» в облака. Облачные технологии становятся новой реальностью современного Интернета: даже некогда привычные нам десктопные Word и Excel сегодня представлены в виде веб-альтернатив от Microsoft. Исходя из сказанного, можно утверждать, что потребность в хороших инженерах по обеспечению качества, специализирующихся на веб-продуктах, будет только расти.

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

Клиент, сервер и база данных

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

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

Веб-приложение представлено следующими составляющими («сторонами»):
1. Клиент.
Как правило, клиент – это браузер, но встречаются и исключения (в тех случаях, когда один веб-сервер (ВС1) выполняет запрос к другому (ВС2), роль клиента играет веб-сервер ВС1). В классической ситуации (когда роль клиента выполняет браузер) для того, чтобы пользователь увидел графический интерфейс приложения в окне браузера, последний должен обработать полученный ответ веб-сервера, в котором будет содержаться информация, реализованная с применением HTML, CSS, JS (самые используемые технологии). Именно эти технологии «дают понять» браузеру, как именно необходимо «отрисовать» все, что он получил в ответе.

2. Сервер.
Веб-сервер – это сервер, принимающий HTTP-запросы от клиентов и выдающий им HTTP-ответы. Дабы избежать возможной путаницы, отметим, что веб-сервером называют как программное обеспечение, выполняющее функции веб-сервера, так и непосредственно компьютер, на котором это программное обеспечение работает. Наиболее распространенными видами ПО веб-серверов являются Apache, IIS и NGINX. На веб-сервере функционирует тестируемое приложение, которое может быть реализовано с применением самых разнообразных языков программирования: PHP, Python, Ruby, Java, Perl и пр.

3. База данных.
В классической теории речь идет о двух «сторонах» веб-приложения, однако, если внимательно посмотреть на весь процесс работы приложений, мы можем отметить, что в алгоритме работы веб-а незримо, но довольно активно принимает участие еще одна «сторона» – база данных. Фактически, она не является частью веб-сервера, но большинство приложений просто не могут выполнять все возложенные на них функции без нее, так как именно в базе данных хранится вся динамическая информация приложения (учетные, пользовательские данные и пр).

База данных – довольно широкое понятие, которое используется не только в сфере информационных технологий. В контексте моей статьи это – информационная модель, позволяющая упорядоченно хранить данные об объекте или группе объектов, обладающих набором свойств, которые можно категоризировать. Базы данных функционируют под управлением так называемых систем управления базами данных (далее – СУБД). Самыми популярными СУБД являются MySQL, MS SQL Server, PostgreSQL, Oracle (все – клиент-серверные).

Также существуют встраиваемые и файл-серверные СУБД. Для общего развития отмечу лишь одну популярную встраиваемую СУБД – SQLite, которая используется в некоторых браузерах, Android API, Skype и других известных приложениях. Взаимодействие с перечисленными СУБД основано на специальном языке структурированных запросов – SQL.

Теперь, собрав в голове определенный архитектурный пазл, предлагаю рассмотреть его с точки зрения тестирования ПО. Несколько позже мы рассмотрим и то, как все составляющие «общаются» между собой.

Особенности архитектуры: «под прицелом» клиент

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

Кроссбраузерность: разнообразие клиентов
Что мы понимаем под тестированием на кроссбраузерность? Это проверка на правильность (соответствие требованиям и стандартам) отображения и функционирования веб-приложения в разных браузерах и на разных операционных системах. В современном мире стандартизация принимает глобальные масштабы, а потому большинство популярных браузеров одинаково обрабатывают код. При этом необходимость в кроссбраузерном тестировании не исчезает, так как далеко не все проблемы решаются стандартизацией.

Перед началом работ я рекомендую выяснять у ответственных лиц необходимый для тестируемого ПО набор браузеров. Можно самим собрать статистику по целевой аудитории вашего продукта и ограничить кроссбраузерное тестирование набором наиболее популярных в этой аудитории браузеров. В условиях регрессионного тестирования, когда ограничены временные и человеческие ресурсы, также можно применять практику распределения браузеров: закрепляя за каждым тестировщиком определенный браузер, вы сможете «покрыть» большой процент кроссбраузерных дефектов. Этот метод имеет и свои минусы: он наиболее результативен в большой команде тестирования, но становится практически неприменимым при наличии одного тестировщика.

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

В тестировании нуждаются все основные (среди пользовательской аудитории) браузеры, но особое внимание необходимо уделить IE, если он входит в их число. Именно в нем очень часто возникают проблемы, которые отсутствуют в других браузерах: так, в IE дополнительно рекомендуется обращать особое внимание на масштабируемость, фокус полей и работу JS.

Отдельно рекомендую не забывать о всякого рода валидаторах верстки, например https://validator.w3.org/. Даже если у вас недостаточно знаний, чтобы оценить соответствие верстки стандартам, можно использовать для этого автоматические средства и, проанализировав результат, указать разработчикам на самые серьезные «оплошности». Не стоит забывать, что иногда валидаторы обращают внимание на самые «мелочные мелочи», которые никто и никогда исправлять не будет. Если вы и заводите баг-репорты на подобного рода замечания, то удобнее будет собрать их в единый документ и прикрепить к репорту. К такого рода «мелочам» можно отнести всевозможные рекомендации, которые не имеют своего влияния на отображение и функционирование контента.

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

Как же не пропустить дефекты в формах на продакшен? Рассмотрим несколько простых шагов:
1. Тщательно проверяем обязательность заполнения полей и наличие соответствующей маркировки у них.
2. Заполнив и отправив форму, убеждаемся в том, что с данными происходит именно то, что запланировано. Если данные должны быть внесены в базу данных, проверяем, корректно ли завершился процесс (в конце концов, об этом можно попросить разработчика, если не хватает своих знаний SQL или прав доступа к БД).
3. Используем чит-листы для тестирования форм, например чит-лист регистрации от Алексея Лупана или чит-лист по Web UI контролам от Игоря Любина.
4. Проверяем, выводятся ли понятные пользователю информационные сообщения о необходимости заполнения пустых полей после попытки отправить форму.
5. Обращаем пристальное внимание на реализацию экранирования символов в полях форм, являющихся потенциальным источником уязвимостей для приложения и пользователей. Экранирование должно осуществляться на уровне не только клиента, но и сервера, отключить который в клиенте довольно просто (например, с помощью специальных плагинов, снимающих все возможные ограничения в несколько кликов, таких как Web Developer Toolbar – Forms).
6. Убеждаемся, что после заполнения формы пользователю приходит подтверждающее письмо с указанием соответствующего отправителя, а само тело письма соответствует требованиям (в том числе и на работоспособность ссылок).
7. Используем вспомогательные специальные инструменты для тестирования форм (например, Web Developer Toolbar).

Текст, как основной источник информации при работе через клиент
Как не крути, но особая ценность сети Интернет заключается в том, что она является практически безграничным источником информации. Часть этой информации представлена в виде текстов, с которыми, опять же, пользователь взаимодействует посредством клиента. Большинство веб-ресурсов в том или ином объеме требуют проверки текстов на предмет отсутствия грамматических ошибок и опечаток.

Конечно, значимость этого тестирования не так велика по сравнению с функциональным направлением, но пренебрегать им не стоит. На практике мне довелось встретиться с очень серьезной опечаткой: на продакшене одного из крупнейших интернет-гипермаркетов России была допущена ошибка, изменившая гордое название величественного города Ярославль на прискорбное оскорбительное слово. Название служило частью суб-меню, а потому было заметно всем жителям города с полумиллионным населением.

Да, мы не всегда имеем достаточно времени для вычитывания всех текстов, но в таких ситуациях на помощь приходят «SpellCheker-ы» (программы для проверки орфографии, онлайн или в виде плагинов для браузеров), например, Яндекс.Спеллер.

Веб-сервер: «долой клиент, тестим без него»

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

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

1. Большая часть веб-приложений требует для инсталляции специфических знаний в администрировании ОС. Попробуйте установить приложение на нескольких веб-серверах. В оптимальном случае это будут самые популярные технологии среди ваших пользователей, для установления списка которых потребуется предварительное исследование.
2. Инсталлируя веб-приложение, обращайте внимание на то, действительно ли приложение устанавливается в указанную вами директорию, базу данных, использует выбранный вами префикс и соблюдает прочие конфигурационные моменты.
3. Убедитесь, что приложение можно установить как из localhost, так и удаленно.
4. Если процесс инсталляции является интерактивным, и каждый выбор пользователя на определенном шаге влияет на последующие действия, то необходимо будет пройти все ветви, так как именно инсталляция является первым шагом пользователя в работе с вашим приложением.
5. Не забывайте о негативных тестах: проверки в условиях недостаточности ресурсов (места на диске, оперативной памяти) или привилегий, прерывание процесса установки во время активной его фазы (например, отправляя сервер в перезагрузку).

Нагрузочное тестирование
Нагрузочное тестирование имитирует работу с приложением определенного количества пользователей. Этот вид тестирования осуществляется при помощи специальных инструментов (например, jMeter), главная цель которых – определить профили нагрузки и искусственно создать для них нагрузку, выявляющую граничные возможности приложения (или сервера) в условиях работы с ним того или иного количества пользователей.

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

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

База данных: «хранить нельзя удалить»

Еще одной ранее рассмотренной составляющей веб-приложений является база данных, в которой приложение хранит всю необходимую информацию. Для того, чтобы база данных служила достойным хранилищем информации для вашего приложения, при тестировании необходимо обращать внимание на следующие основные моменты:
1. Вносимая через интерфейс информация должна быть сохранена в базе данных в неизменном (первоначальном) виде.
2. Сохраненная в базе данных информация должна отображаться в любой части приложения одинаково (если иного не требует бизнес-логика приложения).
3. Названия таблиц и структура БД должны соответствовать проектной документации.
4. Нужно следить за тем, чтобы запросы не обрабатывались слишком долго, а количество соединений было достаточным. Мониторинг состояния БД – один из важных моментов тестирования.
5. Стоит учитывать, что удаление записи в БД не всегда сопровождается полным удалением сущности. Иногда используется так называемое «псевдоудаление», и нужно проверить, правильно ли оно выполняется.
6. Пустую БД на тестовом стенде рекомендуется либо заполнять сгенерированными случайными данными, либо снимать дамп с продакшена и после обфускации данных «заливать» их в тестируемую БД. Иногда квалификация тестировщика (или иная причина) не позволяет выполнить этот процесс самостоятельно: в таком случае рекомендуется обратиться за помощью к специалистам инфраструктуры или разработчикам.

Запросы: do you speak computish?
Все составляющие веб-приложения должны взаимодействовать между собой, и происходит это благодаря HTTP(s). Без HTTP наша многосторонняя система не функционировала бы в принципе, так как HTTP – это протокол передачи данных, занимающий одно из основных мест в нашей клиент-серверной архитектуре.

    • стартовая строка;
    • заголовок;
    • тело сообщения.

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


1. Метод GET. Используется для запроса содержимого, размещенного на сервере (например, GET /path/resource?param1=value1¶m2=value2 HTTP/1.1).
2. Метод HEAD. По своей сути не отличается от вышеупомянутого метода, однако ответ сервера на такой запрос лишен «тела», а практическое применение ориентировано на облегченное использование с целью получения минимальной информации о сервере/продукте или его статусе.
3. Метод POST. Данный метод используется для передачи данных на сервер, однако его основа «прячется» в тело, что отличает его от GET. Во время публикации этой статьи, например весь текст будет помещен в тело POST-запроса; после обработки его сервером на сайт будет добавлена статья.

Существуют и другие методы: PUT, DELETE, CONNECT, TRACE, PATCH и т. д.

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

Классическими приложениями, которые можно использовать для генерации запросов, является Fiddler или Postman. Используя Fiddler, можно с легкостью отслеживать все запросы от клиента и ответы, просматривать их детали, а также вносить свои изменения и отправлять модифицированные запросы на сервер, оценивая поведение системы в таком случае.

На что обращать внимание в запросах?

1. Правильный ли метод используется для того или иного запроса? Если вы отправляете сообщение, а на сервер уходит только GET-запрос, то что-то здесь явно не так.
2. Казалось бы, клик по одной и той же функциональной клавише генерирует один и тот же запрос. Но есть прецеденты, когда клик по кнопке приводил к ситуации, в которой JavaScript переписывал запрос рядом находящейся кнопки, таким образом меняя ее предназначение.
3. Вникайте в отправляемые запросы. В них довольно легко разобраться, особенно если это GET – они логически понятны даже рядовому пользователю. Анализ запросов – это возможность обнаружить спрятавшийся дефект гораздо быстрее, чем осуществляя его поиск в интерфейсе.
4. Мониторьте трафик на предмет запросов на другие (не ваши) сервера. Пример из жизни: фронтэнд сайта делал фриланс-разработчик, по завершению работы которого мы принялись за тестирование. Я имею привычку мониторить весь трафик тестируемого приложения: это позволило обнаружить, что вышеупомянутый разработчик без зазрения совести спрятал в «фронт» сайта запросы, которые работали на благо его личного интернет-магазина.
5. Мониторя трафик, внимательно следите за кодами состояний. Мы подробнее остановимся на этом пункте.

Коды состояния глазами адепта качества
Каждый ответ на любой запрос несет в себе массу полезной для разработчиков и специалистов по тестированию ПО информации. Одним из источников такой информации может стать код состояния: по этому коду клиент узнаёт о результатах его запроса и определяет, какие действия ему предпринять дальше. Набор кодов состояния является стандартом, он описан в соответствующих документах RFC. Каждый раз, когда вы создаете баг-репорт о неработающих ссылках, иных элементах веб-страницы или системных ошибках, обязательно указывайте ответы сервера: они сэкономят время разработчику при определении причин дефекта.

Все коды можно поделить на группы (сотые, двухсотые, трехсотые, четырехсотые и пятисотые) каждая группа-«сотня» несет свой тип информации.

По клику на картинку откроется полная версия.

Более детально с кодами состояния можно ознакомиться на Wikipedia.

На практике, используя при тестировании специальные приложения (тот же Fiddler), вы без труда сможете отсортировать свои запросы и ответы по коду состояния и отобрать, например, все 400-е и 500-е с последующим их анализом. Таким образом очень быстро «отлавливаются» дефекты с «отвалившимися» стилями, скриптами, файлами, функциями приложения и т.п.

Чем еще отличается веб-приложение от десктопного: больше особенностей – больше проблем!

Многопользовательская сущность веб-приложений
Широта аудитории приложений накладывает свой отпечаток на специфику работы.
1. Одно приложение одновременно может использоваться огромным количеством людей. Мы уже рассматривали вопрос нагрузочного тестирования, но также следует обратить внимание на то, что в число пользователей могут входить представители разных культур, языков и религий. Нам необходимо помнить об этом, особенно если речь идет о тестировании международного приложения.
2. Каждый пользователь может иметь свои уровни доступа. В идеальном варианте тестировщик создает для себя матрицу уровней доступа и тестирует каждый доступ в отдельности.

По клику на картинку откроется полная версия.
3. Пользователи с одним уровнем доступа могут обращаться к одним и тем же сущностям, что приводит к конкурентному доступу. Тестируется это довольно просто. Для примера рассмотрим систему, имеющую дело с договорами, которые можно создавать, публиковать, редактировать, аннулировать. Алгоритм работы таков: под несколькими окнами в режиме инкогнито авторизуемся в приложении под пользователями с разными уровнями доступа; далее выбранную для теста сущность открываем на редактирование, а под второй учетной записью эту же сущность пробуем перевести в статус «Аннулировано» – на этом этапе должен сработать контроль на конкурентный доступ. Операция аннулирования блокируется, а пользователю выдается сообщение о том, что сущность редактируется другим пользователем (поведение и приоритет действий определяются в соответствии с требованиями и особенностями продукта, но логика не меняется).
4. Широта аудитории говорит о том, что за монитором может находиться человек, имеющий злой умысел в отношении вашего ПО.

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

В любом из описанных выше случаев приложение должно работать корректно. При «падении» запроса (time out) или иной проблеме мы должны, перезагрузив страницу, снова получить полностью работающее веб-приложение без какого-либо намека на только что пережитый «урон». Для всех ли функций приложения необходимо подобные тесты? Ни в коем случае! В будущем можете ориентироваться на свой опыт, а на первых этапах в этих вопросах лучше проконсультироваться с разработчиками.

Тестирование безопасности веб-приложения: спаси, сохрани, защити
Тестирование безопасности – отдельное направление тестирования, которое требует от специалиста фундаментальных знаний технического характера и хорошей профильной квалификации. Я отмечу ряд общих моментов, которые могут помочь любому тестировщику находить классические уязвимости, не допуская их выход на продакшен. Вопросы безопасности приложений регламентируются OWASP Guide, CHECK, ISACA, NIST Guideline, OSSTMM.

Существует ряд принципов безопасности, к которым относятся конфиденциальность, целостность и доступность:
1) Конфиденциальность – ограничение доступа к той или иной информации для определенной категории пользователей (или наоборот предоставление доступа только ограниченной категории).
2) Целостность включает в себя:
а) возможность восстановить данные в полном объеме при их повреждении;
б) доступ на изменение информации только определенной категории пользователей.
3) Доступность – иерархия уровней доступа и четкое их соблюдение.

Перечислим классические уязвимости современных веб-приложений:
1. XSS – генерация на странице продукта скриптов, представляющих опасность для пользователей продукта;
2. XSRF – уязвимость, при которой пользователь переходит с доверенной страницы на вредоносную, где воруются представляющие ценность пользовательские данные;
3. сode injection (PHP, SQL) – инъекция части исполнительного кода, которая делает возможным получить несанкционированный доступ к программному коду или базе данных и вносить в них изменения;
4. authorization bypass – это вид уязвимости, при котором можно получить несанкционированный доступ к учетной записи или документам другого пользователя;
5. переполнение буфера – явление, которого можно достичь во вредоносных целях, по своей сути представляет использование места для записи данных далеко за пределами выделенного буфера памяти.

При тестировании рекомендую использовать чит-листы уязвимостей XSS Filter Evasion Cheat Sheet и MySQL SQL Injection Cheat Sheet.

Практические советы: еще раз о насущном

Начинаем тестировать не с тестирования: с чего начать?

    • цель тестирования (с их точки зрения);
    • виды тестирования, которые необходимо провести;
    • специфику приложения и его целевую аудиторию;
    • перечень устройств, на которых необходимо проводить тестирование;
    • список ОС и браузеров для тестирования;
    • разрешения экранов на которых необходимо проверить приложение;
    • предусмотрены ли требования к разного рода формам, есть ли стайл-гайд, актуальное ЧТЗ;
    • необходимость предоставления конкретной документации по результатам тестирования (отчет, чек-листы, тест-кейсы и т. д.).

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

Некогда думать, нужно тестировать!
Любое тестирование требует содержательного подхода с применением техник тест-анализа и тест-дизайна. В противном случае вы рискуете навсегда остаться «monkey-тестером», ценность труда которого будет мизерна. В целом, ключевые положения тест-анализа и тест-дизайна применимы как к тестированию десктоп-приложений, так и к веб-у, но с существенной оговоркой: вы должны учитывать все упомянутые в статье нюансы. Отдельно хочу акцентировать внимание на том, что без стойкого понимания методик и способов применения тест-анализа и тест-дизайна тестировать качественно ПО практически невозможно.

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

Подай ключ «на 13»
В настоящее время существует огромное множество разнообразных инструментов, которые упрощают жизнь всем участникам разработки нового ПО. Следовательно, не стоит забывать о том, что помимо развития личных качеств, технических знаний и навыков, мы должны уметь хорошо пользоваться вспомогательными инструментами, каждый раз испытывая все новые и новые.

    • Ресайзер – оперативное изменение всяческих настроек размеров отображения, просмотр метрик, переключение ориентаций отображения.
    • Opera Mobile Classic Emulator – классический одноименный эмулятор.
    • Mobile Phone Emulator – классический эмулятор.
    • Fiddler – ПО для отслеживания всего вашего трафика. Я всегда сопровождаю любое тестирование его фоновой работой, а потом сортирую по ошибкам и анализирую трафик. Также с помощью этого приложения можно отправлять ложные запросы на сервер с нужными вам параметрами.
    • Xenu Link Evaluator (альтернатива – Black Widow) – «чекер» веб-приложения на предмет наличия в нем «битых» ссылок. Также можно использовать его для формирования карты приложения.
    • Skipfish – активный сканер уязвимостей веб-приложений.
    • OpenVAS – бесплатный сканер уязвимостей.
    • Nikto – веб-сканер, проверяющий веб-серверы на самые частые ошибки, возникающие обычно из-за человеческого фактора.
Топ-пост этого месяца:  Топ плагинов jQuery. Плагин меню Slinky

Выводы и напутствия

Подводя итоги, я хочу еще раз акцентировать внимание читателя на том, что «веб» развивался, развивается и будет развиваться, а количество используемых технологий, как и разнообразие дефектов, – увеличиваться. Возможно, когда-то придет закат эры «веб-а», но это не случится в ближайшие 5-10 лет, поэтому знание основ и понимание сути веб-приложений поистине бесценно. Любой тестировщик рано или поздно прикоснется к «веб-у» своей профессиональной «разрушительной» рукой, но только хороший специалист получит из этого максимально приближенный к требуемому результат.

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

Каждый из этих навыков QA Engineer должен развивать постоянно, и тогда он сможет избежать многих возможных проблем и остаться востребованным высококвалифицированным профессионалом. Остановка в развитии для специалиста из сферы обеспечения качества фактически приравнивается к профессиональной смерти (как минимум, «клинической» в том случае, если стремление к новым знаниям со временем возвращается). Движение – это жизнь. Всем добра!

Что проверить перед запуском сайта

Ренд Фишкин (Moz) в рубрике Whiteboard Friday рассказал о пяти типах ошибок, на которые стоит проверить сайт перед запуском.
Приводим рекомендации Ренда и советы российских экспертов.

1. Ключевые слова в карте URL-адресов

Проведите исследование своих ключевых слов и составьте список, в котором сопоставляются все ключевые слова, по которым вы хотите ранжироваться, с соответствующими URL, которые есть на сайте в итоге.

Выглядит это примерно так. URL RandsAnimal.com – ключевая фраза для него «amazing animals» – заголовок и описание. Или страница RandsAnimals.com/lemurs – это страничка о лемурах, которая должна ранжироваться по ключевым словам «лемуры» и «привычки лемуров». Далее – titile и description.

Проверьте, нет ли у вас неосвоенных URL или ключевых слов.

2. Доступность, сканирование и UX

  • Доступны ли страницы и контент сайта для поисковых систем?

Проверить это помогут инструменты вроде Screaming Frog или Google Search Console. C помощью Moz Pro или OnPage.org можно проверить, есть ли у поисковых роботов доступ ко всем страницам сайта, нет ли дублирующегося контента или страниц без контента вовсе, нет ли битых ссылок или «битых» страниц.

  • Доступен ли контент для всех пользователей на всех устройствах и во всех браузерах?

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

И конечно, браузеры. Убедитесь, что сайт одинаково удобен не только в Chrome или Firefox, но и, например, в Internet Explorer, который теперь Microsoft Edge.

  • Страницы сайта загружаются быстро отовсюду?

Google PageSpeed Insights вам в помощь. Используйте прокси-сервера, чтобы проверить, что сайт быстро грузится из разных регионов.

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

Проведите собственное юзабилити-тестирование, привлекая друзей, семью или клиентов. Или используйте специальные инструменты вроде Five Second Test или UsabilityHub для онлайн-тестирования.

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

3. Установите основные сервисы и трекеры

Веб-аналитика – как минимум Google Analytics и Яндекс.Метрика. Дальше зависит от целей и фантазии.

Мониторинг доступности и производительности сайта – например, Pingdom.

Ретаргетинг и ремаркетинг – даже если вы не планируете платить сейчас и не хотите использовать эти сервисы, все же стоит разместить пиксели Google и Facebook сразу, чтобы эти аудитории были доступны вам в будущем.

Оповещения об упоминании вашего бренда. Подойдет как элементарный Google Alert, так и более сложные инструменты вроде Fresh Web Explorer alerts от Moz, Mention.net, Talkwalker или Trackur.

Google Search Console и Яндекс.Вебмастер предупредят вас о многих ошибках.

Инструменты для сбора позиций, отслеживания индексирования страниц, анализа конкурентов и ссылочного профиля. Например, Moz, Ahrefs, SEMRush, Searchmetrics или Raven. Еще больше – в нашей подборке сервисов для веб-аналитики.

Ссылки на профили в соцсетях. Они же у вас есть?

4. Schema, расширенные сниппеты, OpenGraph и т.д.

Есть ли на сайте возможность для создания расширенных сниппетов? Все ли у вас готово для корректного отображения в Facebook, Twitter и других соцсетях? Зависит от вас и разметки.

5. Анонс вашего запуска

Задайте себе несколько вопросов:

  • Кто поможет рассказать о вашем запуске? И почему он это сделает?

Создайте список коллег, партнеров, журналистов, которые могут вас поддержать. Подумайте, почему им будет это интересно. Заранее подготовьте контент и предупредите их о планируемой дате запуска. Опоздаете – и будете уже никому не интересны.

  • Какие существующие профили, контакты стоит обновить, чтобы привлечь внимание?


Все просто: обновите подпись в почте, информацию в соцсетях – Facebook, Twitter и заблокированный LinkedIn вам в помощь.

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

Что говорят у нас

Алексей Бузин, генеральный директор СЕО Импульс

Основные моменты, которые необходимо выполнить до запуска сайта Ренд Фишкин, конечно, указал и даже больше). Если бы все перед запуском так подготавливали сайты – процесс продвижения и вывод в ТОП 10 занимал бы гораздо меньшее время.

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

Постараюсь немного дополнить рекомендации Ренда Фишкина:

1) Проверить доступность сервера из разных регионов, на котором будет размещаться сайт можно таким сервисом, как https://www.host-tracker.com/.

2) Указать основное зеркало: www.site.ru либо sitе.ru — сайт должен быть доступен только по 1 адресу изначально. Также желательно сразу настроить все необходимые редиректы, чтобы избавиться от внутренних дублей на сайте.

3) Настроить корректную обработку 404 ошибки.

4) Стили CSS и скрипты (по возможности) должны быть вынесены в постзарузку.

5) Уникальный полезный контент для основных страниц сайта должен уже быть написан и выложен в красивом виде на сайт.

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

Тонкости SEO-оптимизации – это уже материал для другой статьи или серии статей. Поисковые системы любят, когда сайт открывается к индексации максимально «причесанным», в этом случае при хорошей структуре, крутом дизайне и полезном контенте можно войти в ТОП 10 по многим ключевым фразам в течение 3 месяцев.

Анастасия Шестова, руководитель направления поискового продвижения ИнтерЛабс

Ниже краткий список того, на что нужно обратить внимание SEO-специалисту перед запуском сайта.

1. Доступность для индексации поисковыми системами. Отсутствие запретов индексации (в том числе проверка корректности и полноты служебных файлов robots.txt, sitemap.xml). Частая ошибка – наличие метатега Robots со значением noindex, что закрывает от индексации содержимое страниц. Также необходимо закрыть от индексации тестовую версию, исключить копии, размещенные на других доменах.

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

3. Корректность URL страниц сайта. Необходимы статические/псевдостатические страницы, в идеале – с адресами ЧПУ и небольшой вложенностью по структуре. ЧПУ лучше прописать сразу с учетом семантики.

4. Наличие необходимого контента. Лучше, чтобы на сайте сразу был текстовый контент хотя бы на основных страницах с учетом семантики. Также на страницах должны быть заголовки – не более одного заголовка h1, а также подзаголовки h2–h6 при необходимости в текстовом блоке. Важно проверить, чтобы с помощью заголовков не были выделены сквозные блоки.

5. Заполненные заголовки страниц и метатеги. Нужно как можно быстрее заполнить уникальным содержимым заголовки страниц Title, а также метатеги Description и Keywords. Проще всего это сделать, задав шаблоны регулярных выражений с использованием h1 страниц.

6. Защищенное соединение. Особенно для коммерческих сайтов: в идеале – сразу защищенное соединение (https).

7. Наличие и корректность первичной навигации. Это включает сквозную ссылку на главную, наличие карты сайта, простого и понятного основного меню, «хлебных крошек» и т.д. Корректность верстки, отсутствие орфографических ошибок в заметных местах сайта (баннеры и т.п.).

8. Скорость загрузки страниц. Страницы сайта должны загружаться быстро, проще всего проверить с помощью Google PageSpeed Insights.

9. Корректность отображения. Необходимо проверить сайт в мобильной/десктопной версии, разных браузерах.

10.Наличие счетчиков статистики. Лучше сразу же добавить на сайт счетчики Google Analytics и Яндекс.Метрика. Помимо этого, необходимо сразу добавить сайт в Яндекс.Вебмастер и Google Search Console, чтобы оперативно отслеживать индексацию сайта и многое другое.

11. Наличие микроразметки. При наличии структурированных данных целесообразно сразу сделать микроразметку, особенно актуальным это является для интернет-магазинов. Проверить корректность микроразметки проще всего через валидатор Яндекса.

Илья Русаков, руководитель студии интернет-маркетинга impulse.guru и основатель сервиса seo-reports.ru

На самом деле мелочей очень много, в том числе и технических (таких как смена тестовых паролей, настройка резервного копирования и т.п.)

Если озвучивать самые основные моменты для SEO-специалиста, то они будут следующими:

1. Установка систем аналитики и панелей Вебмастеров. Это, естественно, Я.Метрика, Google Analytics, Я.Вебмастер и Google Search Console

2. Файлы robots.txt и sitemap.xml (в том числе meta name=”robots”). Карта сайта должна быть актуальной и при добавлении новых страниц на сайте или каких-либо других изменениях, обновляться в автоматическом режиме. В robots.txt служебные страницы и прочая подобная информация должны быть закрыты от индексации, а в директиве «Host» указано главное зеркало. Ну и конечно, сам сайт открыт для индексации. Проверить корректность карты и robots можно в панелях вебмастеров

3. Метатеги на страницах. Речь идет о метатегах заголовка (Title) и описания (Description), которые нужно прописать для каждой страницы сайта. Причем они должны быть уникальны и оптимизированы под ключевые слова. Для этого можно воспользоваться специальными программами-пауками – Screaming Frog SEO Spider, Website Auditor и Netpeak Spider.

4. Проверка текстов на уникальность и ошибки. Ошибки можно проверить в сервисе «Орфограммка», а уникальность – в Content-watch.

5. Использование канонических URL. С помощью атрибута rel=canonical можно указать канонические ссылки для группы страниц с похожим содержимым, например, страниц фильтров или карточек товаров в интернет-магазинах, которые отличаются только размером и т. п. Это помогает избежать индексирования страниц-дублей поисковыми системами. Еще ряд важных моментов, которые можно было бы вынести отдельным пунктом, но, лучше добавлю прямо сюда:

  • убедитесь, что сайт доступен по одному адресу (с www или без);
  • главная страница доступна только по одному варианту, без index.php и прочего;
  • все нужные редиректы (включая 301-й), если в этом есть необходимость, настроены.

6. Наличие 404 страницы. Убедитесь, что шаблон страницы 404 ошибки показывается в нужных ситуациях и хорошо выглядит. В принципе, его всегда можно доработать потом, но, как показывает практика, это самое «потом», становится понятием очень растяжимым

7. Скорость загрузки страниц. Уже сейчас скорость загрузки сайта является одним из факторов ранжирования. Пользователь хочет видеть ответ в максимально короткий промежуток времени. Я предложу использовать не стандартный инструмент от Google, а конкретный отчет в Я.Метрике – Мониторинг – Время загрузки страниц.

8. Корректное отображение на мобильных устройствах. Сейчас мобильная выдача отличается от выдачи на декстопе + это важно в контексте юзабилити, поэтому иметь корректную мобильную версию (не обязательно адаптив) просто необходимо.

9. Работоспособность форм обратной связи. Этот пункт напрямую влияет на конверсию. Можно приводить сколько угодно много трафика на сайт, но, если с форм не уходят письма на почту, все это будет зря.

10. Фавиконка. Казалось бы, мелочь. Однако фавикон может увеличивать CTR сайта на выдаче Яндекса.

11. Удаление тестовой версии сайта. Очень часто программисты могут оставлять на поддоменах одну из предыдущих версий разработки сайта. Это создает полную копию сайта. Обязательно проверяем и удаляем такие копии.

А о чем вы посоветуете позаботиться перед запуском сайта? Ждем ваших дополнений в комментариях.

27 сервисов по анализу сайтов-конкурентов

Время чтения: 25 минут Нет времени читать? Нет времени?

Умные люди учатся на чужих ошибках и… достижениях. Также и компании, которые хотят добиться больших успехов, могут учиться на опыте своих конкурентов. Наблюдение за конкурентами поможет не только выявить их сильные и слабые стороны, но и понять, к чему стоит стремиться вашей компании, в каком направлении двигаться.

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

Все эти инструменты, в зависимости от выполняемых функций, разделены по следующим группам:

Сервисы по поиску упоминаний бренда

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

1. Mention

Сервисом Mention пользуется 500 000 компаний, среди которых – ASOS, Microsoft, Spotify и т. д.

Mention проводит мониторинг упоминаний бренда на 42-х языках из миллиона разных источников: в социальных сетях, новостных порталах, форумах, блогах и любых других сайтах.

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

Сервис представлен базовой бесплатной версией и 3-мя платными тарифами, самый недорогой из которых стоит $29 в месяц. Также можно приобрести бесплатную демо-версию на 14 дней.

Зарегистрироваться на сайте можно через социальные сети – Facebook, Twitter, LinkedIn и Google+, или же создав аккаунт.

2. Brand24

Brand24 – сервис, работающий с более чем 30000 брендов по всему миру. Его пользователями являются многие известные компании, среди которых Panasonic, IKEA, H&M, Raiffeisen Bank.

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

Отчет о полученных данных содержит графики количеств упоминаний и их эмоциональной оценки, страницы сайтов с найденными упоминаниями. Все результаты отсортированы по разным видам источников (Facebook, Twitter, видео, фото, блог, форум и т. д.).

Представлено 3 платных версии, стоимость которых от $49 в месяц, а также бесплатная 14-дневная демо-версия.

Регистрация на сайте занимает несколько секунд – нужно всего лишь ввести мейл и пароль или войти через Facebook.

3. Hootsuite

Hootsuite – бесплатный сервис по мониторингу упоминаний бренда в социальных сетях, таких как Twitter, Facebook, LinkedIn, WordPress, Foursquare и Google+. Пользователями сервиса являются более 10 миллионов человек, в том числе и известные компании – NYC и Hershel.

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

Можно бесплатно воспользоваться демо-версией тарифа Hootsite Pro в течение 30 дней. Платные же тарифы начинаются от $9.99.

Зарегистрироваться на сервисе можно через учетную запись Twitter, Facebook, Google или путем создания аккаунта.

4. Open Social Buzz

Open Social Buzz проводит поиск данных в Twitter, Google+, Facebook, LinkedIn и других источниках в режиме реального времени. После регистрации в личном кабинете можно отслеживать упоминания брендов, людей и вообще любых фраз.

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

Бесплатная версия сервиса имеет свои ограничения – можно ввести 100 поисковых запросов в день и получить 2 уведомления по электронной почте. Чтобы получить большее количество поисковых запросов и уведомлений, можно воспользоваться 3-мя платными тарифами. Они позволяют проводить мониторинг, сохранять посты и находить все упоминания компании. Их стоимость начинается от 3,49 € в месяц. Также можно воспользоваться бесплатной 14-дневной демо-версией.

5. Google Alerts

С помощью Google Alerts можно отслеживать появления упоминаний бренда, деятельность конкурентов и любую другую информацию на блогах и форумах в режиме реального времени.

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

Для работы на Google Alerts необходимо всего лишь иметь учетную запись в Google (почтовый ящик на gmail.com), дополнительная регистрация не нужна.

Сервис крайне прост и удобен в использовании.

Сервисы по поиску обратных ссылок

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

Для этого нужно всего лишь ввести URL выбранных сайтов в поисковую строку. Рассмотрим несколько сервисов по поиску обратных ссылок.

6. Ahrefs Site Explorer

Сервис проводит анализ поискового трафика сайтов и показывает, какой контент больше всего привлекает аудиторию конкурентов.

Помимо определения объема ссылочной массы, сервис прогнозирует вероятный «органический» трафик с поисковых систем (данным не всегда стоит доверять полностью, но какое-то представление о сайте конкурента сделать можно), самые «прокачанные» страницы с точки зрения входящих ссылок и наиболее популярные ключевые слова, по которым сайт имеет высокие позиции в поисковых системах.

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

Сервис имеет три тарифа, стоимость самого недорогого – $99 в месяц. Можно воспользоваться 7-дневной демо-версией тарифов Lite ($99 в месяц) и Standart ($179 в месяц), заплатив $7. Самый дорогой тариф стоит $999. Тарифы различаются по количеству просматриваемых компаний, обратных ссылок и ключевых слов.

7. Majestic Site Explorer

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

Сервис производит массовую проверку обратных ссылок, сравнивает ссылочные профили и посещаемость сайтов (можно сравнить не более 5 сайтов одновременно), а также осуществляет поиск по ключевым словам или фразам.

Интерфейс доступен на русском языке. Бесплатная версия имеет ограничения по 15-ти проверкам в сутки. Для того чтобы их избежать, нужно воспользоваться одним из 3-х платных тарифов, стоимость которых начинается от $49.99. Платные тарифы предоставляют более углубленный анализ результатов и возможность подключения по API. Они различаются по количеству пользователей, искомых обратных ссылок и подробных отчетов.

Чтобы получить список обратных ссылок, нужно ввести URL в поисковую строку на посадочной странице сайта.

8. LinkPad

LinkPad – очень популярный в рунете сервис, имеющий 150 тыс. клиентов и более 900 млн сайтов в своей базе.

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

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

Стоимость самого недорогого тарифа – 1450 рублей в месяц. Тарифы отличаются количеством разрешенных IP-адресов (в самом недорогом – 1, в более дорогих – неограниченное количество), числом строк данных в месяц и привязанных аккаунтов (в самом недорогом тарифе – 1, во втором – 5, в продвинутом (Ultimate) – неограниченное количество).

Сервис очень прост и удобен в использовании и выдает достаточно подробные результаты.

9. Monitor Backlinks

Этот сервис осуществляет автоматический поиск обратных ссылок конкурентов и поиск по ключевым словам, позволяет добавлять фильтры по следующим тегам: статус ссылки (nofollow, meta nofollow, meta noindex, wrong anchor, not found и т. д.), анкорный текст, статус страницы и домена в Google Index, расшаривания в социальных сетях, подсчет ссылок и т. д.

Все полученные данные поступают пользователям сервиса на электронную почту в виде отчетов.

На сайте представлено 4 стандартных платных тарифа, стоимость которых начинается от $25, и которые отличаются количеством пользователей и кредитов. К каждому из этих тарифов (кроме индивидуального) предлагается пробная демо-версия на 30 дней, что является огромным преимуществом этого инструмента перед другими.

10. Neil Patel’s Free Link Analysis Tool

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

По каждой ссылке дается подробная информация: оценка авторитетности домена и страницы, тип ссылки, анкорный текст, когда ссылка была в первый и последний раз «увидена» роботом.


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

Чтобы найти ссылки с сайтов или страниц определенной тематики, нужно указать в поле поиска интересующее ключевое слово. Полученные результаты можно отфильтровать по параметрам follow и nofollow. Расширенный фильтр позволяет производить поиск по определенным доменам (а также зонам и анкорам) или исключать их из поиска.

11. BacklinkWatch

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

Крупные сайты с объемной ссылочной массой лучше не анализировать – в списке будет очень много «мусора», в куче которого трудно отыскать качественные сайты. А вот для мониторинга мелких сайтов сервис вполне подходит.

Сервисы по поиску ключевых слов

Чтобы наблюдать за конкурентами, можно использовать сервисы по поиску ключевых слов. А определив, какие ключевые слова работают для ваших успешных конкурентов, вы можете применять их и для своего сайта.

12. Spy words

Spy words – русскоязычный сервис по поиску ключевых слов. Среди его клиентов такие компании, как «ИНКОМ Недвижимость», «Coral Travel», kupivip.ru и т. д.

Сервис проводит анализ запросов конкурентов (в разделе «анализ конкурентов»), сравнивает видимость доменов разных компаний в поисковых системах (в разделах «битва доменов» и «война доменов»), выдает данные по Яндексу и Google. Причем видимость доменов можно посмотреть как в «органике», так и в системах контекстной рекламы.

Топ-пост этого месяца:  Использование React bind для привязки обработчиков событий в компонентах примеры кода

В «Битве доменов» можно бесплатно сравнить 3 сайта по количеству запросов и трафику.

В сервисе также доступна функция «Война доменов», которая позволяет сравнить до 20 доменов одновременно. Недавно появилась еще одна функция – «Рейтинги доменов», которая составляет рейтинги доменов по текущим показателям, по их взлету и падению и по другим параметрам.

Еще одна интересная функция сервиса – «Умный подбор запросов». Она предлагает к введенным запросам их улучшенные варианты.

«Анализ конкурентов» и «Битву доменов» можно проводить без регистрации. Для того, чтобы воспользоваться другими функциями, нужно будет приобрести один из 3-х платных тарифов:

  1. Тариф для интернет-магазинов (стоимость – 1928 рублей в месяц).
  2. Тариф для маркетологов (стоимость – 2450 рублей в месяц).
  3. Тариф для digital-агентств и крупных рекламодателей (стоимость – 4950 рублей в месяц). Только в этом тарифе доступны функции «Война доменов» и «Рейтинги доменов».

Все три тарифа безлимитные. В первом тарифе количество строк в отчетах – до 5000, во втором – до 50000, в третьем – до 1000000. Больше информации об отличии этих тарифов представлено на скриншоте, расположенном ниже.

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

13. iSpionage

Сервис iSpionage содержит более 22 млн ключевых слов. Он идентифицирует конкурентов в Google Adwords, показывает их стратегии в SEO и PPC и примерный ежемесячный бюджет, предоставляет полный список их ключевых слов, который можно отсортировать и найти самые эффективные из них, а также высылает уведомления о найденных данных.

Чтобы воспользоваться сервисом, нужно бесплатно зарегистрироваться. Бесплатная версия позволяет создавать 10 отчетов в день, получать 3 оповещения о данных конкурентов и пользоваться онлайн-советами по интернет-маркетингу.

Сервис представлен 3-мя платными тарифами, самый недорогой из которых стоит $59 в месяц.

Платные тарифы позволяют проводить поиск конкурентов и ключевых слов без ограничений, определять индекс эффективности ключевых слов (KEI), индекс эффективности рекламы (AEI), уникальную сортировку ключевых слов, SEO-показатели и количество трафика конкурентов, а также скачать полученные данные в формате PDF.

Тарифы различаются по количеству полученных данных в день и упоминаний о ключевых словах конкурентов. В самых продвинутых тарифах доступна возможность формирования отчетов по принципу White Label, мониторинга максимально полной информации конкурентов в системах контекстной рекламы и проведения A/B-тестирование рекламы конкурентов.

К каждому тарифу прилагается пробный 30-дневный период, по истечении которого пользователю могут вернуть затраченные средства, если сервис не оправдал его ожиданий.

14. KeywordSpy

Данный сервис ориентирован сугубо на поиск ключевых слов, используемых конкурентами, и позволяет узнать, сколько они тратят на Google Adwords.

Сервис довольно популярен, среди его клиентов такие известные компании, как Toyota, American Express, University of Kentucky.

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

Сервис предоставляет бесплатную пробную версию без ограничений по времени пользования. Платные тарифы начинаются от $89.95 в месяц и помимо поиска ключевых слов позволяют наблюдать за деятельностью партнеров, экспортировать данные в текстовые файлы и Excel, отслеживать данные в поисковых системах Google, Yahoo! и Bing, получать оповещения о появлении новых конкурентов и их ключевых слов, а также информацию о Топ-1000 сайтов и ключевых слов.

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

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

Сервисы определения позиций сайта

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

15. MegaIndex

MegaIndex занимается комплексным продвижением, аудитом и аналитикой сайтов и насчитывает более 300 тысяч пользователей.

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

Для того чтобы найти позиции сайтов конкурентов, можно воспользоваться специальной функцией «Анализ конкурентов» (в разделе «SEO-сервисы»). Найти эту функцию можно в личном кабинете после регистрации. Она предоставляет довольно обширный список данных: количество страниц в индексе, тИЦ, входящие ссылки на домен и страницу, релевантность текста и т. д.

Также по введенному URL сайта можно определить запросы и их позиции в различных поисковых системах («Видимость сайта» в разделе «SEO-сервисы»). Эта функция позволяет узнать, по каким запросам каждая из страниц сайта конкурентов привлекает клиентов.

Для того чтобы воспользоваться услугами сервиса, необходимо зарегистрироваться.

Для анализа входящих ссылок на сайт конкурента лучше использовать Megaindex на домене megaindex.ru, а не *.com.

16. Alexa

Alexa – дочерняя компания amazon.com, очень популярный сервис, имеющий тысячи клиентов, среди которых Wildfang, Houzz, Apartment Therapy, Umbra и т. д.

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

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

Alexa предлагает множество функций для оптимизаторов. Сервис позволяет определять географическое положение аудитории сайта, показатели вовлеченности посетителей, источники трафика и т. д.

Alexa также дает довольно подробную статистику по ключевым словам. Что особенно важно – упущенные возможности использования ключевых слов.

Если нужна функция анализа трафика сайта, подписка на месяц обойдется в $79 (пробная бесплатная версия продлится 7 дней). Более продвинутый тариф для одного пользователя и сайта, включающий множество дополнительных опций, будет стоить $149 (14 дней бесплатно), для агентств – $299 с пробным периодом в 30 дней (20 пользователей и 35 сайтов).

17. Serpstat

Serpstat — многофункциональная SEO-платформа для анализа конкурентов, их ссылок и мониторинга позиций. Исследует сайты стран СНГ, Америки, Европы и Австралии по Google и «Яндекс». Среди его клиентов: L’Oreal, Yves Rocher, SeoProfy и другие.

Сервис рассчитывает видимость домена среди сайтов из топ-20 поисковой системы. Если она выше, чем у конкурентов, значит ваш сайт ранжируется по большему количеству ключевых фраз, чем конкурент.

Также показывает изменение количества фраз в органике и видимость в течение года для любого сайта.

Вторая особенность платформы — инструмент «Дерево сайта». Он показывает структуру анализируемого сайта и фразы, по которым определенные страницы ранжируются в поиске.

Для зарубежных баз платформа показывает «Сложность фразы» от 0 до 100. Чем выше значение, тем сложнее по этому ключевику выбиться в топ и тем выше конкуренция в топе.

Сервисы социальной активности

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

18. Социальный разведчик

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

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

19. Fanpage Karma

Сервис предоставляет мониторинг данных сайтов на Facebook, Twitter, Google+, YouTube, Instagram и Pinterest. Он позволяет определить количество подписчиков конкурентов, их наиболее или наименее привлекательные посты, найти страницы, на которые подписаны ваши читатели.

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

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

Регистрация на сервисе происходит через учетную запись Facebook. Бесплатный план позволяет использовать 1 аккаунт, получать 100 упоминаний и отчет за 7 дней, а также детальный анализ и оповещения на почту. Чтобы зарегистрироваться, необходимо заполнить анкету и подписать соглашение в соответствии с новыми требованиями GDPR.

Чтобы получить большее количество перечисленных данных, можно приобрести один из 3-х платных тарифов по социальному мониторингу, самый недорогой из которых стоит $14.90 в месяц. Также можно получить индивидуальный тариф.

В этом сервисе мне понравилось все – начиная от функционала и заканчивая похожим на «фейсбуковский» дизайном.

20. Antidogs

С помощью бесплатного сервиса Antidogs вы можете проверить количество «собачек» (удаленных страниц пользователей) в сообществах конкурентов «ВКонтакте». Большое количество «собачек» сигнализирует о том, что в сообщество, скорее всего, накручивали подписчиков. Сервис подскажет процент удаленных страниц, и является ли это соотношение допустимым.

Другие сервисы

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

21. Адвсё

Сервис «Адвсё» предоставляет статистику поисковой рекламы в Яндексе и Google. Он позволяет найти сайты конкурентов, определить, по каким запросам видна их реклама, а также узнать количество показов и кликов, определить эффективные и неэффективные ключевые слова в запросах и т. д.

Сервис содержит 2 основные функции: поиск конкурентов и поиск запросов, по которым видна их реклама.

«Поиск конкурентов» составляет список конкурентов по введенным ключевым словам.

Поиск запросов, по которым видна реклама конкурентов, помогает определить наиболее популярные запросы того или иного сайта.

Основные функции сервиса бесплатны. Стоимость полного доступа ко всем отчетам и сервисам Адвсё – 1500 рублей в год.

22. Marketing Grader

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

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

Marketing Grader определяет размер страницы, ее запросы и скорость загрузки.

Для того чтобы воспользоваться сервисом, регистрация не требуется.

23. SEM Rush

SEM Rush – один из самых популярных сервисов по интернет-маркетингу. Он насчитывает уже 800 тысяч пользователей, среди которых такие известные компании, как Philips, PayPal, Forbes, Hyatt.

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

Сервис находит наиболее популярные анкорные тексты, определяет количество follow и nofollow ссылок, переходов по ссылкам и типы обратных ссылок.

Для того, чтобы воспользоваться сервисом, нужно зарегистрироваться.

SEM Rush представлен 3-мя платными тарифами, их стоимость начинается от $99.95. Они отличаются количеством отчетов в день и результатов в каждом отчете, проектов, ключевых слов для отслеживания, страниц для сканирования, профилей в социальных сетях. В самых дорогих версиях доступны фирменные отчеты в формате PDF, «исторические данные» и др.

24. The Wayback Machine

The Wayback Machine – бесплатный интернет-архив, который позволяет посмотреть, как сайты конкурентов выглядели в прошлом. Таким образом, можно пронаблюдать историю развития сайтов, которые впоследствии добились больших успехов.

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

Так, например, выглядел сайт «Текстерры» в 2008 году:

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

25. WooRank

Сервисом WooRank пользуется более 500 тыс. пользователей и 40 тыс. компаний, среди которых amazon.com, FIAT, Fujitsu, FedEx, Deloitte.

Он представлен 3-мя платными тарифами (их стоимость начинается от $59 в месяц) и бесплатной демо-версией на 14 дней.

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

Результаты сайта apple.com: сервис нашел ошибки и недочеты, а также предложил план их исправления

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

26. Связка Link Gopher + Be1.ru

Link Gopher – простое расширение для Google Chrome и Mozilla, позволяющее получать все ссылки с выбранной страницы.

Be1.ru – инструмент, с помощью которого вы можете узнать возраст страниц (до 50 URL одновременно).

Как можно использовать эти инструменты в связке? Представим, что вам нужно проанализировать частоту публикаций в блоге конкурента, но даты публикаций не указаны. Заходим в блог конкурента и с помощью Link Gopher получаем список ссылок на статьи. Нажмите на иконку расширения и выберите пункт Extract Links by Filter.

Зайдите в Be1.ru, вставьте полученные ссылки в окно и нажмите «Проверить»:

Сервис покажет, когда страница появилась в индексе «Яндекса», и сколько дней прошло с этого момента:

Кроме того, результатами проверки можно поделиться и скачать в формате .CSV.

27. Similarweb

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

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

Выводы

Существует много инструментов, которые можно применять для наблюдения за конкурентами. Думаю, вы и сами смогли бы продолжить этот список. При глубоком анализе конкурентов наши специалисты отдела SEO-продвижения используют статистику и данные нескольких источников – это дает более объемную информацию по необходимым ключевым метрикам.

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

А вы следите за своими конкурентами? Какие инструменты используете для этого? Делитесь своим опытом в комментариях.

Как упороться по оптимизации скорости загрузки страниц

При оптимизации скорости загрузки сайта я анализирую результаты автоматического тестирования в сервисах Google Lighthouse, Google PageSpeed Insights и Webpagetest.org и только потом готовлю рекомендации. Эти же инструменты мы будем рассматривать в статье.

Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

Важно помнить, что сайт состоит не только из главной страницы, но и многих других. Оптимизация всего ресурса начинается с исследования каждой типовой страницы. Например, на этом сайте я использую два шаблона: главная и статья. При анализе скорости загрузки нужно анализировать каждую такую шаблонную страницу. Нельзя забывать про «маловажные», которые не приносят трафика — поисковая система оценивает как показатели отдельных страниц, так и всего сайта в целом.

Статья поделена на несколько блоков для удобной группировки задач по оптимизации. Также постарался распределить их по сложности исполнения (хаха, нет).

Содержание:

Оптимизация изображений

Высота и ширина

Наиболее частая проблема при использовании изображений — некорректная высота и ширина. Это случается практически на всех сайтах и не удивлюсь, что это можно будет найти на этом.

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

Просмотреть такое соотношение можно проще и без использования дополнительных сервисов. В браузерных инструментах для разработчиков можно навести на адрес изображения:

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

Помимо оптимизации используемой высоты и ширины, нужно обязательно делать сжатие качества изображения для уменьшения их объёма.

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

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

Тут буду краток — круто, если это будет реализовано на большом контентном проекте. Однако после внедрения на одном из самых крупных сайтов в моей практике, скорость загрузки не изменилась.

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS

Загружать только те CSS, которые используются на странице. Браузеру не следует загружать лишние правила или отдельные файлы таблиц стилей, если они не используются на рассматриваемой странице. Подробная рекомендация представлена на данной странице официальных рекомендаций от Google.

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

Лучше отказаться от загрузки небольших CSS файлов. Если отдельный документ CSS содержит 10-20 строк кода, содержимое этого файла рекомендуется встроить сразу в html код с помощью тега . Это позволит сократить время обработки правил CSS, минуя стадию загрузки отдельного файла (опять же, оптимизация серверных реквестов).

Использование только файлов CSS и тега

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

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

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

Если же доработка по минификации разовая, можно обратиться к выгрузке оптимизированных данных из отчёта Google PageSpeed Insights как это было показано в пункте про оптимизацию изображений.

Оптимизация JS

Аналогично файлам CSS, браузер может задерживать время отображения контента страниц сайта из-за загрузки и обработки файлов JS. Большинство рекомендаций повторяются, однако есть дополнения.

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

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

Встраивание JS скриптов в HTML-код

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

Добавить комментарий