15 инструментов для аудита и оптимизации кода CSS


Оглавление (нажмите, чтобы открыть):

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

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

Оптимизация HTML-кода

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

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

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

Уменьшение объема кода и оптимизация CSS

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

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

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

Некоторые способы улучшить структуру CSS в ручном режиме:

  • Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;
  • Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;
  • Использовать лаконичные, понятные описания в комментариях;
  • Необычные шрифты прописывать при помощи стилей, а не изображений;
  • Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;
  • Применять к заголовкам инструменты H1 – и далее, чтобы они корректно распознавались при индексации;
  • Прописывать в keywords только те ключевые слова, которые используются на странице, минимизировать их количество;
  • Использовать разнообразные и краткие мета-теги.

CSS и HTML оптимизаторы

Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:

  • CleanCSS.com;
  • CSS Optimizer;
  • CSS Compressor;
  • CY-PR.com;
  • плагин Autoptimize.

Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и высочайшего уровней оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.

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

На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.

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

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

Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:

  • optimization.com;
  • Портал seo-чеклист;
  • плагин Firebug.

Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.

Валидация

Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator.w3c.org

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

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

CSS аудит: инвентаризация вашего кода

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

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

Выгоды аудита

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

Уменьшение размера файлов.

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

Создание согласованного стайл-гайда.

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

Стандартизация вашего кода.

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

Улучшение производительности.


И, наконец, самый важный плюс. Аудит CSS, применяемый вместе с объединением и сжатием таблиц стилей, позволяет заметно ускорить сайт. Например, вот что сообщил мне Гарри Робертс, фронт-энд разработчик из Англии, регулярно проводящий аудит, о своем последнем сайте:

При переработке Fasetto.com с целью улучшения производительности, вместо 27 файлов со стилями для одностраничного сайта (в основном с различными фрэймворками типа Bootstrap) получился один, который (после минификации и, местами, инлайнирования для сокращения числа запросов) весит 5.4 килобайт в сжатом виде.

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

Как проводить аудит: инвентаризация.

Теперь, когда вы знаете о плюсах аудита, возникает вопрос: с чего начать? Начать стоит с рассмотрения нескольких инструментов, позволяющих провести обзор имеющейся кодовой базы. Вы можете проводить свой аудит и по-другому, с учетом имеющихся на сайте проблемных мест или в соответствии с вашей методикой разработки (например, БЕМ или OOCSS). Самое главное, это осознавать, что именно нужно для вашего сайта в первую очередь.

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

Инструментарий

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

В дополнение к type-o-matic я запускаю CSS Lint. Это очень гибкий инструмент, позволяющий выявить множество потенциальных багов, начиная от отсутствующих безопасных цветов до выявления свойств, которые можно сократить применяя краткую запись (мэрджин, пэддинг и т.п.) Для использования CSS Lint, просто нажмите на сайте стрелку за словом Lint и выберите требуемые опции. Я привык выявлять с его помощью повторяющиеся правила CSS или использование злоупотребление изменением размеров шрифтов, поэтому я всегда проверяю не только производительность (Performance), но и поддерживаемость (Maintainability) и выявление дубликатов (Duplication). CSS Lint возвращает рекомендации для изменений: некоторые из них могут относиться к известным проблемам в старых браузерах, другие же могут иметь характер универсальных рекомендаций. Если же вы запустите CSS Lint со всеми опциями, то получите излишне перегруженный отчет, с ненужными вещами типа рекомендаций для ИЕ6. Тем не менее, это быстрый путь для выяснения общего состояния вашего CSS.

Затем я провожу поиск в CSS по известным свойствам, таким как float или margin , чтобы выяснить как часто они повторяются в коде. В командной строке это удобно делать с помощью утилиты grep (просто наберите grep “float” styles/styles.scss чтобы найти все floatы в стилях). Любые свойства вы можете вырезать или объединить с другими путем создания специальных классов в HTML в соответствии с нуждами вашего проекта.

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

  • CSS Dig — это скрипт на Питоне, который проходит через весь код CSS с выводом удобного отчета по всем свойствам.
  • CSS Colorguard — это совершенно новая утилита, работающая на Node.js, которая создает отчет по использованию цветов в ваших стилях. Соответственно, помогая узнать наиболее используемые цвета, выявить слишком похожие и ограничить палитру в целях облегчения поддержки. При необходимости, CSS Colorguard может использоваться и в качестве плагина Grunt или Gulp.
  • Dust-Me Selectors — расширение к Firefox, находящее неиспользуемые селекторы.

Строчка за строчкой

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

Одной из основных вещей, которые я проверяю особо внимательно — глубина вложенности селекторов. Основан ли ваш CSS на специфичности селекторов? Или вы видите длинные строки селекторов в файлах CSS или препроцессоров. Высокая степень вложенности означает, что ваш код всегда будет требовать жесткую структуру HTML для правильной работы. Если вы сможете от этого отказаться, то получите код, пригодный для неоднократного использования и дающий более быструю производительность.

Обзоры и рекомендации

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

Список рекомендаций не предполагает какого-либо особого форматирования и заранее установленной формы, главное, он должен быть легко читаемым. Имеет смысл разбить его на две части. В первой будет отчет с перечислением того, что вы нашли в ходе аудита. Сюда можно включить результаты проверки с помощью CSS Lint или Type-o-matic, в виде скриншотов или приложенного файла. Вторая часть будет содержать конкретные рекомендации по улучшению кода. Это может быть просто список с пунктами типа “Объедините схожие стили для шрифтов и создайте на их основе миксин для более широкого использования.”

Во время анализа собранной информации, обратите внимание на те места, где вы можете:

  1. Сжать код. Если у вас 4 набора различных стилей для одного виджета, несколько похожих стилей для ссылок или слишком много исключений в стандартной сетке. Это те вещи, которые надо выделить в в отдельны модуль. Проще всего это сделать в препроцессорах типа SASS, с помощью миксинов и экстендов, что позволяет применять сразу весь набор стилей к любому классу (хотя проверка выходного CSS из препроцессора нее будет лишней)
  2. Сохранение последовательного подхода к коду. Правильно проведенный аудит гарантирует соответствие кода методике разработки. В частности, при использовании BEM или OOCSS важно выдерживать единую методику, не допуская отклонений и исключений. А в случае их появления, документировать их для исключения проблем в командной разработке.
Мастер Йода рекомендует:  Большая подборка полезных практических и обучающих материалов по Java

Если вы работаете с клиентом, также важно будет объяснить ему свой подход к CSS, это позволит ему лучше понимать те проблемы в коде, которые вы выявите. Например, я предпочитаю OOCSS, поэтому стремлюсь к модульности и многократному использованию кода; обилие классов не беспокоит меня. Вы должны быть уверены, что ваш клиент понимает значимость вашей работы, когда вы не входите в команду по разработке.

Передача клиенту

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

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

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

Оптимизация CSS: методы и онлайн сервисы

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

Сразу возникает вопрос — а зачем это нужно? Ответ прост: оптимизируя таблицы стилей снижается загружаемый объем кода, вес файла style.css. В итоге страница станет меньше весить, а это экономия трафика и увеличение скорости загрузки сайта.

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

Как оптимизировать CSS и уменьшить размер файла

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

Какие мероприятия можно провести при оптимизации CSS:

  • Удалить неиспользуемые селекторы.
  • Удалить неиспользуемые закомментированные строки.
  • Сократить объем комментариев в файле стилей. Всегда удобно, когда элементы сгруппированы по общему признаку и имеют невидимые для глаз обычных пользователей комментарии. Но зачастую, чтобы добиться высокой степени сжимаемости CSS, приходиться от них избавляться. Чтобы при дальнейшей работе проще ориентироваться в коде, Вы можете по-прежнему их использовать, но оставляйте краткие описания.
  • Удалить пустые строки и пробелы. Но слишком не стоит увлекаться, код должен оставаться читаемым, чтобы без труда вносить правки.
  • Объединить элементы с одинаковыми свойствами.
  • Оптимизировать шрифты. Лучше использовать один шрифт. В каждом отдельно взятом блоке страницы использовать разный шрифт — дурной тон web-дизайна и, как видите, перегружает файл стилей.
  • Оптимизировать цвета. Это сделать достаточно просто, но сложно объяснить на словах, поэтому приведу наглядные примеры:
  • Оптимизировать отступы. Опять же на примерах:

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

    Оптимизация CSS с помощью онлайн сервисов

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

    Существует достаточное количество онлайн инструментов (CleanCSS, Online CSS Optimizer и т.д.), способных выполнить оптимизацию CSS. Они мало чем отличаются друг от друга, зачастую используют одни и те же алгоритмы и библиотеки сжатия, например YUICompressor или CSSTidy.

    Подробнее остановлюсь на том, которым чаще всего пользуюсь. Это CSS оптимизатор на портале для вебмастеров CY-PR.com.


    Для начала работы в текстовое поле необходимо вставить фрагмент CSS или полное содержимое файла стилей. Справа в раскрывающемся списке воспользоваться быстрыми настройками сжатия:

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

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

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

    И последнее дополнение: старайтесь объединять CSS файлы. Некоторые плагины используют свои стили, хранящиеся в отдельных файлах, было бы неплохо их объединить в один. В следующий раз в рамках данной рубрики я расскажу как можно автоматически получать на выходе сжатый CSS. До скорой встречи!

    Инструменты организации и приведения в порядок кода CSS

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

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

    ProCSSor — настраиваемый процессор CSS

    «Прекрасный CSS отладчик для прекрасных web-сайтов» (мой вольный перевод слогана procssor). Действительно очень достойный инструмент.

    ProCSSor позволяет придать вашему CSS легко читаемый, понятный и настраиваемый стиль в соответствии с вашими требованиями. ProCSSor может сжимать CSS и создавая легкую версию сайта. Есть версия программы для Mac в Apple Store, но особой нужды в ней не вижу, вот если бы она могла анализировать и выявлять неиспользуемые CSS стили на сайте. но увы. Так что онлайн-версии вполне достаточно.

    CSS Compressor & Minifier

    На мой взгляд, инструмент несколько уступает в настройках предыдущему процессору и не знает о CSS3. Есть предустановленные настройки степни сжатия итогового CSS. В остальном функционал повторяет возможности ProCSSor.

    CSS Lint — помогает обнаружить ошибки CSS кода

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

    Helium CSS – сканирование сайта на наличие неиспользуемого CSS

    Helium – интересный инструмент, написанный на javascript, позволяющий находить неиспользуемые CSS-стили на сайте. В первую очередь интересен при оптимизации сайтов, использующих различные универсальные фреймворки, к примеру широко известный Bootstrap.

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

    grunt-uncss — продвинутый плагин для удаления лишних CSS стилей на сайте

    О плагине для Grunt — uncss, который анализирует верстку и стили и позволяет не только избавиться от лишних селекторов в CSS, но и объединять и сжимать javascript на сайте я расскажу в отдельной статье. Тема очень интересная, но довольно сложная для новичков.

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

    Чек-лист из 146 пунктов для проведения аудита сайта: технические параметры и анализ SEO-оптимизации

    Краткое содержание статьи:

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

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

    1. Технические факторы и оптимизация

    Как использовать чек-лист?

    Чтобы провести технический аудит и аудит SEO-оптимизации, используйте приведенный чек-лист – список, содержащий ряд необходимых проверок для анализа и проведения работ. Мы собрали самые важные доработки, которые стоит сделать на каждом проекте. Для удобства список можно распечатать и отмечать выполненные пункты.

    1.1. robots.txt

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

    Используйте: «Инструмент проверки файла robots.txt» и «Посмотреть как Googlebot» в Google Search Console (далее GSC), «Анализ robots.txt» в Яндекс Вебмастер, Screaming Frog SEO Spider.

    1.2. Sitemap

    • Исключить мусорные, дубли и запрещенные страницы в robots.txt.
    • Указать верный протокол сайта http/https и ссылки с www или без www.
    • Из обязательных XML-тегов должны быть urlset, url, loc.
    • Должен содержать не более 50 000 ссылок и весить не более 10Мб.

    Используйте: ручную проверку, инструменты CMS, «Анализ файлов Sitemap» в Я. Вебмастер, «Файлы Sitemap» в GSC, Пиксель Тулс, СайтРепорт, Xenu, VisualSEO.

    1.3. 404-страница

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

    Используйте: ручную проверку, Bertal, СайтРепорт, PR CY, WebSite Auditor.

    1.4. Дубли

    • Должны быть настроены редиректы с www на без www (с без www на www), со слеша на без слеша (с без слеша на слеш) на конце адресации страниц, с http на https.
    • У главной страницы сайта должны быть настроены редиректы с содержанием index.php, index.html.
    • Сделать редиректы с дублей сайта, которые находятся на других доменах или в другой доменной зоне.
    • Технические дубли страниц закрыты с помощью robots.txt, или помечены canonical.

    Используйте: ручную проверку, раздел «Страницы в поиске» Яндекс Вебмастера.

    1.5. Код

    • Удалить пустые теги, закрыть незакрытые теги.
    • Удалить необоснованные комментарии.
    • Убрать лишние мета-теги generator, base (если не влияет на работу сайта), а также устаревший keywords.
    • Вынести стили в отдельный css-файл.
    • Исправить неверное использование тегов h1-h6.
    • Проверить использование noindex.

    Используйте: ручную проверку, CSS Validation Service, Markup Validation Service, СайтРепорт, Screaming Frog SEO Spider, VisualSEO.

    1.6. Кодировка

    • Проверить (если нет, то добавить) мета-тег кодировки, указанный в коде сайта с реальной кодировкой страниц.
    • У всех страниц, файлов, скриптов, баз данных и сервера должен быть один вид кодировки.

    Используйте: Bertal, WebSite Auditor, SEOlik.

    1.7. Работоспособность функционала

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

    Используйте: ручную проверку.


    1.8. ЧПУ

    • Должен состоять из понятных слов, а не из идентификаторов.
    • Отсутствие в адресации пробелов, 20% или +.
    • Построение URL должно быть по всему сайту одинаковое: только латиница, использовать только один вид разделителя – /_ и пр.
    • Предпочтительное построение адреса страницы – заканчивающиеся на слеш.
    • Длина не более 110 символов.
    • Должен понятно отражать структуру сайта.

    Используйте: ручную проверку, SEOlik, NetPeak Spider, Screaming Frog SEO Spider, VisualSEO, translityandex.ru.

    1.9. Хлебные крошки

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

    Используйте: ручную проверку, Пиксель Тулс.

    1.10. Перелинковка

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

    Используйте: ручную проверку, Megaindex, СайтРепорт, Page-Weight.

    1.11. Title

    • Должен присутствовать на всех страницах сайта.
    • Должен содержать ключевые фразы.
    • Должен быть уникальным и отличаться от H1.
    • Для продвижения региона должен быть указан город.
    • Оптимальная длина не более 6-10 слов и не более 60 символов.
    • Для нецелевых страниц генерация по шаблону с использованием коммерческих слов: купить, цена, интернет-магазин, город и пр.

    Используйте: «Оптимизация HTML» в GSC, Netpeak Spider, СайтРепорт, Screaming Frog SEO Spider, Xenu, Megaindex, SEOlik, WebSite Auditor, VisualSEO.

    1.12. Description

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

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

    Используйте: «Оптимизация HTML» в GSC, Netpeak Spider, СайтРепорт, Screaming Frog SEO Spider, Xenu, Megaindex, SEOlik, WebSite Auditor, VisualSEO.

    1.13. H1

    • Присутствует на каждой странице сайта в единственном числе.
    • Стоит всегда выше подзаголовков h2-h6.
    • Не более 6 слов.
    • Содержит ключевые слова.
    • Не должен содержать стили и вложенные теги.

    Используйте: Netpeak Spider, Screaming Frog SEO Spider, Megaindex, СайтРепорт, SEOlik, VisualSEO.

    1.14. Тексты/контент

    • Тексты должны быть уникальными.
    • Обязательно в аудите текстов: должны быть органично вписаны ключевые фразы, должно быть написано для людей, а не для роботов.
    • Тексты должны быть структурированы: подзаголовки h2-h6, списки, таблицы.
    • Красивое и правильное форматирование текста, например, для абзацев.
    • Отсутствие грамматических и орфографических ошибок.
    • Важные части, смыслы, определения текста должны быть заметны и выделены.
    • Присутствие тематических изображений в тексте.
    • Использование LSI-фраз в тексте.
    • Проверить, чтобы для отображения контента не использовался JS.
    • Удалить пустые или наполнить малоинформативные страницы.

    Используйте: ручную проверку, text.ru, Пиксель Тулс, СайтРепорт, SEOlik, PR CY, arsenkin.ru, HTML-редактор, Орфограммка.

    1.15. Изображения

    • Наличие атрибута alt обязательно, атрибут title – по желанию.
    • Изображения должны быть уникальными.
    • Уменьшенный размер без потери качества изображения.
    • Название изображения должно описывать его латиницей, желательно с ключевым словом.
    • Наличие фавикона.

    Используйте: Xenu’s Link Sleuth, NetPeak Spider, Screaming Frog SEO Spider, PageSpeed Insights от Google, translityandex.ru, onlinefavicon.com.

    1.16. Пагинация

    • Проверить, чтобы страницы пагинации не были закрыты от индексации.
    • Уникализировать title и description (h1 по желанию) с помощью приписки номера страницы.
    • Текст с первой страницы должен отсутствовать на всех остальных.
    • Для Google можно указать rel=»next» и rel=»prev».
    • Закрыть от индексации или сделать редирект с дубля при возвращении на первую страницу пагинации.

    Используйте: ручную проверку, NetPeak Spider, Screaming Frog SEO Spider.

    1.17. Микроразметка

    • Внедрить микроразметку для сквозных контактов, хлебных крошек, карточек товаров, статей и пр.
    • Внедрить разметку Open Graph.
    • Проверить валидацию.

    Используйте: «Валидатор микроразметки» от Яндекс, «Проверка структурированных данных» от Google, SEOlik.

    1.18. Счетчики

    • Установить «Яндекс.Метрика» и Google Analytics в на все страницы сайта. Можно через Google Tag Manager.
    • Счетчики не должны быть дублированы.
    • Если нужно несколько счетчиков – интегрировать их в один код.
    • Настроить цели.

    Используйте: ручную проверку, Google Tag Assistant, консоль браузера.

    1.19. Ссылки

    Чек-лист внутренних ссылок:

    • Удаление или правка битых ссылок.
    • Отсутствие или закрытие циклических ссылок.
    • Максимальное удаление исходящих ссылок на другие ресурсы – важно для аудита. Если удаление всех невозможно, тогда закрытие через rel=»nofollow».

    Используйте: «Внутренние ссылки» в Я. Вебмастере, Xenu’s Link Sleuth, NetPeak Spider, Screaming Frog SEO Spider, Page-Weight.

    Чек-лист внешних ссылок:

      • Ссылочная масса наращивается постепенно без сайтов под АГС и спамных SEO-ссылок с тематических и с таким же регионом ресурсов.
      • Для получения бесплатных ссылок можно регистрироваться в популярных тематических каталогах.
      • Регистрация в Яндекс.Справочнике и Google Мой Бизнес.

      Используйте: Checktrust, Xtool.

      1.20. Быстродействие и доступность сайта

      • Быстрая загрузка сайта – 1-2 секунды.
      • Включено сжатие GZIP.
      • Использование кеша браузера.
      • Сервер должен выдерживать нагрузку и работать без сбоев, т.е. сайт должен всегда быть доступен.

      Используйте: PageSpeed Insights от Google, PR CY, SeoLik.

      1.21. Отображение на мобильных устройствах

      • Реализован один из вариантов: мобильная версия, динамическая верстка, адаптивный дизайн, AMP для Google и Турбо Страницы для Яндекса.
      • Корректное отображение на любых устройствах.
      • Наличие тега viewport.
      • Отсутствие горизонтальной прокрутки.
      • Отсутствие мелкого текста.
      • Отсутствие Flash и Java элементов.

      Используйте: «Проверка мобильных страниц» и «Турбо страницы» в Я.Вебмастере, «Проверка оптимизации для мобильных» от Google, SEOlik, PR CY.

      1.22. Поисковый спам

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

      Используйте: ручную проверку.

      1.23. Яндекс Вебмастер

      • Проверить раздел «Диагностика».
      • Проверить страницы в поиске, чтобы не было исключено поисковыми системами чего-то важного.
      • Проверить, что указан sitemap.xml.
      • В разделе «обход по счетчикам» проверить, чтобы было связано со счетчиком Яндекс.Метрики.
      • В разделе «Переезд сайта» проверить, что указано правильное зеркало.
      • Проверить, что в разделе «Региональность» указаны регионы.
      • Участие в программе «Товары и цены».
      • Проверить отображение быстрых ссылок.

      1.24. Google Search Console

      • Проверить структурированные данные сайта на наличие ошибок.
      • Проверить ошибки в «Оптимизация HTML».
      • Посмотреть, не приняты ли меры вручную.
      • Проверить заблокированные ресурсы через «Просмотреть как Googlebot» и открыть их.
      • Проверить раздел «Покрытие» на наличие ошибок с индексацией.
      • Проверить robots.txt.
      • Добавить карту sitemap.xml.
      • Проверить раздел «Проблемы безопасности».

      1.25. Поддомены

      • Структура ссылок сайта состоит только из ссылок поддомена.
      • Размещение контактных адресов в регионе.
      • Уникальные title и description.
      • Уникальные тексты.
      • Присвоенный регион через Яндекс.Справочник и Я.Вебмастер, Google Мой Бизнес.
      • Отображение ссылки поддомена на карту сайта XML в robots.txt.
      • Поддоменные ссылки в карте сайта XML.

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


      2. Что еще можно проверить на сайте?

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

      • страниц «О компании», «Контакты», «Оплата», «Доставка», «Гарантии» и пр.;
      • реквизитов, лицензий и сертификатов.
      • актуальных акций;
      • информации о возврате товара;
      • отзывов клиентов;
      • обновляющихся новостей, статей;
      • прайс-листа;
      • доменной почты;
      • режима работы компании;
      • адреса компании;
      • интерактивной карты с расположением компании;
      • телефона в шапке, футере сайта и на странице «Контакты»;
      • номера 8-800;
      • онлайн-консультанта;
      • широкого ассортимента товаров;
      • формы заказа обратного звонка или обратной связи;
      • возможности оформления заказа через корзину;
      • кнопок «Купить», «Купить в 1 клик» и пр.;
      • подробной карточки товаров с: ценой, описанием, фотографиями, информацией о наличии, отзывами, оценками, о доставке, оплате, гарантиях и пр.
      • ссылок на активно ведущиеся социальные сети.

      Не знаете, что еще проверить? Тогда рекомендуем анализировать конкурентов из поисковой выдачи в ТОП-10 и делать доработки согласно их анализу.

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

      Инструменты SEO-продвижения

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

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

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

      3. CY-PR – если вам нужен более подробный анализ вашего или чужого сайта, то данный инструмент поможет, как никто другой.

      4. Siteliner.com – дублированный контент негативно сказывается на поисковой оптимизации. Данный сервис помогает проанализировать ресурс на наличие дублей. Вся работа выполняется онлайн.

      5. Screaming Frog SEO Spider – программа для технического аудита сайта. Выделяется среди подобных аналогов тем, что парсит намного больше данных о сайте. Есть множество полезных настроек, а также возможность проверить сайт в гостевом режиме (если вы не админ).

      6. SEMrush – полезный сервис, позволяющий оценить трафик вашего ресурса. Здесь можно узнать о качестве трафика, его стоимость (если переводить ее в стоимость кликов в GoogleAdwords), анализ ключевых запросов, основных конкурентов по выдаче и многое другое.

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

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

      9. PageWeight – программа, анализирующая статический вес сайта по классической формуле pagerank, а также помогающая перераспределить его (настроить перелинковку).

      10. MarkUp & CSS Validation Services – проверка валидности HTML и CSS-кода сайта соответственно.

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

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

      13. Mobile Emulator – инструмент, позволяющий увидеть, как ваш сайт будет отображаться на мобильных устройствах (смартфоны, планшеты). При желании можно настроить модель отображения.

      Работа с семантическим ядром

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

      Среди инструментов для работы с семантическим ядром можно выделить следующие.

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

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

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

      4. База Пастухова – база реальных запросов пользователей в Яндексе, Гугле. Содержит огромное количество запросов, в том числе низкочастотные. Используется для расширения семантического ядра.

      5. SpyWords – полезный инструмент для Яндекса. Анализирует конкурентов, их сайты, ключевики, по которым они продвигаются, и многое другое. Для анализа в Google используйте вышеупомянутый SEMrush.

      Позиция в поисковиках и проверка траста

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

      1. Xtool.ru – показывает уровень доверия к вашему сайту со стороны Яндекса.

      2. SEObuilding – оценивает качество вашего ресурса по более чем 60 параметрам и показывает уровень доверия к нему.

      3. CheckTrust (FastTrust) – сервис, показывающий траст сайта. Также интегрирован с сервисом Rookee.

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

      1. AllPositions – анализирует и проверяет позиции в выдаче различных поисковых систем.

      2. AdvODKA – проверка позиций в поисковой выдаче по Москве и Санкт-Петербургу. Кроме органической выдачи, здесь также можно проанализировать и контекстную рекламу.

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

      4. Rankinity – анализ позиций сайта в SEO-выдаче в режиме реального времени.

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

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

      1. PageSpeed Insights – один из самых популярных сервисов для анализа скорости загрузки страниц от Google. Используйте его, чтобы получить рекомендации по улучшению быстродействия ресурса.

      2. Pingdom – аналогичный сервис для анализа скорости загрузки страниц. Наглядно показывает, какие именно элементы сайта негативно влияют на показатель.

      3. BasicState – бесплатный инструмент для проверки доступности сайта каждые 15 минут. Есть оповещения через имейл и СМС.

      Анализ ссылочной массы

      Анализ ссылочной массы страниц – важный момент в работе по оптимизации. Если пренебрегать данной процедурой, то можно попасть под фильтры поисковиков («Минусинск», «Пингвин» и т. д.).

      1. Ahrefs – сервис платный, но считается одним из лучших для работы со ссылочной массой.

      2. SEO SpyGlass – бесплатный аналог Ahfers. Ищет внешние ссылки, оценивает их и многое другое.

      3. Majestic SEO – проверка внешних ссылок. Также позволяет увидеть историю ссылок.

      4. Webmasters.ru – еще один хороший проект для анализа ссылочной массы.

      Инструменты SEO-продвижения также помогут вам проанализировать текст, узнать его уникальность, тошноту, водность и многое другое.

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

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

      3. Text.ru – онлайн-сервис для проверки текстов на уникальность и водность. Сайт также покажет, насколько текст оптимизирован, и много другой полезной информации.

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

      1. RDS bar – все тот же сервис RDS, только в виде плагина для вашего браузера. Один из лучших для сеошников.

      2. SEOquake – аналог RDS bar. Функционал аналогичный.

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

      4. Senseo – отличный плагин для оптимизации ваших страниц. Он проанализирует ваш ресурс по заданному запросу и укажет на основные несоответствия seo-рекомендациям.

      5. Page Speed Monitor – расширение, позволяющее отслеживать скорость загрузки ваших страниц.

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

      Аудит сайта online инструментами продвижения

      Об аудите сайта

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

      Это объемная и трудоемкая работа. Анализ сайта нужно проводить по основным и дополнительным факторам, важным для поисковых систем. Условно анализ сайта можно разделить на самостоятельный анализ (аудит сайта) и экспертизу (профессиональный анализ сайта). Аудит сайта вполне под силу сделать, самостоятельно используя online инструменты анализа.

      Что входит аудит сайта online инструментами продвижения

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

      • Технический аудит;
      • Проверка внутренней оптимизации;
      • Анализ внешних и внутренних ссылок;
      • Анализ юзабилити сайта;
      • Анализ оптимизации сайта (SEO анализ сайта).

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

      Технический аудит затрагивает анализ ошибок и недочётов в программном и техническом обеспечении сайта. Он включает анализ скорости загрузки, объем кода (HTML) страниц, ошибки в кодах CSS и HTML, анализ бесперебойной работы и ответа хостинга, анализ структуры сайта; видимость сайта в различных браузерах, проверка дублей страниц, анализ ошибок 404, анализ файла robots.txt.

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

      Проверка оптимизации внутренней структуры

      Проверка оптимизации внутренней структуры включает: анализ контента сайта на уникальность, наличие и уникальность заголовков страниц сайта, проверка правильного использования тегов h1-h6 в заголовках и подзаголовках, проверка наличия описания страниц ( мета-тег description), проверка ключевых слов, проверка alt тегов для фотографий.

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

      В качестве примера негативного фактора, можно назвать, наличие на странице более одного тега h1 или его отсутствие.

      Анализ внешних ссылок

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

      Анализ внешних ссылок включает анализ количества внешних ссылок и их качество. Тут 13 Русскоязычных сервисов проверки внешних ссылок.

      Анализ внутренних ссылок

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

      Анализ юзабилити сайта

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

      Анализ оптимизации сайта (SEO анализ сайта)

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

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

      Инструменты анализа сайта

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

      PR-CY.ru

      PR-CY имеет большой набор инструментов для анализа сайта. Есть отдельный инструмент анализа сайта на ошибки в продвижении ТУТ .

      Сервис PR-CY осуществляет проверку сайта по следующим основным пунктам: Основные параметры сайта, индексация страниц, наложенные санкции (склейка зеркал и фильтр АГС), Проверка на вирусы, Посещаемость, Ссылки на сайт (Данные Solomono, Данные MajesticSEO, цитирование), Социальные сети, Оптимизация (контент, Заголовок страницы, Описание страницы, Заголовки статей, Длина текста, Тошнота текстов, Размер страниц, Внешние и внутренние ссылки, Ошибки HTML кода), Юзабилити, Серверная информация, включая скорости загрузок.

      Megaindex

      Инструмент анализа сайта сервис Megaindex.ru под названием Аудит сайта.

      Аудит сайта online инструментами megaindex

      Megaindex

      Сервис и инструменты Megaindex стал одним из лучших (но платных) русскоязычным сервисом для анализа сайта по многим факторам важным для оптимизации. Возможен бесплатный аудит 50 страниц сайта после регистрации и последующей авторизации. Для аудита 200-10000 страниц нужно покупать тарифные планы.

      Анализ сайта Megaindex производит по следующим позициям: основные показатели сайта (сколько страниц в поиске, тиц и pr), перелинковка сайта (количество внутренних ссылок на страницах), подбор запросов, анализ title, H1, Keywords, Description, проверка кодов ответа серверов (200-404), поиск битых ссылок, sitemap, доступность сайта, релевантность страниц по запросу и т.д.

      Cy-pr.com

      Инструмент «Анализ сайта» на сервисе cy-pr.com ( https://www.cy-pr.com/a/ ) позволяет посмотреть на сайт со «всех сторон». Очень мощный анализ, PDF отчет занимает 9 листов. Среди данных есть «Видимость сайта», это редкость. То есть сервис покажет сколько у вас страниц в топ-1,3,5,10, по Яндекс и Google, покажет их URL, даст оценку популярности ключей и даст еще массу оценок. Можно сравнить несколько сайтов, например взяв для сравнения сайты-конкуренты.

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

      Программы SEO анализа

      Кроме сервисов online анализа, есть специальные программы для анализа сайтов. Напрмиер, популярные программы.

      Очень полезны в аудите сайта, и с них нужно начинать, это инструменты для вебмастеров Яндекс.Вебмастер и Google Search Console.

      Расширения браузеров

      Помогут сделать аудит сайта online инструментами различные полезные инструменты в расширениях для браузеров Яндекс и Google Chrome. С их помощью в онлайн режиме можно проводить анализ сайта. Например, расширения для Chrome:

      9 инструментов для комплексного SEO-аудита сайта

      Сервисы для SEO-анализа сайта: контент-, юзабилити-, ссылочного, технического аудита. От простых бесплатных программ до мощных SaaS-платформ.

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

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

      Мы собрали самые разные: платные и бесплатные, узкоспециализированные и многофункциональные — и отсортировали по цене.

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

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

      Xenu Link Sleuth

      Cтарая, но по-прежнему актуальная программа для внутреннего аудита сайта.

      • Поиск неработающих ссылок (проверяются страницы, изображения, скрипты; поддерживается https).
      • Анализ тайтлов и кодов ответа страниц, генерация XML-карты сайта.
      • Поиск страниц с большим временем отклика, уровнем вложенности и числом исходящих ссылок.

      CSS оптимизация — делаем загрузку сайтов более быстрой

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

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

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

      И вот тут на помощь приходят простые и удобные в использовании он-лайн сервисы – CSS-оптимизаторы.

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

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

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

      Что тестировалось

      Для тестирования результатов оптимизации я использовал файлы CSS следующий сайтов:

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

      Результаты тестирования

      Сервис / После оптимизации / Уменьшение, % / Комментарии

      Первым тестился Хабрахабр с его 40.69 килобайтовым CSS.

      • CSS Optimizer / 23.25 KB / 42.86% / Уменьшилась высота строк, потеряли жирность некоторые заголовки, уменьшился шрифт некоторых ссылок. В принципе, даже эти недочеты не мешают удобству просмотра страницы, поскольку изменения касаются второстепенных элементов.
      • Clean CSS / 29.13 KB / 30.1% / Никаких изменений не произошло.
      • CSS Compressor / 21.69 KB / 46.7% / Также никаких изменений.

      Следующими идут «Новости 2.0». Размер CSS – 18.15 KB.

      • CSS Optimizer / 10.46 KB / 42.34% / Практически никаких изменений не произошло, кроме незначительного увеличения шрифта в двух строках. В целом на юзабилити это никак не отразилось.
      • Clean CSS / 11.40 KB / 38.7% / Все осталось на месте.
      • CSS Compressor / 8.94 KB / 50.74% / Увеличились отступы, потеряли центровку некоторые элементы, испортились стили для некоторых типов ссылок.

      Теперь тестим iXBT.com. Размер CSS – 15.47 KB.

      • CSS Optimizer / 11.60 KB / 25.06% / Правая колонка уплывает вниз, что однозначно сказывается на юзабилити.
      • Clean CSS / 11.74 KB / 24.4% / Совсем незначительное изменение отступов в некоторых местах.
      • CSS Compressor / 7.32 KB / 51.75% / Полнейшее искажение внешнего вида страницы. Ее просто не узнать.

      Последним в тест попадает CSS моего блога. Его размер – 12.02 KB.

      • CSS Optimizer / 7.60 KB / 36.75% / Исчезает белый фон, изменяются отступы некоторых элементов и высота строк.
      • Clean CSS / 9.65 KB / 24.5% / Все на своих местах.
      • CSS Compressor / 4.74 kB / 60.54% / Полностью теряется форматирование страницы. «Ни в какие ворота не лезет».

      Делаем выводы

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

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

      Пользоваться остальными двумя вариантами – CSS Optimizer и CSS Compressor – стоит только в конкретном случае, «примерив» на сайте корректность работы оптимизированного стилевого файла.

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

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

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

      5 инструментов для оптимизации CSS

      Здравствуйте, уважаемые читатели XoZbloga! В этой статье рассмотрим 5 инструментов для оптимизации CSS кода, которые позволят вам увеличить производительность и скорость загрузки страниц.

      Почему скорость загрузки страницы так важна?

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

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

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

      TestMyCSS

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

      Вы можете начать использовать его сразу, просто введите url-адрес CSS-файла веб-сайта и проверьте, насколько все плохо в вашем CSS-файле. Более того, вы также можете найти полезные советы:

      • Как упростить сложные селекторы
      • Дублированные свойства CSS и селекторы, от которых необходимо избавиться
      • Количество !important декларации, содержащиеся в коде
      • Излишние спецификации классов
      • Излишние IE исправления
      • Префиксные свойства CSS, которые больше не нужны
      • Неправильное использование универсальных селекторов

      Stylelint

      Stylelint — амбициозный CSS-Линтер, который работает с PostCSS, инструментом с открытым исходным кодом для написания современного CSS. Линтер — это программа, которая проходит через ваш код и ловит любые потенциальные ошибки.

      • Искать опечатки, недопустимые шестнадцатеричные цвета, дубликаты селекторов и т.д.
      • Принудительно применять соглашения о стиле кодирования, такие как согласованный интервал в каждом правиле CSS и т.д.
      • Автоматически исправить некоторые незначительные предупреждения, используя stylefmt, инструмент для форматирования CSS-правила

      Stylelint очень универсален, вы можете использовать его как:

      • Stylelint CLI (интерфейс командной строки)
      • Плагин для вашего инструмента сборки по выбору, например, webpack, gulp и т.д.
      • Плагин для вашего текстового редактора, например, Atom, Sublime Text и т. д.
      • API узла Stylelint
      • Плагин Stylelint PostCSS

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

      CSS Triggers

      CSS Triggers — это онлайн-ресурс, который информирует вас о том, как свойства CSS ведут себя на разных движках браузеров.

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

      • Layout: браузер генерирует геометрию и положение каждого элемента
      • Paint: браузер формирует пиксели для каждого элемента в слои
      • Composite: браузер рисует слои на экране

      Эта информация особенно ценна тем, кто анимирует элементы на странице.

      cssnano

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

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

      Critical

      Critical — это еще один инструмент для оптимизации CSS.

      Среди правил и рекомендаций PageSpeed Insights вы найдете этот совет:

      Для лучшей производительности вы можете рассмотреть возможность вставки важного CSS непосредственно в HTML-документ.

      Идея состоит в том, чтобы найти критически важные правила CSS и размещать эти правила в разделе вашего HTML-документа. Что касается того, что вы можете считать критическим CSS — любые правила, используемые для стиля базового макета и типографии, а также вышеприведенный контент вашего сайта.

      Разобраться в этом вам поможет Critical.

      На этом все. Если вы пользуетесь похожими инструментами, то делитесь в комментариях какими.

      P.S.: для читателей из Иваново не маловажным будет знать о ребятах из АйтиАдмин. Если у вас возникли проблемы с компьютером или периферией, то вам сюда http://ivanovo.compov.su/.

      Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

      Мастер Йода рекомендует:  SSI и общий стиль
  • Добавить комментарий