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

فيصل الوهباني الأحد, مارس 01, 2020

من المشاكل الشائعة التى تسبب البطء في فتح المدونة هي صعوبة إدارة  رؤوس انتهاء الصلاحية ( الكاش ) في مدونات blogger بسبب صعوبة التحكم في ذاكرة الكاش من خلال بلوجر.

وتكون الإشكالية عندما يقوم زائر بفتح المدونة لأول مرة ،  عند ذلك  سوف يقوم المتصفح بتنزيل كل الموارد الخاصة بتقديم المحتوى من المدونة.  هنا تكون مهمة ذاكرة الكاش هي تخزين جميع الملفات المطلوبة لعرض المدونة من ملفات .js , css , وصور  وأيقونات  في ذاكرة التخزين المؤقت لمتصفح الزائر ، من أجل عندما يعود الزائر لفتح المدونة مرة آخرى لايقوم المتصفح بتحميل الموارد اللازمة من الخادم من جديد ولاكن يقوم بتحميلها من ذاكرة التخزين المؤقت للمتصفح الخاص بالزائر، مما يسرع فتح المدونة ويقلل من إستهلاك البيانات المحملة في كل مره يعود فيها الزائر لفتح الصفحة من جديد.

من الحلول الممكنة لتسريع تحميل المدونة هو تأجيل تحميل الصور خارج الشاشة ( التحميل الكسول للصور )  ويتم عرض الصور فقط  عندما يقوم الزائر بنشاط التمرير لصفحة المحتوى.

جرب استخدام أدة إختبار  سرعة المواقع المقدمة من جوجل PageSpeed Insights غالباً ما تظهر  مشكلة تأجيل تحميل الصور كما في الشكل التالي :


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

طريقة تركيب إضافة Lazy Load لمدونة بلوجر.


  1. أفتح بلوجر ثم المظهر ، ثم تحرير Html
  2. قبل البدء في التعديل أعمل نسخة احتياطية للقالب تفاديا لأي غلطة تقوم بها. 
  3. أبحث في المدونة على <img>   وقم بتغير خصائص كائن الصور للمدونة كاتالي : غير خاصية expr:src إلى    expr:data-src  وأضف لكائن الصورة كلاس بأسم 'class='lazy 
  4. أبحث في المدونة على </body> وألصق كود الجافا التالي فوقه مباشرة.
    <script type="text/javascript">//<![CDATA[
    function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
    //]]></script>


  5.  قم بحفظ التعديل.

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




تعليقات

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)