كيفية تشغيل عمليات تدقيق Lighthouse الآلية على تغييرات WordPress

ستساعدك المقالة التالية: كيفية تشغيل عمليات تدقيق Lighthouse الآلية على تغييرات WordPress

ربما تكون على دراية بهذا السيناريو.

لقد بذلت الكثير من الجهد لتحسين سرعة الصفحة ونتائج PageSpeed ​​Insights لموقع عميلك بشكل كبير.

تعتبر نتائج الهاتف المحمول صعبة التحسين بشكل خاص!

يقوم عميلك بتثبيت تطبيق أو مكون إضافي جديد ويضيع كل عملك.

هل يمكننا أن ننزل إلى أقل من 1؟

وهذا وضع محبط، ولكن للأسف شائع.

ولحسن الحظ، هناك نسخة من منارة جوجل التي يمكنها إجراء عمليات التدقيق عند الطلب.

تسمى المنارة سي.

CI تعني التكامل المستمر، وهي ممارسة شائعة في تطوير البرمجيات حيث يتم دمج التغييرات من مطورين مختلفين في قاعدة تعليمات برمجية مركزية (مستودع).

أحد الجوانب المثيرة للاهتمام في CI هو أنه يمكنك إجراء عمليات فحص تلقائية عند دمج التغييرات. يعد هذا مكانًا رائعًا لأداء سرعة الصفحة وضمان الجودة الآلي لتحسين محركات البحث (ضمان الجودة).

في لقطة الشاشة أعلاه، قمت بتعريف أ ميزانية أداء المنارة وعندما قمت بدمج تغيير في قاعدة التعليمات البرمجية، تم تشغيل Lighthouse CI تلقائيًا واكتشف أن التغيير سيؤدي إلى انخفاض أداء السرعة.

قد يؤدي فشل ضمان الجودة هذا إلى منع نشر التغيير في الإنتاج.

رائع حقا. يمين؟

لقد قمت بإعداد موقع ويب باستخدام مكدس حديث، جامستاك، الذي يدعم CI خارج الصندوق.

ومع ذلك، فإن الاستفادة من ذلك تتطلب تغيير الأنظمة الأساسية بالكامل إذا كنت تستخدم WordPress أو ما شابه.

في هذه المقالة، سوف تتعلم كيفية تحقيق نفس الشيء، ولكن باستخدام موقع ويب تقليدي.

على وجه التحديد، سوف نستخدم WordPress القديم البسيط، وهو نظام إدارة المحتوى (CMS) الأكثر شيوعًا على هذا الكوكب.

هذه هي خطتنا الفنية:

• سنقوم بإنشاء مستودع GitHub لتتبع تغييرات WordPress.
• سنقوم بتثبيت إجراء Lighthouse CI للتحقق من عناوين URL التي تم تغييرها.
• سنقوم بإنشاء وظيفة Google Cloud التي تعمل على تحديثات WordPress وتقوم بما يلي:
  • يحصل على عناوين URL التي تم تغييرها مؤخرًا من خرائط مواقع XML.
  • يقوم بتحديث تكوين إجراء Lighthouse CI للتحقق من عناوين URL هذه.
  • يُلزم التكوين المحدث بمستودع GitHub.
• سنقوم بإنشاء وإضافة ميزانية أداء Lighthouse لمعرفة متى تؤثر التغييرات على الأداء.
• سنراجع الموارد لمعرفة المزيد.

إنشاء مستودع جيثب

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

في حالتنا، يوجد محتوى WordPress في قاعدة بيانات، لذلك سنستخدم المستودع فقط لتكوين Lighthouse وتتبع التغييرات.

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

GitHub هو الخيار الأكثر شيوعًا والذي سنستخدمه هنا.

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

يمكنك القيام بذلك باستخدام أداة سطر الأوامر.

تثبيته على جهاز الكمبيوتر الخاص بك إذا لم يكن لديك ذلك.

كما سنقوم بتحديث الريبو، نحن بحاجة للحصول على رمز المصادقة.

عند إنشاء رمز الوصول، حدد النطاقات و.

إجراءات جيثب

إجراءات جيثب يسمح بأتمتة سير العمل باستخدام ملفات تكوين بسيطة للغاية.

أحد الإجراءات المتاحة هو عمل المنارة CI التي سوف نستخدمها هنا.

لتفعيل الإجراء، نحتاج ببساطة إلى:

• قم بإنشاء مجلد (.github/workflows) في جذر المستودع.
• أضف يامل ملف الضبط.

دعونا نراجع الخطوات الفنية للقيام بذلك.

يمكننا تنفيذ الخطوات يدويًا باستخدام تطبيق GitHub لسطح المكتب أو سطر الأوامر.

سنقوم بتنفيذها من Python بدلاً من ذلك حتى نتمكن من أتمتة العملية.

استنساخ مستودع جيثب

قبل أن نتمكن من إجراء التغييرات، نحتاج إلى استنساخ/نسخ المستودع محليًا.

لنقم بتثبيت مكتبة Python وسنحتاج إلى إصدار أوامر Git.

نقطة تثبيت gitpython

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

لقد قمت بإنشاء ريبو خاص يسمى .

full_path = “/content/wordpress-updates” username = “hamletbatista” كلمة المرور = “” Remote=f”https://{username}:{password}@github.com/hamletbatista/wordpress-updates .شخص سخيف”

يعد الاستنساخ من Python أمرًا بسيطًا تقريبًا كما هو الحال من سطر الأوامر.

من بوابة استيراد Repo Repo.clone_from(remote, full_path)

تحديث المستودع المستنسخ

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

فلنقم بإنشاء دليل لسير عمل Lighthouse CI الخاص بنا.

%cd wordpress-updates/ !mkdir -p .github/workflows

بعد ذلك، يمكننا إنشاء التكوين YAML.

في Google Colab أو Jupyter، يمكنني استخدام

%%writefile .github/workflows/main.yml الاسم: Lighthouse CI في: مهام الدفع: Lighthouse: التشغيل: أحدث خطوات ubuntu: – الاستخدامات:actions/checkout@v2 – الاسم: تدقيق عناوين URL باستخدام Lighthouse

الاستخدامات: treosh/lighthouse-ci-action@v3

مع: عناوين المواقع: |

https://www.ranksense.com/

https://www.ranksense.com/blog

uploadArtifacts: صحيح # حفظ النتائج كعمل فني مؤقتPublicStorage: صحيح # تحميل تقرير المنارة إلى التخزين المؤقت

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

الأهم هو وجود قسم لتحديد عناوين URL المراد التحقق منها عن طريق فصلها بأسطر جديدة.

بعد إنشاء ملف التكوين والدليل هذا، يمكننا إرسال تغييراتنا مرة أخرى إلى مستودع GitHub.

أولاً، دعونا نضيف الملفات التي قمنا بتغييرها إلى سجل الإصدارات.

repo.git.add([‘.github/workflows/main.yml’]) # تقديم رسالة التزام repo.index.commit(‘add lighthouse CI action.’)

ستشير رسالة الالتزام الخاصة بنا إلى الغرض من التغيير وستظهر في سجل المستودع.

دفع تغييراتنا إلى مستودع GitHub

وأخيرًا، نحن على استعداد لدفع تغييراتنا إلى المستودع.

الأصل = repo.remote(name = “origin”) Origin.push ()

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

يمكننا تكوين مستخدمنا بهذه الأوامر.

باستخدام repo.config_writer() كـ git_config: git_config.set_value(‘user’, ’email’, ‘[email protected]’) git_config.set_value(‘user’, ‘name’, ‘Your Name’)

في المرة التالية التي تقوم فيها بتغيير آخر، يجب أن ترى اسمك.

بعد الانتهاء من جميع هذه الخطوات، من المفترض أن تكون قادرًا على النقر فوق علامة التبويب “الإجراءات” في مستودعك والعثور على عمليات التحقق التلقائية من عناوين URL التي أدرجتها في ملف YAML.

ضمن جزء التحميل، يمكنك العثور على روابط التقارير الخاصة بكل عنوان URL.

حقا لطيف!

تحديث ملف تكوين YAML تلقائيًا

لا يعد الترميز الثابت لقائمة صغيرة من عناوين URL التي يجب التحقق منها أمرًا مرنًا بشكل خاص.

دعونا نتعلم كيفية تحديث ملف التكوين من بايثون.

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

ما هو المكان الأفضل من خرائط مواقع XML؟

لحسن الحظ، قمت بتغطية مكتبة رائعة من الياس دباس هذا يجعل هذا نسيمًا.

تثبيت أدوات الإعلانات بالنقطة sitemap_url=”https://www.ranksense.com/sitemap_index.xml” df = adv.sitemap_to_df(sitemap_url)

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

على سبيل المثال، أريد هنا تحديث الصفحات في شهر أكتوبر.

df[df[“lastmod”] > ‘2020-10-01’]

يمكنك إنشاء قائمة بعناوين URL للتحقق من استخدام هذا أو أي معيار منطقي لحالة الاستخدام الخاصة بك.

لنفترض أن موقعك يحتوي على ملايين الصفحات، فإن التحقق من كل عنوان URL سيكون أمرًا غير عملي.

بافتراض أنك قمت بتصنيف خرائط مواقع XML، فإن الطريقة الفعالة هي أخذ عينة واحدة أو أكثر من عناوين URL من كل خريطة موقع.

تستخدم معظم الصفحات من نفس النوع بشكل عام نفس قالب HTML ولن تتغير درجات سرعة الصفحة كثيرًا لكل عنوان URL من نفس النوع.

قراءة ملف YAML

يمكننا استخدام مكتبة باي يامل لقراءة ملف التكوين الذي نسخناه من الريبو إلى بنية بيانات بايثون.

تثبيت النقطة PyYAML استيراد yaml مع open(“.github/workflows/main.yml”, “r”) كـ f: main_workflow = yaml.load(f)

هذا ما يبدو عند تحميله في مجال بايثون.

يعد تحديث قائمة عناوين URL أمرًا بسيطًا نسبيًا من هنا.

# هذا هو “المسار” لعناوين URL main_workflow[“jobs”][“lighthouse”][“steps”][1][“with”][“urls”]

فيما يلي خطوات تحديث قائمة عناوين URL.

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

يمكننا تنفيذ الخطوة 2 بهذا الكود.

“\n”.الانضمام(تم التغيير)

هنا هو التسلسل النهائي.

old_urls=main_workflow[“jobs”][“lighthouse”][“steps”][1][“with”][“urls”]

main_workflow[“jobs”][“lighthouse”][“steps”][1][“with”][“urls”] = old_urls + “\n”.الانضمام(تم التغيير)

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

الكتابة مرة أخرى إلى ملف YAML

الآن بعد أن أجرينا تغييراتنا، يمكننا حفظها مرة أخرى في ملف التكوين.

مع open(“.github/workflows/main.yml”, “w”) كـ f: f.write(yaml.dump(main_workflow, default_flow_style=خطأ))

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

إذا قمت بتشغيل الأوامر الموجودة في قسم GitHub مرة أخرى لإضافة الملف والالتزام بالتغيير ودفعه إلى الريبو، فيجب أن تشاهد Lighthouse CI آخر يعمل بعدد محدث من عناوين URL.

هذه المرة، لم يتم ترميز عناوين URL بشكل ثابت ولكن تم إنشاؤها ديناميكيًا.

حلو!

إنشاء ميزانية أداء المنارة

إحدى أقوى ميزات Lighthouse CI هي القدرة على التحقق من التقارير مقابل الميزانيات وعمليات التشغيل الفاشلة عند تجاوز الميزانيات.

هذه في الواقع أبسط خطوة في هذا الإعداد بأكمله.

يمكنك العثور على جميع خيارات التكوين هنا.

يمكننا كتابة ميزانية نموذجية للاختبار بناءً على المثال الموجود في الوثائق. ثم اضبط القيم وفقًا لتقرير الفشل/النجاح.

[

{

“path”: “/*”,

“resourceSizes”: [

{

“resourceType”: “document”,

“budget”: 18

},

{

“resourceType”: “total”,

“budget”: 200

}

]

} ]

يمكنك حفظ الملف في جذر المستودع وتحديث تكوين YAML لتضمينه.

main_workflow[“jobs”][“lighthouse”][“steps”][1][“with”][“budgetPath”] = “./budget.josn”

عند إجراء التغييرات على المستودع، تأكد من إضافة الملف أيضًا.

هذا كل شيء.

يمكننا تشغيل تقارير Lighthouse الآلية على أي عناوين URL نريدها.

ولكن، كيف يمكننا تفعيل كل هذه الخطوات عندما نقوم بتحديث صفحات أو منشورات WordPress؟

خدمات بينغ

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

باختصار، الكود سوف:

• قم بتنزيل خرائط مواقع XML وابحث عن آخر الصفحات المحدثة.
• قم بتحديث/إنشاء ملف سير عمل يتضمن قائمة بعناوين URL المطلوب التحقق منها.
• قم بتنفيذ التغيير في مستودع GitHub.

ومع ذلك، نريد فقط استدعاء الكود الخاص بنا عندما تكون هناك تغييرات جديدة في WordPress.

فكيف لنا أن نفعل ذلك؟

لحسن الحظ، يحتوي WordPress على آلية بينغ يمكننا استخدامها لهذا.

نحتاج فقط إلى إضافة عنوان URL لوظيفة السحابة الخاصة بنا إلى قائمة خدمات Ping.

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

إذا أرسل WordPress قائمة عناوين URL المحدثة، فيمكننا تخطي خطوة تنزيل خريطة موقع XML.

نشر وظيفة السحابة

فيما يلي خطوات إنشاء وظيفة السحابة. تاكد من تمكين الخدمة أولاً.

أولاً، نحتاج إلى المصادقة باستخدام Google Compute Engine.

!gcloud auth تسجيل الدخول –no-launch-browser !gcloud config set project اسم المشروع

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

لقد قمت أيضًا بإنشاء جوهر باستخدام ملف المتطلبات.txt تحتاج إلى تضمينها عند نشر وظيفة السحابة.

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

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

!تنشر وظائف gcloud wordpress_ping_post –runtime python37 –trigger-http –allow-unauthenticated –set-env-vars username=<اسم مستخدم GitHub>كلمة المرور=<انسخ رمز GitHub الخاص بك>

يجب أن تشاهد إخراجًا مشابهًا لما هو موضح أدناه.

لقد قمت بتسليط الضوء على عنوان URL الذي تحتاجه لإضافة قائمة خدمات WordPress Ping الخاصة بك.

موارد لمعرفة المزيد والمشاريع المجتمعية

لم أقم بتضمين جزء ميزانية الأداء في وظيفة السحابة الخاصة بي. يرجى النظر في القيام بذلك كواجب منزلي.

كما أنني أشجعك على إنشاء خادم Lighthouse CI وتحديث الملف لإرسال التقارير هناك.

إذا كنت تريد واجهة مألوفة أكثر، فكر في ذلك هذا المشروع من الفريق المذهل في Local SEO Guide. يستخدم Data Studio كواجهة لإعداد التقارير.

أحدث مشاريع بايثون SEO

يستمر زخم مجتمع Python SEO في النمو بقوة! 🐍🔥

كالعادة، طلبت من متابعي أن يشاركوني أحدث مشاريعهم.

تشارلي وارجنير تم إقصاؤه من الجزء، ليس فقط بمشروع واحد، بل بثلاثة مشاريع مثيرة للإعجاب وواحد آخر قيد العمل.

لقد حصلت على 4 بايثون /@streamlit التطبيقات على الشواية! 🔥🐍🔥

#1 StreamEA (محلل الكيان، سيشارك هذا الأسبوع)
#2 StreamSuggest (Google Suggest API + خرائط الشجرة)
#3 StreamTrends (تحليل GT Trends بالجملة)

الرابع مستوحى من عمود الأسئلة الشائعة الخاص بك @sejournal 🙂https://t.co/Sp1hfe0U8s

– تشارلي وارجنير (@DataChaz) 6 أكتوبر 2020

جريج برنهاردت تم إصدار نصوص برمجية للتو لأتمتة تقارير Lighthouse. تأكد من مراجعة موقعه لأنه ينشر نصوص بايثون العملية باستمرار.

كيف #SEO يمكن استخدام #بايثون لأتمتة #منارة التقاريرhttps://t.co/eHchF277Un @DataChaz @هاملت باتيستا @jroakes

– جريج بيرنهاردت 🐍🌊 (@ GregBernhardt4) 7 أكتوبر 2020

نيكولا ستوت تعمل على أتمتة Wave API. ليس Google Wave، رغم ذلك!

هل يعتبر استخدام لغة بايثون لأتمتة Wave API على نطاق واسع أمرًا رائعًا؟ نسخة @جيسيكا_جيمس01

– نيكولا ستوت (@NicholaStott) 6 أكتوبر 2020

ديفيد سوتيمانو طرحت فكرة إجراء هاكاثون في عام 2021 وهناك بالفعل الكثير من الاهتمام به!

هل يمكننا ترتيب هاكاثون شخصيًا في عام 2021 من فضلك؟ نسخة @jroakes @fighto @ تايلر ريردون @hulyacobans @rvtheverett (المزيد المزيد أيضا). مثل المؤتمر، باستثناء أننا جميعًا نجتمع ونناقش الأفكار وننقسم إلى فرق ونقوم بالبرمجة والبيتزا على مدار 24 ساعة متواصلة. الراحة، الحاضر في اليوم التالي؟

– ديف سوتيمانو (@ dsottimano) 7 أكتوبر 2020

المزيد من الموارد: