مساء الخير
اليوم بكلمكم عن مكتبة عجيبة استخدمتها البارحة وعجبتني كثيرا
المشكلة التي كنت اواجهها هي انو لدي موقع ابغى احسن من performance تبعه واجعله اسرع اذا استخدمت lighthouse الموجودة في dev tools في متصفح الكروم اللي تعطيك تقرير مفصل بعد فحص موقع من ناحية السرعة..👇
اليوم بكلمكم عن مكتبة عجيبة استخدمتها البارحة وعجبتني كثيرا
المشكلة التي كنت اواجهها هي انو لدي موقع ابغى احسن من performance تبعه واجعله اسرع اذا استخدمت lighthouse الموجودة في dev tools في متصفح الكروم اللي تعطيك تقرير مفصل بعد فحص موقع من ناحية السرعة..👇
والاداء و SEO ..الخ
ويعطيك مقترحات لتحسين النتايج وهي شبيهة لحد ما ب PageSpeed Insights تبع جوجل بس الفرق بينهما انو lighthouse تاتي مدمجة مع متصفح في dev tools في كروم
المهم بعد ماسويت فحص للموقع جاتني نتيجة ان الموقع بطيء ويحتاج تحسين وحذف الاكواد الغير مستخدمة..👇
ويعطيك مقترحات لتحسين النتايج وهي شبيهة لحد ما ب PageSpeed Insights تبع جوجل بس الفرق بينهما انو lighthouse تاتي مدمجة مع متصفح في dev tools في كروم
المهم بعد ماسويت فحص للموقع جاتني نتيجة ان الموقع بطيء ويحتاج تحسين وحذف الاكواد الغير مستخدمة..👇
في هذه الحالة استخدمت خاصية converge التي تحدد لك اكود css & js الغير مستعملة في مختلف ملفات
الان فكرت وش اسوي عشان اخلي فقط اكواد مستخدمة واحذف اكواد الغير مستخدمة
بعد بعض البحث تعرفت على المكتبة الخارقة puppeteer المطورة من جوجل والمفتوح المصدر
اذا ماهي puppeteer ؟..👇
الان فكرت وش اسوي عشان اخلي فقط اكواد مستخدمة واحذف اكواد الغير مستخدمة
بعد بعض البحث تعرفت على المكتبة الخارقة puppeteer المطورة من جوجل والمفتوح المصدر
اذا ماهي puppeteer ؟..👇
ببساطة هي عبارة عن مكتبة توفر لك api للتعامل والاتصال مع كروم عن طريق devtools protocol وبطبيعة الحال ويوفر لك تعامل مع اقوى الادوات وهي dev tools.
بطبيعة الحال بما ان كروم كما تعلمون مبني على chromium فهذه مكتبة تتعامل معه وتسمح لك بفعل اي شيء تفعله في متصفح الكروم (يعني..👇
بطبيعة الحال بما ان كروم كما تعلمون مبني على chromium فهذه مكتبة تتعامل معه وتسمح لك بفعل اي شيء تفعله في متصفح الكروم (يعني..👇
فقط كروم بلا واجهة وهذا مايسمى headless chrome كروم بلا رأس)
تخيلوا...😮..المزايا اللي تحصل عليها من استخدام كروم لكن في كود برمجي (تستخدم nodejs ويتم تثبيت مكتبة بمدير حزم npm)
راح تحصل على تحكم اكبر ويمكنك تنفيذ افكار كثيرة كمثال : بناء web scrapping, crawler..👇
تخيلوا...😮..المزايا اللي تحصل عليها من استخدام كروم لكن في كود برمجي (تستخدم nodejs ويتم تثبيت مكتبة بمدير حزم npm)
راح تحصل على تحكم اكبر ويمكنك تنفيذ افكار كثيرة كمثال : بناء web scrapping, crawler..👇
او بناء سكريبتات تقوم بوظائف معينة دون اي تدخل منك هي تدخل للكروم وتسجل دخول لموقع وتفعل مهمة معينة وغيرها من خصائص .
طيب كل ذا كان نبذة سريعة ..
سبب استخدامي puppeteer هو اني احاول وصول الى خاصية coverage اللي تحدثت عنها سابقا لكي احذف الاكواد الغير مستخدمة واسرع الموقع..👇
طيب كل ذا كان نبذة سريعة ..
سبب استخدامي puppeteer هو اني احاول وصول الى خاصية coverage اللي تحدثت عنها سابقا لكي احذف الاكواد الغير مستخدمة واسرع الموقع..👇
فبالخصائص القوية التي يوفرها puppeteer استطعت برمجة سكريبت بسيط ب nodejs وظيفته كالتالي:
- يدخل لموقع معين بمتصفح chromium
- يشغل اداة coverage ويطلع فقط اكواد مستخدمة
- النتيجة يبحث عنها في ملفات css الموقع ويستخرجها
- يحفظ المخرجات في ملفات جديدة بنفس الاسم
و..BINGOOO.. 👇
- يدخل لموقع معين بمتصفح chromium
- يشغل اداة coverage ويطلع فقط اكواد مستخدمة
- النتيجة يبحث عنها في ملفات css الموقع ويستخرجها
- يحفظ المخرجات في ملفات جديدة بنفس الاسم
و..BINGOOO.. 👇
حصلنا على ملفات css تحتوي فقط على الاكواد مستخدمة ننسخها ونستبدلها بالقديمة ومبروك صار الموقع صاروخ..🚀
مكتبة puppeteer توفر مزايا عظيمة ومذهلة وتقدر تسوي اشياء تختصر عليك الكثير من الجهد والوقت..
فقط فكرة انه توجد مكتبة توفر api للوصول لادوات chrome dev tools كافية لإبهارك.😱
مكتبة puppeteer توفر مزايا عظيمة ومذهلة وتقدر تسوي اشياء تختصر عليك الكثير من الجهد والوقت..
فقط فكرة انه توجد مكتبة توفر api للوصول لادوات chrome dev tools كافية لإبهارك.😱
جاري تحميل الاقتراحات...