Google'ın Sayfa Hızı API'sine Başlarken

Yayınlanan: 2019-03-11

Sayfa hızı, birinin sitenizde ne kadar zaman geçireceğinin en büyük göstergelerinden biridir. Yavaş yüklenen sayfalar, daha yüksek hemen çıkma oranlarına, daha düşük dönüşüm oranlarına ve dolayısıyla daha düşük gelire neden olabilir.

Yükleme sürelerinin kitlenizi elde tutma ve dönüşümünüzü etkileyip etkilemediği konusunda fikir edinmek için Google'ın Sayfa Hızı Öngörüleri aracı, başlamak için harika bir yerdir. Google'ın Sayfa Hızı API'si, bu verilere nasıl bağlanabileceğinizi ve veri yığınınızdaki bilgileri nasıl birleştirebileceğinizi gösterir. Müşterilerimiz için önemli kullanıcı deneyimi ölçümlerini izlemek için kendi Sayfa Hızı analiz izleyicimizi oluşturmak için kullandık.

Page Speed ​​Insights API'yi bu kadar harika yapan nedir?

Bu araçla, bir URL ekleyebilir ve performansının bir özetini alabilirsiniz. Bu, bir avuç URL'yi örneklemek için harikadır, ancak ya büyük bir web siteniz varsa ve birden çok bölüm ve sayfa türünde kapsamlı bir performans genel bakışı görmek istiyorsanız?

API'nin devreye girdiği yer burasıdır. Google'ın Page Speed ​​Insights API'si bize, her seferinde bir URL'yi açıkça istemeye ve sonuçları manuel olarak yorumlamaya gerek kalmadan birçok sayfanın performansını analiz etme ve sonuçları kaydetme fırsatı verir.

Bunu akılda tutarak, kendi web siteniz için API'yi kullanmaya başlamanızı sağlayacak basit bir kılavuz hazırladık. Aşağıda özetlenen sürece aşina olduğunuzda, bunun site hızınızı geniş ölçekte analiz etmek, zaman içinde nasıl değiştiğini takip etmek ve hatta izleme araçlarını ayarlamak için nasıl kullanılabileceğini göreceksiniz.

Bu kılavuz, komut dosyası oluşturmaya biraz aşinalık olduğunu varsayar. Burada API ile arayüz oluşturmak ve sonuçları ayrıştırmak için Python kullanıyoruz.

Hedefler

Bu yayında şunları nasıl yapacağınızı öğreneceksiniz:

  1. Google Page Speed ​​Insights API sorgusu oluşturun
  2. URL tablosu için API istekleri yapın
  3. API yanıtından temel bilgileri çıkarın
  4. Verilen örnek betiği Python'da çalıştırın

Kurulum

Python ile Page Speed ​​Insights API'sini sorgulamadan önce izlemeniz gereken birkaç adım vardır.

  • API kurulumu: Birçok Google API'si API anahtarları, şifreler ve diğer kimlik doğrulama önlemleri gerektirir. Ancak, Google Sayfa Hızları API'sini kullanmaya başlamak için bunların hiçbirine ihtiyacınız yoktur!
  • Python 3 kurulumu: Daha önce hiç python kullanmadıysanız, Pandalar gibi popüler veri analizi kitaplıklarıyla birlikte python'u da yükleyen Anaconda dağıtımıyla (Python 3.x sürümü) başlamanızı öneririz.

isteklerin yapılması

Bir isteğin temelleri

API, GET istekleri kullanılarak bu uç noktada sorgulanabilir:

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

Ardından, sayfa hızını bulmak istediğimiz URL'yi ve kullanılacak cihaz türünü belirtmek için aşağıda gösterildiği gibi ek parametreler ekleriz:

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

İsteklerde bulunurken, cihaz türünü belirtmek için {url} yerine web sitenizin URL kodlu sayfa URL'sini ve {device_type} ile mobil veya masaüstünü değiştirmelisiniz.

Python paketleri

İstek yapmak, bunları almak ve sonuçları tablolara yazmak için birkaç python kitaplığı kullanacağız:

  • urllib : HTTP isteklerini yapmak için.
  • json : Yanıt nesnelerini ayrıştırmak ve okumak için.
  • pandalar : Sonuçları CSV formatında kaydetmek için.

Sorguyu oluşturma

Python kullanarak bir API isteği yapmak için urllib.request.urlopen yöntemini kullanabiliriz:

 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')

Bu istek (şaşırtıcı derecede büyük) bir JSON yanıtı döndürmelidir. Bunu birazdan daha ayrıntılı olarak tartışacağız.

Birden çok sorgu yapma

Bu API'nin önemli bir satış noktası, toplu URL'ler için sayfa hızlarını çekmemize olanak sağlamasıdır. Python ile bunun nasıl yapılabileceğine bir göz atalım.

Seçeneklerden biri, istek parametrelerini ( url ve device_type ) yinelemek için Pandas DataFrame'e yükleyebileceğimiz bir CSV'de saklamaktır. Aşağıda, her isteğin veya benzersiz url + device_type çiftinin kendi satırına sahip olduğuna dikkat edin.

Verileri CSV'de saklayın

 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

CSV'yi yükleyin

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

Talep edilecek tüm URL'leri içeren bir veri kümemiz olduğunda, bunları yineleyebilir ve her satır için bir API isteğinde bulunabiliriz. Bu aşağıda gösterilmiştir:

 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] = {}

Yanıtı okumak

Verilere herhangi bir filtre veya biçimlendirme uygulamadan önce, aşağıdaki gibi ileride kullanmak üzere yanıtların tamamını depolayabiliriz:

 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)

Yukarıda belirtildiği gibi, her yanıt bir JSON nesnesi döndürür. Verilen URL ile ilgili birçok farklı özelliğe sahiptirler ve filtreleme ve biçimlendirme olmadan deşifre edilemeyecek kadar büyüktürler.

Bunu yapmak için, istediğimiz verileri tablo formatında çıkarmayı ve CSV'ye aktarmayı kolaylaştıran Pandas kitaplığını kullanacağız.

Bu, yanıtın genel yapısıdır. Boyutundan dolayı yükleme sürelerindeki veriler en aza indirilmiştir.

Genel yanıt yapısı

Diğer bilgilerin yanı sıra, yanıta dahil edilen iki ana sayfa hızı verisi kaynağı vardır: 'lighthouseResult' içinde depolanan laboratuvar verileri ve 'loadingExperience' içinde depolanan Alan verileri. Bu gönderide, yalnızca Chrome tarayıcısındaki gerçek dünya kullanıcılarına dayalı kitle kaynaklı Alan verilerine odaklanacağız.

Özellikle, aşağıdaki metrikleri çıkaracağız:

  • İstenen URL ve Nihai URL
    • Aynı olduklarından emin olmak için denetlenen hem İstenen hem de Nihai çözümlenmiş URL'ye ihtiyacımız var. Bu, sonucun bir yönlendirme yerine amaçlanan URL'den geldiğini belirlememize yardımcı olacaktır.

    Yukarıdaki 'lighthouseResult' bölümünde her iki URL'nin de aynı olduğunu görebiliriz.

  • İlk Contentful Paint (ms)
    • Bu, kullanıcının sayfada ilk gezinmesi ile tarayıcının bir içerik parçasını ilk kez oluşturduğu ve kullanıcıya sayfanın yüklendiğini bildirdiği zaman arasındaki süredir.
    • Bu metrik milisaniye cinsinden ölçülür.
  • First Contentful Paint (yavaş, ortalama, hızlı oranları)
    • Bu, First Contentful Paint'in yavaş, ortalama ve hızlı yükleme sürelerine sahip sayfaların yüzdesini gösterir.

    Milisaniye cinsinden İlk Contentful Paint yükleme süresi, 'yüzdelik' etiketli ve yavaş, ortalama ve hızlı oranı.

Tüm bu sonuçlar, mobil ve masaüstü verilerinden biri veya her ikisi için çıkarılabilir.

Panda veri çerçevemizi df_field_responses olarak adlandırırsak, bu özellikleri nasıl çıkaracağımız aşağıda açıklanmıştır:

 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))]

Ardından, df_field_responses veri çerçevesini bir CSV'de saklamak için:

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

Komut dosyalarını GitHub'da çalıştırma

GitHub'daki depo, dosyaların nasıl çalıştırılacağına ilişkin talimatlar içerir, ancak işte hızlı bir döküm.

  1. Örnek komut dosyalarını GitHub'da çalıştırmadan önce, kullanarak depoyu klonlamanız gerekir.
    • git clone https://github.com/Ayima/page-speed-blog-post.git
  2. Ardından, sorgulanacak URL'leri içeren bir CSV dosyası oluşturun.
  3. Yapılandırma dosyasını URL dosya adıyla doldurun.
  4. Komut dosyalarını çalıştırma komutu:
 python main.py --config-file config.json

Akılda tutulması gereken bir şey:

API'nin günde ve saniyede kaç istekte bulunabileceğiniz konusunda bir sınırı vardır.

Buna hazırlanmanın birkaç yolu vardır:

  • Hata işleme: Hata döndüren istekleri tekrarlayın
  • Kısıtlama: Komut dosyanızda saniyede gönderilen istek sayısını sınırlamak ve bir URL başarısız olursa yeniden talep etmek.
  • Gerekirse bir API anahtarı alın (genellikle saniyede birden fazla sorgu yapıyorsanız).

Umarım bu kılavuzu okuduktan sonra, Google Page Speed ​​Insights API'sinin bazı temel sorgulamalarını yapmaya başlayabilirsiniz. Herhangi bir sorunuz olursa veya herhangi bir sorunla karşılaşırsanız twitter @ayima'dan bize ulaşmaktan çekinmeyin!

Ayima'da Sayfa Hızları API'sini nasıl kullanıyoruz?

Ayima'da, müşteriler için sürekli olarak sayfa hızlarını toplar ve depolarız. Bu, web sitelerinin sağlığına dikkat etmemize ve olumsuz veya olumlu eğilimleri belirlememize yardımcı olur. Çeşitli sayfaların hızlarını izleyerek, performansı site bölümü veya sayfa türüne göre görselleştirebiliriz (örneğin, E-ticaret web siteleri için ürün sayfaları ve kategori sayfaları).

Ayrıca, Google'ın Lab verileri de dahil olmak üzere API tarafından sağlanan diğer ilginç ölçümleri de izliyoruz ve her şeyi etkileşimli bir gösterge panosunda sunuyoruz. Bu konuda daha fazla bilgi için lütfen iletişime geçin, sizinle sohbet etmeyi çok isteriz!

Kaynak Kodu: GitHub projesini çalıştırmak için örnek bir komut dosyası ile burada bulabilirsiniz.