كيفية استخدام Python لمراقبة وقياس أداء الموقع

أعلنت Google خلال الشهر الماضي عن سلسلة من التحسينات حول كيفية قياس تجربة المستخدم من خلال مقاييس السرعة والأداء الرئيسية.

من قبيل الصدفة ، كنت أعمل على إنشاء نص برمجي Python يستخدم واجهة برمجة تطبيقات Google PageSpeed ​​Insights (PSI) لجمع المقاييس لصفحات متعددة في وقت واحد ، دون الحاجة إلى تشغيل الاختبار لكل عنوان URL فردي.

بعد إعلانات Google ، اعتقدت الآن أن الوقت سيكون مناسبًا تمامًا لمشاركتها ، بالإضافة إلى شرح كيفية إنشاء نص Python النصي للمبتدئين.

أفضل شيء في النص البرمجي هو أنه بمجرد أن يكون لديك الأساسيات في مكانها ، ستتمكن من استخراج عدد من المقاييس المختلفة التي يمكن العثور عليها في اختبار سرعة الصفحة بالإضافة إلى تحليل المنارة.

مقدمة لمقاييس الويب الحيوية

في أوائل شهر مايو ، قدمت Google Core Web Vitals ، وهي مجموعة فرعية من مقاييس Web Vitals الرئيسية.

تُستخدم هذه المقاييس لتقديم إرشادات حول جودة تجربة المستخدم على موقع الويب.

وصفتها Google بأنها وسيلة “للمساعدة في تحديد تجربة موقعك وتحديد فرص التحسين” ، مما يسلط الضوء بشكل أكبر على تحولهم للتركيز على تجربة المستخدم.

تعد عناصر الويب الأساسية هي المقاييس التي تتمحور حول المستخدم في العالم الحقيقي والتي تقيس الجوانب الرئيسية لتجربة المستخدم ؛ شحن الوقت والتفاعل والاستقرار.

لن أخوض في الكثير من التفاصيل من خلال شرح هذا في هذا المنشور ، يمكنك العثور على مزيد من المعلومات هنا ، ولكن هذه المقاييس الجديدة هي:

• أكبر رسم محتوى.
• تأخير الدخول الأول.
• تغيير التصميم التراكمي.

بالإضافة إلى ذلك ، أعلنت Google الأسبوع الماضي أنها ستقدم رمزًا مميزًا لترتيب البحث الجديد الذي سيجمع بين هذه المقاييس إلى جانب الرموز المميزة لتجربة الصفحة الحالية ، مثل توافق الجهاز المحمول وأمان HTTPS ، لضمان استمرارها في خدمة مواقع الويب جودة عالية للمستخدمين

مراقبة قياس الأداء

من المتوقع طرح هذا التحديث في عام 2021 ، وقد أكدت Google أنه لا يلزم اتخاذ إجراءات فورية.

ومع ذلك ، لمساعدتنا على الاستعداد لهذه التغييرات ، قاموا بتحديث الأدوات المستخدمة لقياس سرعة الصفحة ، بما في ذلك PSI ، و Google Lighthouse ، و Google Search Console Speed ​​Report.

من أين تدخل واجهة برمجة تطبيقات Pagespeed Insights؟

تعد أداة PageSpeed ​​Insights من Google أداة مفيدة لعرض ملخص لأداء صفحة الويب ، وتستخدم بيانات الحقل والمختبر على حد سواء لتحقيق نتائج.

إنها طريقة رائعة للحصول على نظرة عامة على عدد قليل من عناوين URL ، حيث يتم استخدامها صفحة تلو الأخرى.

ومع ذلك ، إذا كنت تعمل على موقع كبير وتريد الحصول على معلومات واسعة النطاق ، فقد تكون واجهة برمجة التطبيقات مفيدة لتحليل عدة صفحات في وقت واحد ، دون الحاجة إلى ربط عناوين URL بشكل فردي.

نص بايثون لقياس الأداء

لقد قمت بإنشاء نص Python النصي التالي لقياس مقاييس الأداء الرئيسية على نطاق واسع ، لتوفير الوقت المستغرق في اختبار كل عنوان URL يدويًا.

يستخدم هذا النص البرمجي Python لإرسال الطلبات إلى Google PSI API لجمع واستخراج المقاييس المعروضة في كل من PSI و Lighthouse.

قررت كتابة هذا النص البرمجي في Google Colab لأنها طريقة رائعة لبدء كتابة Python وتسمح بالمشاركة السهلة حتى يتم تشغيل هذه المشاركة عبر الإعدادات باستخدام Google Colab.

ومع ذلك ، يمكن تشغيله محليًا ، مع بعض الإعدادات لتحميل البيانات وتنزيلها.

من المهم ملاحظة أن بعض الخطوات قد تستغرق بعض الوقت حتى تكتمل ، خاصة عند تشغيل كل عنوان URL من خلال واجهة برمجة التطبيقات ، حتى لا تفرط في تحميله بالطلبات.

لذلك ، يمكنك تشغيل البرنامج النصي في الخلفية والعودة إليه عند اكتمال الخطوات.

دعنا نرى الخطوات اللازمة لإعداد هذا البرنامج النصي وتشغيله.

الخطوة 1: قم بتثبيت الحزم المطلوبة

قبل أن نبدأ في كتابة أي كود ، نحتاج إلى تثبيت بعض حزم Python الضرورية قبل أن نتمكن من استخدام البرنامج النصي. هذه سهلة التركيب باستخدام وظيفة الاستيراد.

الحزم التي سنحتاجها هي:

• urllib: للعمل مع عناوين URL وفتحها وقراءتها وتحليلها.
• جسون: يسمح لك بتحويل ملف JSON إلى Python أو ملف Python إلى JSON.
• الطلبات: مكتبة HTTP لإرسال جميع أنواع طلبات HTTP.
• الباندا: تستخدم بشكل رئيسي لتحليل البيانات ومعالجتها ، ونحن نستخدمها لإنشاء إطارات البيانات.
• ساعة: وحدة للعمل مع الأوقات ، نستخدمها لتوفير فاصل زمني بين الطلبات.
• السجلات: من Google Colab ، سيسمح لك هذا بتحميل الملفات وتنزيلها.
• io: الواجهة الافتراضية المستخدمة للوصول إلى الملفات.

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

الخطوة 2: تكوين طلب API

الخطوة التالية هي تكوين طلب API. يمكن العثور على التعليمات الكاملة هنا ، ولكن بشكل أساسي ، سيبدو الأمر كما يلي:

urllib.request.urlopen وإضافته إلى متغير يسمى (لاحظ أن هذه الطريقة لتحويل وتنزيل ملفات JSON في Google Colab).

الخطوة 4: قراءة ملف JSON

سيبدو ملف JSON بشكل عام على هذا النحو ، عند فتحه في محرر التعليمات البرمجية الذي تختاره.

من الصعب جدًا فهمه ، ولكن استخدام عارض JSON عبر الإنترنت سيسمح لك بتحويله إلى عرض شجرة قابل للقراءة.

يعرض ملف JSON البيانات الميدانية ، التي يتم تخزينها في loadingExperience ، وبيانات المختبر التي يمكنك العثور عليها في lighthouseResult.

لاستخراج المقاييس المطلوبة ، يمكننا استخدام تنسيق ملف JSON ، حيث يمكننا رؤية المقياس تحت كل قسم.

على سبيل المثال ، تم العثور على تأخير الإدخال الأول في loadingExperience.

بينما يكون First Contentful Paint في LighthouseResult.

هناك العديد من المقاييس الأخرى المخزنة تحت مراجعات المنارة ، مثل:

• مؤشر السرعة.
• أول لوحة سعيدة.
• تغيير التصميم التراكمي.

الخطوة 5: تحميل ملف CSV وتخزينه كإطار بيانات Pandas

الخطوة التالية هي تحميل ملف CSV URL الذي نريد تشغيله من خلال PSI API. يمكنك إنشاء قائمة بعناوين URL لموقعك من أداة الزحف ، مثل DeepCrawl.

نظرًا لأننا نستخدم واجهة برمجة التطبيقات ، فإنني أوصي باستخدام نموذج عنوان URL أصغر هنا ، خاصة إذا كان لديك موقع كبير.

على سبيل المثال ، يمكنك استخدام صفحات بها أعلى مستويات من الزيارات ، أو صفحات تحقق أكبر قدر من الإيرادات. بدلاً من ذلك ، إذا كان موقعك يحتوي على قوالب ، فسيكون مثاليًا لاختبار مجموعات منها.

يمكنك أيضًا إضافة (لاحظ أن هذه الطريقة لتحميل ملفات CSV إلى Google Colab).

بمجرد تحميل هذا ، سنستخدم مكتبة Pandas لتحويل ملف CSV إلى DataFrame ، والذي يمكننا اتباعه في الخطوات التالية.

# 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()

سيبدو DataFrame على هذا النحو ، بدءًا من الفهرسة الصفرية.

الخطوة 6: حفظ النتائج في كائن استجابة

تتضمن الخطوة التالية استخدام الفأس في النطاق هنا ، والتي ستمثل عناوين URL التي نقوم بتشغيلها خلال الحلقة ، بالإضافة إلى أن كائن الاستجابة يمنع عناوين URL من تجاوز بعضها البعض أثناء تقدمك ويسمح لنا بحفظ البيانات لـ استخدامه في المستقبل.

هذا هو المكان الذي سنستخدم فيه متغير رأس العمود لتحديد معلمة طلب عنوان URL ، قبل تحويله إلى ملف JSON.

قمت أيضًا بتعيين وقت النوم هنا على 30 ثانية ، لتقليل عدد مكالمات API التي يتم إجراؤها على التوالي.

بدلاً من ذلك ، يمكنك إضافة مفتاح API إلى نهاية أمر URL إذا كنت تريد تقديم الطلبات بشكل أسرع.

المسافة البادئة مهمة أيضًا هنا ، نظرًا لأن كل خطوة هي جزء من حلقة for ، يجب أن تكون مسافة بادئة داخل الأمر.

الخطوة 7: إنشاء إطار بيانات لتخزين الردود

نحتاج أيضًا إلى إنشاء DataFrame يخزن المقاييس التي نريد استخراجها من كائن الاستجابة.

DataFrame هو هيكل بيانات يشبه الجدول ، مع أعمدة وصفوف تخزن البيانات. نحتاج ببساطة إلى إضافة عمود لكل مقياس وتسميته بشكل مناسب ، كما يلي:

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

لغرض هذا النص البرمجي ، استخدمت مقاييس Core Web Vital ، إلى جانب مقاييس التحميل والتفاعل الإضافية المستخدمة في الإصدار الحالي من Lighthouse.

هذه المقاييس لها أوزان مختلفة يتم استخدامها بعد ذلك في النتيجة الإجمالية للأداء:

يمكنك معرفة المزيد حول كل مقياس ، بالإضافة إلى كيفية تفسير النتائج ، على الصفحات المقصودة الفردية المرتبطة أعلاه.

لقد اخترت أيضًا تضمين مؤشر السرعة والفئة الإجمالية التي ستوفر درجة بطيئة أو متوسطة أو سريعة.

الخطوة 8: استخلاص المقاييس من كائن الاستجابة

بمجرد حفظ كائن الاستجابة ، يمكننا الآن تصفية هذا واستخراج المقاييس التي نريدها فقط.

هنا ، مرة أخرى ، سنستخدم حلقة for للتكرار عبر ملف كائن الاستجابة وتعيين تسلسل لفهارس القائمة لإرجاع المقاييس المحددة فقط.

لهذا ، سنحدد اسم عمود DataFrame ، بالإضافة إلى الفئة المحددة لكائن الاستجابة التي سنستخرج منها كل مقياس لكل عنوان 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']

لقد قمت بتكوين هذا البرنامج النصي لاستخراج المقاييس الرئيسية التي ذكرتها أعلاه حتى تتمكن من استخدامها على الفور لجمع هذه البيانات.

ومع ذلك ، من الممكن استخراج عدد من المقاييس المفيدة الأخرى التي يمكن العثور عليها في كل من اختبارات PSI وتحليل المنارة.

هذا هو المكان الذي يكون فيه ملف JSON مفيدًا لمراجعة مكان كل مقياس في القائمة.

على سبيل المثال ، عند استخراج المقاييس من تدقيقات Lighthouse ، مثل قيمة عرض Time to Interactive ، يمكنك استخدام ما يلي:

df_pagespeed_results.loc[x, 'Time_to_Interactive'] =
response_object[url]['lighthouseResult']['audits']['interactive']['displayValue']

مرة أخرى ، من المهم التأكد من أن كل من هذه تقع ضمن الحلقة ، وإلا فلن يتم تضمينها في التكرار وسيتم إنشاء نتيجة واحدة فقط لعنوان URL.

سيبدو إطار DataFrame النهائي لدينا على هذا النحو ؛

الخطوة 9: تحويل DataFrame إلى ملف CSV

الخطوة الأخيرة هي إنشاء ملف ملخص لجمع كل النتائج ، حتى نتمكن من تحويله إلى تنسيق يمكننا تحليله بسهولة ، على سبيل المثال ملف CSV.

summary = df_pagespeed_results

df_pagespeed_results.head()

#Download csv file 
summary.to_csv('pagespeed_results.csv')
files.download('pagespeed_results.csv')

طريقة .str.place في كل عمود.

#Replace the 's' with a blank space so we can turn into numbers
df_pagespeed_results['Largest_Contentful_Paint'] = df_pagespeed_results.Largest_Contentful_Paint.str.replace('s', '')
df_pagespeed_results['First_Contentful_Paint'] = df_pagespeed_results.First_Contentful_Paint.str.replace('s', '')
df_pagespeed_results['Time_to_Interactive'] = df_pagespeed_results.Time_to_Interactive.str.replace('s', '')
df_pagespeed_results['Total_Blocking_Time'] = df_pagespeed_results.Total_Blocking_Time.str.replace('ms', '')
df_pagespeed_results['Speed_Index'] = df_pagespeed_results.Speed_Index.str.replace('s', '')

ثم سنستخدم حقوق الصورة

جميع لقطات الشاشة التي التقطها المؤلف ، يونيو 2020