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

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

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

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

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

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

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

2. تقليل جودة الصورة: إذا لم يكن ذلك ضروريًا ، فحاول تقليل جودة الصورة ، وخاصة تنسيق JPG.

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

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

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

هناك ثلاثة تنسيقات الصور المستخدمة بشكل عام ، وهي JPG و PNG و GIF. وقت صفحة الويب.

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

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

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

3. تحسين CSS

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

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

الهامش: 10 بكسل ؛
يمين الهامش: 20 بكسل ؛
هامش القاع: 10 بكسل ؛
الهامش اليساري: 20 بكسل ؛

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

الهامش: 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 لجعله / حتى يتمكن الخادم من معرفة بوضوح بالوصول إلى الملف الافتراضي أو الملف الافتراضي في الدليل ، وبالتالي توفير وقت التحميل.

خامسا تشير إلى الارتفاع والعرض

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

هنا رمز صورة ودود نسبيا:

＜ IMG id = "Moon" height = "200" width = "450" ​​src = " />

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

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

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

لذلك ، نحن بحاجة إلى تقليل العبء على طلبات HTTP. كيف تقلل من العبء؟

1. إزالة بعض الأشياء غير الضرورية.

2. الجمع بين الصورتين القريبتين في واحدة.

3. دمج CSS

ألقِ نظرة على الكود التالي وتحتاج إلى تحميل ثلاثة CSS:

＜ Link Rel = "STYLESHEET" type = "text/css" href = "/body.css"/>
＜ Link Rel = "STYLESHEET" type = "text/css" href = "/side.css"/>
＜ Link Rel = "STYLESSHEET" type = "text/css" href = "/footer.css"/>

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

＜ Link Rel = "STYLESHEET" type = "text/css" href = "/style.css"/>

هذا يقلل من طلبات HTTP.

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

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

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

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

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

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