تسريع مدونات بلوجر بإضافة كود Lazy load YouTube

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

حيث يوجد العديد من طرق تسريع قوالب بلوجر المفيدة والتي تساعد الزائر في الدخول للموقع في أقل مدة زمنية ممكنة. حيث ذكرت هاب سبوت Hubspot أنه إذا استغرق فتح مدونة ما أكثر من 3 ثوان، فقد يفقد المرء نصف زواره.

تسريع مدونات بلوجر بإضافة كود Lazy load YouTube
تسريع مدونات بلوجر بإضافة كود Lazy load YouTube


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

ومما يجب أن أنوه له أن إضافة فيديو في المقال يأخذ ما نسبته 30% من سرعة القالب او المدونة الخاصة بك. ولهاذا إحرص على إضافة كود تسريع مدونة بلوجر Lazy load YouTube داخل أكواد الموقع.

طرق معرفة سرعة مدونة بلوجر

من أجل التحقق من سرعة مدونة بلوجر يجب الإعتماد على موقع Google PageSpeed Insights او مواقع أخرى متشابهة مثل Pingdom و GTmetrix.

طرق تسريع قوالب بلوجر

يوجد العديد من الطرق لزيادة سرعة قوالب بولجر مثل استخدام صفحات AMP ، التي تجعل تجربة الزائر سريعة وجيدة.

كما يوجد طرق أخرى سوف أشرحها في النقاط التالية:

  • استخدام قوالب AMP السريع،
  • ضغط الصور على موقع TinyPNG
  • تقليل استخدام كود جافا سكريبت
  • اختيار قالب سريع خالي من الأخطاء البرمجية
  • التقليل من الإضافات المتحركة داخل المواضيع، لأنها تثقل القالب بشكل كبير جدا
  • تقليل المواضيع في الصفحة الرئيسية
  • لاتضع الكثير من الإعلانات في المقالات
  • عدم إستخدام كود ادسنس (js) أكثر من مرة واحدة
  • إزالة صور الخلفية
  • لا تقم بإضافة ملفات أو نصوص CSS إضافية
  • استخدام شبكة توصيل المحتوى (CDN Cloudflare)
  • استخدام كود خط واحد فقط وتجنب إستخدام العديد من الخطوط
  • تقليل عمليات إعادة التوجيه لصفحات الويب

كيفية تسريع مدونات بلوجر بإضافة كود Lazy load YouTube

هنا ، سوف أعلمك كيف يمكنك تأخير تحميل مقاطع فيديو Youtube المضمنة على المقالات الخاصة بك لزيادة سرعة التحميل. من خلال التعديل أو إضافة كود Lazy load.

كيف يعمل Lazy load YouTube

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

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

اما تحميل الفيديو بالكامل سيتم عندما ينقر المستخدم على زر تشغيل الفيديو. الآن تعلمت كيف تعمل. دعنا نرى كيف يمكنك إضافة كود Lazy load YouTube في موقع الويب الخاص بك على Blogger.

كيفية اضافة كود تسريع مدونة بلوجر في Blogger

الخطوة 1: اذهب إلى لوحة تحكم Blogger←المظهر← تعديل HTML

الخطوة 2: الآن ابحث عن علامة </body>

الخطوة 3: انسخ كود CSS & JS أدناه والصقه فوق علامة </body> و احفظ التغيرات.

<style>
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 0px;
}
.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}
.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}
.youtube-player img:hover {
  -webkit-filter: brightness(75%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}
.youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
   background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
  cursor: pointer;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute(
    "src",
    "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
  );
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  iframe.setAttribute(
    "allow",
    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  );
  div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName("youtube-player");
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement("div");
    div.setAttribute("data-id", videoId);
    var thumbNode = document.createElement("img");
    thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
      "ID",
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}
document.addEventListener("DOMContentLoaded", initYouTubeVideos);
//]]>
</script>

الخطوة 4: الآن في قسم المشاركات افتح المشاركة التي تحتوي على فيديو اليوتيوب والصق الكود التالي تحت  كود iframe الفيديو.

<div class="youtube-player" data-id="VIDEO_ID"></div>
تسريع مدونات بلوجر بإضافة كود Lazy load YouTube

الخطوة 5: استبدل ID فيديو youtube الموجود بين كود iframe وإستبدله مكان كلمة VIDEO_ID

في الصوة السابقة فإن id الفيديو هو t3umYMh7ses

الخطوة 6: احذف كود <iframe> من بدايته الى نهاية </iframe>

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

أرجو أن ينال درس تسريع مدونات بلوجر بإضافة كود Lazy load إعجابكم والسلام عليكم.

تعليقات