السلام عليكم اخواني الكرام فى درس جديد على قسم الخاص بدورة انشاء مدونة بلوجر احترافية على مدونة علوم و تقنيات , فى بعض الدروس السابقة قمنا بطرح مواضيع حول طرق تسريع تصفح مدونة بلوجر و ايضا اصلاح الاخطاء الشائعة فيها .
الدروس السابقة :
- الدرس 35: كيفية تسريع مدونة بلوجر وتقليل وقت تحميلها عبر ضغط الصور و الاكواد
- الدرس 42: تسريع وتحسين تحميل صور مواضيع مدونة بلوجر عبر سكريبت lazy load images
- الدرس 54: شرح حلول المشاكل الشائعة لقالب بلوجر Blogger
- الدرس 68 : حلول أغلب المشاكل الشائعة الخاصة بمدونات بلوجر blogger
- الدرس 42: تسريع وتحسين تحميل صور مواضيع مدونة بلوجر عبر سكريبت lazy load images
- الدرس 54: شرح حلول المشاكل الشائعة لقالب بلوجر Blogger
- الدرس 68 : حلول أغلب المشاكل الشائعة الخاصة بمدونات بلوجر blogger
في هذا الدرس سنكمل دروسنا فى فى هذا المجال عبر شرح لكم كيفية اصلاح الاخطاء الخطيرة التى تظهر لك عند فحص مدونة على صفحة الويب التى نجد فيها الاداة المقدمة من طرف جوجل PageSpeed Insights لفحص سرعة موقعك او مدونتك و اظهار الامور الازم اصلاحها على حسب خطورتها
طبعا من فوائد هذه الصفحة اصلاح الاخطاء التى تقوم بمنع ظهور بعض السكريبات و تقوم بثقل فى ظهور بعض الادوات المضافة على مدونتك , وايضا زيادة سرعة ظهور الاعلانات التى تضيفها على مدونتك مثل اعلانات ادسنس , و ايضا تصبح مدونتك محببة لمحركاث البحث ممايزيد من ظهورها فى نتائج البحث
شاهد معي بعض الاخطاء التى نجدها على مدونات بلوجر فى صفحة PageSpeed Insights و شرح كيفية اصلاحها
1- الاكواد المستعملة فى الدرس :
استبدل رابط او وجدته :
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
بـــ
<script type='text/javascript'>//<![CDATA[
//add Font Awesome
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
//]]></script>
2- اضف كود async='async' فى روابط اكواد الجافا سكريب
مثال :
كان هكذا :
<script src="//xxxxxxxxxxxxxxxxxxxxxxxxx.js"></script>
يصبح هكذا :
<script async='async' src="//xxxxxxxxxxxxxxxxxxxxxxxxx.js"></script>
3- اكواد المستعملة للتخلص من مشكل : Leverage browser caching تضاف فوق الكود </head>
<!--leverage browser cache http://arabes1.com/-->
<include expiration='7d' path='/assets/**.css'/>
<include expiration='7d' path='/assets/**.js'/>
<include expiration='7d' path='/assets/**.gif'/>
<include expiration='7d' path='/assets/**.jpeg'/>
<include expiration='7d' path='/assets/**.jpg'/>
<include expiration='7d' path='/assets/**.png'/>
كان هذا درسنا ارجوا ان ينال افادتكم , سنلتقي فى درس اخر لحل المشاكل الاخرى الباقية .