من المهم للغاية أن يتم تحميل الموقع في أسرع وقت ممكن ؛ يريد المستخدمون عرض الصفحة التي يريدون رؤيتها بسرعة ، وإذا لم تتمكن من إرضائهم ، فسوف يبحثون عنها في مكان آخر. في هذه المقالة ، سترى مناقشة لخمس تقنيات بسيطة وفعالة لتسريع صفحات الويب الخاصة بك.
إن معرفة وقت تحميل الموقع هي الخطوة الأولى قبل تحديد الخطأ. كما يتيح لك معرفة ما إذا كنت بحاجة إلى إجراء تغييرات لتسريع موقع الويب الخاص بك.
قبل أن نبدأ ، إذا لم تكن قد قمت بتثبيت yslow بعد ، فيرجى تثبيته. إنه امتداد لـ Mozilla Firefox ، يمكنك العثور عليه من الرابط أدناه:
أولاً ، دعنا نتصفح موقع Six Revisions على الويب ، نستخدم جميعًا نفس المثال لاختباره (يجب فتحه فقط في علامة تبويب أو نافذة متصفح جديدة).
في المتصفح ، هناك عمود من عداد المسافات (كما هو موضح في الشكل 1). بجانبها ، عندما تنتهي صفحة الويب من التحميل ، سترى yslow والأرقام. يمثل الرقم الوقت (بالثواني) التي يتطلبها المستعرض لتحميل موقع ويب. نريد أن يكون هذا الرقم منخفضًا قدر الإمكان.
الشكل 1: أيقونة YSLOW ومقياس الأداء يعرض وقت تحميل صفحة الويب
في معظم الحالات ، يكون واحد أو مجموعة من الأسباب التي تسبب وقت تحميل طويل لصفحات الويب كما يلي:
سنناقش هذه لاحقًا.
للتأكد من عرض وقت التحميل لموقع الويب الخاص بك ، تصفح بعض مواقع الويب. تحقق من Google و Facebook وبعض المدونات ومواقع الويب التي تريدها. ستلاحظ أنه كلما زاد عدد الصور التي يستخدمها موقع الويب ، كلما زادت وقت استجابة صفحة JS.
بالإضافة إلى قياس مدى سرعة تحميله ، يوفر لك YSLow بعض الأفكار المتعمقة مثل ما يمكنك القيام به لتحسين أداء موقع الويب الخاص بك ، بالإضافة إلى عدم أداء تحميل موقع الويب الخاص بك.
الصورة أدناه هي علامة التبويب "الأداء" (كما هو موضح في الشكل 2). ولكن إذا قمت بالنقر فوقه ، فسوف يعرض تفاصيل كل منطقة تؤثر على وقت التحميل والأداء العام.
الشكل 2: علامات الأداء
في هذا الحقل ، يتمثل الخيار الأكثر ذاتيًا في استخدام CDN (شبكة توزيع المحتوى). CDN فعال للغاية بالنسبة لمواقع الويب الكبيرة. ما يفعلونه هو نشر محتوى الموقع عبر الخوادم عبر مناطق مختلفة. كلما كان الخادم الفعلي أقرب إلى المستخدم الذي يقوم بتحميل موقع ويب ، كلما كانت الصفحة أسرع. لذلك ، فإن استخدام CDN هو توزيع المحتوى من الخادم إلى أقرب مستخدم صفحة تم الوصول إليه.
الشكل 3: تستخدم علامات الأداء الحروف (A ، B ، C ، D ، F) لتمثيل الدرجات والدرجات الحالية (1-100).
بصرف النظر عن استخدام CDN (والذي يمكن أن يكون مكلفًا) - كل شيء آخر قابل للتنفيذ.
دعنا نمر عبر كل عامل مستوى ، إليك سرعة ثانية موجزة لكل حقل مستوى وكيفية حل هذه المشكلات لتحقيق الأداء الأمثل.
تقليل طلبات HTTP : عندما تحصل صفحة الويب على ملفات من الخادم ، سيتم إنشاء طلب HTTP. يتضمن النطاق البرامج النصية وملفات CSS والصور وطلبات العميل/الخادم غير المتزامن (Ajax وغيرها من التقنيات المتغيرة). هذه هي النقطة الرئيسية عند الحديث عن الأداء ، ولكن يمكن حلها بسهولة مع القليل من الجهد. على سبيل المثال ، غالبًا ما يكون من المفيد دمج البرامج النصية و CSS والصور قدر الإمكان ، ملفات ذاكرة التخزين المؤقت على جهاز المستخدم.
إضافة رأس المصطلح : 80 ٪ من وقت تحميل الصفحة يرتبط بتنزيل البرامج النصية والصور و CSS. في معظم الحالات ، لن تتغير هذه العناصر في جهاز المستخدم. يمكنك تخزين الكود في .htaccess في الجهاز المحلي للمستخدم (سنناقش كيفية التشغيل لاحقًا في المقالة).
مكون GZIP : ملفات Gziping أو JS المضغوطة ، الصور ، مستندات HTML ، مستندات CSS ، إلخ. يمكن للمستخدمين تنزيل إصدارات ملفات أصغر لزيادة سرعة تحميل صفحات الويب. يمكن أن يقلل هذا من استهلاك الخادم ، ولكن يمكن أن تتسبب مكونات الضغط في الاستجابة للصفحة إلى أبطأ ، اعتمادًا على متصفح المستخدم.
ضع CSS في الأعلى : ضع ملف CSS في الجزء العلوي من الموقع ، والذي يمكنه تحميل أجزاء أخرى مثل الصور والنص في نفس الوقت.
ضع JS في الأسفل : ضع CSS على رأس المستند ، تحتاج فقط إلى إدراج JS قبل إغلاق <Boby>. بينما يتم تحميل هذه البرامج النصية في الخلفية ، يحصل المستخدم أولاً على الصفحة كاملة على ما يبدو.
تجنب تعبيرات CSS : لم أستخدم تعبيرات CSS أبدًا (تسمى الميزات الديناميكية) ، وهي مجرد ميزة CSS التي تضيف مفاهيم البرمجة (مثل الهياكل السيطرة/الشرطية) ، اعتبارًا من IE8 ، لم يعد محرك تخطيط ترايدنت (المستخدم في IE) مدعومًا. على أي حال ، ليس لديهم فكرة جيدة للاستخدام. إلى حد ما ، أود استخدام البرامج النصية PHP لتحميل قواعد نمط CSS المختلفة بناءً على شروط مختلفة ، مثل الرقم العشوائي أو الوقت من اليوم أو المتصفح.
المكالمات الخارجية إلى JS و CSS : ضع ملفات JS و CSS في الملفات الخارجية ، ويقوم المتصفح بتخزينها بسرعة تحميل صفحة أسرع من كل مكالمة.
تقليل بحث DNS : طالما أن المستخدم يكتب اسم مجال في شريط عناوين المتصفح ، فإن المتصفح سيؤدي دائمًا البحث عن عناوين IP. كلما زاد عدد مواقع الدخول التي يمتلكها موقع الويب ، سيكون البحث عن DNS ضروريًا. حافظ على مستوى منخفض قدر الإمكان ، وقم بإجراء استعلام DNS في المتوسط 60-100 مللي ثانية.
التكبير في JS : على عكس ضغط GZIP العام ، فإن التكبير في مستندات JS هو إزالة المساحات غير الضرورية وعلامات التبويب وغيرها من أحرف اختيار Zhonghe Yang ، مما يقلل من الحجم الكلي للملف ، ويمكن أن تحصل الصفحات الأصغر على سرعة تحميل أسرع. يمكنك استخدام JSMin للتكبير في JavaScript.
تجنب إعادة التوجيه : سواء كان إعادة توجيه رأس الخادم ، أو إعادة توجيه JS ، أو إعادة توجيه عنصر HTML. سيقوم موقع الويب الخاص بك بتحميل رأس صفحة فارغة ثم صفحة جديدة. يقضي المستخدمون المزيد والمزيد من الوقت للحصول على الصفحة التي يحتاجونها ، لذلك يجب عليهم تجنب ذلك بأي ثمن.
قم بإزالة البرامج النصية المكررة : سيزيد المستعرض الذي يقوم بتحميل البرنامج النصي نفسه من وقت تحميل الصفحة ، وهي مشكلة في الرياضيات بسيطة للغاية ، ومزيد من الملفات تساوي المزيد من وقت التحميل. تحقق من موقع الويب الخاص بك للتأكد من أنك لا تتصل بـ JQuery مرتين أو ثلاث مرات أو نصوص أخرى.عندما ... كان ذلك كثيرًا ، دعنا ننتقل إلى علامة التبويب التالية من Yslow قبل أن ندخل في بعض التقنيات الأخرى لزيادة أداء موقع الويب الخاص بك.
الشكل 4: تسمية الأجزاء.
يمكن أن توفر علامات الأجزاء (كما هو موضح في الشكل 4) نظرة ثاقبة على آثار زيادة سرعة تحميل الموقع. هنا يمكنك أن ترى المدة التي يحتاجها المستند الحالي إلى التحميل ، إذا تم ضغط هذه الملفات ، ووقت الاستجابة ، وإذا تم تخزينه مؤقتًا في جهاز المستخدم وعندما تنتهي صلاحية ذاكرة التخزين المؤقت. هذا تقييم جيد للموقع ، ويقيس أدائه وتحسين السرعة. أخيرًا ، علامة الإحصائيات (كما هو موضح في الشكل 4) ، والتي توضح لنا جميع طلبات HTTP ، والمستندات التي تم تنزيلها في نفس الوقت ، والملفات المخبأة. يعرض ذاكرة التخزين المؤقت الفارغة الملف الذي يحتاج المتصفح إلى تنزيل صفحة العرض. من ناحية أخرى ، يعرض ذاكرة التخزين المؤقت المعززة قائمة بالملفات الموجودة بالفعل في ذاكرة التخزين المؤقت للمستخدم الخاصة بالمستخدم ، وبالتالي حفظ طلب المتصفح حتى لا تضطر إلى تنزيل الملف مرة أخرى.
الشكل 5: علامة تبويب الإحصائيات.