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

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

خدمات قياس سرعة تحميل صفحات الموقع

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

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

تحسين سرعة تحميل صفحات الموقع باستخدام Google PageSpeed

في الواقع ، كل شيء أبسط مما يبدو للوهلة الأولى ، لكني أريد أن أشير إلى اللحظة التي باستخدام جوجللا يرى PageSpeed ​​Insights جميع النقاط التي يمكن أن تزيد من سرعة تحميل صفحات الموقع سوءًا ، لكنها مناسبة تمامًا ، من خلال استكمال جميع النقاط بناءً على طلب الخدمة ، يمكنك تحسين السرعة بشكل كبير. للحصول على تحليل أكثر تفصيلاً للعوامل التي تؤثر على سرعة تحميل موقع الويب ، تحتاج إلى استخدام متصفح Mozilla Firefox مع إضافة Firebug ومكوِّن PageSpeed ​​الإضافي لمتصفح Firefox.

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

لذلك ، بعد تثبيت المكون الإضافي وإضافة Firebug ، سيظهر زر مع صورة خنفساء في الزاوية اليمنى العليا.

انتقل إلى الموقع الذي تريد إجراء التحليل له ، وانقر فوق الزر الذي يحتوي على الخنفساء. ستفتح أمامك نافذة ، وآخر علامة تبويب منها تسمى Page Speed. بعد النقر فوق علامة التبويب ، ستظهر نافذة بها زر. تحليل الأداء، تحتاج إلى النقر فوق الزر والانتظار حتى يتم تحليل الصفحة. بعد ذلك ، سترى قائمة بجميع التوصيات التي تحتاج إلى اتباعها لتحسين سرعة تحميل الصفحات على الموقع. بعد معالجة قصيرة لمحتوى صفحات المدونة ، حققت نتيجة على PageSpeed ​​= 94 من 100 نقطة ممكنة ، وهو أمر جيد جدًا ، يمكنك بالتأكيد تحسين النتيجة ، ولكن حتى الآن هذا ليس بالغ الأهمية ، الشيء هو أنني قد قضيت على جميع نقاط التدخل الرئيسية.

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

لذلك ، دعنا الآن نلقي نظرة على التوصيات الرئيسية التي تحتاج إلى اتباعها لتحسين سرعة تحميل الصفحات على موقعك:

قم بتشغيل الضغط- لتكوين ضغط xml و css و js و html بتنسيق gzip ، أضف الكود التالي إلى ملف htaccess على خادم ftp الخاص بالموقع:

AddOutputFilterByType DEFLATE text / html text / normal text / xml application / xml application / xhtml + xml text / javascript text / css application / x-javascript BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4.0 no-gzip BrowserMatch bMSIE! No-gzip! Gzip-only-text / html mod_gzip_on نعم mod_gzip_item_include file \ .js $ mod_gzip_item_include file \ .css $

قدم الصور بالنسب التي تريدها- في ملفات CSS ، من الضروري تعيين نسب ثابتة للصور ، بدلاً من تغييرها باستخدام CSS.

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

مجموعة رأس التحكم في ذاكرة التخزين المؤقت: خاصة FileETag حجم MTime ExpiresActive on ExpiresDefault "وصول زائد 7 أيام" BrowserMatch "MSIE" Force-no-V BrowserMatch "Mozilla / 4. (2)" force-no-var

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

تحسين الصور- لتقليل حجم الصفحة وبالتالي زيادة سرعة التحميل ، ستحتاج إلى استخدام مبدأ نسخ جميع صور الموقع من خادم بروتوكول نقل الملفاتوتحميل دفعة لمزيد من المعالجة في الخدمة http://www.smushit.com/ ، فإن الإجراء طويل جدًا إذا تغير عدد الصور على موقعك بالآلاف. قد تحدث أخطاء في ذلك ملفات gifسيتم ضغطه إلى jpg أو png ، بينما يتغير اسم الملف ، يجب أن تأخذ في الاعتبار هذه اللحظةإذا كانت هناك صور تنسيق gifمن الأفضل تنزيلها بشكل منفصل ثم تعديلها يدويًا. التوصيات:

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

تأجيل تحليل نص جافا - يمكنك تشغيل نص برمجي لبعض الوقت عند تحميل مستند باستخدام الكود:

تقصير نصوص JS وأنماط CSS- تحتاج إلى استخدام الخدمة: http://www.refresh-sf.com/yui/ التي تزيل المسافات الزائدة في الكود وبالتالي توفير مساحة الملف.

تصغير HTML- لتقليل صفحات HTMLيمكنك إزالة المسافات الزائدة وعلامات الاقتباس المساعدة ، والتي يمكن حذفها في مواقف محددة

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

حدد Vary header: Accept-Encoding- يجب أن ترجع جميع الملفات المفتوحة للتخزين المؤقت رأسًا ، فقط أضف الكود إلى .htaccess على خادم ftp:

مجموعة الرأس Cache-control: private Header append Vary Accept-Encoding مجموعة رأس التحكم في ذاكرة التخزين المؤقت: عامة

ملاحظة .:لتقليل عدد الطلبات إلى الملفات ، من الضروري تقليل عدد أنماط CSS ودمجها في ملف واحد ، ومن الناحية المثالية ، يجب أيضًا دمج البرامج النصية js في ملف واحد.

استنتاج

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

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

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

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

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

إذا هيا بنا:

1. قم بتقليل عدد طلبات HTTP

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

ولكن كيفية تقليل عدد الطلبات إلى الخادم دون التأثير مظهر خارجيصفحات؟

2. ضع ملفات CSS في بداية الصفحة

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

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

3. ضع جافا سكريبت في نهاية الصفحة

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

أيضًا ، تمنع ملفات .js الخارجية التحميل المتوازي. توصي مواصفات HTTP / 1.1 ألا تقوم المتصفحات بتنزيل أكثر من مكونين لصفحة ويب بالتوازي من مضيف واحد. وبالتالي ، إذا كانت الصور الخاصة بموقعك موجودة على مضيفين مختلفين ، فستحصل على أكثر من تنزيلين متوازيين. وعندما يتم تحميل البرنامج النصي ، لن يبدأ المتصفح أي تنزيلات أخرى ، حتى من مضيفين آخرين.

4. تصغير Css وجافا سكريبت

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

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

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

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

لذلك ، قم بكشف رأس انتهاء الصلاحية HTTP كلما أمكن ذلك ، لعدة أيام أو حتى أشهر مقدمًا. لكي يرسل خادم الويب Apache رؤوس Expires HTTP المقابلة للتوصيات ، تحتاج إلى إضافة الأسطر التالية إلى ملف htaccess الموجود في المجلد الجذر للموقع:
رأس إلحاق Cache-Control "عام" FileETag MTime Size ExpiresActive On ExpiresDefault "بالإضافة إلى 0 دقيقة" وصول ExpiresByType image / ico "بالإضافة إلى 1 سنة وصول" ExpiresByType text / css "بالإضافة إلى سنة واحدة" ExpiresByType text / javascript "access plus 1 years" ExpiresByType image / gif "وصول بالإضافة إلى سنة واحدة" وصول ExpiresByType image / jpg "بالإضافة إلى 1 سنة" وصول ExpiresByType image / jpeg "بالإضافة إلى 1 سنة وصول" ExpiresByType image / bmp "بالإضافة إلى سنة واحدة" وصول ExpiresByType image / png "بالإضافة إلى سنة واحدة"
يتحقق هذا المقتطف من ملف تكوين خادم الويب Apache من الوحدة النمطية mod_expires ، وإذا كان mod_expires متاحًا ، فإنه يُمكّن رؤوس HTTP Expires التي تعين الكائنات المذكورة أعلاه في المتصفح وذاكرة التخزين المؤقت للوكيل لمدة عام واحد من وقت تحميلها لأول مرة. بعد تعيين هذا العمر لذاكرة التخزين المؤقت للمتصفح ، قد يكون من الصعب تحديث الملفات. لذلك ، إذا قمت بتغيير محتوى ملف css أو javascript وتريد تحديث هذه التغييرات في ذاكرة التخزين المؤقت للمتصفح ، فأنت بحاجة إلى تغيير اسم الملف نفسه. عادةً ما يتم إضافة إصدار الملف إلى اسم الملف ، على سبيل المثال: styles.v1.css

7. استخدم CDN لتنزيل مكتبات JavaScript الشعبية

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

8. تحسين الصور الخاصة بك

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

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

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

وهنا عدد قليل خدمات عبر الانترنتلتحسين الصور:

9. لا تحجيم الصور

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

10. استخدم ضغط Gzip

أظهرت الأبحاث أن ضغط gzip ملف نصيتتيح لك ميزة "On the fly" في 95-98٪ من الحالات تقليل وقت نقل الملف إلى المتصفح. إذا قمت بتخزين نسخ مؤرشفة من الملفات على الخادم (في ذاكرة الخادم الوكيل أو ببساطة على قرص) ، فيمكن تحرير الاتصال في الحالة العامة بشكل أسرع 3-4 مرات.

بدءًا من HTTP / 1.1 ، يشير عملاء الويب إلى أنواع الضغط التي يدعمونها عن طريق تعيين رأس Accept-Encoding في طلب HTTP.

قبول-ترميز: gzip ، انكماش

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

ترميز المحتوى: gzip

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

لتمكين ضغط GZIP على موقعك ، تحتاج إلى كتابة سطور التعليمات البرمجية التالية في ملف .htaccess:
AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE text / javascript AddOutputFilterByType DEFLATE text / css BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4 \ .0 no-gzip BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html

لو من هناعملت ، ثم رائعة ، إذا لم تكن كذلك ، فيمكنك تجربة الكود التالي:

AddOutputFilterByType DEFLATE text / html text / normal text / xml application / xml application / xhtml + xml text / javascript text / css application / x-javascript BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4.0 no-gzip BrowserMatch bMSIE! No-gzip! Gzip-only-text / html mod_gzip_on نعم mod_gzip_item_include file \ .js $ mod_gzip_item_include file \ .css $

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

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

إذا فاتك شيء أو كان لديك شيء تضيفه - اكتب رأيك في التعليقات أدناه على هذا المنشور. شكرا للانتباه!

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

ما هي سرعة التنزيل العادية

أسرع كلما كان ذلك أفضل. ولكن في المتوسط ​​، من الطبيعي جدًا أن يتم تحميل 2-3 ثوانٍ للجزء الرئيسي من محتوى الصفحة.

ما الذي يحدد سرعة التنزيل

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

يمكن أن يتباطأ تحميل الموقع بسبب المشاكل على كل جانب وبينهما.

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

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

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

من بين العديد من خدمات اختبار سرعة مواقع الويب على الإنترنت ، يمكن القول أن PageSpeed ​​من Google هي الأكثر شيوعًا. من السهل التعامل معها - نشير إلى عنوان الموقع ونضغط على الزر "تحليل".

نتيجة لذلك ، سنرى المؤشرات التالية (منفصلة لأجهزة الكمبيوتر والجوال):

• بعد الوقت الذي يتلقى فيه المتصفح استجابة من الخادم ويبدأ في عرض محتوى الصفحة (FCP - First Contentful Paint).
• كم من الوقت يستغرق للمستخدم لمشاهدة المحتوى الرئيسي في المتصفح (DCL - DOM Content Loaded).
• كيف يتم تحسين الموقع من حيث سرعة التحميل.
• توصيات محددة للتحسين. من خلال النقر على روابط "كيفية الإصلاح" ، نرى عناوين الصور والملفات التي بها مشكلات والتي تحتاج إلى القيام بشيء ما (الضغط بشكل أساسي).

يُنصح بالدخول إلى المنطقة الخضراء - سواء في قسم "سرعة الصفحة" أو في قسم "التحسين".

مرة اخرى خدمة جيدةللتحقق من سرعة التنزيل باللغة الإنجليزية - Pingdom. سمة مميزة- توضح هذه الرسوم البيانية الجميلة (تسمى الشلال) الملفات وترتيبها ومدة تحميلها:

والآن إلى النقطة:

كيفية تسريع موقع الويب الخاص بك

الخطوة 1. تحسين الصورة

الصور غير المحسّنة هي الجزء "الأصعب" من الموقع. لذلك ، يمكن أن يؤدي العمل بالصور إلى زيادة السرعة بشكل كبير.

ما الذي ننظر إليه:

حجم الصورة (العرض والارتفاع)

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

وزن الصورة (كيلوبايت)

يمكن (ويجب) ضغط الصور من الكاميرا في الحجم قبل نشرها على الموقع. يتم ذلك إما في Photoshop (أو محرر صور آخر) ، أو من خلال الخدمات عبر الإنترنت مثل TinyPNG أو Optimizilla.

معاينة للصور الكبيرة

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

على سبيل المثال ، يستخدم Sportmaster صور المنتج في ثلاثة إصدارات:

صورة لقائمة المنتجات (وزنها 7 كيلو بايت)

صورة لبطاقة المنتج (وزنها 18 كيلو بايت)

صورة لمشاهدة المنتج بـ "عدسة مكبرة" (وزنها 942 كيلو بايت)

تخيل كم من الوقت سيستغرق تحميل قائمة البضائع إذا استخدم Sportmaster الصور الأصلية فقط (تلك التي تحتوي على أكثر من 900 كيلوبايت).

عند التحقق من سرعة الموقع من خلال Google PageSpeed ​​، ستتلقى قائمة جاهزة من الصور التي يجب تحسينها:

الخطوة 2. ضغط Gzip

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

كيفية تمكين ضغط Gzip:

إذا كان لديك حق الوصول إلى ملف htaccess ، أضف الأسطر التالية إليه (في نهاية الملف):


AddOutputFilterByType DEFLATE text / نص html / نص عادي / تطبيق css / json
AddOutputFilterByType DEFLATE text / تطبيق javascript / تطبيق javascript / x-javascript
AddOutputFilterByType DEFLATE text / xml application / xml text / x-component
AddOutputFilterByType DEFLATE application / تطبيق x-font-ttf / x-font-opentype image / svg + xml


إذا لم يكن لديك Apache ، ولكن Nginx (من يدري ، سيفهم) ، فأنت بحاجة إلى ملف التكوين nginx.conf. أضف الكود إلى قسم http (...) وأعد تشغيل الخادم:

تشغيل gzip
تشغيل gzip_static ؛
gzip_comp_level 5 ؛
gzip_min_length 1024 ؛
gzip_proxied أي ؛
نص gzip_types / نص عادي / css application / json application / x-javascript text / xml application / xml application / xml + rss text / javascript application / javascript ؛

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

إذا نجح الضغط ، فسترى في نتائج فحص PageSpeed ​​(في مجموعة "تقنيات التحسين المنفذة"):

الخطوة 3. التخزين المؤقت من جانب المستعرض

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

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

من خلال ملف htaccess (نقوم بتخزين الملفات الثابتة مؤقتًا لمدة 10 أيام):


انتهاء الصلاحية
الافتراضي "وصول زائد 10 أيام"
ExpiresByType image / gif "وصول بالإضافة إلى 10 أيام"
ExpiresByType image / jpg "وصول بالإضافة إلى 10 أيام"
ExpiresByType image / jpeg "وصول بالإضافة إلى 10 أيام"
ExpiresByType image / png "وصول بالإضافة إلى 10 أيام"
ExpiresByType image / svg + xml "وصول بالإضافة إلى 10 أيام"
ExpiresByType text / css "وصول بالإضافة إلى 10 أيام"


بالنسبة إلى Nginx ، أضف إلى التكوين:

الخادم (
...
الموقع ~ * \. (jpg | jpeg | gif | png | ico | css | js | txt) $ (
الجذر /var/www/user/data/www/site.ru ؛
تنتهي 10 د
}
...
}

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

على غرار قائمة الصور ، ينتج Google PageSpeed ​​قائمة بالموارد التي لم يتم تكوين التخزين المؤقت لها ، ولكن يمكنك:

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

الخطوة 4. تصغير ملفات css و js

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

مثال على الكود العادي:

غلاف عداد السرعة (
الموقف: نسبي ؛
}
.speedometer-wrapper .list (
أعلى الهامش: 80 بكسل ؛
الهامش الأيسر: -20 بكسل ؛
الحشو السفلي: 85 بكسل ؛
}

بعد التصغير:

غلاف عداد السرعة (الموضع: نسبي). قائمة غلاف عداد السرعة (الهامش العلوي: 80 بكسل ؛ الهامش الأيسر: -20 بكسل ؛ الحشو السفلي: 85 بكسل)

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

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

تعرض PageSpeed ​​هنا أيضًا قائمة بالملفات بعناية ، والتي يمكن تقليل حجمها عن طريق تصغير:

الخطوة 5. ترتيب تحميل ملفات css و js

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

لكي يقوم المتصفح بتحميل ملفات الموقع بالطريقة المثلى ، يوصى بتضمين جميع ملفات الأنماط (css) والخط في بداية كود الصفحة (في العلامة ) ، وجميع ملفات البرامج النصية (js) - في نهاية الصفحة ، قبل علامة الإغلاق.

...
rel = "stylesheet" href = " //fonts.googleapis.com/css؟family=Roboto:300،400،500&subset=latin،cyrillic"type =" text / css ">
rel = "stylesheet" href = "/ inc / min / styles.min.css" type = "text / css">
rel = "stylesheet" href = "/ css / main.css" type = "text / css">
...


...

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

الخطوة 6. الإضافات أو العدادات الإضافية

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

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

الخطوة 7. استخدام CDN

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

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

عادةً ما يتم استخدام CDN في حالتين:

• تحميل البرامج النصية لجهات خارجية. هذه كلها هي نفس jQuery و Bootstrap و Web Fonts. على سبيل المثال ، يمكنك إخبار المتصفح بتنزيلها ليس من الخادم الخاص به ، ولكن من خوادم Google أو Bootstrap أو شبكات CDN الأخرى.
• تنزيل الصور والنصوص من شبكات CDN الخاصة بك. تقوم المواقع الكبيرة (Ozon ، Avito ، وما إلى ذلك) بإعداد شبكات CDN الخاصة بها ، إما باستخدام خوادمها الخاصة ، أو (في كثير من الأحيان) خوادم شبكات CDN ، على سبيل المثال ، Google Cloud أو StackPath. قامت بعض أنظمة إدارة المحتوى بالفعل بتضمين دعم CDN في وظائفها. على سبيل المثال ، يحتوي Bitrix على وحدة "تسريع موقع الويب (CDN)" مجانًا.

الخطوة 8. تقليل عدد طلبات http

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

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

التخزين المؤقت المُهيأ للمتصفح (الخطوة 3) وإزالة البرامج النصية غير الضرورية (الخطوة 6) يقلل أيضًا من عدد طلبات http.

الخطوة 9. تحسين الخطوط

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

يمكنك أيضًا تقليل عدد الملفات عن طريق التخلص من استخدام التنسيقات القديمة. في السابق ، تم تحميل كل خط بتنسيقات eot و ttf و woff و svg لعرضه بشكل صحيح في المتصفحات. تتيح لنا المتصفحات الحديثة في الوقت الحاضر قصر أنفسنا على تنسيقين فقط - woff و woff2.

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

الخطوة 10. تقليص كود HTML

بالإضافة إلى ضغط ملفات الأنماط والبرامج النصية (الخطوة 4) ، يمكنك تكوين تصغير رمز HTML للصفحة نفسها. أعتقد أن هذا مناسب للصفحات الطويلة - مقالات المدونات وقوائم المنتجات الكبيرة وما إلى ذلك. لتكوينه ، يجب أن تبحث عن مكون إضافي مناسب لنظام إدارة المحتوى الخاص بك (على سبيل المثال ، Html Minifier لـ Joomla).

الخطوة 11. تحسين أداء الخادم

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

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

الخطوة 12. تحسين البرامج النصية وقواعد البيانات

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

لذلك ، عند اختيار CMS لموقع ويب ، يوصى بالبحث عن المحركات الشائعة (Bitrix و Open Cart و WordPress و MODx وما إلى ذلك) ، والتي أثبتت أدائها وموثوقيتها. ونظرًا لأن هذه الأنظمة يتم تحسينها باستمرار (بما في ذلك من حيث السرعة) ، يجب عليك تحديث نظام إدارة المحتوى بانتظام على موقع الويب الخاص بك.

لا سلحفات

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

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

يعد وقت تحميل الموقع من أهم المؤشرات التي تؤثر على سلوك مستخدمي الموقع. دعونا نفهم ذلك.

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

• انخفاض في عدد المشاهدات بنسبة 11٪ ؛
• انخفاض في معدل رضا المستخدمين بنسبة 16٪ ؛
• تخفيض التحويل يصل إلى 6٪.

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

تعمل بضع ثوانٍ إضافية من وقت تحميل موقع الويب على تقليل فرص جذب الزوار وتحقيق المبيعات.

أجرى KISSmetrics دراسة حول كيفية تأثير سرعة تحميل موقع الويب على سلوك المستخدم والعميل:

• يتوقع 47٪ من المستخدمين فتح الصفحة في أقل من ثانيتين ؛
• يغلق 40٪ من المستخدمين الموقع إذا استغرق تحميله أكثر من 3 ثوانٍ ؛
• 79٪ من المشترين الذين كانوا غير راضين عن قابلية استخدام الموقع ، على الأرجح ، لن يشتروا من خلاله في المستقبل ؛
• سيخبر 44٪ من المتسوقين عبر الإنترنت معارفهم عن المواقع التي لا يرضون عنها.

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

صبر مستخدمي الإنترنت عبر الهاتف المحمول

زيادة سرعة تحميل الموقع كطريقة لزيادة التحويل

وقت تحميل الموقع يؤثر على التحويل. لنلقِ نظرة على مثال شبكة Walmart.

معدل التحويل مقابل وقت تحميل الصفحة

هنا يمكننا أن نرى أنه كلما زادت سرعة تحميل الصفحة ، زاد معدل التحويل.

وجد Walmart أن تقليل أوقات تحميل الصفحة بمقدار ثانية يمكن أن يزيد التحويلات بنسبة تصل إلى 2٪.

تأثير تحسين تحميل الموقع على حركة المرور العضوية

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

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

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

تلخيصًا لما سبق ، نستنتج أن تسريع موقع الويب يؤدي إلى:

1. زيادة في التحويل
2. انخفاض في معدل الارتداد (النسبة المئوية لعدد الزوار الذين غادروا الموقع مباشرة من صفحة الدخول أو لم يشاهدوا أكثر من صفحة واحدة من الموقع) ؛
3. ارتفاع في محركات البحث.

20 طريقة لتسريع تحميل الموقع

1. قم بتقليل عدد طلبات HTTP

وفقًا لبحث أجرته Yahoo ، يتم قضاء معظم الوقت في تحميل الصفحة في تحميل الصور وملفات الأنماط والبرامج النصية.

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

من السهل جدًا التحقق من عدد طلبات HTTP التي يتم إنشاؤها - استخدم لوحة مطور المتصفح.

لنلقِ نظرة على العملية باستخدام مثال متصفح جوجلكروم.

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

2. الجمع بين ملفات CSS و JS وتقليلها

الآن بعد أن عرفنا عدد الطلبات التي يتم إنشاؤها ، يمكننا البدء في تقليلها.

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

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

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

3. تنفيذ تحميل CSS و JS غير المتزامن

لقد اعتدنا جميعًا على تحميل ملف CSS إلى HTML عن طريق إدخال علامة

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

غالبًا ما يتم التحميل غير المتزامن لـ CSS و JS بواسطة المطورين المحترفين فقط. نلاحظ فقط أنك تحتاج إلى النظر إما نحو استخدام قيمة التحميل المسبق للسمة rel جنبًا إلى جنب مع سمة onload ، أو تحميل الأنماط باستخدام برنامج نصي js.

4. تكوين التحميل البطيء لرمز جافا سكريبت

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

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

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