Tes Kinerja Pemuatan Massal Dengan PageSpeed ​​Insights API & Python

Tes Kinerja Pemuatan Massal Dengan PageSpeed ​​Insights API & Python

Google menawarkan PageSpeed ​​Insights API untuk membantu para profesional dan pengembang SEO dengan menggabungkan data dunia nyata dengan data simulasi, menyediakan data waktu kinerja pemuatan yang terkait dengan halaman web.

Perbedaan antara Google PageSpeed ​​Insights (PSI) dan Lighthouse adalah bahwa PSI melibatkan data dunia nyata dan lab, sementara Lighthouse melakukan simulasi pemuatan halaman dengan memodifikasi koneksi dan agen pengguna perangkat.

Perbedaan lain adalah bahwa PSI tidak menyediakan informasi apa pun yang terkait dengan aksesibilitas web, SEO, atau aplikasi web progresif (PWA), sementara Lighthouse menyediakan semua hal di atas.

Jadi, saat kami menggunakan PageSpeed ​​Insights API untuk pengujian kinerja pemuatan URL massal, kami tidak akan memiliki data untuk aksesibilitas.

Namun, PSI memberikan lebih banyak informasi yang terkait dengan kinerja kecepatan halaman, seperti “Ukuran DOM”, “Elemen Anak DOM Terdalam”, “Jumlah Tugas Total”, dan waktu “Konten DOM Dimuat”.

Satu lagi keuntungan dari PageSpeed ​​Insights API adalah memberikan “metrik yang diamati” dan “metrik sebenarnya” nama yang berbeda.

Dalam panduan ini, Anda akan belajar:

  • Cara membuat Skrip Python tingkat produksi.
  • Cara menggunakan API dengan Python.
  • Cara membuat bingkai data dari respons API.
  • Cara menganalisis respons API.
  • Cara mengurai URL dan memproses tanggapan permintaan URL.
  • Cara menyimpan respons API dengan struktur yang tepat.

Contoh output dari panggilan Page Speed ​​Insights API dengan Python ada di bawah ini.

contoh keluaran dari Wawasan Kecepatan HalamanTangkapan layar dari penulis, Juni 2022

Pustaka Untuk Menggunakan PageSpeed ​​Insights API Dengan Python

Pustaka yang diperlukan untuk menggunakan PSI API dengan Python ada di bawah ini.

  • alat iklan mengambil URL pengujian dari peta situs situs web.
  • Panda adalah untuk membangun bingkai data dan meratakan output JSON dari API.
  • Permintaan adalah membuat permintaan ke titik akhir API tertentu.
  • JSON akan mengambil respons API dan memasukkannya ke dalam poin kamus yang terkait secara khusus.
  • Datetime adalah untuk mengubah nama file output tertentu dengan tanggal saat itu.
  • URLlib adalah untuk mengurai URL situs web subjek pengujian.

Bagaimana Cara Menggunakan API PSI Dengan Python?

Untuk menggunakan PSI API dengan Python, ikuti langkah-langkah di bawah ini.

  • Dapatkan kunci API PageSpeed ​​Insights.
  • Impor perpustakaan yang diperlukan.
  • Parsing URL untuk situs web subjek pengujian.
  • Ambil Date of Moment untuk nama file.
  • Ambil URL ke dalam daftar dari peta situs.
  • Pilih metrik yang Anda inginkan dari PSI API.
  • Buat For Loop untuk mengambil Respons API untuk semua URL.
  • Buat kerangka data dengan metrik API PSI yang dipilih.
  • Keluarkan hasilnya dalam bentuk XLSX.

1. Dapatkan Kunci API PageSpeed ​​Insights

Menggunakan API Wawasan PageSpeed Dokumentasi untuk mendapatkan Kunci API.

Klik tombol “Dapatkan Kunci” di bawah.

kunci psi api Gambar dari developers.google.com, Juni 2022

Pilih proyek yang telah Anda buat di Google Developer Console.

proyek api konsol pengembang googleGambar dari developers.google.com, Juni 2022

Aktifkan PageSpeed ​​Insights API pada proyek tertentu itu.

wawasan kecepatan halaman mengaktifkan apiGambar dari developers.google.com, Juni 2022

Anda harus menggunakan Kunci API tertentu di Permintaan API Anda.

2. Impor Perpustakaan yang Diperlukan

Gunakan baris di bawah ini untuk mengimpor pustaka dasar.

    import advertools as adv
    import pandas as pd
    import requests
    import json
    from datetime import datetime
    from urllib.parse import urlparse

3. Parsing URL Untuk Situs Web Subjek Tes

Untuk mengurai URL situs web subjek, gunakan struktur kode di bawah ini.

  domain = urlparse(sitemap_url)
  domain = domain.netloc.split(".")[1]

Variabel “domain” adalah versi parsing dari URL peta situs.

The “netloc” mewakili bagian domain URL tertentu. Saat kita membaginya dengan “.” dibutuhkan “bagian tengah” yang mewakili nama domain.

Di sini, “0” adalah untuk “www,” “1” untuk “nama domain,” dan “2” adalah untuk “ekstensi domain,” jika kita membaginya dengan “.”

4. Ambil Tanggal Momen Untuk Nama File

Untuk mengambil tanggal momen panggilan fungsi tertentu, gunakan metode “datetime.now”.

Datetime.now menyediakan waktu spesifik dari momen tertentu. Gunakan “strftime” dengan nilai “%Y”, “”%m”, dan “%d”. “%Y” adalah untuk tahun. “%m” dan “%d” adalah nilai numerik untuk bulan dan hari tertentu.

 date = datetime.now().strftime("%Y_%m_%d")

5. Ambil URL Ke Daftar Dari Peta Situs

Untuk memasukkan URL ke dalam formulir daftar dari file peta situs, gunakan blok kode di bawah ini.

   sitemap = adv.sitemap_to_df(sitemap_url)
   sitemap_urls = sitemap["loc"].to_list()

Jika Anda membaca Audit Kesehatan Peta Situs Python, Anda dapat mempelajari informasi lebih lanjut tentang peta situs.

6. Pilih Metrik yang Anda Inginkan Dari PSI API

Untuk memilih properti JSON respons API PSI, Anda harus melihat file JSON itu sendiri.

Ini sangat relevan dengan pembacaan, penguraian, dan perataan objek JSON.

Ini bahkan terkait dengan SEO Semantik, berkat konsep “grafik terarah”, dan data terstruktur “JSON-LD”.

Dalam artikel ini, kami tidak akan fokus untuk memeriksa hierarki JSON Tanggapan PSI API tertentu.

Anda dapat melihat metrik yang telah saya pilih untuk dikumpulkan dari PSI API. Ini lebih kaya daripada output default dasar PSI API, yang hanya memberikan Metrik Vital Web Inti, atau Interaksi Indeks Kecepatan ke Cat Berikutnya, Waktu ke Byte Pertama, dan Cat Konten Pertama.

Tentu saja, itu juga memberikan “saran” dengan mengatakan “Hindari Chaining Permintaan Kritis,” tetapi tidak perlu memasukkan kalimat ke dalam bingkai data.

Di masa mendatang, saran ini, atau bahkan setiap peristiwa rantai individu, nilai KB dan MS-nya dapat dimasukkan ke dalam satu kolom dengan nama “psi_suggtions.”

Sebagai permulaan, Anda dapat memeriksa metrik yang telah saya pilih, dan sejumlah penting dari mereka akan menjadi yang pertama untuk Anda.

Metrik API PSI, bagian pertama ada di bawah.

    fid = []
    lcp = []
    cls_ = []
    url = []
    fcp = []
    performance_score = []
    total_tasks = []
    total_tasks_time = []
    long_tasks = []
    dom_size = []
    maximum_dom_depth = []
    maximum_child_element = []
    observed_fcp  = []
    observed_fid = []
    observed_lcp = []
    observed_cls = []
    observed_fp = []
    observed_fmp = []
    observed_dom_content_loaded = []
    observed_speed_index = []
    observed_total_blocking_time = []
    observed_first_visual_change = []
    observed_last_visual_change = []
    observed_tti = []
    observed_max_potential_fid = []

Bagian ini mencakup semua metrik kecepatan halaman dasar yang diamati dan disimulasikan, bersama dengan beberapa metrik non-dasar, seperti “Konten DOM Dimuat”, atau “Cat Bermakna Pertama”.

Bagian kedua dari Metrik PSI berfokus pada kemungkinan penghematan byte dan waktu dari jumlah kode yang tidak digunakan.

    render_blocking_resources_ms_save = []
    unused_javascript_ms_save = []
    unused_javascript_byte_save = []
    unused_css_rules_ms_save = []
    unused_css_rules_bytes_save = []

Bagian ketiga dari metrik PSI berfokus pada waktu respons server, manfaat penggunaan gambar responsif, atau tidak, penggunaan bahaya.

    possible_server_response_time_saving = []
    possible_responsive_image_ms_save = []

Catatan: Skor Performa Keseluruhan berasal dari “performance_score”.

7. Buat A For Loop Untuk Mengambil Respons API Untuk Semua URL

Perulangan for adalah mengambil semua URL dari file peta situs dan menggunakan API PSI untuk semuanya satu per satu. Perulangan for untuk otomatisasi API PSI memiliki beberapa bagian.

Bagian pertama dari PSI API for loop dimulai dengan pencegahan URL duplikat.

Di peta situs, Anda dapat melihat URL yang muncul beberapa kali. Bagian ini mencegahnya.

for i in sitemap_urls[:9]:
         # Prevent the duplicate "/" trailing slash URL requests to override the information.
         if i.endswith("/"):
               r = requests.get(f"https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={i}&strategy=mobile&locale=en&key={api_key}")
         else:
               r = requests.get(f"https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={i}/&strategy=mobile&locale=en&key={api_key}")

Ingatlah untuk memeriksa “api_key” di akhir titik akhir untuk PageSpeed ​​Insights API.

Periksa kode status. Di peta situs, mungkin ada URL kode status non-200; ini harus dibersihkan.

         if r.status_code == 200:
               #print(r.json())
               data_ = json.loads(r.text)
               url.append(i)

Bagian berikutnya menambahkan metrik spesifik ke kamus spesifik yang telah kami buat sebelum “_data”.

               fcp.append(data_["loadingExperience"]["metrics"]["FIRST_CONTENTFUL_PAINT_MS"]["percentile"])
               fid.append(data_["loadingExperience"]["metrics"]["FIRST_INPUT_DELAY_MS"]["percentile"])
               lcp.append(data_["loadingExperience"]["metrics"]["LARGEST_CONTENTFUL_PAINT_MS"]["percentile"])
               cls_.append(data_["loadingExperience"]["metrics"]["CUMULATIVE_LAYOUT_SHIFT_SCORE"]["percentile"])
               performance_score.append(data_["lighthouseResult"]["categories"]["performance"]["score"] * 100)

Bagian selanjutnya berfokus pada jumlah “tugas total”, dan Ukuran DOM.

               total_tasks.append(data_["lighthouseResult"]["audits"]["diagnostics"]["details"]["items"][0]["numTasks"])
               total_tasks_time.append(data_["lighthouseResult"]["audits"]["diagnostics"]["details"]["items"][0]["totalTaskTime"])
               long_tasks.append(data_["lighthouseResult"]["audits"]["diagnostics"]["details"]["items"][0]["numTasksOver50ms"])
               dom_size.append(data_["lighthouseResult"]["audits"]["dom-size"]["details"]["items"][0]["value"])

Bagian selanjutnya mengambil “Kedalaman DOM” dan “Elemen DOM Terdalam.”

               maximum_dom_depth.append(data_["lighthouseResult"]["audits"]["dom-size"]["details"]["items"][1]["value"])
               maximum_child_element.append(data_["lighthouseResult"]["audits"]["dom-size"]["details"]["items"][2]["value"])

Bagian selanjutnya mengambil hasil pengujian khusus yang diamati selama Page Speed ​​Insights API kami.

               observed_dom_content_loaded.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedDomContentLoaded"])
               observed_fid.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedDomContentLoaded"])
               observed_lcp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["largestContentfulPaint"])
               observed_fcp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["firstContentfulPaint"])
               observed_cls.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["totalCumulativeLayoutShift"])
               observed_speed_index.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedSpeedIndex"])
               observed_total_blocking_time.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["totalBlockingTime"])
               observed_fp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedFirstPaint"])
               observed_fmp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["firstMeaningfulPaint"])
               observed_first_visual_change.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedFirstVisualChange"])
               observed_last_visual_change.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedLastVisualChange"])
               observed_tti.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["interactive"])
               observed_max_potential_fid.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["maxPotentialFID"])

Bagian berikutnya mengambil jumlah Kode yang Tidak Digunakan dan byte yang terbuang, dalam milidetik bersama dengan sumber daya pemblokiran render.

               render_blocking_resources_ms_save.append(data_["lighthouseResult"]["audits"]["render-blocking-resources"]["details"]["overallSavingsMs"])
               unused_javascript_ms_save.append(data_["lighthouseResult"]["audits"]["unused-javascript"]["details"]["overallSavingsMs"])
               unused_javascript_byte_save.append(data_["lighthouseResult"]["audits"]["unused-javascript"]["details"]["overallSavingsBytes"])
               unused_css_rules_ms_save.append(data_["lighthouseResult"]["audits"]["unused-css-rules"]["details"]["overallSavingsMs"])
               unused_css_rules_bytes_save.append(data_["lighthouseResult"]["audits"]["unused-css-rules"]["details"]["overallSavingsBytes"])

Bagian selanjutnya adalah memberikan manfaat gambar responsif dan waktu respons server.

               possible_server_response_time_saving.append(data_["lighthouseResult"]["audits"]["server-response-time"]["details"]["overallSavingsMs"])      
               possible_responsive_image_ms_save.append(data_["lighthouseResult"]["audits"]["uses-responsive-images"]["details"]["overallSavingsMs"])

Bagian selanjutnya adalah membuat fungsi terus bekerja jika terjadi kesalahan.

         else:
           continue

Contoh Penggunaan API Wawasan Kecepatan Halaman Dengan Python Untuk Pengujian Massal

Untuk menggunakan blok kode tertentu, masukkan ke dalam fungsi Python.

Jalankan skrip, dan Anda akan mendapatkan 29 metrik terkait kecepatan halaman di kolom di bawah ini.

api wawasan kecepatan halamanTangkapan layar dari penulis, Juni 2022

Kesimpulan

PageSpeed ​​Insights API menyediakan berbagai jenis metrik kinerja pemuatan halaman.

Ini menunjukkan bagaimana insinyur Google memahami konsep kinerja pemuatan halaman, dan mungkin menggunakan metrik ini sebagai peringkat, UX, dan sudut pandang pemahaman kualitas.

Menggunakan Python untuk pengujian kecepatan halaman massal memberi Anda gambaran tentang seluruh situs web untuk membantu menganalisis kemungkinan pengalaman pengguna, efisiensi perayapan, tingkat konversi, dan peningkatan peringkat.

Lebih banyak sumber daya:


Gambar Unggulan: Dundanim/Shutterstock

Share

Leave a Reply

Your email address will not be published.