كيفية بناء أسرع صفحة Divi: تحسين محتوى Divi الخاص بك للسرعة

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

دعونا نتعمق في ذلك!

اشترك في قناتنا على اليوتيوب

1. تحسين محتوى الجزء المرئي من الصفحة

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

4-Module Hero Concept. مفهوم البطل المكون من 4 وحدات

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

• عنوان
• فقرة
• زر

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

• عنوان
• فقرة
• زر
• الصورة المحسنة

استخدم برنامج Fullscreen Hero أو تقسيم المحتوى إلى أقسام متعددة لاكتشاف تلقائي دقيق

هناك سبب يجعل تصميمات البطل بملء الشاشة شائعة. فهي لا تجعل تصميمك أكثر قابلية للتنفس فحسب ، بل إنها تساعد أيضًا في CSS المهم. إذا اخترت البحث عن بطل ملء الشاشة ، فأنت تقرر أن هذا هو الشيء الوحيد الذي يظهر في الجزء المرئي من الصفحة ، بغض النظر عن حجم الشاشة الذي تستخدمه. لإنشاء بطل ملء الشاشة في Divi ، تذكر تعيين حد أدنى للارتفاع "100vh" داخل إعدادات القسم. عن طريق تخصيص ارتفاع أدنى ؛ أنت تتأكد من أن القسم يغطي الارتفاع الكامل للمتصفح. يمكنك وضع أي شيء داخل القسم ليكون جزءًا من تصميم بطلك من تلك النقطة فصاعدًا. أو يمكنك أيضًا استخدام رأس ملء الشاشة المدمج في Divi.

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

تجنب الرسوم المتحركة في البطل لمنع التأخير

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

تعديل المحتوى في الجزء المرئي من الصفحة على الجهاز اللوحي والجوال

آخر شيء يجب ذكره بخصوص Critical CSS هو تعديل تصميمك عبر أحجام شاشات أصغر. من المهم التأكد من تحسين محتوى الجزء المرئي من الصفحة لأحجام الشاشات المختلفة. إنها مسألة تعديل التصميم حتى تتمكن من الوصول إلى نتيجة رائعة في سرعة الصفحة على كل من سطح المكتب والجوال. يمكنك ، على سبيل المثال ، إخفاء صورة البطل بأكملها على الهاتف المحمول لزيادة سرعة صفحتك على أحجام شاشة أصغر.

2. استخدام الأنماط الذكية

كيف تعمل الأنماط الذكية

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

استخدام 1 أو 2 إعدادات مسبقة للأقسام والصفوف

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

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

استخدم الإعدادات المسبقة للوحدات النمطية

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

تجاوز إعداد مسبق أم لا؟

لكن لا ينبغي عليك إنشاء إعداد مسبق جديد لكل تغيير صغير. في المثال أعلاه ، على سبيل المثال ، يمكنك ملاحظة أن آخر وحدتين Blurb Module لهما لون نص مختلف. يمكنك إنشاء إعداد مسبق جديد لهذا ، عن طريق تكرار الإعداد القديم ، أو يمكنك أن تقرر تجاوز الإعداد المسبق. في هذه الحالة ، من المنطقي تجاوز لون النص فقط (مما يؤدي إلى سطر إضافي واحد من كود CSS) بدلاً من إنشاء إعداد مسبق جديد وإضافة أسطر متعددة من كود CSS.

3. مطابقة خيارات التصميم مع السرعة

الحد من اختيار الوحدات التي تريد استخدامها (الوحدات الديناميكية)

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

ابحث عن LCP لتصميمك وقم بتحسينه

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

اختيار نمط رسوم متحركة (ميزات ديناميكية)

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

اقتران الخطوط: التزم بمجموعة خطوط واحدة أو اثنتين

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

4. التحسين اليدوي

المحتوى المتجاوب: تصغير أحجام الصور على الهاتف المحمول

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

أنواع الملفات وضغطها

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

خلف الكواليس

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

بناء صفحات سريعة مع Divi - أسهل من أي وقت مضى

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