Memulai dengan API Kecepatan Halaman Google

Diterbitkan: 2019-03-11

Kecepatan halaman adalah salah satu indikator terbesar tentang berapa lama seseorang akan menghabiskan waktu di situs Anda. Laman pemuatan yang lambat dapat menyebabkan rasio pentalan yang lebih tinggi, rasio konversi yang lebih rendah, dan karenanya, pendapatan yang lebih rendah.

Untuk mendapatkan beberapa wawasan tentang apakah waktu muat dapat memengaruhi retensi dan konversi pemirsa Anda, alat Wawasan Kecepatan Laman Google adalah tempat yang tepat untuk memulai. API Kecepatan Laman Google adalah cara Anda menyambungkan data ini dan memasukkan wawasan ke dalam tumpukan data Anda. Kami telah menggunakannya untuk membangun pelacak analitik Kecepatan Halaman kami sendiri untuk memantau metrik pengalaman pengguna utama untuk klien kami.

Apa yang hebat dari Page Speed ​​Insights API?

Dengan alat ini, Anda dapat memasukkan URL dan menerima ringkasan kinerjanya. Ini bagus untuk mengambil sampel beberapa URL, tetapi bagaimana jika Anda memiliki situs web besar dan ingin melihat ikhtisar kinerja yang komprehensif di beberapa bagian dan jenis halaman?

Di sinilah API masuk. Google's Page Speed ​​Insights API memberi kita kesempatan untuk menganalisis kinerja banyak halaman dan mencatat hasilnya, tanpa perlu secara eksplisit meminta URL satu per satu dan menafsirkan hasilnya secara manual.

Dengan mengingat hal ini, kami telah menyusun panduan sederhana yang akan membantu Anda mulai menggunakan API untuk situs web Anda sendiri. Setelah Anda membiasakan diri dengan proses yang diuraikan di bawah ini, Anda akan melihat bagaimana ini dapat digunakan untuk menganalisis kecepatan situs Anda dalam skala besar, melacak bagaimana perubahannya dari waktu ke waktu, atau bahkan menyiapkan alat pemantauan.

Panduan ini mengasumsikan beberapa keakraban dengan scripting. Di sini kami menggunakan Python untuk berinteraksi dengan API dan mengurai hasilnya.

Tujuan

Dalam posting ini Anda akan belajar bagaimana:

  1. Buat kueri Google Page Speed ​​Insights API
  2. Buat permintaan API untuk tabel URL
  3. Ekstrak informasi dasar dari respons API
  4. Jalankan skrip contoh yang diberikan dengan Python

Persiapan

Ada beberapa langkah yang perlu Anda ikuti sebelum menanyakan API Page Speed ​​Insights dengan Python.

  • Penyiapan API: Banyak Google API memerlukan kunci API, sandi, dan tindakan autentikasi lainnya. Namun, Anda tidak memerlukan semua ini untuk memulai Google Page Speeds API!
  • Instalasi Python 3: Jika Anda belum pernah menggunakan python sebelumnya, kami sarankan untuk memulai dengan distribusi Anaconda (versi Python 3.x), yang menginstal python bersama dengan pustaka analisis data populer seperti Pandas.

Membuat permintaan

Dasar-dasar permintaan

API dapat ditanyakan pada titik akhir ini menggunakan permintaan GET:

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

Kami kemudian menambahkan parameter tambahan untuk menentukan URL yang ingin kami temukan kecepatan halamannya dan jenis perangkat yang akan digunakan, seperti yang ditunjukkan di bawah ini:

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

Saat membuat permintaan, Anda harus mengganti {url} dengan URL halaman yang disandikan URL dari situs web Anda, dan {device_type} dengan dengan seluler atau desktop, untuk menentukan jenis perangkat.

Paket Python

Untuk membuat permintaan, mencernanya dan kemudian menulis hasilnya ke tabel, kami akan menggunakan beberapa pustaka python:

  • urllib : Untuk membuat permintaan HTTP.
  • json : Untuk mengurai dan membaca objek respon.
  • pandas : Untuk menyimpan hasil dalam format CSV.

Membangun kueri

Untuk membuat permintaan API menggunakan Python, kita dapat menggunakan metode 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')

Permintaan ini harus mengembalikan respons JSON (sangat besar). Kami akan membahas ini secara lebih rinci segera.

Membuat beberapa pertanyaan

Nilai jual utama dari API ini adalah memungkinkan kami untuk menarik kecepatan halaman untuk kumpulan URL. Mari kita lihat bagaimana ini bisa dilakukan dengan Python.

Salah satu opsi adalah menyimpan parameter permintaan ( url dan device_type ) dalam CSV, yang dapat kita muat ke dalam Pandas DataFrame untuk diulang. Perhatikan di bawah bahwa setiap permintaan, atau pasangan url + device_type unik memiliki barisnya sendiri.

Simpan data dalam 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

Muat CSV

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

Setelah kami memiliki kumpulan data dengan semua URL untuk diminta, kami dapat mengulanginya dan membuat permintaan API untuk setiap baris. Ini ditunjukkan di bawah ini:

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

Membaca tanggapan

Sebelum menerapkan filter atau pemformatan apa pun pada data, pertama-tama kita dapat menyimpan respons lengkap untuk penggunaan di masa mendatang seperti ini:

 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)

Seperti disebutkan di atas, setiap respons mengembalikan objek JSON. Mereka memiliki banyak properti berbeda yang berkaitan dengan URL yang diberikan, dan terlalu besar untuk diuraikan tanpa pemfilteran dan pemformatan.

Untuk melakukan ini, kita akan menggunakan perpustakaan Pandas, yang memudahkan untuk mengekstrak data yang kita inginkan dalam format tabel dan mengekspor ke CSV.

Ini adalah struktur umum dari respon. Data tentang waktu muat telah diminimalkan karena ukurannya.

Struktur respons umum

Di antara informasi lainnya, ada dua sumber utama data kecepatan halaman yang disertakan dalam respons: Data lab, disimpan di 'lighthouseResult' dan Data lapangan, disimpan di 'loadingExperience'. Dalam posting ini, kami hanya akan fokus pada data Lapangan, yang bersumber dari kerumunan berdasarkan pengguna dunia nyata di browser Chrome.

Secara khusus, kami akan mengekstrak metrik berikut:

  • URL yang Diminta dan URL Final
    • Kami membutuhkan URL yang Diminta dan diselesaikan Final yang telah diaudit untuk memastikan bahwa keduanya sama. Ini akan membantu kami mengidentifikasi bahwa hasilnya berasal dari URL yang dimaksud, bukan dari pengalihan.

    Kita dapat melihat bahwa kedua URL tersebut sama pada 'lighthouseResult' di atas.

  • Cat Contentful Pertama (ms)
    • Ini adalah waktu antara navigasi pertama pengguna ke halaman dan saat browser pertama kali merender suatu konten, memberi tahu pengguna bahwa halaman sedang dimuat.
    • Metrik ini diukur dalam milidetik.
  • First Contentful Paint (proporsi lambat, rata-rata, cepat)
    • Ini menunjukkan persentase halaman yang memiliki waktu muat lambat, rata-rata, dan cepat First Contentful Paint.

    Waktu muat Cat Contentful Pertama dalam milidetik, berlabel 'persentil', dan proporsi lambat, rata-rata, dan cepat.

Semua hasil ini dapat diekstraksi untuk salah satu, atau keduanya, data seluler dan desktop.

Jika kami memanggil dataframe Pandas kami df_field_responses, berikut adalah cara kami mengekstrak properti ini:

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

Kemudian untuk menyimpan kerangka data, df_field_responses, dalam CSV:

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

Menjalankan skrip di GitHub

Repositori di GitHub berisi instruksi tentang cara menjalankan file, tetapi ini adalah rincian singkatnya.

  1. Sebelum menjalankan contoh skrip di GitHub, Anda harus mengkloning repositori menggunakan
    • git clone https://github.com/Ayima/page-speed-blog-post.git
  2. Kemudian buat file CSV dengan URL untuk kueri.
  3. Isi file konfigurasi dengan nama file URL.
  4. Perintah untuk menjalankan skrip:
 python main.py --config-file config.json

Sesuatu yang perlu diingat:

API memiliki batasan berapa banyak permintaan yang dapat Anda buat per hari dan per detik.

Ada beberapa cara untuk mempersiapkannya, antara lain:

  • Penanganan kesalahan: Ulangi permintaan yang mengembalikan kesalahan
  • Pembatasan: dalam skrip Anda untuk membatasi jumlah permintaan yang dikirim per detik, dan meminta ulang jika URL gagal.
  • Dapatkan kunci API jika perlu (biasanya jika Anda membuat lebih dari satu kueri per detik).

Semoga setelah membaca panduan ini, Anda dapat memulai dan menjalankan beberapa kueri dasar tentang Google Page Speed ​​Insights API. Jangan ragu untuk menghubungi kami di twitter @ayima dengan pertanyaan atau jika Anda mengalami masalah!

Bagaimana kami menggunakan API Kecepatan Halaman di Ayima

Di Ayima, kami terus mengumpulkan dan menyimpan kecepatan halaman untuk klien. Ini membantu kami mengawasi kesehatan situs web mereka dan mengidentifikasi tren negatif atau positif. Dengan memantau kecepatan untuk berbagai halaman, kami dapat memvisualisasikan kinerja berdasarkan bagian situs atau jenis halaman (misalnya halaman produk VS halaman kategori untuk situs web E-niaga).

Kami juga melacak metrik menarik lainnya yang disediakan oleh API, termasuk data Lab Google, dan menyajikan semuanya dalam dasbor interaktif. Untuk informasi lebih lanjut tentang ini, silakan hubungi, kami akan senang mengobrol dengan Anda!

Kode Sumber: Anda dapat menemukan proyek GitHub dengan contoh skrip untuk dijalankan di sini.