اصلاح سرعة المدونة و تقليل حجم اكواد الجافا سكربت (blogger) .

بسم الله الرحمن الرحيم , اليوم موضوعنا في هذا الدرس حول واحدة من اكبر مشاكل مدونات بلوجر  . وهي  تسريع مدونة بلوجر عن طريق تقليل حجم تحميل جافا سكريبت javascript  المستخدم داخل المدونة Blogger في ملف اكواد html لـ الموقع الخاص بك . خاصة بعد تركيب أكواد جوجل ادسنس google adsense عليها تصبح سرعة موقعك بطيئة جدا خاصة علي الهاتف . يمكنك تخطي القراءة و الذهاب الي الاسفل ستجد الشرح فيديو .

تحدثنا في مقال سابق عن اضافة الصور بتنسيق Webp في بلوجر ودورها في تخفيف حجم الصورة لتسريع المدونة و الان نتحدث عن الجزء الثاني و الاهم وهو كيفية تخفيف وزن كود الجافا سكريبت لـ زيادة سرعه الموقع . 

ما هي اكواد الجافا سكربت وما وظيفتها .

في البداية يجب ان نعرف ما هي وظيفة اكواد الجافا سكربت . Java Script  هي النصوص البرمجية التي تحتوي علي رموز تشغيل عناصر html , لنأخذ مثال :

اكواد جافا سكربت مثل مديرك في العمل الذي يأمرك بأداء وظيفة ما فتقوم انت بتنفيذها تبعا لاوامره . 

html و css هما الموظف و مكانه و وظيفته في العمل , فكلما زادت اوامر المدير من الموظف يؤدي الي زيادة وقت تنفيذ الطلب من الموظف . وهذا ما يحدث في مدونتك كلما زادت اكواد جافا سكربت كلما قلت سرعة ا لمدونة .

هيكل قالب بلوجر .

لحل مشكلة بطئ وتقليل و تحسين سرعة القالب يجب اولا معرفة ترتيب العناصر في القالب .

اولا صفحة html التي تحوي الاكواد , ثانيا قسم head يحتوي علي اكواد الميتا تاج اولا و يوجد اكواد سكريبت تحت الميتا ثم اكواد css , ثالثا قسم البودي و يحتوي علي كل ما تراه في مدونتك html بجانب جافا سكريبت ايضا .

اصلاح اكواد الجافا سكربت و زيادة سرعة المدونة .

الان شرح طريقة إصلاح ملفات الجافا لزيادة سرعة التحميل للقالب لكن ولا قم بـ قياس سرعة قالبك .

• اولا توجد اكواد جوجل انالينكس و اكواد السكيما و كود ادسنس و ايضا كود الخط في قسم الهيد . و كلها عبارة عن سكربت , كما اشرنا هذه الاكواد تتواجد بنسبة كبيرة تحت الميتا تاج و احيانا يوجد البعض منها فوق وسم </head> .
• ثانيا فوق وسم </body> ستجد عدد كبير من js اكواد الجافا مثل اكواد صفحة تحويل الروابط واكواد الاعلانات و غيرها من الاكواد التي قمت انت باضافتها مثل اكواد الفيس بوكك مثلا او الاشعارات . كل هذه الاكواد تبدأ بـ <script> وتنتهي بـ </script> .

هذه الاكواد تقلل بشكل كبير من سرعة المواقع خذ بالاعتبار ان بعض اكواد الجافا سكريبت المسبوقة بكود html لاكمال وظيفتها او  الاكواد الموضوعة من طرف القالب اتركها كما هي ثم طبق معي الاتي :

ضغط اكواد الجافا سكربت .

1. سجل الدخول الي بلوجر ثم افتح اكواد المدونة .
2. قم بأخذ نسخة احتياطية من القالب .
3. ابحث عن code الكود <data:post.body/>  .
4. ابحث عن اكواد الجافا سكريبت اسفل الميتا تاج في قسم الهيد و فوق اكواد css .
5. قم بنقل اكواد الجافا سكريبت مسبوقة بتعليق لمعرفة الكود الذي تنقله اسفل كود <data:post.body/>  .
6. قم بلنزول لاسفل القالب فوق وسم </body> ,ابحث عن اكواد الجافا ثم قم بنقلها اسفل كود <data:post.body/> ايضا .
7. قم بنقل كود ادسنس ايضا في نفس المكان ثم احفظ القالب و اختبر السرعة .

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

اكتفي بضغط اكواد الجافا التي لا يمكن نقلها .

تسريع اكواد ادسنس .

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

فقد نقلناه معا اسفل <data:post.body/>  . اذا لا داعي لوضع هذا الكود اول كل رمز ادسنس . نأخذه من جوجل ادسنس لنضعه داخل التنسيق و لنوضح الامر اكثر انظر معي الصورة التالية فهي تمثل شكل كود ادسنس قبل ازالة السكريبت :

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

كرر هذه العملية مع كل الاكواد التي تمت اضافتها الي موقعك . واذا كنت تريد اضافة اداة في منطقة السايد بار فهي تتكون من كودين الاول html و الثاني يكون جافا سكربت .

هنا تقوم بنفس الفكرة ايضا . قص كود الجافا سكربت و اترك ال html او css كما هما و احفظ الاداة و اذهب و ضع السكربت في المكان الذي اشرنا اليه سابقا في القالب و لا تنسي ان تضع تعليق فوق كل كود تضيفه لموقعك .

اختبار السرعة .

الان قم بحفظ كل شىئ و توجه لهذين الموقعين لاختبار السرعة و اختبار السيو

1. PageSpeed Insights لقياس سرعة الموقع .
   
   
   
   
   كما تري هذه هي سرعة موقعي علي الموبايل و سطح المكتب .
2. Seobility لقياس قوة سيو الموقع . قيس من خلالها كم ملف جافا سكريبت يعمل في قالبك Mobile optimization .
   
   كما تري ان موقعي يحتوي علي اثنين من اكواد الجافا سكربت فقط رغم انك قد رأيت كم كود جافا سكربت اتسخدمه في الموقع و يمكنك التأكد بنفسك من هذا .

باختصار :

اي كود يوضع فوق <data:post.body/> يظهر بداية المقال . اما اذا قمت بوضع الكود اسفل هذا الرمز فسوف يظهر تحت المقال في حالة ما اذا كان الكود html او css .

اما اذا وضعت تحت الرمز كود جافا سكريبت فسيتم ضغطه و تقليل حجمه دون المساس بوظيفته الاساسية . و بهذا تحافظ علي موقعك سريع و صديق لمحركات البحث (blogger).

شاهد الشرح فيديو في الاسفل هنا :

مواقع مستخدمة في الشرح : 

• PageSpeed Insights لقياس سرعة المدونة .
• Seobility لقياس قوة سيو الموقع .

في النهاية اذا اعجبك الشرح اصلاح سرعة المدونة و تقليل حجم اكواد الجافا سكربت (blogger) لا تنسي متابعة موقعنا ليصلك العديد من الشروحات الجديدة و تعليق محفز منك اسفل هذا المقال ولا تنسي ذكر الله و الصلاة علي النبي الكريم محمد صلي الله عليه و سلم .