الدليل النهائي لتحسين الويب (نصائح وأفضل الممارسات)

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

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

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

التحسين: جانب الخادم

1. اختيار استضافة الويب لائقة

   لا يحتوي حساب استضافة الويب الخاص بك على علاقة مباشرة بالتحسينات التي توشك على تنفيذها ، لكننا توصلنا إلى اختيار حساب استضافة الويب المناسب ، لذا قررنا أن نلفت انتباهك أولاً. حساب الاستضافة هو أساس موقع الويب الخاص بك / المدونة حيث يكون الأمان وإمكانية الوصول (cPanel و FTP و SSH) واستقرار الخادم والأسعار ودعم العملاء يلعبون جميعًا أدوارًا مهمة. تحتاج إلى التأكد من أنك في أيد أمينة.

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

2. الأصول المضيفة بشكل منفصل

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

   اقتراحات للقراءة: تعظيم التنزيلات الموازية في Carpool Lane.

3. ضغط مع GZip

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

   غزيب هي واحدة من أفضل الطرق للقيام بذلك وهي مختلفة وفقًا لنوع الخوادم التي تستخدمها. على سبيل المثال, اباتشي 1.3 يستخدم mod_zip, اباتشي 2.x يستخدم mod_deflate وإليك كيفية القيام بذلك إنجن إكس. فيما يلي بعض المقالات الجيدة حقًا لتعريفك بالضغط على جانب الخادم:

   • تسريع موقع على شبكة الإنترنت عن طريق تمكين ضغط ملف Apache
   • ضغط إخراج الويب باستخدام mod_gzip و Apache
   • كيفية تحسين موقعك مع ضغط GZIP
   • ضغط جانب الخادم لـ ASP

4. تقليل عمليات إعادة التوجيه

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

   اقتراحات للقراءة: تجنب عمليات إعادة التوجيه بواسطة Google Code يمنحك نظرة عامة جيدة حول هذه المسألة. توصي المقالة أيضًا ببعض الطرق العملية لتقليل إعادة التوجيه إلى الحد الأدنى لزيادة سرعة التقديم.

5. تقليل عمليات البحث عن DNS

   بالنسبة الى ياهو! مدونة شبكة المطورين, يستغرق حوالي 20-120 ميلي ثانية ل DNS (نظام اسم المجال) لحل عنوان IP لاسم مضيف معين أو اسم مجال معين ولا يمكن للمتصفح القيام بأي شيء حتى تكتمل العملية بشكل صحيح.

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

التحسين: الأصول (CSS ، Javascripts ، Images)

1. دمج جافا سكريبت متعددة في واحد

   الناس في rakaz.nl يشارك كيف يمكنك الجمع بين Javascripts متعددة مثل:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   في ملف واحد عن طريق تغيير URL إلى:

    http://www.creatype.nl/javascript/prototype.js،builder.js،effects.js،dragdrop.js،slider.js 

   عن طريق التلاعب. htaccess واستخدام PHP. انقر هنا لقراءة المزيد.

2. ضغط جافا سكريبت و CSS

   قلل هو تطبيق PHP5 يمكنه الجمع بين عدة ملفات CSS و Javascript ، وضغط محتوياتها (أي إزالة المسافات غير الضرورية / التعليقات البيضاء) ، وتقديم النتائج من خلال تشفير HTTP (gzip / deflate) ورؤوس تسمح بالتخزين المؤقت الأمثل من جانب العميل.

   

   ضغطهم عبر الإنترنت!هناك أيضًا بعض خدمات الويب التي تتيح لك ضغط ملفات Javascripts و CSS الخاصة بك يدويًا عبر الإنترنت. إليك القليل من الأمور التي نتعرف عليها:

   • compressor.ebiene (جافا سكريبت, CSS)
   • javascriptcompressor.com (جافا سكريبت)
   • jscompress.com (جافا سكريبت)
   • CleanCSS (CSS)
   • محسن CSS (CSS)

3. تخصيص رأس انتهاء / التخزين المؤقت

   الائتمان: httpwatch

   باستخدام رأس انتهاء الصلاحية المخصص ، تخطت مكونات الويب الخاصة بك مثل الصور والملفات الثابتة و CSS و Javascript طلب HTTP غير الضروري عند قيام المستخدم نفسه بإعادة تحميل الصفحة للمرة الثانية. فهو يقلل من النطاق الترددي المطلوب ويساعد بالتأكيد في تقديم الصفحة بشكل أسرع.

   قراءات الموصى بها:

   • ياهو! Developer Network Blog - إضافة رأس تنتهي صلاحيته
   • كيفية إضافة جيدة تنتهي الرؤوس على الصور في أباتشي 1.3
   • التخزين المؤقت HTTP
   • التخزين المؤقت تعليمي لمؤلفي الويب ومشرفي المواقع

4. خارج تحميل الأصول

   يعني التحميل خارج التحميل فصل ملفات Javascripts والصور و CSS والملفات الثابتة عن الخادم الرئيسي حيث يتم استضافة موقع الويب ووضعها على خادم آخر أو الاعتماد على خدمات الويب الأخرى. لقد رأينا تحسنا كبيرا هنا في Hongkiat عن طريق التحميل خارج الأصول إلى خدمات الويب الأخرى المتاحة ، وترك الخادم للقيام أساسا بمعالجة PHP. فيما يلي بعض اقتراحات الخدمات عبر الإنترنت للتشغيل خارج التحميل:

   • صور: فليكر ، Smugmug ، مدفوعة الأجر *
   • جافاسكريبتس: Google Ajax Library ، Google App Engine ، الاستضافة المدفوعة *
   • نموذج ويبs: WuFoo ، FormStack
   • RSS: جوجل فيدبورنر
   • المسح والاستطلاعات: SurveyMonkey ، PollDaddy

   * دفعت الاستضافة - الخدمات المدفوعة لديها دائما أفضل الموثوقية والاستقرار. إذا كان موقع الويب الخاص بك يطلب باستمرار الأصول ، فستحتاج إلى التأكد من أنها في أيد أمينة. نوصي باستخدام Amazon S3 و Cloud Front.

5. التعامل مع صور الويب

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

   • تحسين صور PNGيصف الأشخاص في مجلة Smashing Magazine بعض الأساليب الذكية التي قد تساعدك في تحسين صور PNG.
   • تحسين للويب - الأشياء التي تحتاج إلى معرفتها (التنسيقات) تعرف على المزيد حول ملفات JPEG و GIF و PNG وكيف ينبغي حفظ صورك على الويب.
   • لا تحجيم الصوردائما ممارسة إدراج عرض و ارتفاع لكل الصور. لا تقم أيضًا بتقليل حجم الصورة لمجرد أنك تحتاج إلى إصدار أصغر على الويب. فمثلا: لا تفرض صورة بحجم 200 × 200 بكسل على 50 × 50 بكسل لموقع الويب الخاص بك عن طريق تغيير عرض و ارتفاع. احصل على 50 × 50 بكسل بدلاً من ذلك.

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

   • Smush.itربما واحدة من أكثر الأدوات كفاءة على الإنترنت لتحسين الصور. حتى أن هناك ووردبريس البرنامج المساعد لذلك!
   • JPEG و PNG المتعريةأداة Windows لتجريد / تنظيف / إزالة البيانات الوصفية غير الضرورية (غير الهام) من ملفات JPG / JPEG / JFIF & PNG.
   • محسن صورة على الإنترنتيتيح لك بسهولة تحسين صورك المتحركة وصور متحركة متحركة وملفات jpg و pngs ، بحيث يتم تحميلها بأسرع ما يمكن على موقعك ، بواسطة Dynamic Drive
   • SuperGIFاجعل كل صور GIF والرسوم المتحركة أصغر.
   • إليكم المزيد.

6. التعامل مع CSS

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

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

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

   قراءات الموصى بها:

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

الأمثل لووردبريس

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

1. مخبأ مدونة Worpress الخاصة بك

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

2. إلغاء تنشيط وحذف الإضافات غير المستخدمة

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

3. إزالة لا لزوم لها PHP العلامات

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

   يمكن استبدالها إلى حد كبير بمحتوى نصي لا يسبب التحميل على الخادم. الدفع مايكل مارتنالصورة 13 علامات للحذف من WordPress Blo الخاص بكز

قراءات الموصى بها:

• 3 أسهل الطرق لتسريع وورديشارك John Pozadzides كيف تبحر مدونته بسلاسة من خلال ارتفاع حركة Digg.
• 13 العظمى نصائح ووردبرس] سرعة والخدع لأداء MAX إليك بعض الأشياء التي يجب تجربتها إذا وجدت أن موقع WordPress الخاص بك لا يعمل بشكل جيد ، وقد يكون ذلك بسبب ارتفاع عدد الزيارات أو المشكلات الخفية التي لا تعرف عنها.
• 40 نصائح ووردبرس] الأمثلنصائح التحسين في الشرائح. 40 نصيحة في 40 دقيقة.

اخيرا وليس اخرا…

إليك بعض خدمات الويب والأدوات المفيدة التي تمنحك منظورًا أوسع وتحليلًا أفضل لمساعدتك في تحسين الويب.

• ياهو! YSlow

  YSlow يحلل صفحات الويب ويقترح طرقًا لتحسين أدائها استنادًا إلى مجموعة من القواعد لصفحات الويب عالية الأداء. يوفر لك فكرة جيدة عما يجب القيام به حتى يتم تحميل الموقع بشكل أسرع.

  (Firebug مطلوب)

  

• سرعة الصفحة

  مشابه ل ياهو! YSlow, جوجل سرعة الصفحة هي وظيفة Firebug مفتوحة المصدر لتقييم أداء الموقع وكيفية تحسينها. (Firebug مطلوب)

  

• أدوات Pingdom

  أدوات Pingdom تأخذ حمولة كاملة من موقع الويب الخاص بك بما في ذلك جميع الكائنات (الصور ، CSS ، JavaScripts ، RSS ، الفلاش والإطارات / iframe) ويظهر لك إحصاءات عامة حول الصفحة المحملة مثل إجمالي عدد الكائنات ، إجمالي وقت التحميل ، والحجم بما في ذلك شاء.

  

قراءات الموصى بها:إليك المزيد من النصائح والأدوات التي تستحق التدقيق.

• جوجل الويب محسن
• 15 أدوات لمساعدتك على تطوير صفحات ويب أسرع
• 15+ نصائح لتسريع موقع الويب الخاص بك ، وتحسين التعليمات البرمجية الخاصة بك!