Как использовать Python для мониторинга и измерения производительности сайта

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

По совпадению, я работал над созданием скрипта Python, который использует API Google PageSpeed ​​Insights (PSI) для сбора метрик для нескольких страниц одновременно, без необходимости запускать тест для каждого отдельного URL.

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

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

Введение в жизненно важные показатели сети

В начале мая Google представила Core Web Vitals, которые являются подмножеством ключевых показателей Web Vitals.

Эти показатели используются для предоставления рекомендаций по качеству взаимодействия с пользователем на веб-сайте.

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

Core Web Vitals – это ориентированные на пользователя метрики, которые измеряют ключевые аспекты пользовательского опыта; Время зарядки, интерактивность и стабильность.

Я не буду вдаваться в подробности, объясняя это в этом посте, вы можете найти больше информации здесь, но эти новые метрики:

• Самое большое содержание живописи.
• Задержка при первом входе.
• Накопительное изменение дизайна.

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

Мониторинг производительности

Ожидается, что это обновление будет выпущено в 2021 году, и Google подтвердил, что никаких немедленных действий не требуется.

Однако, чтобы помочь нам подготовиться к этим изменениям, они обновили инструменты, используемые для измерения скорости страницы, в том числе PSI, Google Lighthouse и Отчет о скорости консоли поиска Google.

Откуда вступает API Pagespeed Insights?

Google PageSpeed ​​Insights – это полезный инструмент для просмотра сводных данных о производительности веб-страниц, который использует полевые и лабораторные данные для получения результатов.

Это отличный способ получить обзор нескольких URL, так как он используется постранично.

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

Скрипт Python для измерения производительности

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

Этот скрипт использует Python для отправки запросов в API Google PSI для сбора и извлечения метрик, отображаемых как в PSI, так и в Lighthouse.

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

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

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

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

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

Шаг 1. Установите необходимые пакеты

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

Нам понадобятся следующие пакеты:

• URLLIB: Работать, открывать, читать и анализировать URL-адреса.
• JSON: Позволяет преобразовать файл JSON в Python или файл Python в JSON.
• петиции: HTTP-библиотека для отправки всех видов HTTP-запросов.
• панд: В основном используется для анализа данных и манипуляций, мы используем его для создания фреймов данных.
• часМодуль для работы со временем, мы используем его для предоставления промежутка времени между запросами.
• учет: Из Google Colab это позволит вам загружать и скачивать файлы.
• И.О.: Интерфейс по умолчанию для доступа к файлам.

# Import required packages 
import json
import requests
import pandas as pd
import urllib
import time
from google.colab import files
import io

Шаг 2: настроить запрос API

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

urllib.request.urlopen и добавьте его в переменную с именем (обратите внимание, что этот метод предназначен для преобразования и загрузки файлов JSON в Google Colab).

Шаг 4: прочитайте файл JSON

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

Это довольно сложно понять, но использование интерактивного средства просмотра JSON позволит вам превратить его в читаемое древовидное представление.

Файл JSON отображает полевые данные, которые хранятся в loadingExperience, и лабораторные данные, которые вы можете найти в lighthouseResult.

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

Например, первая задержка входа находится в loadingExperience.

Пока первая содержательная краска находится на lighthouseResult.

В ходе аудита lighthouseResult хранится много других показателей, таких как:

• Индекс скорости.
• Первая счастливая картина.
• Накопительное изменение дизайна.

Шаг 5: загрузить CSV и сохранить как фрейм данных Pandas

Следующим шагом является загрузка файла URL CSV, который мы хотим запустить через API PSI. Вы можете создать список URL-адресов вашего сайта с помощью инструмента сканирования, такого как DeepCrawl.

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

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

Вы также можете добавить (обратите внимание, что этот метод предназначен для загрузки файлов CSV в Google Colab).

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

# Get the filename from the upload so we can read it into a CSV.
for key in uploaded.keys():
  filename = key
# Read the selected file into a Pandas Dataframe
df = pd.read_csv(io.BytesIO(uploaded[filename]))

df.head()

DataFrame будет выглядеть так, начиная с нуля индексации.

Шаг 6: сохранить результаты в объекте ответа

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

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

Я также установил здесь время ожидания на 30 секунд, чтобы уменьшить количество последовательных вызовов API.

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

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

Шаг 7: создайте фрейм данных для хранения ответов

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

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

# Create dataframe to store responses
df_pagespeed_results = pd.DataFrame(columns=
          ['url',
          'Overall_Category',
          'Largest_Contentful_Paint',
          'First_Input_Delay',
          'Cumulative_Layout_Shift',
          'First_Contentful_Paint',
          'Time_to_Interactive',
          'Total_Blocking_Time',
          'Speed_Index'])  

print(df_pagespeed_results)

Для этого сценария я использовал показатели Core Web Vital, а также дополнительные показатели загрузки и интерактивности, используемые в текущей версии Lighthouse.

Эти метрики имеют разные веса, которые затем используются в общем балле производительности:

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

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

Шаг 8: извлечь метрики из объекта ответа

После сохранения объекта ответа мы можем отфильтровать его и извлечь только те метрики, которые нам нужны.

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

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

for (url, x) in zip(
    response_object.keys(),
    range(0, len(response_object))
):

        # URLs
        df_pagespeed_results.loc[x, 'url'] =
            response_object[url]['lighthouseResult']['finalUrl']

        # Overall Category
        df_pagespeed_results.loc[x, 'Overall_Category'] =
            response_object[url]['loadingExperience']['overall_category']   

        # Core Web Vitals     

        # Largest Contentful Paint    
        df_pagespeed_results.loc[x, 'Largest_Contentful_Paint'] =
        response_object[url]['lighthouseResult']['audits']['largest-contentful-paint']['displayValue']

        # First Input Delay 
        fid = response_object[url]['loadingExperience']['metrics']['FIRST_INPUT_DELAY_MS']
        df_pagespeed_results.loc[x, 'First_Input_Delay'] = fid['percentile']

        # Cumulative Layout Shift    
        df_pagespeed_results.loc[x, 'Cumulative_Layout_Shift'] =
        response_object[url]['lighthouseResult']['audits']['cumulative-layout-shift']['displayValue']

        # Additional Loading Metrics 

        # First Contentful Paint 
        df_pagespeed_results.loc[x, 'First_Contentful_Paint'] =
        response_object[url]['lighthouseResult']['audits']['first-contentful-paint']['displayValue']

        # Additional Interactivity Metrics 

        # Time to Interactive  
        df_pagespeed_results.loc[x, 'Time_to_Interactive'] =
        response_object[url]['lighthouseResult']['audits']['interactive']['displayValue']

        # Total Blocking Time   
        df_pagespeed_results.loc[x, 'Total_Blocking_Time'] =
        response_object[url]['lighthouseResult']['audits']['total-blocking-time']['displayValue']

        # Speed Index
        df_pagespeed_results.loc[x, 'Speed_Index'] =
        response_object[url]['lighthouseResult']['audits']['speed-index']['displayValue']

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

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

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

Например, при извлечении показателей из аудитов Lighthouse, таких как отображаемое значение Time to Interactive, вы должны использовать следующее:

df_pagespeed_results.loc[x, 'Time_to_Interactive'] =
response_object[url]['lighthouseResult']['audits']['interactive']['displayValue']

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

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

Шаг 9: преобразовать DataFrame в файл CSV

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

summary = df_pagespeed_results

df_pagespeed_results.head()

#Download csv file 
summary.to_csv('pagespeed_results.csv')
files.download('pagespeed_results.csv')

Метод .str.replace для каждого столбца.

#Replace the 's' with a blank space so we can turn into numbers
df_pagespeed_results['Largest_Contentful_Paint'] = df_pagespeed_results.Largest_Contentful_Paint.str.replace('s', '')
df_pagespeed_results['First_Contentful_Paint'] = df_pagespeed_results.First_Contentful_Paint.str.replace('s', '')
df_pagespeed_results['Time_to_Interactive'] = df_pagespeed_results.Time_to_Interactive.str.replace('s', '')
df_pagespeed_results['Total_Blocking_Time'] = df_pagespeed_results.Total_Blocking_Time.str.replace('ms', '')
df_pagespeed_results['Speed_Index'] = df_pagespeed_results.Speed_Index.str.replace('s', '')

Тогда мы будем использовать Кредиты изображения

Все скриншоты, сделанные автором, июнь 2020