تحسين سرعة الصفحة: كيفية تحسين أوقات التحميل

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

في هذا الدليل الشامل ، ستتعلم كيفية قياس سرعة الصفحة (باستخدام الأدوات المجانية والمدفوعة) ، وما الذي يمكن أن يتسبب في بطء السرعات للمستخدمين ، واكتشاف 26 طريقة لتحسين أوقات التحميل. هيا نبدأ.

محتويات

1. كل ما تحتاج لمعرفته حول سرعة الصفحة
2. ما هي الأدوات التي يجب أن تستخدمها لقياس سرعة الصفحة
3. كم من الوقت يستغرق تحميل موقع ويب
4. طرق لتحسين سرعة الصفحة
5. يقيس OnPage لموقع ويب سريع
6. تحسين سرعة الصفحة الآلي

كل ما تحتاج لمعرفته حول سرعة الصفحة

لماذا وقت تحميل الموقع مهم؟

هناك العديد من الأسباب التي تجعل وقت التحميل السريع مهمًا للغاية:

1. تجربة مستخدم إيجابية: تعتقد Google أن أوقات التحميل الأطول لها تأثير شديد على معدلات الارتداد. في الواقع ، يمكن أن تؤدي زيادة وقت التحميل من 1 إلى 6 ثوانٍ إلى زيادة معدل الارتداد بنسبة 106٪ ، وهذا هو سبب كونه الآن أحد عناصر الويب الأساسية للأداء (انظر أدناه).

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

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

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

كيف يتم قياس سرعة الصفحة؟

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

• الوقت حتى البايت الأول (TTFB) : الوقت بين استدعاء موقع الويب وأول بايت تم تحميله بواسطة خادم الويب.
• First Contentful Paint (FCP) : الوقت الذي يتم فيه عرض عنصر العرض في المستعرض لأول مرة.
• أول رسم ذي مغزى (FMP) : الوقت الذي يكون لدى المستخدم انطباع بأنه تم تحميل موقع الويب.
• وقت التفاعل (TTI) : الوقت الذي تم فيه عرض موقع الويب وجاهزًا لإدخال المستخدم.

في هذه المقالة يمكنك معرفة كيفية قياس سرعة الصفحة بالضبط.

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

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

PageSpeed ​​Insights

يتم تحديث أداة Google هذه لقياس أوقات التحميل وتحسينها باستمرار. يعتمد أحدث إصدار من Pagespeed Insights على Lighthouse ، وهي أداة لتحسين مواقع الويب متاحة أيضًا كملحق في متصفح Chrome. يستخدم بيانات من CrUX ، تقرير تجربة مستخدم Chrome.

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

الشكل 1: صفحة البداية لـ Google PageSpeed ​​Insights

تحليلات كوكل

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

جوجل Search Console

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

رايت

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

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

يسلو

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

الشكل 2: Yslow

بينغدوم

يجب عليك التسجيل لاستخدام Pingdom.com. يعرض لك أوقات التحميل الخاصة بك مع الرسوم البيانية والإحصاءات ، مما يبسط التقييم. يمكنك بسهولة معرفة العناصر.

الشكل 3: بينغدوم

WebPageTest.org

باستخدام WebPageTest.org ، يمكنك محاكاة وقت التحميل باستخدام متصفحات مختلفة. يمكنك أيضًا الاختبار من مواقع مختلفة لاختبار سرعة تحميل الموقع للزوار من البلدان الأخرى.

الذي يتم تحميله بشكل أسرع

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

كم من الوقت يستغرق تحميل موقع ويب؟

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

ليس لديك أي تأثير على هذه العوامل:

• عرض النطاق الترددي: يتأثر وقت تحميل موقع الويب الخاص بك بعرض النطاق الترددي المتاح للإنترنت. مع اتصال 3G وهاتف ذكي ، سيتم تحميل موقع الويب بشكل أبطأ من اتصال DSL السريع.
• ذاكرة التخزين المؤقت للمتصفح: إذا كان المستخدم يستخدم متصفحًا لم يتم إفراغ ذاكرة التخزين المؤقت الخاصة به لفترة طويلة ، فقد يكون تحميل الموقع أبطأ بشكل ملحوظ لأن ذاكرة الكمبيوتر لا يمكنها معالجة حجم البيانات.
• قوة معالجة العميل: قد تواجه أجهزة الكمبيوتر المكتبية والهواتف الذكية القديمة تأخيرات في تحميل الصفحة لأن بنية DOM وتنفيذ البرامج النصية يتباطأ بسبب عدم كفاية الذاكرة وقوة المعالجة.

يمكنك التأثير على هذه العوامل:

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

24 طريقة لتحسين سرعة الصفحة

حسنًا ، الآن بعد أن عرفت سبب أهمية أوقات التحميل ، وكيفية قياسها لموقعك على الويب ، فلنلقِ نظرة على الطرق المختلفة التي يمكنك محاولة تحسين سرعة الصفحة بها:

1. إنشاء أوقات اتصال سريعة

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

2. استخدم CDN للوصول العالمي

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

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

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

الموفرون المعروفون هم:

• أمازون كلاودفرونت
• كلاود فلير
• ستاكباث
• wao.io

3. تحسين خادم الويب الخاص بك لسرعة الصفحة

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

4. كشف الاختناقات في البنية التحتية

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

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

5. استخدم التخزين المؤقت من جانب الخادم

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

في إعدادات برنامج خادم الويب - يتم استخدام خادم Apache HTTP و Nginx بشكل متكرر - يمكن تنشيط التخزين المؤقت من جانب الخادم وإعداده. إذا لم تكن لديك المعرفة اللازمة ، يمكنك أن تسأل موفر الاستضافة الخاص بك أو أن يكون لديك التخزين المؤقت وتدابير PageSpeed ​​الأخرى التي تقوم بها خدمة سحابية آلية (انظر أدناه).

6. استخدم التخزين المؤقت في المتصفح

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

المكونات الإضافية المحتملة للتخزين المؤقت للمتصفح باستخدام WordPress هي على سبيل المثال:

• صاروخ الفسفور الابيض
• W3 إجمالي ذاكرة التخزين المؤقت
• WP Fastest Cache

يحدث التنشيط اليدوي للتخزين المؤقت للمتصفح من خلال تعديل ملف htaccess. وبالتالي ، يمكنك تشغيل وحدتين من وحدات خادم Apache: mod_headers و mod_expires.

إذا كنت تستخدم mod_headers ، فيجب إكمال .htaccess بالشفرة التالية (المصدر - GitHub):

<FilesMatch ". (css | js | gif | pdf | jpg | jpeg | png) $">
مجموعة الرأس Cache-Control "max-age = 2592000 ، public"
</FilesMatch>

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

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

## انتهاء مخبأ ##
<IfModule mod_expires.c>
انتهاء الصلاحية
ExpiresByType image / jpg "وصول زائد سنة واحدة"
ExpiresByType image / jpeg "وصول بالإضافة إلى سنة واحدة"
ExpiresByType image / gif "وصول بالإضافة إلى سنة واحدة"
ExpiresByType image / png "وصول بالإضافة إلى سنة واحدة"
ExpiresByType text / css "وصول بالإضافة إلى شهر واحد"
ExpiresByType text / html "وصول بالإضافة إلى شهر واحد"
ExpiresByType application / pdf "الوصول بالإضافة إلى شهر واحد"
ExpiresByType text / x-javascript "وصول بالإضافة إلى شهر واحد"
ExpiresByType application / x-shockwave-flash "وصول زائد شهر واحد"
ExpiresByType image / x-icon "access plus 1 year"
الافتراضي "الوصول بالإضافة إلى شهر واحد"
</IfModule>
## انتهاء مخبأ

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

7. استخدم ضغط GZip

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

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

كيف يمكنني ضغط الملفات باستخدام gzip؟

خادم Apache هو الأكثر استخدامًا لمواقع الويب ، لذا فإن المثال التالي هو لخادم Apache.

يتم استخدام وحدتين مختلفتين: mod_deflate و mod_gzip.

1. عادة ما تكون وحدة mod_deflate مثبتة مسبقًا. باستخدام أمر وحدة التحكم التالي ، يمكنك التحقق مما إذا كان موجودًا بالفعل:

sudo apachectl -t -D DUMP_MODULES | انكماش grep

إذا حصلت على الإخراج "deflate_module (shared)" ، فإن mod_deflate مثبتة بالفعل. وإلا اتصل بمضيفك.

2. افتح الآن “httpd.conf” ، ملف تكوين Apache. يمكنك عادة العثور عليه في المجلد “/ etc / httpd / conf /”. هناك تضيف السطر التالي:

AddOutputFilterByType DEFLATE text / text / نص html / نص عادي / نص xml / تطبيق css / x-javascript
التطبيق / جافا سكريبت

يشير هذا إلى أنه يتم ضغط النص وشفرة HTML و CSS وجافا سكريبت باستخدام GZip. احفظ الملف وأعد تشغيل خادم الويب Apache. من الآن فصاعدًا ، سيتم ضغط البيانات بواسطة Apache.

8. قم بتمكين HTTP / 2

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

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

اكتشف المزيد في هذه المقالة: كيفية تحسين سرعة تحميل صفحات الويب باستخدام HTTP / 2: دليل المبتدئين.

9. ضغط الصور

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

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

10. تحسين جميع الصور

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

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

خطوات أخرى:

• قم بضغط صورك قبل تحميلها على موقع الويب الخاص بك باستخدام برنامج معالجة الصور مثل Gimp أو Adobe Photoshop. يقدم كلا البرنامجين للمبتدئين وظيفة "حفظ للويب". بهذه الطريقة ، سيتم تحسين حجم الملف تلقائيًا. باستخدام أدوات مثل kraken.io أو PNGGauntlet ، يمكنك تقليل حجم الملف عن طريق إزالة المعلومات الإضافية.
• يتم إعطاء حجم الصورة المقابل في الكود المصدري: إذا كان على المستعرض حساب حجم الرسومات نفسه ، فيمكن زيادة وقت التحميل. يجب أن يتوافق الحجم المحدد مع الحجم الأصلي للصورة المخزنة على الخادم. يمكنك أيضًا تحديد المعلومات حول حجم الصورة عبر CSS.
• إزالة العلامات الوصفية وبيانات EXIF: على سبيل المثال ، إذا كنت تستخدم صورًا من الكاميرا أو الهاتف الذكي الخاص بك ، فإنها تحتوي على الكثير من المعلومات الإضافية مثل الموقع والكاميرا المستخدمة وبيانات أخرى. باستخدام أداة مثل tinypng ، يمكنك إزالتها وتوفير مساحة التخزين.

11. استخدم تنسيق صورة WebP

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

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

<صورة>
<source type = "image / webp">
<نوع المصدر = "image / jpeg">
<img src = "img / testbild2.jpg" alt = "Fallback-Bild">
</picture>

12. قم بالتمييز بين مواقع سطح المكتب والجوال

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

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

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

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

13. إعداد التحميل البطيء

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

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

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

14. تنظيف شفرة المصدر

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

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

لذلك ، يجب عليك تقليل شفرة المصدر الخاصة بك:

• إزالة جميع التعليقات غير الضرورية.
• قم بإزالة جميع الأحرف الفارغة الزائدة.
• احذف التنسيق غير الضروري ، إذا تم ، على سبيل المثال ، العثور على تنسيق بدون محتوى في شفرة المصدر مثل "<strong> </strong>"

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

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

15. تقليل البرامج النصية الخارجية

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

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

مزيد من النصائح:

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

16. الاستعانة بمصادر خارجية لجافا سكريبت و CSS

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

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

كيفية الاستعانة بمصادر خارجية لـ JavaScript:

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

في كود HTML الخاص بموقع الويب ، قم بإزالة الأوامر التالية:

و

استبدل الأمر المحذوف بهذا الأمر:

17. تصغير ملفات CSS و JavaScript

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

مقتطف الرمز مع الأحرف الفارغة المتاحة:

كود CSS والأحرف الفارغة:

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

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

• YUI Compressor أو cssmin.js لملفات CSS
• مترجم الإغلاق لجافا سكريبت

18. قم بتحميل JavaScript و CSS في النهاية

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

لذلك يكون الموضع المثالي لملفات CSS في منطقة <head> بالموقع. ومع ذلك ، يجب عليك دمج JavaScript في تذييل موقع الويب.

يمكن أن يظهر تكامل محتمل للملفات على النحو التالي:

19. استخدم CSS3 للخلفيات

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

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

20. استخدم الجلب المسبق والعرض المسبق

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

يجب عليك ضبط شفرة المصدر للسماح بجلب الملف مسبقًا. في هذه الحالة ، يبدأ العنصر المطلوب بالسمة rel = ”الجلب المسبق“.

مثال:

<link rel = "الجلب المسبق" href = "// mysite.com/example-image.jpg">

هنا ، يتم إعادة تحميل المثال حتى قبل تحميل موقع آخر. وبالتالي يتم تقصير وقت التحميل في عرض الموقع الجديد.

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

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

<link rel = "prerender" href = "// prerendering-site.com/index">

21. تقليل عمليات إعادة التوجيه 301

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

>> عمليات إعادة التوجيه: دليل سهل الاستخدام للمبتدئين <<

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

22. تجنب الطلبات السيئة

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

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

23. استخدام AMP

تقدم Google لمشرفي المواقع مع Accelerated Mobile Pages الفرصة لتحميل مواقع الويب للجوال دون تأخير تقريبًا. لهذا الغرض ، يجب أن تفي المواقع بمتطلبات معينة حتى يمكن عرضها على الأجهزة المحمولة.

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

موارد أخرى:

• الصفحة الرئيسية لمشروع AMP
• WordPress-AMP-Plugins

24. جرب تحسين سرعة الصفحة الآلي

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

إذا كان أحد هذين الأمرين يمثل عقبة بالنسبة لك ، فيمكنك ترك تحسين سرعة الصفحات لخدمة آلية.

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

يحمي wao.io أيضًا من الهجمات الأمنية ويوفر مقاييس لمراقبة مواقع الويب وأرقام المستخدمين.

خاتمة

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

لقد اكتشفت في هذه المقالة بعض الاحتمالات. بعض الطرق سهلة التنفيذ للمبتدئين والمبتدئين في تحسين محركات البحث.

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