الدليل النهائي لتحسين سرعة الصفحة لـ WordPress

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

مقدمة

لا يتحلى مستخدمو الإنترنت بالكثير من الصبر عندما يتعلق الأمر بأوقات تحميل الصفحة. نضغط على رابط أو ندخل عنوان URL وننتظر ثانية وثانية وثانية وهذا كل شيء. تشير إحصائيات Google إلى أن 50٪ من المستخدمين يتوقعون تحميل موقع للجوال في ثانيتين ومن المرجح أن يغادر 53٪ من المستخدمين الصفحة ، إذا كانت التحميل أطول من 3 ثوانٍ. هذه فترة قصيرة جدًا ، إذا كنت تعتقد أن متوسط ​​وقت تحميل الصفحة الرئيسية ، على جهاز محمول ، هو 19 ثانية (على شبكة 3G). تكون أوقات التحميل على أجهزة الكمبيوتر أسرع ويبلغ متوسط ​​وقت التحميل 5 ثوانٍ ، ولكن هذا لا يزال طويلاً للغاية.

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

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

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

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

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

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

جدول المحتويات

• أسس
  • استضافة ووردبريس
    • الاستضافة المشتركة
    • ادارة الاستضافات
    • VPS أو خوادم مخصصة
  • وورد موضوع
  • إضافات ووردبريس
• خطوات تحسين سرعة صفحة ووردبريس
  • أدوات سرعة الصفحة
    • Google PageSpeed ​​Insights
    • GTMetrix
    • اختبار سرعة موقع Pingdom
    • اختبار صفحة الويب
  • تحسين الصورة
    • دليل صغير لتحسين الصورة
    • صور Google PageSpeed ​​المحسنة
    • تحسينات الصور الأخرى
    • تحسينات دراسة الحالة
  • متصفح التخزين المؤقت
  • ضغط الموارد (Gzip أو Deflate)
  • قم بإزالة ملفات JS أو CSS غير الضرورية
  • يحظر عرض JavaScript و CSS في محتوى الجزء المرئي من الصفحة
  • جانب الخادم التخزين المؤقت
    • WP Rocket (مكون إضافي للتخزين المؤقت من جانب الخادم)
  • شبكة توصيل المحتوى
    • كلاود فلير
• النتائج النهائية
• استنتاج

أسس

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

• الاستضافة
• موضوع WordPress
• ملحقات WordPress

استضافة ووردبريس

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

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

الاستضافة المشتركة

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

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

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

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

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

ادارة الاستضافات

هذه ترقية كبيرة من الاستضافة المشتركة ، لأن موقع الويب الخاص بك يحصل على قطعة بيتزا أكبر (شريحة بيتزا كاملة ، نعم!) ، لكنها تكلف أكثر.

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

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

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

VPS أو خوادم مخصصة

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

هذا يعني أنه من خلال الخوادم المخصصة ، يمكنك التحكم في الخادم بالكامل بجميع موارده وباستخدام VPS ، يمكنك الحصول على جزء من الخادم لأنك لا تزال تشارك جهاز الخادم الفعلي مع الآخرين. عندما يتعلق الأمر بتحسين سرعة الصفحة لـ WordPress ، لا توجد قيود من جانب الخادم عندما تقوم بإعداد WordPress الخاص بك على VPS أو خادم مخصص. أنت تعرف بالضبط مقدار الموارد المتاحة لموقعك على الويب ويمكنك تكوينها حسب رغبتك. يمكنك تنفيذ الميزات المتطورة قبل أن يدعمها موفرو الاستضافة القياسيون (والذي يمكن أن يتأخر لسنوات عن تقنية برنامج الخادم).

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

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

تحسين موقع الويب المجاني ، الذي تقدمه كل استضافة مناسبة الآن ، هو ترقية إصدار PHP إلى 7.x. إذا كان موقع WordPress الخاص بك يعمل على PHP أقل من 7 ، مثل 5.6 أو حتى أقدم ، فيرجى الاتصال بدعم الاستضافة واطلب منهم تحديثه إلى أحدث إصدار مستقر. إذا كنت تبحث عن استضافة جديدة ، يمكنك أن تطلب دعمهم ، إذا كان لديهم إصدار PHP 7.x. يجب أن يردوا جميعًا بـ "نعم" ، لكن إذا لم يكن لديهم خيار استخدام PHP 7.x ، فأنا أوصي بالابتعاد عنهم. يعد PHP 7 ، مقارنة بالإصدارات القديمة ، تحسينًا كبيرًا عندما يتعلق الأمر بالسرعة والأداء ومن السهل جدًا التبديل إليه ، لذا استفد منه.

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

وورد موضوع

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

يمكننا اختبار وقت تحميل صفحة العرض التوضيحي للسمة وسنرى بسرعة ما إذا كان الموضوع محسنًا للسرعة. سوف نتحقق من أدوات سرعة الصفحة التي يجب استخدامها وكيفية استخدامها في قسم أدناه ، ولكن في الوقت الحالي ، أريد فقط إخبارك بهذه الخطوة الإضافية للتحقق من السمات ، قبل الشراء. بالطبع ، يمكن تحسين وقت تحميل الصفحة التجريبية على الأرجح ، لذلك إذا لم تحصل على درجة مثالية ، فلا داعي للقلق ، فلن تحصل سمة WordPress على درجة مثالية بنسبة 100٪ ، إلا إذا كانت تحتوي على القليل جدًا من المحتوى على صفحتها التجريبية. كقاعدة عامة ، يجب أن تبحث عن السمات غير الموجودة في الأشكال الحمراء (درجة 50 أو أقل في أدوات سرعة الصفحة).

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

إضافات ووردبريس

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

تعد مراجعة كود كل مكون إضافي فكرة جيدة ، ولكن "لا أحد لديه وقت لذلك" ، بالإضافة إلى أنك ستحتاج إلى معرفة جيدة بالبرمجة للقيام بذلك. إذا كنت تسير في هذا الطريق ، فإن الأشياء التي يجب الانتباه إليها هي المكونات الإضافية التي تضم العديد من الموارد الخارجية ، وتصدر الكثير من طلبات HTTP ، وتقدم استعلامات قاعدة بيانات غير ضرورية (غير محسّنة) وما إلى ذلك (بشكل أساسي أي شيء من شأنه أن يبطئ موقع WordPress على الويب ، دون سبب وجيه وراء ذلك).

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

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

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

خطوات تحسين سرعة صفحة ووردبريس

قبل أن نبدأ بالتحسين ، أود أن أذكر بعض الأشياء.

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

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

لماذا ليس من الجيد الذهاب لـ 100/100؟ إذا اتبعت إرشادات أدوات سرعة الصفحة وحسّنت كل شيء كما يقولون ، فقد لا يعمل موقعك بشكل صحيح. إذا قمت بنقل جميع ملفات JS أو CSS المحظورة إلى التذييل ، فسيظهر وميض CSS (سيظهر المحتوى غير المصمم أولاً وعندما يتم تحميل CSS ، فإن الموقع "يومض" في مكانه) ، سيحدث نفس الشيء مع كود JS ، من شأنه تعديل أي عناصر DOM بعد تحميل كود JS.

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

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

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

أدوات سرعة الصفحة

قد يكون تحسين سرعة الصفحة أمرًا صعبًا ، ولكن لحسن الحظ ، هناك أدوات عبر الإنترنت تجعل حياتنا أسهل وتنصحنا بما يجب القيام به ، من أجل تحسين سرعة موقعنا.

القاعدة الأولى لتحسين سرعة WordPress الخاصة بك هي: القياس دائمًا!

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

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

أدوات سرعة الصفحة التي سنلقي نظرة عليها هي:

• Google PageSpeed ​​Insights
• GTmetrix
• اختبار سرعة موقع Pingdom
• WebPageTest

هناك أدوات أخرى ، ولكن هذه هي الأكثر شيوعًا وسنلتزم بها.

Google PageSpeed ​​Insights

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

إذا كان لديك أي صور أو ملفات موارد غير محسّنة (JS أو CSS) ، فسيُنشئ ملف مضغوط مع نظرائهم المحسّنين ، والذي يمكنك استبداله على الخادم الخاص بك. أنيق جدا ، أليس كذلك؟ سننظر في تحسين الصور والكود لاحقًا ، فقط اعلم أن Google PageSpeed ​​يمكن أن يساعدك في ذلك.

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

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

• تفعيل الضغط (ضغط الموارد باستخدام gzip أو انكماش) ​​،
• تحسين الصور
• تقليل وقت استجابة الخادم ،
• التخلص من JavaScript و CSS الذي يحظر عرض المحتوى في الجزء المرئي من الصفحة ،
• تصغير JavaScript.

GTmetrix

تمنحك هذه الأداة معلومات أكثر تفصيلاً حول الأشياء التي تم تحسينها وأيها لم يتم تحسينها. يتم سرد كل تفاصيل تحسين وتصنيفها على مقياس من 0-100. يتم ترتيب القائمة حسب الأهمية ، لذلك إذا اتبعت المهام من أعلى إلى أسفل وقمت بتحسين المهام التي ليس لها درجة 100٪ ، فستكون في مسار جيد لتسريع موقع WordPress بأسرع ما يمكن.

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

يمكنك أيضًا اختبار صفحتك من 7 مواقع مختلفة في جميع أنحاء العالم ، وهو أمر لطيف ومهم أيضًا للاختبار ، والذي سنراه لاحقًا في المقالة.

لقد قمت بتشغيل أداة GTmetrix (الموقع: فانكوفر ، كندا) على موقع الاختبار الخاص بنا وحصلت على درجة PageSpeed ​​77 و YSlow على 71. باستخدام هذه الأداة ، نحصل أيضًا على هذه المعلومات المفيدة:

• وقت التحميل الكامل: 3.1 ثانية ،
• الحجم الإجمالي للصفحة: 803 كيلو بايت
• الطلبات: 54

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

اختبار سرعة موقع Pingdom

Pingdom هي أداة أخرى تعرض معلومات التحسين بشكل مختلف قليلاً. تحصل على نفس بيانات الملخص الأساسية الموجودة في أداة GTmetrix (بدون درجة YSlow). مع Pingdom ، لديك خيار لاختبار سرعة الصفحة في 4 مواقع مختلفة. تختلف النتائج باختلاف كل موقع ، مما يدل على أن موقع الخادم مهم ، لكننا سنتمكن من تحسين ذلك أيضًا (مع CDN لاحقًا في المقالة). سنستخدم أداة Pingdom لاختبار أوقات تحميل الصفحة في 4 مواقع متاحة ، نظرًا لأن اختبارات Pingdom تكتمل بشكل أسرع.

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

WebPageTest

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

إنها أداة جيدة ، تعرض تقرير شلال مفصل لكل عملية تشغيل (بشكل افتراضي ، يتم تشغيل 3 ، ولكن يمكنك تغيير ذلك في الإعدادات) وتعرض درجة A إلى F لكل من عوامل تحسين السرعة هذه:

• وقت البايت الأول (وقت الاستجابة) ،
• تمكين البقاء على قيد الحياة ،
• نقل الضغط (gzip) ،
• ضغط الصور
• محتوى ثابت ذاكرة التخزين المؤقت ،
• الاستخدام الفعال لـ CDN.

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

قمت بتشغيل هذه الأداة لموقع الاختبار الخاص بنا. يمكنك رؤية النتائج في لقطة الشاشة أدناه:

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

• Google PageSpeed ​​Insights
  • الجوال: 67
  • سطح المكتب: 71
• GTmetrix
  • سرعة الصفحة: 77
  • Y بطيء: 71

تحسين الصورة

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

يعد تحميل الصور الكبيرة غير المحسّنة والمستخدمة في مكان صغير على موقع الويب الخاص بك بمثابة "لا". مثال: لديك فتحة صورة لن تكون أكبر من 600 × 400 بكسل على موقعك وتقوم بتحميل صورة 1920 × 1080 بكسل (أو حتى أكبر!). الآن ، كرر هذا الخطأ عدة مرات وسيكون موقعك بطيئًا جدًا .

أول شيء يجب فعله هو تغيير حجم الصورة إلى الحجم المناسب. في مثالنا ، لن تكون فتحة الصورة أكبر من 600 × 400 بكسل ، لذا يجب علينا تغيير حجم الصورة إلى هذا الحجم.

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

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

دليل صغير لتحسين الصورة

اختر تنسيق الصورة الصحيح - أكثر تنسيقات الصور شيوعًا للاستخدام عبر الإنترنت هي JPEG و PNG. يمكنك حفظ الكثير على حجم ملف الصورة ، عن طريق اختيار تنسيق الصورة الصحيح (حفظ ماركو 45٪ في مقالته). يجب عليك استخدام:

• تنسيق jpg للصور ذات التدرجات اللونية والصور بملايين الألوان.
• تنسيق .png للصور ذات الألوان المحدودة (الشعارات) والصور ذات الشفافية.

تغيير حجم صورك - كما ذكرت أعلاه ، يجب عليك دائمًا تغيير حجم الصور قبل تحميلها على موقع WordPress الخاص بك. أولاً ، تحقق من حجم المساحة التي ستستخدم فيها الصورة وقم بتغيير حجمها وفقًا لذلك. يمكنك تغيير حجم الصور باستخدام برنامج معالجة الصور ، مثل GIMP أو Photoshop.

ضغط صورك - يمكن القيام بذلك باستخدام أداة ضغط الصور عبر الإنترنت أو باستخدام مكون WordPress الإضافي:

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

المكون الإضافي لضغط الصور WP : مرة أخرى ، اختبر Marko أكثر المكونات الإضافية لضغط الصور شيوعًا وأعلن الفائز: ShortPixel Image Optimizer. بعد تثبيت المكون الإضافي ، سيتعين عليك طلب مفتاح API لاستخدام المكون الإضافي (عملية بسيطة للغاية). الإعدادات الافتراضية للمكوِّن الإضافي رائعة ، لذا لا تحتاج إلى إعداد أي شيء ، ما عليك سوى الانتقال إلى Media -> Bulk ShortPixel والنقر فوق الزر "بدء التحسين". سيتم أيضًا تحسين أي صورة تم تحميلها حديثًا. ملاحظة: الإصدار المجاني من هذا البرنامج المساعد يسمح فقط بتحسين 100 صورة / شهر ، إذا كنت بحاجة إلى المزيد ، فسيتعين عليك التبديل إلى خطتهم المدفوعة. نريد لعملائنا الوصول إلى أفضل الأدوات المتاحة ، لذا فقد عقدنا شراكة مع ShortPixel والآن يحصل أعضاء ProteusClub لدينا أيضًا على 1000 رصيد مجاني لاستخدامها مع المكون الإضافي ShortPixel WordPress.

أخيرًا ، لا يمكنني أن أوصي بما يكفي لقراءة المقالة بأكملها حول تحسين الصور في WordPress.

صور Google PageSpeed ​​المحسنة

هذه طريقة بديلة حول كيفية تحسين صورك الحالية على موقع WordPress الخاص بك. إذا اتبعت الخطوات المذكورة أعلاه ، في الدليل المصغر لقسم تحسين الصور ، فربما تكون قد قمت بالفعل بتحسين الصور ، وبالتالي لن يكون لدى Google PageSpeed ​​أي صور لك. أحسنت! لا يزال بإمكانك قراءة هذا القسم لغرض إعلامي

لقد ذكرت في مقدمة أداة Google PageSpeed ​​، أن Google تنشئ ملفًا مضغوطًا بملفات محسّنة يمكنك استخدامها على موقعك. يمكنك تحميل الملف المضغوط بالضغط على هذا الرابط:

في هذا الملف المضغوط ، لديك مجلد يسمى الصورة ، والذي يحتوي على الصور المحسنة. يمكنك تحميلها عبر FTP أو تحميل ملف الاستضافة الخاص بك. استبدل / استبدل الصور في مجلدات التحميل الصحيحة (... / wp-content / uploads / ...). بعد ذلك ، يجب عليك أيضًا إنشاء الإصدارات الأصغر (الصور المصغرة) من هذه الصور في موقع WordPress الخاص بك. يمكنك القيام بذلك باستخدام المكون الإضافي Regenerate Thumbnails.

تحسينات الصور الأخرى

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

كسول جاري تحميل الصور

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

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

الارتباط الساخن للصورة

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

هذا ليس تحسينًا مباشرًا لسرعة الصفحة ، ولكنه تحسين الخادم. يمكنك حل مشكلة الارتباط الساخن ببعض التعليمات البرمجية في ملف htaccess. يمكنك الذهاب إلى أبعد من ذلك (كن شريرًا قليلاً) واستبدال الصورة المسروقة بأخرى ، ربما ليست صورة لطيفة جدًا :). يمكن القيام بذلك أيضًا في ملف htaccess. افتح ملف htaccess الخاص بك على خادمك وأضف هذا الرمز إليه. استبدل your-website.com بنطاقك ، google.com بأي مجال آخر ، تريد السماح له بالوصول إلى صورك واستبدال http: //replacing-stolen-image-url-goes-here.jpg بعنوان URL للصورة التي تريد عرضها لأي صور مسروقة.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

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

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

تحسينات دراسة الحالة

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

لذلك ، قمت بتثبيت البرنامج المساعد ShortPixel وقمت بتشغيل المحسن بالجملة. أبلغ المكون الإضافي عن متوسط ​​تحسين للصورة بنسبة 38٪. هذا عظيم!

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

بعد فرز الصور ، كانت نتائج أدوات سرعة الصفحة كما يلي:

• Google PageSpeed ​​Insights
  • الجوال: 72
  • سطح المكتب: 77
• GTmetrix
  • سرعة الصفحة: 81
  • Y بطيء: 71

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

متصفح التخزين المؤقت

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

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. أحسنت!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. هذا صعب Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

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

قبل أن نواصل ونجرب إعدادات WP Rocket المختلفة ، أود أن أذكر أنه بعد كل تغيير تقوم به ، يجب عليك التحقق من موقعك في علامة تبويب التصفح المتخفي / المتصفح الخاص . إذا قمت بتسجيل الدخول إلى موقع WordPress الخاص بك ، فلن ترى النسخة المخبأة من الموقع. في علامة تبويب المتصفح المتخفي ، لن يتم تسجيل دخولك وستحصل على نسخة مخبأة من الموقع ، حتى تتمكن من التحقق مما إذا كان يعمل بشكل جيد.

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

مسح ذاكرة التخزين المؤقت

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

ذاكرة التخزين المؤقت لها عمر يمكن ضبطه في علامة التبويب "أساسي" لإعدادات WP Rocket. أقترح ضبط هذا على يوم واحد.

تحميل ذاكرة التخزين المؤقت

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

يمكن الوصول إلى إعدادات ذاكرة التخزين المؤقت للتحميل المسبق في صفحة الإعدادات ضمن علامة التبويب "التحميل المسبق". ابحث عن خيار "برنامج التحميل المسبق" ، حيث ستجد دليلًا وخيارًا تلقائيًا. إذا قمت بتمكين خيار الروبوت التلقائي ، فسيتم تشغيل ذاكرة التخزين المؤقت للتحميل المسبق في كل مرة تقوم فيها بتحديث أو إنشاء صفحة أو في حالة انتهاء صلاحية ذاكرة التخزين المؤقت. يمكن أن يؤثر هذا الخيار على أداء الخادم الخاص بك ، لذا راقب سجلات الأداء إذا قمت بتمكينه. إذا كنت تقوم بتحديث وإنشاء الكثير من المنشورات / الصفحات ولديك استضافة مشتركة ، فإنني أنصحك بعدم تمكين هذا الخيار. يجب عليك فقط تمكين خيار bot اليدوي بدلاً من ذلك ، والذي سينشئ عنصر قائمة اختصار WP Rocket آخر ، بعنوان "Preload Cache" وسيتم تحميل ذاكرة التخزين المؤقت مسبقًا فقط عند النقر فوقه (بعد الانتهاء من تحرير المنشورات والصفحات).

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

تحميل بطيىء

لقد أوضحت بالفعل تحميل الصور البطيئة في قسم تحسين الصورة في هذه المقالة ، ولكن الآن بعد أن قمنا بتثبيت WP Rocket ، يمكننا بالفعل تمكين هذه الميزة. انتقل إلى علامة التبويب "Basic" في إعدادات WP Rocket وقم بتمكين LazyLoad للصور وإذا كنت تستخدم أي مقاطع فيديو أو إطارات مضمنة ، فيمكنك تمكين ذلك أيضًا.

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

تصغير الملفات

بعض اقتراحات GTMetrix التي لا يزال بإمكاننا تحسينها هي تصغير ملفات HTML و CSS و JS. نظرًا لأن سمة WordPress الخاصة بنا وأغلبية المكونات الإضافية الموصى بها تستخدم بالفعل إصدارات مصغرة لملفات JS / CSS ولدينا Gzip مُمكّنًا على خادمنا ، فإن تحسين WP Rocket لن يجلب أي تحسينات مهمة لموقع الاختبار الخاص بنا ، ولكن قد تكون حالتك كذلك مختلف. انتقل إلى علامة التبويب "الملفات الثابتة" في إعدادات WP Rocket وتحقق من جميع الخيارات الثلاثة ضمن خيار Minify files . احفظ الإعدادات وانتقل إلى موقع الويب الخاص بك في علامة تبويب خاصة / متخفية ، حتى تتمكن من البحث عن أي مشكلات قد تجلبها هذه الخيارات إلى موقعك. في موقع WordPress الاختباري الخاص بي ، أدى تصغير CSS إلى كسر قائمة ملف منشئ الصفحات flexbox css ، لذلك اضطررت إلى تعطيل خيار ملف تصغير CSS. عملت خيارات HTML و JS بشكل جيد.

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

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

اجمع بين ملفات JS و CSS

تخبرنا علامة التبويب YSlow في أداة GTmetrix بـ "إنشاء عدد أقل من طلبات HTTP". تقول أن WordPress الخاص بنا يستخدم 9 نصوص JS خارجية ويجب أن نحاول دمجها في 1 وأن ​​الصفحة تستخدم 4 ملفات CSS خارجية ويجب أن نحاول دمجها في ملف واحد أيضًا. إذا كنت تتذكر ، فقد أزلنا بالفعل ملفات JS و CSS غير الضرورية في قسم إزالة ملفات JS أو CSS غير الضرورية من هذه المقالة.

لا يعد دمج جميع ملفات JS و CSS في ملف واحد فكرة جيدة ، لأن المتصفحات يمكنها تنزيل 6 ملفات أصغر بالتوازي ، أسرع من ملفين كبيرين. والسبب الآخر هو أن بعض الملفات مضمنة في رأس مستندات HTML وأخرى في نهاية المستند ، لذلك يتعين عليك تقسيمها إلى ملفين على الأقل.

لدمج الملفات مع WP Rocket ، انتقل إلى علامة التبويب "Static files" في إعدادات البرنامج المساعد وقم بتمكين الخيارات الموجودة ضمن Combine files . كما هو الحال دائمًا ، تحقق من موقعك في علامة تبويب التصفح المتخفي / الخاص للتحقق من وجود أي مشكلات.

في مثالنا ، واجه WP Rocket مشكلات مرة أخرى ، بسبب مشكلة تكوين Varnish للاستضافة المشتركة المذكورة أعلاه ، لذلك اضطررت إلى تعطيل خيار دمج الملفات JS.

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

إزالة سلاسل الاستعلام من الموارد الثابتة

توصي GTMetrix بإزالة سلاسل الاستعلام من الموارد الثابتة ، لأن بعض الخوادم الوكيلة لا تخزن الموارد مؤقتًا بسلاسل الاستعلام.

سلاسل الاستعلام في مورد ثابت (عادةً ملف JS أو CSS) هي سمة URL ، والتي تحدد إصدار الملف المذكور. يبدو كالتالي :؟ ver = 2.5.8 ويتم إلحاقه في نهاية عنوان URL: http://domain.com/css/front-flex.css؟ver=2.5.8

يمكننا بسهولة إزالة سلاسل الاستعلام هذه باستخدام WP Rocket. انتقل إلى علامة التبويب "الملفات الثابتة" في إعدادات البرنامج المساعد وقم بتمكين خيار إزالة سلاسل الاستعلام .

بعد تمكين هذا الخيار ، تغيرت درجة GTmetrix PageSpeed ​​إلى 98 ، لكن وقت تحميل الصفحة لم يتغير.

CSS / JS لحظر العرض

اقتراح أداة Google PageSpeed ​​Insights الوحيد المتبقي هو "تخلص من حظر عرض جافا سكريبت و CSS في محتوى الجزء المرئي من الصفحة". هذا يعني أن هناك بعض ملفات JS أو CSS تمنع تحميل الصفحة في محتوى الجزء المرئي من الصفحة. ما تريد الأداة منا القيام به ، هو تأجيل أو تحميل موارد الحظر هذه بشكل غير متزامن.

مرة أخرى ، يأتي المكوّن الإضافي WP Rocket للإنقاذ. انتقل إلى علامة التبويب "الملفات الثابتة" وابحث عن خيارات CSS / JS لحظر العرض . هناك يمكنك تمكين خيارات JS و CSS التي يمكن أن تحل هذه المشكلة. بمجرد تمكين خيار JS ، سيظهر خيار الوضع الآمن (موصى به) . سيؤدي هذا الوضع الآمن إلى تحميل مكتبة jQuery (مكتبة WP الافتراضية المدرجة في قائمة الانتظار) في رأس الصفحة ، وتركها كملف حظر ، لكنه لن يكسر أي صفحات تحتوي على كود jQuery مضمن على الصفحة. نظرًا لأنه لا يزال يتم تحميل jQuery في الرأس ، لا تزال أداة PageSpeed ​​تشكو من وجود ملف JS يحظر العرض.

لذلك ، إذا قمت بتعطيل الوضع الآمن لموقع الاختبار الخاص بنا ، فإن أداة Google PageSpeed ​​تمنحنا درجة مثالية ، 100 على الهاتف المحمول و 100 على سطح المكتب. عظيم ، أليس كذلك؟ ليس حقيقيا! لا يزال موقعنا يعمل بشكل صحيح ، ولكن دعونا نلقي نظرة على كيفية تحميل الموقع:

يمكن إصلاح وميض المحتوى غير المصمم (FOUC) باستخدام خيار المسار الحرج CSS في إعدادات WP Rocket (أسفل خيار CSS / JS لحظر العرض). النظرية هي أنه يمكنك إضافة كود CSS المطلوب للجزء العلوي من الصفحة ، بحيث لا يظهر تأثير الوميض للنص غير المنظم عند تحميل الصفحة. هذا أصعب مما يبدو. هناك أدوات من المفترض أن تُنشئ CSS هذا من أجلك ، لكني لم أحقق نجاحًا كبيرًا معها.

لإنشاء رمز CSS للمسار الحرج:

1. قم بتعطيل المكون الإضافي WP Rocket على موقعك.
2. انتقل إلى أداة Critical Path CSS Generator.
3. أدخل عنوان URL لموقعك وقم بتشغيله.
4. انسخ كود CSS للمسار الحرج.
5. قم بتنشيط المكون الإضافي WP Rocket.
6. الصق كود CSS في مربع "المسار الحرج CSS" في إعدادات WP Rocket.
7. تحقق مما إذا كانت هناك أي مسارات URL ذات صلة في كود CSS المهم وقم بتغييرها إلى مسارات مطلقة.

هكذا يبدو تحميل موقع اختبار WordPress الخاص بنا الآن:

إنه أفضل ، لكن ما زلت لا أحب ذلك. نعم ، تعتبر درجة Google PageSpeed ​​100/100 رائعة ، ولكن إجمالي وقت التحميل يكون أبطأ ولدينا أيضًا طلبان إضافيان لأننا قمنا بتمكين خيار CSS / JS لحظر العرض. لا تزال المشكلة الرئيسية بالنسبة لي هي تجربة المستخدم لتحميل الصفحة ، لذلك قمت بتعطيل خيار WP Rocket هذا.

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

نحن على وشك الانتهاء من خطوات التحسين. الشيء الوحيد المتبقي ، هو استخدام CDN لأصول موقعنا.

شبكة توصيل المحتوى (CDN)

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

• دالاس ، تكساس (الولايات المتحدة) = 1.65 ثانية
• سان خوسيه ، كاليفورنيا (الولايات المتحدة) = 2.53 ثانية
• ستوكهولم ، السويد (الاتحاد الأوروبي) = 3.06 ثانية
• ملبورن (أستراليا) = 5.38 ث

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

• دالاس ، تكساس (الولايات المتحدة) = 0.63 ثانية
• سان خوسيه ، كاليفورنيا (الولايات المتحدة) = 0.76 ثانية
• ستوكهولم ، السويد (الاتحاد الأوروبي) = 1.21 ثانية
• ملبورن (أستراليا) = 2.24 ثانية

سنستخدم هذه الأوقات لمقارنة وقت تحميل WordPress الخاص بنا ، عندما نقوم بإعداد موقعنا لاستخدام CDN.

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

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

يتمتع استخدام WordPress CDN بالعديد من الفوائد بما في ذلك:

• تقليل زمن الوصول ، وهو الوقت الذي يجب قطعه والمسافة التي يجب قطعها أو تأخيرها.
• يقلل الوقت إلى البايت الأول (TTFB) ، وهو قياس المدة التي يجب أن ينتظرها المتصفح قبل استلام البايت الأول من البيانات من الخادم.
• يقدم المحتوى من ذاكرة التخزين المؤقت لأوقات تحميل أسرع للصفحة وضغط أقل على خادم الاستضافة (الأصل).
• يستخدم HTTP / 2 عبر الاتصالات الآمنة للاستفادة من مضاعفة الإرسال والتوازي ودفع الخادم وضغط HPACK.
• يضغط البيانات باستخدام GZIP أو Brotli لضمان أصغر حجم من ملفات HTML وأوراق الأنماط وجافا سكريبت.

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

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

كلاود فلير

انتقل أولاً إلى cloudflare.com وقم بالتسجيل للحصول على حساب مجاني جديد. بعد إنشاء حساب ، سيتعين عليك إعداد موقع الويب الخاص بك على Cloudflare ، حتى يتمكن من خدمة المحتوى الثابت الخاص بك (الأصول).

عند تسجيل الدخول إلى حساب Cloudflare الجديد الخاص بك ، سيُطلب منك إضافة موقع الويب الخاص بك (المجال) من أجل استرداد سجلات DNS تلقائيًا.

أدخل المجال الخاص بك وانقر فوق "بدء المسح". على الرغم من أنني أستخدم نطاقًا فرعيًا ( speed.gregorcapuder.com ) ، كان علي إدخال مجال الجذر فقط: gregorcapuder.com . استغرق جزء المسح حوالي دقيقة لإكماله وفي غضون ذلك ، يمكنك مشاهدة مقطع فيديو قصير يشرح ما يجري. بعد الانتهاء من المسح ، يمكنك النقر فوق الزر "متابعة".

في الخطوة التالية ، سترى جميع سجلات DNS التي يمكن أن تجدها Cloudflare لمجالنا. هنا يجب عليك إضافة أي سجلات قد تكون مفقودة ، لذا انتقل إلى القائمة وتحقق مما إذا كان هناك شيء مفقود. في مثالنا ، كان النطاق الفرعي للسرعة مفقودًا ، لذا أضفته إلى القائمة. في إدخال الاسم ، أدخلت "speed" (اسم المجال الفرعي الخاص بي) ، في عنوان IPv4 ، أدخلت عنوان IP نفسه لمجالي الرئيسي (gregorcapuder.com) ثم نقرت على "إضافة سجل". كما ترى في لقطة الشاشة أدناه ، فقد قمت بتمكين Cloudflare لمجالي الرئيسي وكذلك للنطاق الفرعي للسرعة (تم تمييزه بواسطة سحابة برتقالية مع سهم يعمل خلف السحابة). هذا يعني أنه على هذين الموقعين ، سيتم التعامل مع حركة المرور وحمايتها بواسطة Cloudflare.

عندما تنتهي من استخدام سجلات DNS ، يمكنك المتابعة إلى الخطوة التالية ، حيث تحدد خطة "موقع ويب مجاني" وتستمر.

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

بمجرد تحديث خوادم الأسماء لموقعك ، سترى حالة تغيير موقع Cloudflare الخاص بك إلى "نشط".

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

الآن ، بعد أن قمنا بإعداد جانب Cloudflare ، يجب علينا أيضًا تمكين إعدادات Cloudflare على المكون الإضافي WP Rocket الخاص بنا.

قم بتسجيل الدخول إلى لوحة تحكم مسؤول WordPress الخاصة بك وانتقل إلى إعدادات البرنامج المساعد WP Rocket. انتقل إلى علامة التبويب "CDN" ، وقم بتمكين علامة التبويب إظهار إعدادات Cloudflare وحفظ الإعدادات. سيعرض هذا علامة تبويب "Cloudflare" جديدة في إعدادات WP Rocket ويجب عليك فتحها. هناك يجب عليك إدخال البريد الإلكتروني لحساب Cloudflare والمجال ويجب عليك أيضًا نسخ ولصق مفتاح Cloudflare العالمي API. لاسترداد مفتاح API العام ، انتقل إلى لوحة معلومات Cloudflare (علامة التبويب نظرة عامة) وانقر على رابط "الحصول على مفتاح API الخاص بك". سترى قسم "مفتاح واجهة برمجة التطبيقات" في هذه الصفحة الجديدة ويجب عليك النقر فوق الزر "عرض مفتاح واجهة برمجة التطبيقات" لصف "مفتاح واجهة برمجة التطبيقات العالمية". بمجرد لصق مفتاح API العام في إعدادات WP Rocket ، أقترح أيضًا تمكين خيار "الإعدادات المثلى" في WP Rocket. احفظ الإعدادات ثم انقر فوق الزر "مسح ذاكرة التخزين المؤقت Cloudflare" ، فقط للتحقق من أن كل شيء يعمل بشكل جيد.

الآن ، بعد أن تم تكوين CDN ، يمكننا اختبار أوقات التحميل من مواقع مختلفة مرة أخرى ورؤية التحسينات (اختبارات Pingdom).

• دالاس ، تكساس (الولايات المتحدة) = 0.54 ثانية
• سان خوسيه ، كاليفورنيا (الولايات المتحدة) = 0.70 ثانية
• ستوكهولم ، السويد (الاتحاد الأوروبي) = 0.91 ثانية
• ملبورن (أستراليا) = 1.16 ثانية

كما هو متوقع ، تحسنت أوقات التحميل في أوروبا وأستراليا أكثر من غيرها. وجميع أوقات التحميل لدينا حوالي علامة ثانية واحدة أو أقل. هذا وقت تحميل عظيم!

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

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

نتائج أداة سرعة الصفحة النهائية لدينا هي:

• رؤى Google PageSpeed
  • الجوال: 91
  • سطح المكتب: 97

• GTmetrix
  • سرعة الصفحة: 98
  • Y بطيء: 91

فيما يلي لقطات الشاشة:

دعنا نقارن بيانات GTmetrix قبل التحسين وبعده:

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

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

استنتاج

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

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

هل فاتني أي خطوة لتحسين موقع الويب ، وتعتقد أنها يمكن أن تؤدي إلى تحسين مهم في وقت تحميل الصفحة؟ اسمحوا لي أن نعرف في التعليقات أدناه!

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