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

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

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

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

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

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

1. تقليل عدد الصور: إزالة الصور غير الضرورية.

2. تقليل جودة الصورة: إذا لم يكن ذلك ضروريًا، فحاول تقليل جودة الصورة، خاصة بتنسيق jpg. قد لا يبدو تخفيض الجودة بنسبة 5٪ بمثابة تغيير كبير، لكن التغيير في حجم الملف كبير نسبيًا.

3. استخدم التنسيق المناسب: انظر النقطة التالية.

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

2. اختيار تنسيقات الصور.

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

1. JPG: يستخدم بشكل عام لعرض أعمال التصوير الفوتوغرافي للمناظر الطبيعية والأشخاص والصور الفنية. تستخدم في بعض الأحيان في لقطات شاشة الكمبيوتر.

2. GIF: يوفر ألوانًا أقل ويمكن استخدامه في الأماكن التي لا تكون فيها متطلبات الألوان عالية، مثل شعارات مواقع الويب والأزرار والرموز التعبيرية وغيرها. بالطبع، أحد التطبيقات المهمة لـ gif هو الصور المتحركة. مثل صورة انعكاسية مصنوعة باستخدام Lunapic.

3. PNG: يمكن أن يوفر تنسيق PNG خلفية شفافة وهو تنسيق صورة تم اختراعه خصيصًا لعرض صفحات الويب. يُستخدم بشكل عام على صفحات الويب التي تتطلب عرضًا بخلفية شفافة أو متطلبات جودة صورة عالية.

3. تحسين CSS

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

لكن في بعض الأحيان نستخدم بعض العبارات الأكثر تعقيدًا عند كتابة CSS، مثل هذه الجملة:

Margin-top: 10px;
الهامش الأيمن: 20 بكسل؛
الهامش السفلي: 10 بكسل؛
هامش-يسار: 20px؛

يمكنك تبسيطه إلى:

هامش: 10px 20px 10px 20px؛

أو هذه الجملة:

＜p class="decorated">فقرة من النص المزخرف＜/p>
＜p class="decorated">الفقرة الثانية＜/p>
＜p class="decorated">الفقرة الثالثة＜/p>
＜p class="decorated">الفقرة الرابعة＜/p>

يمكن تضمينها مع div:

＜div class="decorated">
＜p>فقرة من النص المزخرف＜/p>
＜p>الفقرة الثانية＜/p>
＜p>الفقرة الثالثة＜/p>
＜p>الفقرة الرابعة＜/p>
＜/div>

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

4. أضف شرطة مائلة بعد عنوان URL

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

5. تحديد الطول والعرض

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

فيما يلي رمز صورة سهل الاستخدام نسبيًا:

<img id="moon" height="200" width="450" ​​​​src=" />

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

6. تقليل طلبات http

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

تقليل

الحمل على طلبات http؟

2. دمج صورتين متجاورتين في صورة واحدة.

3.

انظر إلى الكود التالي:

＜رابط rel="stylesheet" type="text/css" href="/body.css" />
＜رابط rel="stylesheet" type="text/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />

يمكننا دمجها في واحد:

＜link rel="stylesheet" type="text/css" href="/style .css" />

وبالتالي تقليل طلبات http.

7. نصائح أخرى (أضافها المترجم)

1. قم بإزالة الإضافات غير الضرورية.

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

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

4. إذا كان من الممكن جعل بعض المحتوى ثابتًا، فاجعله ثابتًا لتقليل الحمل على الخادم.

5. يتم وضع الكود الإحصائي في نهاية الصفحة.