Trình theo dõi thời gian hoạt động của trang web Python

Trong tháng trước, Google đã công bố một số cải tiến về cách họ sẽ đo lường trải nghiệm người dùng thông qua các chỉ số hiệu suất và tốc độ chính.

Thật trùng hợp, tôi đang làm việc để tập hợp một tập lệnh Python sử dụng API Google PageSpeed ​​​​Insights [PSI] để thu thập số liệu cho một số trang cùng một lúc mà không cần chạy thử nghiệm cho từng URL riêng lẻ

Theo thông báo từ Google, tôi nghĩ bây giờ sẽ là thời điểm hoàn hảo để chia sẻ nó, cũng như giải thích cách bạn có thể tạo tập lệnh Python thân thiện với người mới bắt đầu này

Điều tốt nhất về tập lệnh là khi bạn đã thiết lập nền tảng, bạn sẽ có thể trích xuất một số chỉ số khác nhau có thể tìm thấy trong kiểm tra tốc độ trang, cũng như phân tích Ngọn hải đăng

Giới thiệu về số liệu quan trọng về web

Vào đầu tháng 5, Google đã giới thiệu đó là một tập hợp con của các chỉ số Web Vitals chính của nó

Các số liệu này được sử dụng để cung cấp hướng dẫn về chất lượng trải nghiệm người dùng trên trang web

Google đã mô tả chúng như một cách để “giúp định lượng trải nghiệm trên trang web của bạn và xác định các cơ hội để cải thiện”, nhấn mạnh thêm sự thay đổi của họ theo hướng tập trung vào trải nghiệm người dùng

Các chỉ số quan trọng về trang web là số liệu trong thế giới thực, lấy người dùng làm trung tâm để đo lường các khía cạnh chính trong trải nghiệm của người dùng;

Tôi sẽ không đi vào quá nhiều chi tiết để giải thích những điều này trong bài đăng này – bạn có thể tìm hiểu thêm tại đây – nhưng những số liệu mới này là

• Sơn có nội dung lớn nhất
• Độ trễ đầu vào đầu tiên
• Thay đổi bố cục tích lũy

Ngoài ra, Google đã thông báo vào tuần trước rằng họ sẽ giới thiệu một tín hiệu xếp hạng tìm kiếm mới sẽ kết hợp các số liệu này cùng với các tín hiệu trải nghiệm trang hiện có, chẳng hạn như tính thân thiện với thiết bị di động và bảo mật HTTPS, để đảm bảo chúng tiếp tục phục vụ các trang web chất lượng cao

Theo dõi số liệu hiệu suất

Bản cập nhật này dự kiến ​​sẽ ra mắt vào năm 2021 và Google đã xác nhận rằng không cần thực hiện hành động ngay lập tức

Tuy nhiên, để giúp chúng tôi chuẩn bị cho những thay đổi này, họ đã cập nhật các công cụ được sử dụng để đo tốc độ trang bao gồm PSI, Google Lighthouse và Báo cáo tốc độ của Google Search Console

API Thông tin chi tiết về tốc độ trang đi vào đâu?

Thông tin chi tiết về tốc độ trang của Google là một công cụ hữu ích để xem tóm tắt về hiệu suất của trang web và sử dụng cả dữ liệu hiện trường và phòng thí nghiệm để tạo kết quả

Đó là một cách tuyệt vời để có được cái nhìn tổng quan về một số ít URL, vì nó được sử dụng trên cơ sở từng trang

Tuy nhiên, nếu bạn đang làm việc trên một trang web lớn và muốn thu thập thông tin chuyên sâu trên quy mô lớn, API có thể hữu ích để phân tích một số trang cùng một lúc mà không cần phải cắm từng URL riêng lẻ

Tập lệnh Python để đo hiệu suất

Tôi đã tạo tập lệnh Python sau để đo các chỉ số hiệu suất chính trên quy mô lớn, nhằm tiết kiệm thời gian kiểm tra thủ công từng URL

Tập lệnh này sử dụng Python để gửi yêu cầu tới Google PSI API nhằm thu thập và trích xuất các số liệu được hiển thị trong cả PSI và Lighthouse

Tôi quyết định viết tập lệnh này trong Google Colab vì đây là một cách tuyệt vời để bắt đầu viết Python và cho phép chia sẻ dễ dàng, vì vậy bài đăng này sẽ chạy qua phần thiết lập bằng Google Colab

Tuy nhiên, nó cũng có thể chạy cục bộ, với một vài chỉnh sửa đối với việc tải lên và tải xuống dữ liệu

Điều quan trọng cần lưu ý là một số bước có thể mất chút thời gian để hoàn thành, đặc biệt là khi mỗi URL được chạy qua API, để không làm nó quá tải với các yêu cầu

Do đó, bạn có thể chạy tập lệnh ở chế độ nền và quay lại tập lệnh khi các bước đã hoàn thành

Hãy xem qua các bước cần thiết để thiết lập và chạy tập lệnh này

Bước 1. Cài đặt các gói cần thiết

Trước khi chúng tôi bắt đầu viết bất kỳ mã nào, chúng tôi cần cài đặt một số gói Python được yêu cầu trước khi chúng tôi có thể sử dụng tập lệnh. Đây là những thứ dễ cài đặt bằng chức năng nhập

Các gói chúng tôi sẽ cần là

• urllib. Để làm việc với, mở, đọc và phân tích cú pháp URL
• json. Cho phép bạn chuyển đổi tệp JSON thành Python hoặc tệp Python thành JSON
• yêu cầu. Một thư viện HTTP để gửi tất cả các loại yêu cầu HTTP
• gấu trúc. Chủ yếu được sử dụng để phân tích và thao tác dữ liệu, chúng tôi đang sử dụng nó để tạo DataFrames
• thời gian. Một mô-đun để làm việc với thời gian, chúng tôi đang sử dụng mô-đun này để cung cấp thời gian nghỉ giữa các yêu cầu
• các tập tin. Từ Google Colab, điều này sẽ cho phép bạn tải lên và tải xuống tệp
• io. Giao diện mặc định được sử dụng để truy cập tệp

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

Bước 2. Thiết lập Yêu cầu API

Bước tiếp theo là thiết lập yêu cầu API. Hướng dẫn đầy đủ có thể được tìm thấy ở đây, nhưng về cơ bản lệnh sẽ như thế này

https. //www. googleapis. com/pagespeedonline/v5/runPagespeed?url={yourURL}/&strategy=mobile/&key={yourAPIKey}

Điều này sẽ cho phép bạn nối thêm URL, chiến lược [máy tính để bàn hoặc thiết bị di động] và khóa API

Để sử dụng nó với Python, chúng ta sẽ sử dụng thư viện yêu cầu urllib urllib. lời yêu cầu. urlopen và thêm nó vào một biến có tên là kết quả để chúng tôi có thể lưu trữ kết quả và sử dụng lại chúng trong tập lệnh

# Define URL  
url = '//www.example.co.uk'

# API request url
result = urllib.request.urlopen['//www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}/&strategy=mobile'\
.format[url]].read[].decode['UTF-8']

print[result]

Bước 3. Kiểm tra API

Để kiểm tra xem API có được thiết lập chính xác hay không, cũng như hiểu rõ những gì được tạo ra trong quá trình thử nghiệm, tôi đã chạy một URL thông qua API bằng cách sử dụng urllib đơn giản. phương pháp yêu cầu

Khi điều này đã hoàn thành, sau đó tôi đã chuyển đổi kết quả thành tệp json và tải xuống để xem kết quả

# Convert to json format
result_json = json.loads[result]

print[result_json]

with open['result.json', 'w'] as outfile:
  json.dump[result_json, outfile]

files.download['result.json']

[Xin lưu ý phương pháp này là để chuyển đổi và tải xuống các tệp JSON trong Google Colab. ]

Bước 4. Đọc tệp JSON

Tệp JSON thường trông giống như thế này, khi được mở trong trình soạn thảo mã của bạn lựa chọn

Khá khó hiểu, nhưng sử dụng trình xem JSON trực tuyến sẽ cho phép bạn chuyển đổi nó thành Chế độ xem dạng cây có thể đọc được

Tệp JSON hiển thị Dữ liệu trường, được lưu trữ trong loadingExperience và Dữ liệu phòng thí nghiệm mà bạn có thể tìm thấy trong lighthouseResult

Để trích xuất các số liệu mong muốn, chúng tôi có thể sử dụng định dạng của tệp JSON, vì chúng tôi có thể xem số liệu nào nằm trong mỗi phần

Ví dụ: Độ trễ đầu vào đầu tiên được tìm thấy trong loadingExperience

Trong khi First Contentful Paint được tìm thấy dưới lighthouseResult

Có rất nhiều số liệu khác được lưu trữ trong kiểm toán lighthouseResult, chẳng hạn như

• Chỉ số tốc độ
• Sơn nội dung đầu tiên
• Thay đổi bố cục tích lũy

Bước 5. Tải lên CSV và Lưu trữ dưới dạng Khung dữ liệu Pandas

Bước tiếp theo là tải lên tệp CSV gồm các URL mà chúng tôi muốn chạy qua API PSI. Bạn có thể tạo danh sách các URL của trang web của mình từ một công cụ thu thập dữ liệu, chẳng hạn như DeepCrawl

Vì chúng tôi đang sử dụng API, tôi khuyên bạn nên sử dụng một bộ URL mẫu nhỏ hơn tại đây, đặc biệt nếu bạn có một trang web lớn

Ví dụ: bạn có thể sử dụng các trang có mức lưu lượng truy cập cao nhất hoặc các trang tạo ra nhiều doanh thu nhất. Ngoài ra, nếu trang web của bạn có các mẫu thì sẽ rất tuyệt nếu bạn thử nghiệm các bộ mẫu này.

Bạn cũng có thể thêm một biến tiêu đề cột tại đây, chúng tôi sẽ sử dụng biến này khi lặp qua danh sách. Đảm bảo tên này khớp với tên tiêu đề cột trong tệp CSV mà bạn tải lên

uploaded = files.upload[]
#if your column header is something other than 'url' please define it here 
column_header='url'

[Xin lưu ý phương pháp này là để tải tệp CSV lên trong Google Colab. ]

Sau khi điều này đã được tải lên, chúng tôi sẽ sử dụng thư viện Pandas để biến CSV thành DataFrame mà chúng tôi có thể lặp lại theo các bước sau

# 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[]

Khung dữ liệu sẽ trông như thế này, bắt đầu với lập chỉ mục bằng không

Bước 6. Lưu kết quả vào đối tượng phản hồi

Bước tiếp theo liên quan đến việc sử dụng vòng lặp for để lặp lại Khung dữ liệu của các URL mà chúng tôi vừa tạo thông qua API PSI

Vòng lặp for cho phép chúng tôi lặp qua danh sách mà chúng tôi đã tải lên và thực hiện lệnh cho từng mục. Sau đó, chúng ta có thể lưu kết quả vào một đối tượng phản hồi và chuyển đổi nó thành tệp JSON

response_object = {}

# Iterate through the df
for x in range[0, len[df]]:

        # Define request parameter
        url = df.iloc[x][column_header]

        # Make request
        pagespeed_results = urllib.request.urlopen['//www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy=mobile'.format[url]].read[].decode['UTF-8']

        # Convert to json format
        pagespeed_results_json = json.loads[pagespeed_results]

        # Insert returned json response into response_object
        response_object[url] = pagespeed_results_json
        time.sleep[30]
        
        print[response_object[url]]

Chúng tôi sẽ sử dụng x trong phạm vi ở đây, đại diện cho các URL mà chúng tôi đang chạy qua vòng lặp, cũng như [0, len] cho phép vòng lặp chạy qua tất cả các URL trong DataFrame, bất kể có bao nhiêu URL được bao gồm.

Đối tượng phản hồi ngăn các URL ghi đè lên nhau khi bạn lặp lại và cho phép chúng tôi lưu dữ liệu để sử dụng trong tương lai

Đây cũng là nơi chúng tôi sẽ sử dụng biến tiêu đề cột để xác định tham số yêu cầu URL, trước khi chuyển đổi nó thành tệp JSON

Tôi cũng đã đặt thời gian ngủ ở đây là 30 giây, để giảm số lượng lệnh gọi API được thực hiện liên tục

Ngoài ra, bạn có thể thêm khóa API vào cuối lệnh URL nếu muốn thực hiện các yêu cầu nhanh hơn

Việc thụt lề cũng rất quan trọng ở đây bởi vì mỗi bước là một phần của vòng lặp for nên chúng phải được thụt vào trong lệnh

Bước 7. Tạo một khung dữ liệu để lưu trữ các phản hồi

Chúng tôi cũng cần tạo một DataFrame sẽ lưu trữ các số liệu mà chúng tôi muốn trích xuất từ ​​đối tượng phản hồi

DataFrame là một cấu trúc dữ liệu tương tự như một bảng, với các cột và hàng lưu trữ dữ liệu. Chúng ta chỉ cần thêm một cột cho từng chỉ số và đặt tên cho cột đó một cách thích hợp, như vậy

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

Với mục đích của tập lệnh này, tôi đã sử dụng các chỉ số Core Web Vital, cùng với các chỉ số tải và tương tác bổ sung được sử dụng trong phiên bản Lighthouse hiện tại

Mỗi chỉ số này có các trọng số khác nhau, sau đó được sử dụng trong điểm hiệu suất tổng thể

• Sơn có nội dung lớn nhất [LCP]
• Độ trễ đầu vào đầu tiên [FID]
• Thay đổi Bố cục Tích lũy [CLS]
• Sơn nội dung đầu tiên [FCP]
• Thời gian tương tác [TTI]
• Tổng thời gian chặn [TBT]

Bạn có thể tìm hiểu thêm về từng chỉ số, cùng với cách giải thích điểm số, trên các trang đích riêng lẻ được liên kết ở trên

Tôi cũng đã chọn đưa vào Chỉ số tốc độ và danh mục tổng thể sẽ cung cấp điểm số chậm, trung bình hoặc nhanh

Bước 8. Trích xuất các số liệu từ đối tượng phản hồi

Khi chúng tôi đã lưu đối tượng phản hồi, bây giờ chúng tôi có thể lọc đối tượng này và chỉ trích xuất các số liệu chúng tôi muốn

Ở đây, một lần nữa chúng ta sẽ sử dụng vòng lặp for để lặp qua tệp đối tượng phản hồi và thiết lập một chuỗi các chỉ mục danh sách để chỉ trả về các số liệu cụ thể

Đối với điều này, chúng tôi sẽ xác định tên cột từ DataFrame, cũng như danh mục cụ thể của đối tượng phản hồi mà chúng tôi sẽ lấy từng số liệu từ đó, cho từng 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']

Tôi đã thiết lập tập lệnh này để trích xuất các chỉ số chính mà tôi đã đề cập ở trên để bạn có thể sử dụng tập lệnh này ngay lập tức để thu thập dữ liệu này

Tuy nhiên, có thể rút ra một số chỉ số hữu ích khác có thể tìm thấy trong cả hai bài kiểm tra PSI, cũng như phân tích Ngọn hải đăng

Đây là nơi tệp JSON hữu ích để xem xét vị trí của từng chỉ số trong danh sách

Ví dụ: khi trích xuất số liệu từ kiểm tra Lighthouse, chẳng hạn như giá trị hiển thị của Thời gian tương tác, bạn sẽ sử dụng thông tin sau

Một lần nữa, điều quan trọng là phải đảm bảo mỗi trong số này nằm trong vòng lặp, nếu không, chúng sẽ không được đưa vào vòng lặp và chỉ một kết quả sẽ được tạo cho một URL

Khung dữ liệu cuối cùng của chúng tôi sẽ trông như thế này;

Bước 9. Biến DataFrame thành tệp CSV

Bước cuối cùng là tạo một tệp tóm tắt để thu thập tất cả các kết quả, vì vậy chúng tôi có thể biến tệp này thành định dạng mà chúng tôi có thể dễ dàng phân tích, chẳng hạn như tệp CSV

summary = df_pagespeed_results

df_pagespeed_results.head[]

#Download csv file 
summary.to_csv['pagespeed_results.csv']
files.download['pagespeed_results.csv']

[Xin lưu ý phương pháp này là để chuyển đổi và tải xuống các tệp CSV trong Google Colab. ]

Khám phá thêm dữ liệu

Tất cả các số liệu chúng tôi đã xuất hiện được lưu trữ dưới dạng chuỗi là kiểu dữ liệu Python cho văn bản và ký tự

Vì một số số liệu chúng tôi đang trích xuất thực sự là các giá trị số, bạn có thể muốn chuyển các chuỗi thành kiểu dữ liệu số, chẳng hạn như số nguyên và số dấu phẩy động

Số nguyên, còn được gọi là int, là kiểu dữ liệu cho số nguyên, chẳng hạn như 1 và 10

Số dấu chấm động, còn được gọi là float, là các số dấu thập phân, chẳng hạn như 1. 0 và 10. 1

Có hai bước chúng ta cần thực hiện để chuyển đổi chuỗi của mình thành số, bước đầu tiên là thay thế ký tự 's' [được sử dụng để biểu thị giây] bằng một khoảng trống

Chúng tôi làm điều này bằng cách sử dụng. str. thay thế phương pháp trên mỗi cột

# Define URL  
url = '//www.example.co.uk'

# API request url
result = urllib.request.urlopen['//www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}/&strategy=mobile'\
.format[url]].read[].decode['UTF-8']

print[result]

Sau đó chúng tôi sẽ sử dụng. astype[] để chuyển đổi các chuỗi thành số nguyên hoặc số dấu phẩy động

# Define URL  
url = '//www.example.co.uk'

# API request url
result = urllib.request.urlopen['//www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}/&strategy=mobile'\
.format[url]].read[].decode['UTF-8']

print[result]

Khi chúng tôi đã hoàn thành việc này, bạn có thể sử dụng một số phương pháp khác nhau để đánh giá thêm dữ liệu

Ví dụ: bạn có thể sử dụng các thư viện trực quan hóa dữ liệu như matplotlib hoặc seaborn để trực quan hóa các chỉ số, cũng như để đo lường cách chúng thay đổi theo thời gian và nhóm kết quả thành các nhóm chậm, trung bình và nhanh

Tôi sẽ không đề cập đến những điều này trong bài viết này, vì chúng tôi đã đề cập rất nhiều, nhưng vui lòng liên hệ nếu bạn muốn tìm hiểu thêm

Tóm lại là

Tập lệnh này cuối cùng đã giúp tôi đo các chỉ số hiệu suất và tốc độ trang chính cho một nhóm URL, cũng như trực quan hóa kết quả để xác định các trang cần cải thiện

Nó cũng cho phép bạn theo dõi kết quả theo thời gian và định lượng những cải tiến đã được thực hiện

Tôi cũng đã tạo một tập lệnh cụ thể để đo lường phần trăm và danh mục cho ba Chỉ số quan trọng về trang web. Bạn có thể tìm thấy điều đó ở đây

Tôi hy vọng điều này hữu ích cho bất kỳ ai muốn tự động hóa thử nghiệm hiệu suất của họ và khám phá thêm API PSI

Vui lòng lưu một bản sao của tệp Colab này và sử dụng nó để giúp đo lường và theo dõi tốc độ trang của bạn hoặc làm theo các bước để viết tệp của riêng bạn. Bạn có thể truy cập tất cả các đoạn mã tôi đã chia sẻ trong bài đăng này tại đây