Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Как найти и исправить большое время загрузки страницы с Raygun

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

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

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

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

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

Как может помочь Raygun?

Raygun полагается на Real User Monitoring Insights (RUM Insights), чтобы улучшить производительность веб-сайта и время загрузки страницы. Термин «Real User Monitoring» является здесь ключевым. Вы можете использовать такие инструменты, как WebPagetest и Google Page Speed Insights, чтобы оптимизировать отдельные страницы, но эти результаты не будут основаны на реальных пользовательских данных. С другой стороны, данные, предоставленные Raygun, основаны на реальных пользователях, посетивших ваш сайт.

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

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

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

Мы узнаем, как все это сделать с Raygun в следующих нескольких разделах этой статьи.

Интеграция Raygun на ваш сайт

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

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

Create Raygun Application

Теперь вам просто нужно выбрать платформу разработки или фреймворк. В нашем случае мы используем JavaScript.

Choose Raygun Language or Framework

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

После добавления вышеприведенного фрагмента кода перед закрывающим тегом </head> вы должны поместить следующий фрагмент непосредственно перед закрывающим тегом <body>.

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

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

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

Поиск страниц с плохим временем загрузки

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

Raygun Live Sessions - Visiting Countries

На вкладке Live вы получите обзор производительности вашего сайта в режиме реального времени. Он имеет разные показатели, такие как Health Score, чтобы показать вам, как работает сайт. Подробнее о всех этих показателях вы можете прочитать в документации для вкладки Live на веб-сайте Raygun.

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

Live Tab - Recent Requests

На вкладке производительности есть пять полезных показателей, которые помогут вам быстро просмотреть время загрузки страницы. Например, среднее время загрузки 1,41 секунды означает, что 50% загрузки ваших страниц загружается до 1,41 секунды. Точно так же P90 Load Time в 6.78 секунд сообщает вам, что в 90% случаев сайт загружается до 6,48 секунд.

Performance Tab

Это должно дать вам общее представление о производительности веб-сайта и о том, насколько медленным он является для самых медленных 10% пользователей.

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

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

Page load time data for a sample website

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

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

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

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

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

Raygun Geo Tab

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

Фиксирование большого времени загрузки страницы

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

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

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

К счастью, Raygun может предложить вам некоторые общие сведения, чтобы исправить ваш сайт. Вы можете щелкнуть по параметрам Insights в меню Real User Monitoring, а Raygun сканирует ваш сайт на предмет возможных проблем. Вы можете найти список всех этих правил в официальной документации Raygun. Исправление всех перечисленных проблем значительно ускорит ваш сайт.

Raygun Insights Rules

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

About Us Page

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

About Us Italy Filter

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

About Us Requests

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

Заключение

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

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

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

И пока вы здесь, ознакомьтесь с некоторыми нашими другими учебниками по Raygun!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.