كيفية قياس وتحسين سرعة موقع التجارة الإلكترونية (11 نصيحة) وسبب أهميتها لتحسين معدل التحويل

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

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

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

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

هذا ما يمكنك أن تجده في هذا المنشور:

ما هي سرعة الموقع؟
لماذا تعتبر سرعة الموقع مهمة؟
كيفية التحقق من سرعة موقعك الحالية: شرح نتائج Google PageSpeed ​​Insights
أهم الطرق المدعومة بالبيانات لزيادة سرعة الصفحة
1. تحقق من سرعة مزود الاستضافة الخاص بك وقم بتحسينها
2. تحسين الصور
3. قم بتمكين التخزين المؤقت للمستعرض
4. تصغير HTML و JavaScript و CSS
5. استفد من AMP (Accelerated Mobile Pages) و PWAs (تطبيقات الويب التقدمية)
6. اقتل إضافات WordPress ذات الأداء السيئ
7. استخدم شبكة توزيع المحتوى
8. تحسين وقت استجابة الخادم الخاص بك
9. استخدم الضغط حيثما أمكن
10. تحميل الملفات بشكل غير متزامن حيثما أمكن ذلك
11. تقليل عمليات إعادة التوجيه
أدوات للمساعدة في زيادة سرعة موقعك
هل أنت جاهز لتحسين سرعة موقع التجارة الإلكترونية الخاص بك؟

يبدو جيدا؟ دعونا نحفر في ذلك الحين!

ما هي سرعة الموقع؟

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

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

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

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

لماذا تعتبر سرعة الموقع مهمة؟

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

لوقت التحميل البطيء تأثير مباشر على أرباحك النهائية. مصدر

يعد تحسين سرعة موقعك أحد أكثر الطرق ضمانًا لاكتساب ميزة تنافسية. دعنا نلقي نظرة سريعة على سبب أهميتها:

تؤثر سرعة الموقع على تصنيفات البحث

سرعة الموقع هي عامل ترتيب رئيسي لجوجل. كررت Google نفسها هذا في مناسبات عديدة. وتؤكد العديد من التحليلات المستقلة أن سرعة الموقع هي واحدة من أهم مجالات التحسين عندما يتعلق الأمر بتحسين محركات البحث.

كما يقول Edwin Toonen ، الذي يكتب لـ Yoast: "ليس عليك حتى أن تستمع جيدًا لأن الأشخاص مُحسنات محركات البحث يصرخون بها من فوق أسطح المنازل: سرعة الموقع هي كل شيء. لا يمر يوم بدون مقالة جديدة أو ورقة بيضاء أو ممثل Google أو خبير تحسين محركات البحث يخبرنا أن تحسين السرعة هو أحد أهم الأشياء التي يمكنك القيام بها الآن. وهم على حق بالطبع! "

تؤثر سرعة الموقع على معدل الارتداد

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

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

تؤثر سرعة الموقع على قيمة العميل

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

يمكن أن يؤدي تقليل سرعة موقعك إلى أقل من واحد بالمائة إلى زيادة قيمة مشاهدة الصفحة بنسبة تصل إلى 100٪. مصدر

المعاناة من سرعة الموقع المنخفضة لها آثار نفسية سلبية

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

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

على العكس من ذلك ، يوفر موقع التحميل السريع للعملاء تجربة مستخدم إيجابية (راجع 11 نصيحة UX هذه!) وينقل احترافية وجودة متجرك.

كيفية التحقق من سرعة موقعك الحالية: شرح نتائج Google PageSpeed ​​Insights

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

إليك كيفية إعطاء موقعك طبيًا كاملاً وماذا تعني النتائج:

1. توجه إلى Google PageSpeed ​​Insights واكتب عنوان URL الخاص بك في شريط النص. اضغط على "تحليل" للحصول على نتائجك. في هذا الدليل ، سنستخدم Zappos كمثال. إن أداة Google PageInsights ، التي يمكن القول إنها أفضل أداة متاحة لاختبار سرعة الموقع ، مجانية تمامًا وشاملة للغاية.

2. جنبًا إلى جنب مع النتيجة الإجمالية المضمنة في الجزء العلوي من الصفحة ، والتي تصنف صفحتك على أنها إما بطيئة أو متوسطة أو متوسطة ، سيتم تزويدك بثلاث مجموعات من النتائج لكل من الجوال وسطح المكتب:

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

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

3. لا تنسَ وجود علامتي تبويب (قائمة زرقاء في الرأس) - واحدة للجوال والأخرى لسطح المكتب - تعرضان بيانات مختلفة. ستحتاج غالبًا إلى تطبيق اقتراحات التحسين المرتبطة بكل منها على حدة.

4. يوجد في كل قسم مقياسين أساسيين للسرعة (FCP و FID) بالإضافة إلى خمسة مقاييس منفصلة في قسم "بيانات المختبر":

• First Contentful Paint FCP - في سياق أداء الويب ، يعني مصطلح "الرسم الأول" أول عنصر ويب يكون مرئيًا لمستخدم المستعرض. "أول رسم مضمون" هو ظهور أول جزء متماسك من المحتوى. تعريف "المحتوى" هنا هو أي شيء يتم تعريفه بشكل منفصل في نموذج كائن المستند - بشكل أساسي عنصر فردي ومنفصل يشكل جزءًا من التسلسل الهرمي للصفحة ، مثل صورة أو كتلة نص. جزء المحتوى هو أي شيء يمكن لمستخدمي الويب "استهلاكه". بهذه الطريقة ، يتم تمييزه عن "الطلاء الأول" ، والذي يمكن أن يكون شيئًا بسيطًا مثل تغيير الخلفية أو بكسل واحد.
• تأخير الإدخال الأول (FID) - يعتبر تأخير الإدخال الأول مقياسًا لمدى سرعة استجابة موقعك. عندما يتفاعل الزائر مع موقعك - ​​عن طريق النقر فوق ارتباط ، أو تكبير صورة ، أو تحديد خيار منتج ، وما إلى ذلك - فقد يستغرق الأمر بعض الوقت الإضافي لتلقي استجابة بسبب عمليات المستعرض في الخلفية التي "تعطل" عناصر الموقع التفاعلية بشكل فعال. يعتمد FID على بيانات المستخدم الفعلية التي جمعتها Google ، لذلك لا يتم تضمينها في بيانات المعمل.
• First Meaningful Paint - مقياس للوقت الذي يمكن فيه للمشاهدين البدء في استهلاك المحتوى بشكل واقعي. حدث الرسم الأول ذو المعنى عندما تم تحميل كل من المحتوى الرئيسي في الجزء المرئي من الصفحة وخطوط الويب. صرحت Google بأنها مقياس تجربة المستخدم الأساسي لسرعة الموقع.
• مؤشر السرعة - الوقت الذي يستغرقه تحميل صفحتك بالكامل بالمعنى المرئي. يعتمد على الوقت الذي يتوقف فيه عرض المتصفح عن التغيير في مقارنة إطار بإطار.
• أول وحدة معالجة مركزية خاملة - تشير أول وحدة معالجة مركزية خاملة إلى الوقت الذي يكون فيه موقع الويب تفاعليًا إلى حد ما على الأقل. قد لا تكون جميع العناصر التفاعلية جاهزة للعمل ، ولكن سيكون هناك العديد منها.
• وقت التفاعل - الوقت الذي يستغرقه الموقع ليتم تحميله بالكامل ويكون تفاعليًا تمامًا وجاهزًا للرد على أي إجراء من قبل الزائر.
• الحد الأقصى المحتمل لتأخير الإدخال الأول - الرقم المتوقع لأعلى مستوى ممكن من FID إذا كان سيتم اختباره. هذا الرقم يعتمد على بيانات معملية ، وليس بيانات حقيقية.

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

دعنا نلقي نظرة على بعض الأمثلة من لقطة الشاشة أدناه (سننظر في معظمها بمزيد من التفصيل في القسم أدناه):

قسم "الفرص" هو المكان الذي يتم تزويدك فيه باقتراحات ملموسة لزيادة سرعة موقعك.

• Minify JavaScript - Minification هي عملية لضغط الملفات التي تحتوي على كود (HTML ، CSS ، JavaScript ، إلخ) بحيث يمكن نقلها من الخوادم إلى المتصفحات بسرعة أكبر.
• تأجيل الصور خارج الشاشة - يتضمن تأجيل الصور خارج الشاشة تأخير وقت تحميل الصور غير المرئية ، وتقليل حجم طلب الخادم الأول وتوفير وقت تحميل أولي عام أسرع. بمجرد تحميل جميع الصور الموجودة في الجزء المرئي من الصفحة ، سيتم عرض بقية صور الصفحة.
• إزالة CSS غير المستخدمة - من الشائع جدًا أن تتضمن أوراق أنماط .css كميات كبيرة من التعليمات البرمجية غير الضرورية. يمكن أن تؤدي إزالة هذا الرمز إلى تقليل حجم ملف CSS. يمكن أن يؤدي تضمين جميع CSS في ملف واحد أيضًا إلى تقليل مقدار الوقت الذي يستغرقه المستعرض في تفسير البيانات.
• عرض الصور بتنسيقات الجيل التالي - توفر تنسيقات الصور مثل JPEG 2000 و JPEG XR و WebP (جنبًا إلى جنب مع البعض الآخر) ضغطًا أفضل من البدائل دون التضحية بالجودة.
• تقليل وقت استجابة الخادم (TTFB) - يمكن تسريع وقت استجابة الخادم بعدة طرق ، بما في ذلك عن طريق تحسين نظام إدارة المحتوى الخاص بك واختيار مزود استضافة أسرع.
• تمكين ضغط النص - عند تمكين وظيفة gzip على الخادم الخاص بك ، يتم ضغط النص في الملفات ، مما يقلل من حجمها ويسرع النقل. يمكن بعد ذلك معالجة الملفات المضغوطة بواسطة المتصفح.

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

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

يحتوي Google PageSpeed ​​Insights على وثائق إرشادية وواضحة حول جميع ميزاته واقتراحاته وهو مورد رائع إذا كان لديك أي شك إضافي.

هل تريد المزيد من الرؤى مثل هذا؟

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

في لقد قرأت سياسة الخصوصية وأوافق على شروط وأحكام الرسائل الإخبارية.

الرجاء تحديد خانة الاختيار هذه للمتابعة

رائع! لقد قمت بالتسجيل للتو. تحقق من صندوق الوارد الخاص بك لتأكيد الاشتراك.

ماذا عن الأدوات الأخرى؟

على الرغم من جميع ميزاته ، فإن PageSpeed ​​Insights لا تشوبه شائبة.

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

استخدم Pingdom و GTmetrix ، وكلاهما يسمح لك بتعيين موقع خادم الاختبار ، لتكملة الصورة التي يوفرها PageSpeed ​​Insights.

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

حسنًا ، دعنا نتعمق في بعض النصائح العملية.

فيما يلي أهم عشر خطوات يمكنك اتخاذها لضمان تحميل موقعك في غمضة عين:

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

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

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

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

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

فيما يلي الاختلافات الرئيسية بين خطط الاستضافة من حيث السرعة:

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

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

في ما يلي عدد قليل من مزودي الخدمة الأعلى تقييمًا لتجار التجزئة عبر الإنترنت:

SiteGround - لدى SiteGround عددًا من الخطط المخصصة لمنصات التجارة الإلكترونية ، بما في ذلك Magento و WooCommerce و PrestaShop.

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

InMotion Hosting - يحظى InMotion بشعبية كبيرة بين تجار التجزئة في التجارة الإلكترونية وهو أحد أفضل الخيارات المتاحة سعراً.

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

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

2. تحسين الصور

الإصدار المختصر: يعد تحسين الصور من أسهل الطرق وأسرعها لتحسين سرعة الموقع. تأكد من أن الصور بتنسيق مناسب للويب. استخدم CSS sprites للحصول على أوقات تحميل أسرع للصور.

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

يجب عليك تحسين الصور في برنامج مثل PhotoShop أو GIMP للاحتفاظ بالسيطرة الكاملة على جودة الصور. تعمل التنسيقات المختلفة بشكل أفضل مع أنواع مختلفة من الصور. بشكل عام ، على سبيل المثال ، تعد ملفات JPEG مثالية للصور الفوتوغرافية بينما يتم عرض الصور البسيطة ذات الألوان المخزنة بسرعة أكبر مثل PNG.

فيما يلي ملخص سريع لأكثر التنسيقات شيوعًا ووقت استخدامها:

• JPEG (مجموعة خبراء التصوير الفوتوغرافي المشترك) - ربما يكون تنسيق JPEG هو التنسيق الأكثر استخدامًا للصور عالية الجودة والصور الغنية بالتفاصيل. الفائدة الرئيسية هي أن صور JPEG تقدم بشكل جيد مع توفير مستوى عالٍ من الضغط. للصور ، JPEG هو الخيار المفضل. يجب عليك أيضًا التفكير في استخدام متغيرات JPEG أحدث مثل JPEG 2000 و JPEG XR ، والتي يمكن أن توفر مستويات أعلى من الضغط.
• PNG (رسومات الشبكة المحمولة) - كتنسيق ، تقع PNG بين JPEG و GIF. إنه يحقق توازنًا جيدًا بين الجودة ، ويدعم مجموعة واسعة من الألوان والحجم. تميل ملفات PNG إلى أن تكون أصغر من ملفات JPEG ولكنها لا تتمتع بنفس السعة من حيث اللون والتفاصيل. كانت هناك مخاوف بشأن التوافق مع المتصفحات القديمة ولكنها أصبحت زائدة عن الحاجة الآن إلى حد كبير.
• GIF (تنسيق تبادل الرسومات) - تعمل ملفات GIF (أحد أقدم التنسيقات على الويب) بشكل أفضل مع الصور ذات لوحات الألوان المحدودة مثل الشعارات. إذا كنت بحاجة إلى تحميل صورة تتكون أساسًا من نص ، فإن GIF هو التنسيق الذي تختاره. الفائدة الرئيسية لملفات GIF هي أنها تميل إلى أن تكون صغيرة جدًا. نظرًا لقدرة الألوان المحدودة ، لا ينبغي استخدام صور GIF للصور الغنية أو الصور الفوتوغرافية. يمكنك أيضًا استخدام ملفات GIF للرسوم المتحركة الأساسية. لا تستخدم ملفات GIF للوسائط الغنية. سيكون استخدام محتوى مستضاف من جهة خارجية (مثل YouTube) أكثر فائدة لسرعة الموقع.

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

• لا تجعل الصور أكبر مما يجب أن تكون عليه - يرتكب العديد من المصممين والمطورين خطأ تحميل الصور الكبيرة (غالبًا ما يزيد عن عدة آلاف من البكسل) على خوادمهم ثم تغيير حجمها باستخدام كود الصفحة. وهذا خطأ كبير. لا فائدة على الإطلاق من إرسال صورة بعرض 5000 بكسل إلى متصفحات زوارك إذا كانت ستعرض فقط عند 1000 بكسل على صفحة المنتج. في كثير من الأحيان ، يجب أن تكون الصور كبيرة نسبيًا لتمكين وظيفة التكبير / التصغير ، ولكن اجعلها صغيرة قدر الإمكان. قم بتغيير حجم الصور قبل تحميلها.
• ضغط الصور قبل تحميلها - يقوم الضغط بإزالة جميع المعلومات الزائدة عن الحاجة من ملفات الصور الخاصة بك ، وبالتالي تقليل حجمها. قد يتم تضمين تفاصيل معينة "غير مرئية" ، مثل وقت التقاط الصورة ، في الملف. يمكن استخدام أدوات مثل TinyPNG و JPEG Optimizer والمكونات الإضافية مثل WPSmush لتنفيذ هذه المهمة بسرعة. جميع الخطط المدفوعة المطلوبة للاستخدام الكثيف معقولة جدًا.
• لا تستخدم صورًا غير ضرورية على الصفحات - كل صورة تثقل الوقت المستغرق لتحميل موقعك بالكامل ، لذلك لا تستخدم صورًا أكثر مما هو ضروري للغاية. من السهل الوقوع في فخ تضمين الصور فقط من أجلها. لن تؤذي لقطة أخرى للمنتج ، أليس كذلك؟ لكن من الممارسات الجيدة التخلص من الصور غير الضرورية عند إنشاء صفحات المنتج (راجع قوالب صفحة المنتج الرائعة). قد ترغب أيضًا في الاستفادة من "التحميل البطيء" لعرض صور الجزء المرئي من الصفحة أولاً (بدلاً من جميع الصور على الصفحة في وقت واحد). لن يتم تحميل الصور التي قمت بضبطها على "التحميل البطيء" في كود HTML إلا بعد أن تكون المعلومات الموجودة أعلى الصفحة مرئية للزوار ، أو عندما يبدأ الزائر في التمرير.

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

3. قم بتمكين التخزين المؤقت للمستعرض

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

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

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

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

4. تصغير HTML و JavaScript و CSS

إصدار قصير: استخدم CDN (شبكة توصيل المحتوى) لتمكين التصغير التلقائي وتقليل أحجام الملفات بنسبة تصل إلى 60٪. يعد إعداد CDN عملية مباشرة نسبيًا أصبحت ممكنة بفضل الخدمات المعروفة مثل CloudFlare و Amazon AWS.

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

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

يمكن أن يؤدي التصغير إلى تقليل حجم ملفات الويب بشكل كبير. مصدر

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

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

5. استفد من AMP (Accelerated Mobile Pages) و PWAs (تطبيقات الويب التقدمية)

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

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

ما هي بالضبط AMPs و PWAs؟ فيما يلي نظرة عامة سريعة:

• Accelerated Mobile Page (AMP) - AMP عبارة عن إطار عمل تطوير - يتكون من مجموعة فرعية HTML (AMP HTML) ، وإطار عمل JavaScript ، وشبكة CDN اختيارية (شبكة توصيل المحتوى) - تم إنشاؤها بواسطة Google للسماح للمطورين بتقديم البرق- صفحات محمولة سريعة دون الحاجة إلى استثمار موارد كبيرة في تحسين السرعة. بينما تم تطوير AMP في البداية للمواقع المستندة إلى المحتوى (يمكنك رؤية سهم البرق الصغير في نتائج البحث للعديد من الصفحات الإخبارية) ، إلا أنها تزداد شعبية بين تجار التجزئة عبر الإنترنت.
• تطبيق الويب التقدمي (PWA) - تشبه تطبيقات الويب التقدمية تطبيقات الأجهزة المحمولة التي يتم الوصول إليها من خلال متصفح الهاتف المحمول. إنهم يكررون العديد من ميزات التطبيقات ، مثل الوصول من خلال رمز على الشاشة الرئيسية للجوال ودفع الإشعارات ، ولكن دون الحاجة إلى إنشاء برنامج مخصص أو لتثبيت المستخدمين أي شيء على هواتفهم.

هناك بعض الاختلافات الرئيسية بين الاثنين (والكثير من الجدل) ولكن كلاهما يعمل على تحسين سرعة موقع الجوال. يمكنك التعرف على الجوانب العملية لـ AMPs و PWAs من وثائق Google الشاملة.

6. اقتل إضافات WordPress ذات الأداء السيئ

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

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

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

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

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

7. استخدم شبكة توزيع المحتوى

نسخة قصيرة: CDNs (توزيع المحتوى / شبكات التوصيل) غير مكلفة للاشتراك فيها وسهلة التنفيذ.

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

تعمل شبكات CDN على تخفيف الآثار السلبية لنقل البيانات عبر مسافات جغرافية واسعة. مصدر

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

يمكن أن يساعدك استخدام CDN أيضًا في التحكم في تكاليف النطاق الترددي (إذا كنت تدفعها) والتعامل مع ارتفاعات حركة المرور.

8. تحسين وقت استجابة الخادم الخاص بك

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

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

يمكنك التحقق من وقتك حتى البايت الأول باستخدام WebPageTest. يجب أن يكون أقل من 200 مللي ثانية.

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

إنها المنطقة الثانية التي نهتم بها هنا. Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. مصدر
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. لكن الأمر يستحق ذلك. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.