كيفية جعل موقع WordPress الخاص بك يتم تحميله بشكل أسرع باستخدام الإضافات

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

لهذا السبب ، من المهم للغاية تحسين سرعة تحميل صفحتك. هناك العديد من الأدوات الجيدة عبر الإنترنت للمساعدة في قياس سرعتك واستكشاف المشكلات وإصلاحها. تعد Google PageSpeed ​​Insights من أكثر الأدوات شيوعًا.

PageSpeed ​​Insights

إن أداة Google PageSpeed ​​Insights هي أداة مجانية عبر الإنترنت تختبر سرعة تحميل أي موقع ويب ، وتحديد المشكلات ، وتحديد أولوياتها ، وتقديم اقتراحات لإصلاح هذه المشكلات.

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

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

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

نتيجتي

درجتي رهيبة 46 . أول شيء يجب ملاحظته هو وجود ثلاثة أقسام مختلفة في النتائج:

• يجب الإصلاح (2 العناصر)
• النظر في الإصلاح (6 عناصر)
• ناجح (2 العناصر)

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

ملاحظة - لقد واجهت بعض الإخفاقات على طول الطريق. لقد قمت بتضمينها حتى تكون على دراية بالمشكلات المحتملة.

يجب الإصلاح

لدي عنصران يحتاجان إلى اهتمام فوري:

• تمكين ضغط
• تخلص من حظر جافا سكريبت و CSS في محتوى الجزء المرئي من الصفحة

تمكين ضغط

أهم مشكلتي هي أنني لا أستخدم الضغط. يظهر أنه يمكنني تقليل حجم نقل الملفات بنسبة 79٪. يمكن القيام بذلك باستخدام gzip أو انكماش.

معزز نقاط أداء الفسفور الابيض

يحتوي هذا المكون الإضافي المجاني على ضغط gzip وسيحل العديد من المشكلات الأخرى مثل مشكلات CSS و JavaScript عن طريق إزالة سلاسل الاستعلام وإضافة التباين: قبول-ترميز رأس وتعيين انتهاء صلاحية التخزين المؤقت. لقد اخترته لأنه يحتوي على 4.7 / 5 مع أكثر من 10000 تثبيت نشط. تم تطويره لتسريع تحميل الصفحة وتحسين اختبارات نتيجة الصفحة.

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

أحد الأشياء الرائعة في هذا الأمر هو أنه حل بعض المشكلات الرئيسية في المشكلة التالية: القضاء على حظر عرض JavaScript و CSS في محتوى الجزء المرئي من الصفحة. تم الآن نقل هذه المشكلة إلى "النظر في الإصلاح". كما أنها ثابتة تمامًا في ذاكرة التخزين المؤقت لمتصفح الرافعة المالية. يمر الموقع الآن بأربع قواعد حيث مر 2 قبل ذلك فقط.

تقليل وقت استجابة الخادم

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

W3 إجمالي ذاكرة التخزين المؤقت

W3 Total Cache هو البرنامج المساعد الأكثر شيوعًا لتسريع أداء خادم موقع الويب الخاص بك. لديها ما يقرب من مليون عملية تثبيت نشطة وتصنيف 4.4 / 5. يحسن موقعك من خلال التخزين المؤقت. يمكنك اختيار خيارات التخزين المؤقت المختلفة بشكل فردي. وهي تشمل الصفحة وقاعدة البيانات والعنصر والمتصفح. سيتم تخزين الرؤوس المستقبلية وعلامات الكيان والموجزات ونتائج البحث مؤقتًا. كما أن لديها ميزات لتصغير JS و CSS و HTML. سيؤدي ذلك إلى تسريع نقاط Google PageSpeed ​​10 مرات على الأقل عندما يتم تكوينها بالكامل.

لقد جربته مع تشغيل جميع ميزات التخزين المؤقت. هذا جعل نتيجتي تصل إلى 86 . لأول مرة ، أصبح موقعي الآن باللون الأخضر وكانت جميع المشكلات التي واجهتها قيد النظر في الإصلاح. يمر الآن بـ 5 قواعد بما في ذلك وقت استجابة الخادم الذي يقول الآن "استجاب الخادم بسرعة".

النظر في الإصلاح

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

تم تضمين المشكلات في الأصل:

• الاستفادة من التخزين المؤقت للمتصفح
• وقت استجابة الخادم
• تصغير JavaScript
• تحسين الصور
• تصغير CSS
• تصغير HTML

وإليك نظرة على المشاكل الحالية.

تخلص من Javascript و Css لحظر العرض في محتوى الجزء المرئي من الصفحة

يمكن أن يؤدي وجود JavaScript و CSS في الجزء المرئي من الصفحة إلى إبطاء تحميل الصفحة عن طريق وضع الكثير من التحميل على المتصفح. يجب أن يتم التحميل قبل تحميل أي شيء آخر فوق الجزء المرئي من الصفحة.

هناك عدة طرق لإصلاحها:

• تأجيل التحميل
• تحميل بشكل غير متزامن
• ضمّنها مباشرةً في HTML

فيما يلي المكونات الإضافية التي استخدمتها لإصلاح هذه المشكلة.

التحسين التلقائي

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

سيؤدي هذا أيضًا إلى حل بعض المشكلات مثل تصغير JS و CSS في القائمة.

في البداية ، قمت للتو بتشغيل الإعدادات الأساسية لـ HTML و JS و CSS. أدى هذا إلى رفع مجموعتي إلى 88 وخفض المشكلات إلى 3 من موارد CSS. تم إنشاء أحدهما بواسطة المكون الإضافي نفسه والآخران هما خطوط Google. يمر الآن 7 قواعد. تم حل Minify CSS و Minify HTML.

أفضل ووردبريس تصغير

الغرض الرئيسي من هذا المكون الإضافي هو تصغير CSS و JS الخاصين بك ، ولكنه يحتوي أيضًا على ميزة رائعة تتيح لك نقل ملفاتك إلى التذييل أو مواقع أخرى (وهذا هو سبب اختياره). يستخدم نظام قائمة الانتظار لتحسين التوافق مع المتصفحات والمكونات الإضافية والسمات.

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

نظرًا لأن نتيجتي كانت 88 وكنت أعرف ما هي المشكلات الثلاثة ، فقد قررت الانتقال إلى المشكلة التالية.

تحسين الصور

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

محسن صور EWWW

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

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

WP Smush

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

لا يقوم الإصدار المجاني بسحق أي شيء يزيد حجمه عن 1 ميجابايت وسيحطم 50 ميجابايت فقط في المرة الواحدة. لأكثر من ذلك ، ستحتاج إلى WP Smush Pro ، والتي ستعمل على تحطيم الصور حتى 32 ميجا بايت بدون حد لعدد الصور في المرة الواحدة. يقوم بعمل نسخة احتياطية من النسخ الأصلية إذا كنت في حاجة إليها. تبدأ الأسعار من 19 دولارًا في الشهر.

كان لدي 114 صورة تحتاج إلى تحطيمها. كان حجم 8 من هذه الصور يزيد عن 1 ميغا بايت. قررت أن أصلح هذه باليد. قام بتحطيم 98 صورة وتقليل حجم الملف بمقدار 4.79 ميجا بايت (8.82٪).

رفع هذا نتيجتي إلى 90 . حددت Google Insights 5 صور لم تعجبها ولكن لم يكن أي منها يزيد عن 1 ميغابايت. تراوحت من .7 كيلوبايت إلى 17 كيلوبايت.

تحسين الصور باليد

يمكنك تحسين الصور يدويًا عن طريق تغيير الحجم وتقليل الجودة وتغيير التنسيق. يعد Paint.NET أحد أدواتي المفضلة والأكثر استخدامًا للتعامل مع الصور. إنه تطبيق مجاني لتحرير الصور والصور لنظام Windows يحتوي على الكثير من الميزات لتقليل حجم الملف. ماذا تفضل؟

تصغير JavaScript و CSS و HTML

اعتقدت أنني أصلحت هذا ...

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

من خلال تجربة Better WordPress Minify ثم إيقاف تشغيله مرة أخرى ، عادت رسائلي لتقليل CSS و HTML. انخفضت نتيجتي إلى 88 ، وقد عدت الآن إلى تمرير 5 قواعد. لقد قمت بتشغيل ميزات التصغير لـ W3 Total Cache وقد اجتازت الآن جميع المشكلات المصغرة. حصلت الآن على 88 درجة واجتازت 8 قواعد. أيضًا ، كان يحتوي على ستة ملفات في الجزء المرئي من الصفحة. كنت أعلم أنني قد قمت بحل عدد قليل من هذه ، لذلك لا بد أنني غيرت شيئًا ما.

لقد قمت ببعض استكشاف الأخطاء وإصلاحها ووجدت أنني قمت بإيقاف تشغيل Autoptimize عندما واجهت مشكلة مع Better WordPress Minify في وقت سابق. لقد أعدت تشغيل "التحسين التلقائي" ، وأوقفت "تصغير" من W3 Total Cache ، ومسح ذاكرة التخزين المؤقت (خطوة مهمة جدًا!). حصلت الآن على 90 درجة واسترد الموقع 8 قواعد. لقد عاد إلى ثلاثة ملفات CSS في الجزء المرئي من الصفحة ورسالة لتحسين الصور.

بناءً على تجربتي السابقة ، قررت عدم إضاعة الوقت في هذه الملفات. أعتقد أن Google تكره الصور من أي حجم (بغض النظر عن مدى صغر حجمها ، ما زلت أتلقى رسالة لتقليل الحجم) والانتقال من PageScore من 46 إلى 90 يعد فوزًا في كتابي. لقد تعلمت الطريقة الصعبة للتوقف أثناء تقدمك.

النتيجة النهائية

كانت نتيجتي النهائية 90/100. المكونات الإضافية التي استخدمتها للحصول على هذه النتيجة هي:

• التحسين التلقائي (جميع الميزات قيد التشغيل)
• W3 Total Cache (فقط ميزات التخزين المؤقت للصفحة قيد التشغيل)
• WP Performance Score Booster (جميع الميزات قيد التشغيل)
• WP Smush (إصدار مجاني)

للتسجيل ، ارتفعت نقاط الهاتف المحمول من 36 إلى 78. لإصلاحها ، كان علي تحسين الصور والملفات الخاصة بي للجوال.

افكار اخيرة

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

أود أن أسمع منك. هل قمت بتحسين موقع WordPress الخاص بك باستخدام Google PageSpeed ​​Insights؟ هل كانت تجربتك تشبه تجربتي؟ هل استخدمت مكونات إضافية مختلفة لحل المشكلات؟ أود أن أسمع عن تجربتك في التعليقات.