بعض النصائح لتحسين سرعة فتح صفحة الويب

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

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، مثل هذه الجملة:

هامش أعلى: 10 بكسل؛

-

أسفل: 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، مثل "www.kenengba.com/220"، عندما يتلقى الخادم طلبًا كهذا للعنوان، يستغرق تحديد نوع ملف هذا العنوان وقتًا. إذا كان 220 عبارة عن دليل، فيمكنك أيضًا إضافة شرطة مائلة إضافية بعد عنوان URL لجعله www.kenengba.com/220/ ، بحيث يمكن للخادم أن يعرف بوضوح في لمحة أنه يريد الوصول إلى الفهرس أو الملف الافتراضي فيه الدليل، وبالتالي توفير وقت التحميل.

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

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

فيما يلي رمز صورة مألوف:

<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />

</p>

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

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=”stylesheet” type=”text/css” href=”/footer.css” />

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

< الرابط rel= ”stylesheet” type=”text/css” href=”/style.css” />

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

7. نصائح أخرى

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

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

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

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

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