كيفية تحسين وقت تحميل الصفحة وتحسين مُحسنات محركات البحث الخاصة بك؟

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

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

لماذا ا؟

افترض أن لديك معدل تحويل 3٪. تحصل على ثلاثة توقعات مقابل كل 100 نقرة. الآن ، ماذا لو ارتد الثلاثة جميعًا لأن صفحتك المقصودة يتم تحميلها في سنوات الديناصورات؟ تخيل التأثير على أرباحك النهائية.

في هذا المنشور ، سنوضح لك كيفية تجنب هذا السيناريو. هناك 5 خطوات لتحسين وقت تحميل صفحتك.

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

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

قم بتوصيل عنوان URL لنطاقك في GTMetrix ودع الأداة تعمل بسحرها.

في غضون ثوانٍ قليلة ، ستقوم بملء الأرقام وتعيين تقدير لك.

سيعين أيضًا مقدار الوقت الذي يستغرقه كل عنصر في الصفحة في التحميل. على سبيل المثال ، وفقًا للصورة أعلاه ، استغرق تحميل FCP أو First Color Paint 5.5 ثانية. إجمالي وقت تحميل الصفحة كسول 7.3 ثانية!

تضع الأداة أيضًا قائمة بالاقتراحات لزيادة سرعة تحميل صفحتك ...

... وبعض النصائح الأخرى:

يوضح القسم التالي كيفية الحصول على درجة سرعة أسرع على GTMetrix.

الخطوة الثانية: تحسين موقع الويب الخاص بك لزيادة سرعة تحميل الصفحة.

نصائح لتحسين صورة SEO

كيف تقلل حجم الصورة؟

كل موقع هو ملف يتم تحميله من الخوادم عند الطلب. تريد أن يكون حجم الملف هذا ضئيلاً لتعزيز التحميل السريع.

عادة ما تكون الصور ضخمة الحجم! يستغرقون دهورًا للتحميل.

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

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

• ضغط الصورة
• اقتصاص الصور
• تغيير حجم الصور

ضغط الصورة

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

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

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

من هنا ، هناك طريقتان لتحقيق المزيد من الضغط.

1. ضغط الصور على الإنترنت

توجه لضغط JPG وتحميل صورة JPG الخاصة بك. تضغط الأداة صورتك وتخبر مقدار ضغطها. قم بتنزيل الصورة المضغوطة واستخدمها لصفحة الويب الخاصة بك.

2. استخدم الإضافات لضغط الصور

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

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

اختر بين الضغط الخاسر / بدون فقدان البيانات

يمكن أن يكون الضغط مع فقدان / ضياع. إنها تمثل درجة ضغط صورك.

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

جرب أيهما أفضل بالنسبة لك.

صور المحاصيل

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

قم بتدوين أبعاد الصورة التي تناسب مدونتك. يجب أن تكون الصورة الرئيسية وأحجام الصور المميزة متسقة. ومع ذلك ، يمكن اقتصاص العناصر المرئية الداعمة لعرض ما هو ضروري.

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

تغيير حجم الصور على MS Paint

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

1. افتح صورتك في MS Paint. سترى خيار تغيير الحجم.
2. عيّن النسبة المئوية لتغيير الحجم ، والآن لديك نسخة أصغر بكثير من حيث الأبعاد والحجم. يحفظ الأحمال على حجم الملف!

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

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

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

لا يوفر هذا وقت التحميل الأولي فحسب ، بل يحافظ أيضًا على النطاق الترددي.

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

كيفية تنفيذ Lazy Load على موقع الويب الخاص بك؟

يمكن أن يساعدك المكون الإضافي a3 Lazy Load في تنفيذ التحميل البطيء بسرعة.

اختر الخط المناسب.

غالبًا ما يقع الخط ضمن اختصاص التصميم ؛ نادرًا ما يُنظر إليه على أنه عامل أداء.

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

للحصول على سرعة تحميل سريعة ، يجب عليك اختيار الخطوط التي يتم تحميلها بسرعة.

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

دك الكود

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

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

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

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

وهذه هي الطريقة التي فعلتها:

تصغير JS / CSS

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

الاستفادة من التخزين المؤقت

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

أستخدم المكوّن الإضافي LiteSpeed ​​Cache لتقليل الكود وذاكرة التخزين المؤقت.

الخطوة الثالثة: فكر في تغيير مزود استضافة الويب الخاص بك.

هل تعمل السيارة الرياضية الديناميكية الهوائية على مادة الكيروسين؟ لا.

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

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

يقوم العديد من مضيفي الويب الآخرين بهذه المهمة نيابة عنك. حدد ما يناسبك بناءً على ميزانيتك وموقعك.

فيما يلي دليل كامل لتغيير مضيف الويب الخاص بك.

الخطوة الرابعة: استخدام شبكة توزيع المحتوى (CDN.)

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

CDN عبارة عن مجموعة من الخوادم العالمية الموجودة في مراكز بيانات متعددة في جميع أنحاء العالم. يمكّن الزائر من الاتصال بخادم أقرب جغرافيًا بدلاً من الخادم المنزلي. يقوم بذلك عن طريق الاستفادة من الخوادم في نقاط التبادل بين الشبكات المختلفة.

تعمل المسافة المنخفضة على تعزيز سرعة عرض صفحة الويب الخاصة بك.

أستخدم Cloudflare CDN ، وقد خدم غرضه بشكل كبير.

الخطوة الخامسة (اختيارية): استخدم Accelerated Mobile Pages (AMP) لزيادة سرعة تحميل صفحات الجوال

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

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

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

لقد كتبت دليلًا مفصلاً حول تحديد ما إذا كنت تريد تنفيذ AMP أم لا.

نتائج

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

يتم تحميله في 1.2 ثانية. حوالي 6 أضعاف زيادة.

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