الطرق الصحيحة لتسريع المدونة
مرحبا بكم اصدقئي مدوني بلوجر, في هذا المقال سأقوم بطرح عدة طرق لتسريع تحميل المدونة وتحسين تحميل صفحاتها,قمت بالتطرق للموضوع سابقا عبر مقال تسريع تحميل صفحات المدونة وقد ذكرت فيه عدة طرق لتحسين سرعة المدونة , لكن احسست بأن الموضوع ينقصه عدة نقاط مهمة جدا ايضا, لذا سأقوم بالتعويض في هذا المقال الذي سنذكر فيه اساليب و حلول مميزة, تابعو معي.
مرحبا بكم اصدقئي مدوني بلوجر, في هذا المقال سأقوم بطرح عدة طرق لتسريع تحميل المدونة وتحسين تحميل صفحاتها,قمت بالتطرق للموضوع سابقا عبر مقال تسريع تحميل صفحات المدونة وقد ذكرت فيه عدة طرق لتحسين سرعة المدونة , لكن احسست بأن الموضوع ينقصه عدة نقاط مهمة جدا ايضا, لذا سأقوم بالتعويض في هذا المقال الذي سنذكر فيه اساليب و حلول مميزة, تابعو معي.
تحسين و تسريع الصور المستخدمة.
بالطبع الصور من اهم الوسائط المستخدمة بالنسبة لنا كمدونين وهي غالبا تطون الواجهة الرئيسية لمقالاتنا وتدويناتنا و هي عامل جذب كبير للزوار, لكن هل فكرت يوما انها ايضا عامل رئيسي لبطء المدونة فأحيانا تكون الصور ذات حجم كبير والذي يسبب ببطء تحميل المدونة, لذا يفضل جعل الصور خفيفة وصغيرة الحجم بحد اقصى 1000px *1000px و عدم استخدام صور بصيغة Gif بتاتا لكبر حجمها.واذا كنت ممن يقومون بتصميم صور تدويناته بنفسه عبر برنامج الفتوشوب او الالستريتر او غيره يفضل استخراج الصور
بطريقة Save for Web - Png 24 و استخدام عدد قليل من الالوان عند تصميم الصور " انا استخدم هذه الطريقة عند تصميم صوري الخاصة و عند استخراجها يكون حجمها بي 30Kb و 60Kb كحد اقصى اي هو حجم مثالي للصور"
ملاحظة
هذه الطريق لا تقوم بتشويه جودة الصور بتاتا
هل هذا كل شيء بالنسبة للصور؟هذه الطريق لا تقوم بتشويه جودة الصور بتاتا
طبعا لا فهنالك ايضا طريقة لتقليل حجم الصور ايضا بعد استخراجها , وهي استخدام الصور بصيغة webp
أيضا انا قمت بإستخدام هذه الطريقة وهي فعالة جدا على جميع انواع و مقاسات الصور و قد تصل نسبة تقليل حجم الصور الى 50% او حتى اكثر , وايضا قد تكون النسبة اقل بالنسبة للصور قليل الحجم اساسا لذا لا تستقلل الامر فكل كيلوبات مهم جدا.
طريقة تحويل الصور الى صيغة webp تتم عبر عدة مواقع وانا استخدم الاداة المقدمة من موقع online-convert , رابط الأداة من هــنــا .
استخدام سكربت تأجيل تحميل الصور.
باستخدام سكربت Lazy Load الشهير تستطيع تأجيل تحميل الصور حين وصول المستعرض اليها و بهذه الطريقة نكون قد اجلنا حمل ثقيل على المتصفح لتحميله مرة واحدة.
لتركيب السكربت على المدونة , اتجه الى بلوجر ثم اختر المظهر ثم تحرير HTML ثم ابحث عن الوسم
<script type='text/javascript'>//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbznjk-S8sHxHwSGjhhuOpcOI95NC8gEQOafbivnGPrDxU8zMXpmon4ehtMs5YQ51beOxShlTd3HKnanZ-aKa5mPCbpKFRkajOHiKbaT9IdaCm7-i_iO8Bt4-PtDQVsJ-jRirNxZ_2HDq/s640/arlinadesign.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>
ملاحظة
قد يتعارض السكربت مع بعض اكواد القالب و يعمل عمل عكسي و يقوم بإبطاء المدونة او عدم اظهار الصور, لذا يفضل اخذ نسخة احتياطية او تجربة الكود قبل تركيبه.
قد يتعارض السكربت مع بعض اكواد القالب و يعمل عمل عكسي و يقوم بإبطاء المدونة او عدم اظهار الصور, لذا يفضل اخذ نسخة احتياطية او تجربة الكود قبل تركيبه.
سكربت تأجيل تحميل اعلانات أدسنس.
الاعلانات, من اكثر الامور التي تسبب بطء تحميل المدونة وخاصة اذا كانت كثير لذا للحصول على مدونة سريعة يفضل الاكتفاء بعدد من الوحدات الاعلانية بحد اقصى 4 وحدات اعلانية وايضا بحسب حجم المواضيع و توزيع الاعلانات, وايضا استخدام سكربت تأجيل تحميل اعلانات ادسنس الذي يعمل على تأجيل تحميل الاعلانات لحين الوصول اليها و الاهم يتم تحميها بعد تحميل موارد الصفحة الاساسية.لتركيب السكربت على المدونة , اتجه الى بلوجر ثم اختر المظهر ثم تحرير HTML ثم ابحث عن الوسم
<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense By Itheric
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
ملاحظة
يفضل اخذ نسخة احتياطية من القالب قبل اجراء التعديلات.
يفضل اخذ نسخة احتياطية من القالب قبل اجراء التعديلات.
ضغط اكواد CSS , HTML
الاكواد البرمجية هي اساس الصفحات و المسؤولة عن هيكلة القوالب, و بالطبع فكل كود برمجي يأخذ حيزاً من هيكلة الصفحة وبنائها وكل واحد منها عمله , ولكن قد تجد بعض الاكواد التي يمكن الاستغناء عنها وا استبالها بما هو اخف و اقل حجما, وحتى بعد تصفية القالب من الاكواد غير المهمة تبقى بعض القوالب محشوه نوعا ما بلأكواد , ولهذ يفضل ضغط الاكواد لتقليل حجمها و خاصة أكواد CSS التي تأخذ المساحة الاكبر من القالب بعد أكواد الجافاسكربت التي يمكنك ضغطها عبر هذه الأداة, اداة ضغط اكواد CSS .بالنسبة لضغط أكواد HTML فهي تقريبا بنفس العملية لكن علينا الحذر في تحديد و استهداف اكواد معينة لضغطها و يمكنك ذلك عبر هذه الاداة, أداة ضغط اكواد HTML
استخدام العلامات الشرطية
موضوع استخدام العلامات الشرطية هو موضوع عميق جدا و بسيط في نفس الوقت و سيحتاج مقال خاص به لشرح استخدام العلامات في كثير من الجوانب , ولكن سأقدم عنها تعريفا بإختصار هي أكواد شرطية تستخدم فقط في قوالب بلوجر, حيث يمكنن استخدام شرط معين على سبيل المثال لا الحصر بإظهار او اخفاء اداة أو عنصر معين على صفحة أو تصنيف أو حتى مجموعة متعددة من الشروط بنفس الوقت دون المساس بأهلية الأكواد او التعديل عليها.طبعا تم تصميم اداة لتسهيل استخدام العلامات الشرطية , رابط الاداة من هـنــا
امثلة استخدام الاداة
اذا كان السايدبار (الشريط الجانبي) يظهر في صفحات التدوينات قم بتغليف أكواد HTML , CSS الخاصة بالسايدبار بكود الظهور بصفحة التدوينات مثال :
<b:if cond='data:view.isPost'>
........ الأكواد الخاصة في السايدبار .........
</b:if>طبعا هذا مجرد مثال مبسط جدا, وقد اسلفت في ذكر ان استخدام العلامات الشرطية عميق جدا لذا سيحتاج منك الامر الغوص في الاداة واستخداماتها التي ان شاء الله سأقدم موضوع سأشرح فيه قدر الإمكان عن استخدام العلامات الشرطية.
تغير نظام التعليقات لـ Disqus
ربما قد يتفاجئ البعض لما ادرجت تغيير نظام التعليقات من بلوجر الى Disqus انها من الامور التي قد تجعل سرعة مدونتك اسرع.بالطبع تعليقات بلوجر جيدة وتقوم بعملها على اكمل وجه ولكن المزعج أن الاكواد الاساسية لتحميل التعليقات يستحال التعديل عليها اي انه سيتم تحميل صندوق التعليقات و كأنه جزء اساسي من بناء الصفحة ولا يتم تأجيله ابدا, بعكس نظام تعليقات Disqus الذي يمكن التعديل عليه وجعله يقوم بالتحميل اما عند وصول المستخدم للمساحة الخاصة بصندوق التعليقات , أو عبر وضع رز يقوم المستخدم بالضغط عليه لتحميل صندوق التعليقات , اي ان الامر منوط بالمستخدم لتحميل صندوق التعليقات ولا يتم تحميله مع الأكواد الهيكلية للصفحة كتعليقات بلوجر.
لفهم العملية أكثر قم بمعاينة هذه الصفحة من هــنــا
كما شاهدت , لم يتم تحميل صنوق التعليقات حتى يصل المستعرض لمكانها.
في هذا المقال سأشرح فقط كيفية اضافة سكربت التحميل البطيئ لتعليقات Disqus و سأتطرق لنظام تعليقاتDisqus بشكل مفصل لاحقا.
لتركيب السكربت علينا اولا بإخفاء (عدم تضمين) تعليقات بلوجر في المدونة وذلك عبر الانتقال الى بلوجر ثم اختر اعدادات ثم اختر المشاركات والتعليقات والمشاركة ثم موقع التعليقات قم بإختيار إخفاء.
الان انتقل الى المظهر ثم اختر تعديل HTML قم بالبحث باستخدام Ctrl +F عن الكود التالي
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4><div id="disqus_thread">
<div id="disqus_empty">
</div>
</div>
<script>//<![CDATA[
function load_disqus( disqus_shortname ) {
// Prepare the trigger and target
var is_disqus_empty = document.getElementById('disqus_empty'),
disqus_target = document.getElementById('disqus_thread'),
disqus_embed = document.createElement('script'),
disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);
// Load script asynchronously only when the trigger and target exist
if( disqus_target && is_disqus_empty ) {
disqus_embed.type = 'text/javascript';
disqus_embed.async = true;
disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
disqus_hook.appendChild(disqus_embed);
is_disqus_empty.remove();
}
}
/*
* Load disqus only when the document is scrolled till the top of the
* section where comments are supposed to appear.
*/
window.addEventListener('scroll', function(e) {
var currentScroll = document.scrollingElement.scrollTop;
var disqus_target = document.getElementById('disqus_thread');
if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top - 150) ) {
load_disqus('itheric');
console.log('Disqus loaded.');
}
}, false);
//]]></script>بالنسبة لموضوع تركيب تعليقات Disqus على بلوجرستجد الكثير من الشروحات على الانترنت ستفيدك.
هنالك ايضا بعض الطرق التي لم يتسنى ليذكرها في هذا المقال والتي سأذكرها في مقالات قادمة.
الي هنا اكون قد وصلت لنهاية هذا المقال اذا كانت لديكم اي اقتراحات او استفسارات ارجو ذكرها في التعليقات
ممكن تساوي شرح عنها اذا بتقدر وشكرا
الانترنت واليوتيوب مليئ بشروحات عن كيفة ربط الدومين بمدونة بلوجر
فقط اتبع الشروحات وستبدل www بـ blog
اخي الكريم اذا كنت تعرف كيف يتم ذلك .
ارجوا منك ان تشرحه لنا ولك الشكر
ممكن ان تشرح لي كيف قمت بعمل فقرات المقال وعندما نضغط على احدها تحولنا الى جزء من المدونة
وشكرا لك