Introdução à API de velocidade de página do Google

Publicados: 2019-03-11

A velocidade da página é um dos maiores indicadores de quanto tempo alguém passará no seu site. Páginas de carregamento lento podem levar a taxas de rejeição mais altas, taxas de conversão mais baixas e, portanto, menor receita.

Para saber se os tempos de carregamento podem estar afetando a retenção e a conversão do seu público, a ferramenta Page Speed ​​Insights do Google é um ótimo ponto de partida. A API de velocidade de página do Google é como você pode se conectar a esses dados e incorporar insights em sua pilha de dados. Usamos isso para criar nosso próprio rastreador de análise de velocidade de página para monitorar as principais métricas de experiência do usuário para nossos clientes.

O que há de tão bom na API Page Speed ​​Insights?

Com esta ferramenta, você pode inserir uma URL e receber um resumo de seu desempenho. Isso é ótimo para amostrar um punhado de URLs, mas e se você tiver um site grande e quiser ter uma visão geral abrangente do desempenho em várias seções e tipos de página?

É aí que entra a API. A API Page Speed ​​Insights do Google nos dá a oportunidade de analisar o desempenho de muitas páginas e registrar os resultados, sem precisar solicitar explicitamente uma URL de cada vez e interpretar os resultados manualmente.

Com isso em mente, reunimos um guia simples que o ajudará a começar a usar a API para seu próprio site. Depois de se familiarizar com o processo descrito abaixo, você verá como ele pode ser usado para analisar a velocidade do seu site em escala, acompanhar como ele está mudando ao longo do tempo ou até mesmo configurar ferramentas de monitoramento.

Este guia pressupõe alguma familiaridade com scripts. Aqui usamos Python para fazer interface com a API e analisar os resultados.

Objetivos

Neste post você vai aprender como:

  1. Construir uma consulta da API do Google Page Speed ​​Insights
  2. Faça solicitações de API para uma tabela de URLs
  3. Extraia informações básicas da resposta da API
  4. Execute o script de exemplo fornecido em Python

Configurando

Existem algumas etapas que você precisará seguir antes de consultar a API Page Speed ​​Insights com Python.

  • Configuração da API: muitas APIs do Google exigem chaves de API, senhas e outras medidas de autenticação. No entanto, você não precisa de nada disso para começar a usar a API do Google Page Speeds!
  • Instalação do Python 3: Se você nunca usou python antes, recomendamos começar com a distribuição Anaconda (versão 3.x do Python), que instala o python junto com bibliotecas de análise de dados populares como Pandas.

Fazendo os pedidos

Noções básicas de um pedido

A API pode ser consultada neste endpoint usando solicitações GET:

 GET https://www.googleapis.com/pagespeedonline/v5/runPagespeed

Em seguida, adicionamos parâmetros adicionais para especificar o URL do qual queremos encontrar a velocidade da página e o tipo de dispositivo a ser usado, conforme mostrado abaixo:

 https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={url}&strategy={device_type}

Ao fazer solicitações, você deve substituir {url} pelo URL da página codificada por URL do seu site e {device_type} por celular ou computador, para especificar o tipo de dispositivo.

Pacotes Python

Para fazer solicitações, ingeri-las e depois gravar os resultados em tabelas, usaremos algumas bibliotecas python:

  • urllib : Para fazer as solicitações HTTP.
  • json : Para analisar e ler os objetos de resposta.
  • pandas : Para salvar os resultados no formato CSV.

Construindo a consulta

Para fazer uma solicitação de API usando Python, podemos usar o método urllib.request.urlopen :

 import urllib.request import urllib.parse url = 'http://www.example.com' escaped_url = urllib.parse.quote(url) device_type = 'mobile' # Construct request url contents = urllib.request.urlopen( 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy={}' .format(escaped_url, device_type) ).read().decode('UTF-8')

Essa solicitação deve retornar uma resposta JSON (surpreendentemente grande). Discutiremos isso com mais detalhes em breve.

Fazendo várias consultas

Um grande ponto de venda dessa API é que ela nos permite obter velocidades de página para lotes de URLs. Vamos dar uma olhada em como isso pode ser feito com Python.

Uma opção é armazenar os parâmetros de solicitação ( url e device_type ) em um CSV, que podemos carregar em um Pandas DataFrame para iterar. Observe abaixo que cada solicitação, ou par único url + device_type tem sua própria linha.

Armazenar dados em CSV

 URL, device_type 0, https://www.example.com, desktop 1, https://www.example.com, mobile 2, https://www.example.com/blog, desktop 3, https://www.example.com/blog, mobile

Carregar o CSV

 import pandas as pd df = pd.read_csv import pandas as pd df = pd.read_csv (url_file)

Assim que tivermos um conjunto de dados com todos os URLs a serem solicitados, podemos iterar por eles e fazer uma solicitação de API para cada linha. Isso é mostrado abaixo:

 import time # This is where the responses will be stored response_object = {} # Iterating through df for i in range(0, len(df)): # Error handling try: print('Requesting row #:', i) # Define the request parameters url = df.iloc[i]['URL'] device_type = df.iloc[i]['device_type'] # Making request contents = urllib.request.urlopen( 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy={}' .format(url, device_type) ).read().decode('UTF-8') # Converts to json format contents_json = json.loads(contents) # Insert returned json response into response_object response_object[device_type][url] = contents_json print('Sleeping for 20 seconds between responses.') time.sleep(20) except Exception as e: print('Error:', e) print('Returning empty response for url:', url) response_object[device_type][url] = {}

Lendo a resposta

Antes de aplicar qualquer filtro ou formatação nos dados, podemos primeiro armazenar as respostas completas para uso futuro como este:

 import json from datetime import datetime f_name ='data/{}-response.json'.format(datetime.now().strftime("%Y-%m-%d_%H:%M:%S")) with open(f_name, 'w') as outfile: json.dump(response_object, outfile, indent=4)

Conforme mencionado acima, cada resposta retorna um objeto JSON. Eles têm muitas propriedades diferentes relacionadas ao URL fornecido e são grandes demais para serem decifrados sem filtragem e formatação.

Para isso, usaremos a biblioteca Pandas, que facilita a extração dos dados que queremos em formato de tabela e a exportação para CSV.

Esta é a estrutura geral da resposta. Os dados sobre tempos de carregamento foram minimizados devido ao seu tamanho.

Estrutura geral de resposta

Entre outras informações, há duas fontes principais de dados de velocidade de página incluídos na resposta: dados de laboratório, armazenados em 'lighthouseResult' e dados de campo, armazenados em 'loadingExperience'. Neste post, vamos nos concentrar apenas nos dados do Field, que são de origem coletiva com base em usuários do mundo real no navegador Chrome.

Em particular, vamos extrair as seguintes métricas:

  • URL solicitado e URL final
    • Precisamos do URL solicitado e do URL resolvido final que foi auditado para garantir que sejam iguais. Isso nos ajudará a identificar que o resultado veio da URL pretendida em vez de um redirecionamento.

    Podemos ver que ambos os URLs são os mesmos em 'lighthouseResult' acima.

  • Primeira pintura de conteúdo (ms)
    • Esse é o tempo entre a primeira navegação do usuário na página e quando o navegador renderiza pela primeira vez um conteúdo, informando ao usuário que a página está sendo carregada.
    • Essa métrica é medida em milissegundos.
  • Primeira pintura de conteúdo (proporções de lento, médio, rápido)
    • Isso mostra a porcentagem de páginas que têm tempos de carregamento lentos, médios e rápidos da Primeira Pintura de Conteúdo.

    Tempo de carregamento da primeira pintura de conteúdo em milissegundos, rotulado como 'percentil' e proporção de lento, médio e rápido.

Todos esses resultados podem ser extraídos para um ou ambos os dados móveis e de desktop.

Se chamarmos nosso dataframe Pandas de df_field_responses, aqui está como extrairíamos essas propriedades:

 import pandas as pd # Specify the device_type (mobile or desktop) device_type = 'mobile' # Create dataframe to store responses df_field_responses = pd.DataFrame( columns=['requested_url', 'final_url', 'FCM_ms', 'FCP_category', 'FCP_fast', 'FCP_avg', 'FCP_slow' ] ) for (url, i) in zip( response_object[device_type].keys(), range(0, len(df_field_responses)) ): try: print('Trying to insert response for url:', url) # We reuse this below when selecting data from the response fcp_loading = response_object[device_type][url] ['loadingExperience']['metrics']['FIRST_CONTENTFUL_PAINT_MS'] # URLs df_field_responses.loc[i, 'requested_url'] = response_object[device_type][url]['lighthouseResult']['requestedUrl'] df_field_responses.loc[i, 'final_url'] = response_object[device_type][url]['lighthouseResult']['finalUrl'] # Loading experience: First Contentful Paint (ms) df_field_responses.loc[i, 'FCP_ms'] = fcp_loading['percentile'] df_field_responses.loc[i, 'FCP_category'] = fcp_loading['category'] # Proportions: First Contentful Paint df_field_responses.loc[i, 'FCP_fast'] = fcp_loading['distributions'][0]['proportion'] df_field_responses.loc[i, 'FCP_avg'] = fcp_loading['distributions'][1]['proportion'] df_field_responses.loc[i, 'FCP_slow'] = fcp_loading['distributions'][2]['proportion'] print('Inserted for row {}: {}'.format(i, df_field_responses.loc[i])) except Exception as e: print('Error:', e) print('Filling row with Error for row: {}; url: {}'.format(i, url)) # Fill in 'Error' for row if a field couldn't be found df_field_responses.loc[i] = ['Error' for i in range(0, len(df_field_responses.columns))]

Em seguida, para armazenar o dataframe, df_field_responses, em um CSV:

 df_field_responses.to_csv('page_speeds_filtered_responses.csv', index=False)

Executando os scripts no GitHub

O repositório no GitHub contém instruções sobre como executar os arquivos, mas aqui está um resumo rápido.

  1. Antes de executar os scripts de exemplo no GitHub, você precisará clonar o repositório usando
    • git clone https://github.com/Ayima/page-speed-blog-post.git
  2. Em seguida, crie um arquivo CSV com os URLs a serem consultados.
  3. Preencha o arquivo de configuração com o nome do arquivo de URL.
  4. Comando para executar os scripts:
 python main.py --config-file config.json

Algo a ter em conta:

A API tem um limite de quantas solicitações você pode fazer por dia e por segundo.

Existem várias maneiras de se preparar para isso, incluindo:

  • Tratamento de erros: repita as solicitações que retornam um erro
  • Limitação: em seu script para limitar o número de solicitações enviadas por segundo e re-solicitação se uma URL falhar.
  • Obtenha uma chave de API, se necessário (geralmente se você estiver fazendo mais de uma consulta por segundo).

Espero que, depois de ler este guia, você possa começar a usar algumas consultas básicas da API do Google Page Speed ​​Insights. Sinta-se à vontade para nos contatar no twitter @ayima com qualquer dúvida ou se tiver algum problema!

Como usamos a API Page Speeds na Ayima

Aqui na Ayima, coletamos e armazenamos continuamente as velocidades das páginas para os clientes. Isso nos ajuda a ficar de olho na saúde de seus sites e identificar tendências negativas ou positivas. Ao monitorar as velocidades de uma variedade de páginas, podemos visualizar o desempenho por seção do site ou tipo de página (por exemplo, páginas de produtos VS páginas de categorias para sites de comércio eletrônico).

Também rastreamos outras métricas interessantes fornecidas pela API, incluindo dados do Google Lab, e apresentamos tudo em um painel interativo. Para mais informações sobre isso, entre em contato, vamos adorar conversar com você!

Código-fonte: você pode encontrar o projeto GitHub com um script de exemplo para executar aqui.