Как инструмент DevTools использовать для тестирования блога WordPress?

Вступление

Вы наверняка знаете, что CMS WordPress создавалась, как блог-платформа. Эволюция WordPress сегодня позволяет с её помощью создать веб-ресурс любого типа: блог, сайт, интернет магазин, даже портал. Однако создание блогов на этой CMS остаётся самым популярным. WordPress далеко обогнала конкурентные блог-платформы Blogger, Tumbler и т.п. Больше узнать на чём можно создать свой блог вы можете на сайте https://24forum.ru.

Заявленная тема статьи не должна вас ввести в заблуждение. Инструментом DevTools можно тестировать блог на любой платформе, сайт на любой CMS и необязательно свой.

Зачем нужно тестирование блога

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

Инструмент DevTools

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

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

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

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

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

Что происходит, когда ваш блог не работает

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

• Вы теряете трафик;
• К вашему ресурсу меньше доверия со стороны потенциальных клиентов;
• Как следствие – потеря потенциальных пользователей, которые вряд ли к вам вернутся.

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

Есть много удобных и не очень удобных инструментов, которые могут определить есть у вас на ресурсе проблемы с производительностью. Chrome DevTools – это инструмент, которые не нужно искать, он встроен в Google и полезен при тестировании блогов, например блогов, созданных на WordPress.

Использовать инструмент DevTools для тестирования блога

Чтобы использовать DevTools вы должны использовать браузер Google Chrome. DevTools входит в инструменты разработчика, которые вы можете найти в этом браузере.

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

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

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

Одним из основных способов использования DevTools является тестирование производительности блога, например тестирования блога WordPress.

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

Инструмент DevTools и его основные возможности

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

Как открыть инструмент DevTools

Чтобы открыть инструмент, вам нужно открыть «Инструменты и настройка Chrome». Найти вкладку «Дополнительные инструменты» и в ней открыть «Инструменты разработчика». Можно использовать быстрые клавиши Ctrl+Shift+I.

На фото вы видите первую вкладку, которую вы увидите в браузере по умолчанию. У меня она настроена в чёрном цвете и расположена внизу экрана. Вы можете её перестроить на кнопке «три точки» справа.

Вкладка Elements panel – Панель элементов DevTools

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

Source panel – Панель источников DevTools

Вкладка Source — это отладчик JavaScript, которая используется для контроля кода ваших страниц.

Network DevTools

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

Используя инструмент вы в реальном времени посмотрите на работу вашего блога WordPress со стороны системы. Поймёте, что мешает быстро загружаться вашим страницам или исправить стили блога. Давайте посмотрим примеры работы с DevTools.

Работа с Elements panel DevTools

Задача посмотреть или поменять стиль, какого либо элемента сайта, например, шрифт. Для этого:

• Открываем исследуемый сайт;
• Выделяем нужный фрагмент текста;
• Входим в панель Elements DevTools (здесь лучше использовать правую кнопку мыши, вкладка «Посмотреть код»);
• На вкладке Elements можно посмотреть css (Styles) искомого шрифта.

Вкладка Network DevTools

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

• Откройте вкладку Network DevTools на нужной странице блога;
• Перегрузите страницу в браузере;
• Смотрите результат.

Обратите внимание, на фото вы видите раскладку по загрузке картинок страницы (img). Загрузку всей страницы смотрим на кнопке All. Есть кнопки JS, CSS.

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

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

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

Аналогично работают другие вкладки DevTools. Например, на вкладке Securiy вы можете выявить проблемы смешанного контента (Mixed Active Content). Если он конечно есть.

Внесение изменений в WordPress

Инструмент DevTools для тестирования блога WordPress не даст вам рекомендации по исправлению ошибок или ускорению блога. Он показывает анализ блога по всем возможным позициям. Вносить изменения на свой WordPress придётся самостоятельно по полученным данным.

Вывод про инструмент DevTools

Основное преимущество DevTools для тестирования блога WordPress это удобство (он всегда под рукой) и скорость выполнения задачи. Результаты получаешь оперативно и эффективно, «из первых рук». Его могут использовать, как профессиональные разработчики, так и любители, которые пытаются протестировать блог WordPress. Инструмент способен дать правильное решение для каждой серьёзной проблемы. Освоение инструмента может занять некоторое время.

Источник: www.wordpress-abc.ru