كيف تضاعف سرعة تحميل مدونتك بلوجر 2x (شرح تطبيقي)
شارك مع اصدقائك:
دعونا اولا نلقي نظرة عن بعض الاحصائيات:
الآن، وببساطة تسريع موقع ويب اسهل مما تتوقع. على الأقل بالنسبة لأولئك الذين يستخدمون بلوجر.
أحدها هو أنه لا يمكنك تثبيت مكون إضافي تابع لجهة خارجية والسماح له بتسريع موقع الويب بطريقة سحرية، كما هو الحال مع ووردبريس.
مع بلوجر، كل ذلك عبارة عن "إفعلها بنفسك!"، وهو أمر مرهق للغاية خاصة لأولئك الذين لا يعرفون في HTML و CSS و JavaScript. لكن هذا موضوع مختلف تمامًا.
على الرغم من أن قوالب بلوجر تتميز بخفة وزنها وتحميلها بسرعة، إلا أن المشكلة تأتي مع ملفات اكواد الجهات الخارجية.
أولاً ، انتقل إلى PageSpeed Insight المقدمة من جوجل، وقم بتحليل مدونتك بوضع رابط المدونة في مكانه والضغط على "Analyze".
هناك امور يجب ان تضعها في عين الاعتبار وهي:
نصائح وطرق اخرى تحدثنا عنها في موضوع 12 طريقة فعالة لتسريع تحميل مدونة بلوجر ولن ارجع للتطرق اليها.
لو قمت بالبحث عنها داخل اكواد قالب مدونتك فلن تجدها.
هذه الاكواد غير مرغوب فيها تمامًا إذا كنت تستخدم قالبًا وظهرت عندك فتحتاج للتخلص منها.
ومع ذلك، نظرًا للإعدادات الافتراضية لمنصات بلوجر وعدم اعطاء الصلاحية الكاملة للمستخدم، فلا يمكنك حذفها.
ولكن يمكن ان تعدل على الكود بحيث لايتم استخدامها وتضمينها مرة اخرى في مدونتك.
ها نحن ذا…
(1) انتقل الى قسم "المظهر"، ثم اضغط على "تحرير HTML".
6- الآن قم بالبحث عن </head> وضع فوقه مباشرة هذا الكود:
لقد نجحت في إزالة اكواد CSS و JavaScript الغير المرغوب فيها والتي تمنع عرض المحتوى.
إقرا ايضا: كيفية التخلص من عناصر جافا سكريبت و CSS التي تحظر عرض المحتوى.
الخر الجيد هو انه حتى ان هذه المشكلة لديها حل اما الخبر السيء فهي غر صالحة لجميع القوالب.
استخدم Google PageSpeed Insight للتعرف على الخطوط التي تاخر تحميل المدونة.
ستجد في الغالب خط Font Awesome في القائمة.
1- بعدما تتعرف عليها قم بحذف الكود المضمن للخط من اكواد القالب و
2- احفظ رابط الخط في ملف نصي لديك في الحاسوب لاننا سنرجع اليه فمن القبيح ان تترك مدونتك بدون خط مميز 😋
3- الآن، من اكواد القالب اضغط على "CTRL F" وقم بالبحث عن الوسم </head>. انسخ الكود التالي والصقه مباشرةً فوق </head> وغير مايجب تغييره:
غير ماهو باللون الاحمر الى رابط الخط المخصص لمدونتك (الذي قمت بحفظه في الملف النصي).
الكود مضمن خط Font Awesome فاذا كنت لاتستعمل فقط قم بحذف الكود الذي بالاصفر.
اما اذا كنت تستعمله وتريد تغييره الى الخط awesome الخاص بك فغير هذا https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css
الى رابط font awesome الذي عندك.
قم بالبحث على ...
واينما وجدتها قم بحذفها، ستجد منها الكثير ولاتقلق فلن تحدث اخطاء بحذفها.
ملاحظة: في كل مرة تضيف اضافة جديدة من "التخطيط"، ستظهر هذه كود جديد مشابه لما قمنا بحذفه.
لذلك، تذكر أن تكرر العملية لحذف الكود مرة اخرى.
لإضافة وظائف الى مدونتك، ستحتاج إلى إضافة اكواد طرف ثالث.
على سبيل المثال، إذا كنت تريد اضافة أداة المشاركة على مواقع التواصل الاجتماعي، فستضطر إلى إضافة كود جافا سكريبت "AddThis" في مدونتك.
أو إذا كنت ترغب في صندوق تعليقات مطور، فسيتعين عليك إضافة اكواد Disqus الى جانب اكواد قالب مدونتك.
سبق وان تحدثت عن هذا الامر في موضوع 12 طريقة فعالة لتسريع تحميل مدونة بلوجر لكن في الاعادة افادة.
كل ماعليك استخدام رمز التوجيه الغير المتزامن، كهذا async
عند تحميل موقعك، يتم تحميل الموارد المختلفة في وقت واحد أو في الوقت اللاحق بترتيبها الصحيح.
ما يفعله الرمز "async" هو أنه يخبر المتصفح بان يترك هذا الكود الجافاسكريبت للاخير ليقوم بتحميله.
ببساطة عكس "Sync".
يمكنك استخدام هذا الاعداد على جميع اكواد جافا سكريبت الخارجية لضمان تحميل اكواد HML وCSS أولاً.
ستجد اكواد جافاسكريبت الخارجية مصمنة بهذا الشكل:
هذه كانت 4 خطوات للتقيل من وقت تحميل مدونة بلوجر وتسريعها بسرعة مضاعفة.
يمكنك الرجوع الى اداة PageSpeed Insight واعادة فحص مدونتك وسترى ان سرعة التحميل قد زادت، يمكنك ايضا ان تفكر في رفع ذاكرة التخزين المؤقت، فالبرغم من انه لاتوجد طريقة واضحة لعمل ذلك لكن هذا الموضوع سيساعدك كيفية الاستفادة من متصفح التخزين المؤقت على بلوجر Exploit Browser Caching.
- يمكن أن يتسبب تأخير مدة ثانية واحدة لوقت تحميل مدونتك بفقدان مايعادل نسبته 11 في المائة من مرات المشاهدة. (المصدر: HubSpot)
- سيتم خروج 53 في المائة من الأشخاص مدونتك من الجوال إذا استغرق تحميلها أكثر من 3 ثوانٍ. (المصدر: جوجل)
الآن، وببساطة تسريع موقع ويب اسهل مما تتوقع. على الأقل بالنسبة لأولئك الذين يستخدمون بلوجر.
بلوجر او ووردبريس
نعم، بلوجر أفضل من ووردبريس على العديد من الجبهات. لكن حتى أكبر المعجبين لا يمكنهم القول بأن نظام إدارة المحتوى (CMS)، من جوجل، ليس لديه بعض العيوب الواضحة.أحدها هو أنه لا يمكنك تثبيت مكون إضافي تابع لجهة خارجية والسماح له بتسريع موقع الويب بطريقة سحرية، كما هو الحال مع ووردبريس.
مع بلوجر، كل ذلك عبارة عن "إفعلها بنفسك!"، وهو أمر مرهق للغاية خاصة لأولئك الذين لا يعرفون في HTML و CSS و JavaScript. لكن هذا موضوع مختلف تمامًا.
على الرغم من أن قوالب بلوجر تتميز بخفة وزنها وتحميلها بسرعة، إلا أن المشكلة تأتي مع ملفات اكواد الجهات الخارجية.
كيف تسرع موقعك / مدونة بلوجر؟
ملاحظة: قبل القيام بأي من هذه الخطوات، تأكد من أن لديك نسخة احتياطية من القالب / التصميم الحالي.أولاً ، انتقل إلى PageSpeed Insight المقدمة من جوجل، وقم بتحليل مدونتك بوضع رابط المدونة في مكانه والضغط على "Analyze".
هناك امور يجب ان تضعها في عين الاعتبار وهي:
- انت بوضعك رابط مدونتك فانت بذلك تفحص الصفحة الرئيسية، ونحن الذي يهمنا سرعة المدونة عموما وسرعة صفحات المواضيع خصوصا.
- اذا كنت تضع اعلانات ادسنس فسرعة المدونة ستكون بطيئة لامحالة.
- اللون الاحمر يبين لك انه يجب عليك اعادة النظر مليا في سرعة تحميل مدونتك.
- احيانا تزيد من سرعة تحميل المدونة وتقلل من وقت تحميلها بالاستغناء عن بعض الاضافات والمميزات مثلا اخفاء الاضافات في مظهر الجوال.
اذا كانت سرعة تحميل مدونتك بطيئة فاتبع الارشادات المسجلة في هذا الموضوع للتقليل من وقت تحميل مدونة بلوجر وزيادة سرعة تحميلها.
من المهم اخذ نسخة احتيطية قبل البدا في تطبيق الخطوات الاتية لانه قد تحدث اخطاء، قم بالدخول الى منصة بلوجر ← المظهر ← اضغط على "نسخ احتياطي/استعادة" ← تنزيل المظهر.
نصائح وطرق اخرى تحدثنا عنها في موضوع 12 طريقة فعالة لتسريع تحميل مدونة بلوجر ولن ارجع للتطرق اليها.
تخلص من حزم CSS و JS المضمنة
يتم ارفاق القالب عند تثبيته على منصة بلوجر بحزم CSS و JavaScript بغض النظر عن القالب الذي تستخدمه. ستظهر لك مثل ...
https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css
https://www.blogger.com/static/v1/widgets/3401484092-widgets.js
هذه الاكواد غير مرغوب فيها تمامًا إذا كنت تستخدم قالبًا وظهرت عندك فتحتاج للتخلص منها.
ومع ذلك، نظرًا للإعدادات الافتراضية لمنصات بلوجر وعدم اعطاء الصلاحية الكاملة للمستخدم، فلا يمكنك حذفها.
ولكن يمكن ان تعدل على الكود بحيث لايتم استخدامها وتضمينها مرة اخرى في مدونتك.
ها نحن ذا…
(1) انتقل الى قسم "المظهر"، ثم اضغط على "تحرير HTML".
(2) (أ) ستؤدي هذه الخطوة إلى إزالة اكواد CSS المضمنة من بلوجر
- افتح مربع بحث بالضغط على "CTRL + F".
- ثم قم بالبحث عن /b:skin
- قم بالقص الكامل (النسخ مع الحذف) لجميع الاكواد بين <b:skin> و </b:skin>
- الان قم بالبحث مرة اخرى على </style>
- والصق جميع الرموز التي قمت بقصها فوق </style>
في الخطوة (4)(5) اذا لم تجد الوسم </style> يمكنك اسفل الوسم </ b: skin> مباشرة انشاء الوسمين التالين وضع الكود بينهما.
<style>قم بلصق الكود هنا</style>
6- الآن قم بالبحث عن </head> وضع فوقه مباشرة هذا الكود:
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
(2) (ب) ستؤدي هذه الخطوة إلى إزالة اكواد جافاسكريبت المضمنة من بلوجر
قم بالبحث عن الوسم </body> وقم بحذفه </body> واستبداله بـ ...
<!–</body>
–> </body>
إقرا ايضا: كيفية التخلص من عناصر جافا سكريبت و CSS التي تحظر عرض المحتوى.
تسريع تحميل الخطوط
من المحتمل أنك تستخدم خطًا مخصصًا، تعمل هذه الخطوط المخصصة على حظر عرض المدونة، مما يؤدي إلى إبطاء سرعة التحميل بهامش كبير.الخر الجيد هو انه حتى ان هذه المشكلة لديها حل اما الخبر السيء فهي غر صالحة لجميع القوالب.
استخدم Google PageSpeed Insight للتعرف على الخطوط التي تاخر تحميل المدونة.
ستجد في الغالب خط Font Awesome في القائمة.
1- بعدما تتعرف عليها قم بحذف الكود المضمن للخط من اكواد القالب و
2- احفظ رابط الخط في ملف نصي لديك في الحاسوب لاننا سنرجع اليه فمن القبيح ان تترك مدونتك بدون خط مميز 😋
3- الآن، من اكواد القالب اضغط على "CTRL F" وقم بالبحث عن الوسم </head>. انسخ الكود التالي والصقه مباشرةً فوق </head> وغير مايجب تغييره:
<script type=’text/javascript’>
(function() { var ad = document.createElement(‘script’); ad.type = ‘text/javascript’; ad.async = true; ad.src = ‘//ajax.Googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js’; var sc = document.getElementsByTagName(‘script’)[0]; sc.parentNode.insertBefore(ad, sc); })();
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { “use strict”; var i = window.document.createElement(“link”); var o = t || window.document.getElementsByTagName(“script”)[0]; i.rel = “stylesheet”; i.href = e; i.media = “only x”; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || “all” }) }
loadCSS(“//fonts.googleapis.com/css?family=Open+Sans|PT+Sans+Narrow”);loadCSS(“https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css”);
//]]>
</script>
الكود مضمن خط Font Awesome فاذا كنت لاتستعمل فقط قم بحذف الكود الذي بالاصفر.
اما اذا كنت تستعمله وتريد تغييره الى الخط awesome الخاص بك فغير هذا https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css
الى رابط font awesome الذي عندك.
أزل اكواد "Quick Edit"
قد تبدو هذه الاكواد صغيرة، لكنها تحجز مساحة كبيرة. لذا، فمن الأفضل التخلص منها.قم بالبحث على ...
<b:include name=’quickedit’/>
او
<b:include data=’post’ name=’postQuickEdit’/>
ملاحظة: في كل مرة تضيف اضافة جديدة من "التخطيط"، ستظهر هذه كود جديد مشابه لما قمنا بحذفه.
لذلك، تذكر أن تكرر العملية لحذف الكود مرة اخرى.
اكواد جافا سكريبت
لإضافة وظائف الى مدونتك، ستحتاج إلى إضافة اكواد طرف ثالث.
على سبيل المثال، إذا كنت تريد اضافة أداة المشاركة على مواقع التواصل الاجتماعي، فستضطر إلى إضافة كود جافا سكريبت "AddThis" في مدونتك.
أو إذا كنت ترغب في صندوق تعليقات مطور، فسيتعين عليك إضافة اكواد Disqus الى جانب اكواد قالب مدونتك.
سبق وان تحدثت عن هذا الامر في موضوع 12 طريقة فعالة لتسريع تحميل مدونة بلوجر لكن في الاعادة افادة.
كل ماعليك استخدام رمز التوجيه الغير المتزامن، كهذا async
عند تحميل موقعك، يتم تحميل الموارد المختلفة في وقت واحد أو في الوقت اللاحق بترتيبها الصحيح.
ما يفعله الرمز "async" هو أنه يخبر المتصفح بان يترك هذا الكود الجافاسكريبت للاخير ليقوم بتحميله.
ببساطة عكس "Sync".
يمكنك استخدام هذا الاعداد على جميع اكواد جافا سكريبت الخارجية لضمان تحميل اكواد HML وCSS أولاً.
ستجد اكواد جافاسكريبت الخارجية مصمنة بهذا الشكل:
<script src='code' type='text/javascript'></script>
انت قم بارجاعه بهذا الشكل:
سيضمن هذا السطر تحميل جميع المكونات المهمة لموقعك أولاً وبعد ذلك فقط سيبدا بتحميل كود جافاسكريبت هذا.
<script async='async' src='code' type='text/javascript'></script>
هذه كانت 4 خطوات للتقيل من وقت تحميل مدونة بلوجر وتسريعها بسرعة مضاعفة.
يمكنك الرجوع الى اداة PageSpeed Insight واعادة فحص مدونتك وسترى ان سرعة التحميل قد زادت، يمكنك ايضا ان تفكر في رفع ذاكرة التخزين المؤقت، فالبرغم من انه لاتوجد طريقة واضحة لعمل ذلك لكن هذا الموضوع سيساعدك كيفية الاستفادة من متصفح التخزين المؤقت على بلوجر Exploit Browser Caching.
ليست هناك تعليقات