كيفية تمكين Preload او التحميل المسبق للملفات داخل الموقع

السؤال

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

كيف يمكن تحسين LCP صفحات الموقع عن طريق خاصية Preload للملفات المسماة حرجة والتي هي بالاساس Css وملفات JS ؟

تم الحل 2
ali 5 أشهر 2020-12-31T16:20:52+03:00 1 إجابة 34 مشاهدات 1

إجابة ( 1 )

    0
    2021-05-20T22:02:11+03:00
    هذه الإجابة تم تعديله.

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

    كل هذه الملفات يمكن ان تظهر لك عبر صفحة فحص سرعة الموقع التابعة الى جوجل وهي Page Speed Insight التي سوف تعطيك كل الأسباب التي تجعل صفحات موقعك بطيئة وهذا يؤثر على LCP التي ينبغي تحسينها بالكامل سيجعل من نتائج السيو لصفحات موقعك التي تقبع السرعة فيها في الصدارة .

    هناك ملفات داخلية اغلبها تكون جافا سكريبت JS و Css بالاضافة الى ملفات TXT يجب ضغطها وهذه ايضا يجب ان نعمل Preload أو Prefetch أي جلب مسبق وخاصة ان كنت تستخدم CDN مجاني او مدفوع واغلبها تكون ملفات داخل الموقع ناتجة عن الاضافات أو تصميم القالب الخاص بالموقع.

    الكود الذي يمكنك تسنخدمه بين وسمي Head في الموقع أو عبر اضافات Caching يمكنك وضع المسار بعد مسار المدنة الخاصة بك لكي يتم تحميله مع تحميل مكونات الصفحة وهذا سوف يساعد على زيادة النتائج الايجابية التي ستجلب لك المزيد من الزوار لان تقييم صفحاتك سوف يكون متقدم ويتغير جذريا.

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

    الكود :

    <link rel=”preload” as=”script” href=”script.js”>

    <link rel=”preload” as=”style” href=”style.css”>

    <link rel=”preload” as=”image” href=”img.png”>

    <link rel=”preload” as=”video” href=”vid.webm” type=”video/webm”>

    <link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>

    أفضل إجابة

‫أضف إجابة