تطوير مواقع وخدمات: ضغط وتسريع

‏إظهار الرسائل ذات التسميات ضغط وتسريع. إظهار كافة الرسائل

الخميس، 30 مايو 2024

اضافته بالقالب Lazy Loading تسريع

السفراني | مايو 30, 2024 | ضغط وتسريع لا يوجد تعليقات !

تخطيط" المدونة

انقر على "تحرير HTML" للقالب الذي تريد تطبيق التحميل الكسول عليه
ابحث عن الوسم <head> في القالب

قم بإضافة الكود التالي داخل الوسم <head>:

<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img[data-src]");
var lazyloadThrottleTimeout;

function lazyload() {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}

lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}

document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
</script>

حفظ التغييرات وقم بتحديث مدونتك
هذا الكود يضمن أن الصور التي تحتوي على الخاصية data-src ستحمل فقط عندما تصبح مرئية داخل نطاق العرض. تذكر أنه يجب أن تكون متأكدًا من أن الصور التي تريد تطبيق التحميل الكسول عليها تحتوي على الخاصية data-src بدلاً من src

تلقائي معي الاضافه Lazy Loading تسريع

السفراني | مايو 30, 2024 | ضغط وتسريع لا يوجد تعليقات !

التحميل الكسول بشكل تلقائي في قالب بلوجر بدون الحاجة إلى إضافة أي كود يدويًا، يمكنك اتباع الخطوات التالية:

قم بتسجيل الدخول إلى حساب بلوجر الخاص بك وانتقل إلى "تخطيط" المدونة

انقر على "تحرير HTML" للقالب الذي تريد تطبيق التحميل الكسول عليه

ابحث عن الوسم <head> في القالب

بعد الوسم <head>، قم بإضافة الكود التالي:

<script async='async' src='https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js'></script>

هذا الكود يستدعي مكتبة lazysizes التي توفر التحميل الكسول بشكل تلقائي لجميع الصور في المدونة

حفظ التغييرات وقم بتحديث مدونتك

مع هذا التغيير، ستبدأ الصور في مدونتك تحميلها بشكل كسول تلقائيًا بدون الحاجة إلى أي تعديلات يدوية على الصور أو الكود

جافا سكربت Lazy Loading تسريع

السفراني | مايو 30, 2024 | ضغط وتسريع لا يوجد تعليقات !

لتطبيق تقنية "Lazy Loading" في بلوجر لتحميل الصور فقط عندما يكون المستخدم قريبًا منها، يمكنك اتباع الخطوات التالية:

قم بتسجيل الدخول إلى حسابك في Blogger وانتقل إلى قسم تحرير التخطيط
انقر على "إضافة قطعة HTML/Javascript" حيث تريد تطبيق التحميل الكسول
ثم ضع الكود التالي:

<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img[data-src]");
var lazyloadThrottleTimeout;

function lazyload() {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}

lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}

document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
</script>

احفظ التغييرات
هذا الكود يعمل عند تحميل الصفحة، حيث يحمل الصور التي تحتوي على خاصية data-src بدلاً من src، وعندما يتم تمرير الصور إلى مجال العرض يقوم الكود بتحميل الصور تلقائياً.
تذكر أن الكود قد يختلف بناءً على التخطيط الحالي لمدونتك، لذا قد تحتاج إلى تعديل بعض الجزئيات وفقاً لاحتياجاتك الخاصة

Queries ماذا تعرف عن هذا في البلوجر الاستعلامات

السفراني | مايو 30, 2024 | ضغط وتسريع لا يوجد تعليقات !

تقليل عدد الاستعلامات (Queries) التي يقوم المتصفح بإرسالها لتحميل الموقع. هذه استراتيجية مهمة لتحسين أداء الموقع وتسريع التصفح

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

ومع ذلك، هناك بعض الإجراءات التي يمكن اتخاذها لتقليل عدد الاستعلامات:

تجميع وضغط الملفات القابلة للتنزيل: ضغط الملفات CSS و JavaScript وتجميعها في ملفات واحدة يمكن أن يقلل من عدد الاستعلامات

استخدام خدمات CDN: يمكن استخدام خدمات CDN لتخزين محتوى الموقع وتوزيعه على الخوادم الموزعة جغرافيًا، مما يمكن أن يخفض وقت التحميل وعدد الاستعلامات

تحسين الصور: استخدم صيغ مضغوطة للصور مثل JPEG واستخدم تقنيات تحميل الصور الكسول لتقليل عدد الصور التي يتم تحميلها في البداية

تقليل استخدام الخوادم الخارجية: حاول تقليل استخدام الخوادم الخارجية لتحميل المحتوى الثقيل، مثل النماذج الإعلانية والوسائط الاجتماعية

استخدام تقنيات التخزين المحلي: استخدم تقنيات التخزين المحلي مثل تخزين الذاكرة المؤقتة (Caching) لتخزين المحتوى المكرر وتقليل الحاجة إلى إعادة تحميله في كل مرة

على الرغم من عدم وجود كود رسمي محدد لتحقيق هذا الهدف في بلوجر، يمكن تنفيذ هذه الإجراءات لتحسين أداء وسرعة تصفح موقعك

إليك بعض الأساليب التي يمكنك استخدامها لتقليل عدد الاستعلامات في مدونتك على منصة بلوجر:

تجميع وضغط الملفات:

قم بتجميع ملفات CSS و JavaScript الخاصة بمدونتك في ملفات واحدة وقم بضغطها. يمكنك استخدام أدوات على الإنترنت مثل "Minify" للقيام بذلك. ثم قم بتضمين هذه الملفات في القالب بدلاً من استخدام العديد من الملفات المنفصلة

استخدام خدمات CDN:

يمكنك استخدام خدمات CDN مثل Cloudflare أو Google Cloud CDN لتوزيع محتوى مدونتك على خوادم موزعة جغرافيًا، وبالتالي تقليل وقت التحميل وعدد الاستعلامات

ضغط الصور واستخدام تقنيات تحميل الصور الكسول:

قم بضغط الصور بحيث تكون بحجم أصغر واستخدم تقنيات تحميل الصور الكسول مثل lazy loading لتحميل الصور فقط عندما يكون المستخدم قريبًا منها

استخدام خوادم محلية للمحتوى المكرر:

قم بتكوين تخزين مؤقت (Caching) للمحتوى المكرر مثل الصور وملفات الستايل والنصوص الثابتة لتقليل الحاجة إلى إعادة تحميلها في كل مرة

تجنب الاستخدام الزائد للخوادم الخارجية:

قم بتقليل الاعتماد على الخوادم الخارجية لتحميل النماذج الإعلانية والوسائط الاجتماعية، واحتفظ بالمحتوى الذي يمكن تقديمه محليًا قدر الإمكان

هذه الإجراءات يمكن تنفيذها دون الحاجة إلى كود محدد. ومع ذلك، إذا كنت بحاجة إلى المساعدة في تنفيذ أحد هذه الإجراءات بشكل محدد في قالب بلوجر، فلا تتردد في طرح سؤال محدد وسأكون سعيدًا بمساعدتك

إليك كود HTML/CSS/Javascript يمكنك إضافته مباشرة إلى قالب بلوجر الخاص بك لتحسين أداء الموقع وتقليل عدد الاستعلامات. يمكنك وضع هذا الكود في الجزء الذي ترغب فيه في القالب:



<link rel="stylesheet" type="text/css" href="combined-and-minified-styles.css">
<script src="combined-and-minified-scripts.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script async src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>

<meta http-equiv="Cache-Control" content="max-age=3600">



يرجى ملاحظة أنك ستحتاج إلى استبدال "combined-and-minified-styles.css" و "combined-and-minified-scripts.js" بمسارات ملفات CSS و JavaScript المجمعة والمضغوطة الخاصة بموقعك

هذا الكود يوضح عدة أساليب لتحسين أداء الموقع، بما في ذلك:

تجميع وضغط الملفات: يقوم بتضمين ملفات CSS و JavaScript المجمعة والمضغوطة

استخدام خدمات CDN: يستخدم CDN لتحميل مكتبة jQuery

ضغط الصور واستخدام تقنيات تحميل الصور الكسول: يستخدم lazysizes لتحميل الصور بشكل كسول

استخدام خوادم محلية للمحتوى المكرر: يحدد رأس Cache-Control لتخزين المحتوى المكرر محليًا

تجنب الاستخدام الزائد للخوادم الخارجية: هذا المركز متروك لك لإضافة أي كود إضافي تريده

يرجى تخصيص الكود بما يتناسب مع متطلبات موقعك وتحديد الملفات المجمعة والمضغوطة والمسارات الصحيحة لها

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

قم بتسجيل الدخول إلى حساب بلوجر الخاص بك وانتقل إلى "تخطيط" المدونة

ابحث عن قالب "العنصر" (Header) وانقر على "تحرير" (Edit)

قم بإضافة الكود التالي في الجزء الذي تريد:



<link rel="stylesheet" type="text/css" href="combined-and-minified-styles.css">
<script src="combined-and-minified-scripts.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script async src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>

<meta http-equiv="Cache-Control" content="max-age=3600">


يرجى التأكد من تخصيص الرابط في الوصف (href) ليتناسب مع مسار الملفات المجمعة والمضغوطة على موقعك الإلكتروني

اضغط على "حفظ ترتيب" (Save Arrangement) لحفظ التغييرات

بإضافة هذا الكود، ستقوم بتحسين أداء الموقع على بلوجر وتقليل عدد الاستعلامات التي يقوم المتصفح بإرسالها لتحميل الموقع

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

إليك كيفية القيام بذلك:

قم بتسجيل الدخول إلى حساب بلوجر الخاص بك وانتقل إلى "قالب" المدونة

انقر على "تحرير HTML" للقالب الذي تريد تعديله

ابحث عن الجزء الذي ترغب في إضافة الكود إليه. قد ترغب في استخدام العنصر <head> لتضمين الكود في جميع الصفحات، ولكن يمكنك أيضًا استخدام الأماكن الأخرى حسب احتياجاتك

ضع الكود التالي في القالب:



<link rel="stylesheet" type="text/css" href="<$BlogURL$>combined-and-minified-styles.css">
<script src="<$BlogURL$>combined-and-minified-scripts.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script async src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>

<meta http-equiv="Cache-Control" content="max-age=3600">


هذا الكود يستخدم <$BlogURL$> لإدراج عنوان URL لمدونتك بشكل ديناميكي، وبالتالي يمكنه أن يحصل على مسارات الملفات بناءً على عنوان المدونة الحالي

احفظ التغييرات

باستخدام هذا الكود، سيتم تضمين ملفات CSS و JavaScript بشكل تلقائي من خلال استخدام <$BlogURL$> دون الحاجة إلى تعديل الروابط يدويًا

وسلامتكم

الصفحات

اخر المواضيع

عرض المحتوي

بحث

الخميس، 30 مايو 2024

اضافته بالقالب Lazy Loading تسريع

تلقائي معي الاضافه Lazy Loading تسريع

جافا سكربت Lazy Loading تسريع

Queries ماذا تعرف عن هذا في البلوجر الاستعلامات

زوار العالم

المتابعون

مشاهدة الصفحة

Translate ترجمة