شرح بالصور جعل موقعك مطابق للمواصفات الخاصة للسرعه في PageSpeed Insights

اليوم بأذن الله هنشرح ليكم طريقة جعل موقعك مطابق لمواصفات السرعه في جوجل وطريقة ضغط الصور وتحسين الكاش .

التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي

ترتيب أولوية المحتوى المرئي

تحسين التخزين المؤقت للمتصفح

تقليل وقت استجابة الخادم

تحسين الصور

تجنب عمليات إعادة توجيه الصفحة المقصودة

تصغير CSS

تصغير HTML

تصغير جافا سكريبت

تمكين الضغط

اولاً ما هي خدمة جوجل سبيد PageSpeed Insights

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

وتتراوح نتيجة PageSpeed بين 0 و100 نقطة. وتعد النتيجة العالية أفضل، بينما تشير النتيجة 85 أو أعلى إلى أن أداء الصفحة جيد. الرجاء ملاحظة أنه يتم إدخال تحسينات بشكل مستمر على PageSpeed Insights ومن ثم ستتغير النتيجة عند إضافة قواعد جديدة أو تحسين التحليل.

يقيس PageSpeed Insights كيفية تحسين أداء الصفحة من حيث:

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

ولكن نظرًا لأن أداء اتصال الشبكة يختلف اختلافًا كبيرًا، لن ينظر PageSpeed Insights إلا إلى أوجه من أداء الصفحة مستقلة عن الشبكة: الخادم والتهيئة وبنية HTML على الصفحة واستخدامها لموارد خارجية مثل الصور وجافا سكريبت وCSS. ويجب أن يحسِّن استخدام الاقتراحات من الأداء النسبي للصفحة. إلا أن الأداء المطلق للصفحة سيظل معتمدًا على اتصال الشبكة لدى المستخدم.

يتم تقييم كل اقتراح من خلال مؤشر أولوية للإشارة إلى مدى أهميته

والآن مع طريقة | شرح بالصور جعل موقعك مطابق للمواصفات الخاصة للسرعه في PageSpeed Insights

طريقة جعل موقعك مطابق للمواصفات الخاصة للسرعه في PageSpeed Insights

طريقة جعل ,موقعك مطابق, للمواصفات ,الخاصة للسرعه ,PageSpeed ,Insights

اولا : قم بالدخول للموقع لفحص موقعك PageSpeed Insights

قم باضافة موقعك ثم الضغط علي تحليل واحيرا اضغط علي | تنزيل موارد الصور وJavaScript وCSS المحسنة لهذه الصفحة.

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

قم بحفظ الملف علي جهازك

ثم بعد ذلك قم بفك الضغط عن الملف

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

هيظهر معاك الملفات بالطريقة التالية : js , image , css , MANIFES

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

قم بفتح ملف MANIFES باي محرر وليكن نوت باد

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

بعد كده هتتابع التعليمات

بيؤلك المجلد اللي اسمو css هتنسخ الملفات اللي داخله لمجلد الcss في موقعك يعني هتسجل دخول للوحة تحكم موقعك او تفتح برنامج ftp وترفع الملفات دي داخل المسار www / او public_html وتفتح مجلد المنتدي بتاعك او المدونة  vb وداخل مجلد vb هتلاقي مجلد تاني اسمو clientscript هتنسخ ملف css او تعمل استبدال للملف الجديد بالملف القديم

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

تصغير CSS , تصغير HTML , جافا , سكريبت , سرعة , موقعك , للمواصفات , للسرعة , جوجل , PageSpeed , Insights

وهتكرر نفس العملية مع باقي الملفات

شروحات تهمك |

شرح بالصور حل مشكلة تحسين التخزين المؤقت للمتصفح 

شرح بالصور حل مشكلة تحسين الصور في PageSpeed Insights

شرح بالصور طريقة التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي

واشكركم ونتقابل في شرح جديد

اضف تعليق