15+ من النصائح لتسريع موقع الويب لديك، وتحسين شيفرتك!

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

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

اضغط صورك أكثر من ذلك حتى

عند استخدام أداة "حفظ من أجل الويب" في Photoshop، يمكننا ضغط صورنا لخفض أحجام الملفات الخاصة بها. ولكن، هل تعلم أن الضغط يمكن أن يكون أكثر دون التضحية بالجودة؟ موقع يدعى Smush.It يجعل العملية أمر مضمون.

كيف يكون هذا ممكنا؟

الفريق في Smush.It يستخدم مجموعة متنوعة من الأدوات.

ImageMagick لتحديد نوع الصورة وتحويل صور GIF إلى PNG.
pngcrush لتجريد القطع غير الضرورية من PNGs. نقوم حاليًا بتجربة أدوات PNG الأخرى مثلpngout optipng pngrewrite التي تسمح بتحسين png بشكل أفضل.
jpegtran لتجريد جميع البيانات الوصفية من ملفات JPEG (معطلة حاليًا) وتجربة ملفات JPEG المتتالية.
gifsicle لتحسين صور GIF المتحركة عن طريق تجزئة وحدات البكسل المتكررة في إطارات مختلفة.

* تم أخذ عناصر القائمة أعلاه من صفحة الأسئلة الشائعة حول SmushIt.

لذا، فقط قبل نشر موقع ويب جديد، قم بتشغيل عنوان url الخاص بك من خلال خدماتهم لتقليل حجم كل الصور الخاصة بك - وبالتالي تسريع موقع الويب الخاص بك. احذر - قد تقوم الخدمة بتحويل ملفات GIF إلى PNG. قد تحتاج إلى تحديث ملفات HTML و CSS وفقًا لذلك. بينما نحن في هذا الموضوع، 99 ٪ من الوقت، يتم ادخاره باعتبار PNG هو القرار الأفضل. ما لم تكن تستخدم تنسيق GIF متحرك، فاحرص على أن يكون تنسيق PNG هو التطبيق الأفضل.

كن حكيما. استخدم القصاصات.

تقدم العديد من IDEs لوحة "شيفرة القصاصات" التي تسمح لك بحفظ الكود لاستخدامه لاحقًا. هل تجد نفسك تزور موقع lipsum.com في كثير من الأحيان للحصول على النص العام؟ لماذا لا نحفظه فقط كمقتطف؟ في Dreamweaver، اضغط على "Shift F9" لفتح علامة التبويب المقتطف. يمكنك بعد ذلك سحب المقتطف المناسب إلى المكان المناسب. هذه الميزات توفر لي الكثير من الوقت على مدار الأسبوع.

استخدم Console.log () إلى Debug

لقد قمت بتنزيل مكتبة jQuery، وتحاول ببطء فهم البنية. دائماً، يمكنك نقر الارومة وتدرك أنه لا يمكنك معرفة كم تساوي قيمة $ someVariable. سهل، فقط افعل ...

1
2	console.log($someVariable);

الآن، قم بتحميل Firefox - تأكد من تثبيت FireBug - ثم اضغط F12. سيتم عرضك بالقيمة الصحيحة.

الآن - ضاعف هذا بعدد لامنتهي وأخذه إلى أعماق الأبدية ولن تدرك مدى فائدة Firebug و console. :)

قم بتنزيل شريط أدوات مطور الويب

تم إنشاؤه بواسطة كريس بيديريك، هذا البرنامج المساعد فايرفوكس مفيد بشكل لا يصدق حيث يقدم لك مع مجموعة كبيرة من الخيارات. يعرف العديد منكم ممن يشاهدون screencasts أنني من المعجبين باستخدام خيار "Edit CSS" لتعديل أنماطي في الوقت الفعلي. تتضمن الخيارات المفيدة الأخرى ...

تعطيل جافا سكريبت بسهولة
تعطيل CSS بسهولة
روابط التحقق من HTML / CSS السريعة
المساطر
تعطيل ملفات تعريف الارتباط
هناك الكثير من الميزات الرائعة لإدراجها!

شريط أدوات المطور على الإنترنت

خذ بعين الاعتبار وضع العلامات النصية في الأسفل

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


....
<script type="text/javascript" src="someScript.js"></script>
<script type="text/javascript" src="anotherScript.js"></script>
</body>

لماذا هذا يساعد؟

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

لذلك، عندما يكون ذلك ممكنًا، من المنطقي أن تنقل هذه الملفات إلى أسفل المستند للسماح للمكونات الأخرى (الصور، css، إلخ) بالتحميل أولاً.

عند نشر، وضغط CSS وملفات جافا سكريبت

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

خدمات ضغط جافا سكريبت

خدمات ضغط CSS

هناك اثنتان من الأدوات المفيدة الأخرى لتعبئة شيفرة جافا سكريبت هما ضاغط YUI ،و JSMin.

بالإضافة إلى ذلك، لديك خيار ضغط HTML الخاص بك - على الرغم من أنني لا أوصي به. تخفيض الملف لا يكاد يذكر.

موجز "النصائح السريعة" في jQuery

منذ وقت ليس ببعيد، نشر Jon Hobbs-Smith من tvidesign.co.uk مقالة رائعة تفصِّل 25 نصيحة من jQuery. تأكد من وضع إشارة على هذه الصفحة! وهنا العديد من النصائح المفضلة بالنسبة لي.

تحقق مما إذا كان هناك عنصر موجود.

1
2	if ($('#myDiv).length) {
3	// this code will only run if the div with an id of #myDiv exists.
4	}

استخدم السياق

لا يدرك العديد من الأشخاص أنه عند الوصول إلى عناصر dom، تقبل وظيفة jQuery بارمتر ثاني - "السياق". انظر في ما يلي ...

1
2	var myElement = $('#someElement');

سيتطلب هذا الكود jQuery لاجتياز DOM بأكمله. يمكننا تحسين السرعة باستخدام السياق كبارامتر ثاني.

1
2	var myElement = $('#someElement', $('.someContainer'));

الآن نحن نخبر jQuery أن تبحث فقط داخل العنصر .someContainer، وتجاهل كل شيء خارجه.

استخدام المعرفات بدلا من الفئات

عند الوصول إلى المعرفات باستخدام jQuery، تستخدم المكتبة الأسلوب "getElementById" التقليدي. ومع ذلك، عند الوصول إلى الفئات، يجب أن تستخدم jQuery أساليبها الخاصة لاجتياز dom (لا توجد طريقة أصلية للحصول على العنصر بواسطة الفئة). ونتيجة لذلك، يستغرق الأمر مدة أطول قليلاً!

استعراض الـ25 نصيحة كلها!

استخدم $ _GET بدلاً من $ _POST، إذا كان ممكناً

إذا كان لديك الخيار بين $ _GET أو $ _POST عند إجراء مكالمات AJAX، فاختر الخيار الأول.

Yahoo! أنه عند استخدام XMLHttpRequest، يتم تنفيذ POST في المستعرضات كعملية من خطوتين: إرسال الترويسة أولاً، ثم إرسال البيانات. لذا من الأفضل استخدام GET، الذي يأخذ حزمة TCP واحدة فقط لإرسالها ( ما لم يكن لديك الكثير من ملفات تعريف الارتباط). " - Developer.Yahoo.com

تذكر - لا تستخدم $ _GET بشكل أعمى. تأكد من أنك تعرف بالضبط ما تفعله أولاً. على سبيل المثال، تحت أي ظرف من الظروف يجب عليك خلط الوصول إلى قاعدة البيانات وسلسلة الاسئلة. منذ فترة ليست طويلة، أرسل لي أحد زملائي في Twitter صورة لموقع ويب مباشر يحتوي على استعلام MYSQL في عنوان url. لا تفعل هذا! :)

عند التطبيق العملي، استخدم المكتبات والأطر

سواء كنت تستخدم PHP أو ASP.NET أو Mootools أو jQuery - أو مزيجًا من كل ذلك، ففكر في استخدام الأطر عندما يكون ذلك مناسبًا.

فمثلا:

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

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

تذكر - اجعل الأطر تعمل من أجلك؛ ليس العكس. كن ذكيا عند اتخاذ هذه القرارات. كن ذكيا عند اتخاذ هذه القرارات.

YSlow

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

هناك screencast YSlow عظيمة التي توضح العديد من التقنيات لتوفير الوقت. أوصي بشدة بعرضه عندما تتاح لك الفرصة.

اختصارات لوحة المفاتيح. نتعلم منها!

سوف يتفق معي معظم المصممين / المطورين ذوي الخبرة؛ أنه إذا كان عليّ أن أذهب إلى قائمة شريط الأدوات في كل مرة أرغب فيها بإجراء تغيير على موقعي أو تصميمي، فسوف أضيع. لقد كنت أستخدم اختصارات لوحة المفاتيح لفترة طويلة حتى أنني لا أعرف الموقع الصحيح بعد الآن لهذه الأوامر. أنا أعرف فقط أن "Shift X" يفتح اللوحة الصحيحة.

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

إنشاء قالب "موقع ويب جديد"

لنواجه الأم؛ ليس كل موقع يحتاج أن يكون بعض التطبيقات الضخمة والمعقدة. في بعض الأحيان، نريد ببساطة عرض محفظتنا - ربما معظم الوقت لبعض منها! في هذه الحالات، لماذا لا تقوم بإنشاء "قالب" بسيط يحتوي على كل ما تحتاجه لتبدأ.

داخل مجلد القالب الخاص بي، لدي مجلدات "JS" و "CSS" متداخلة.

يحتوي الأول على ملف "DD_belatedPNG.js" الخاص بي (يضيف شفافية 24 بت إلى PNGs في IE6).
هذا الأخير يحتوي ببساطة على ملف "default.css" فارغ، وملف إعادة تعيين مخصص خاص بي.

بالإضافة إلى ذلك، لدي ملف "index.html (php)" يحتوي على بعض مقتطفات الشيفرة التي أستخدمها في معظم مشروعاتي. لا شيء خيالي، لكنه يوفر الوقت !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/default.css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Untitled Document</title>

<script type="text/javascript">
  $(function() {
	
	});
</script>

</head>

<body>

<div id="container">

</div><!--end container-->

</body>
</html>

كما ترون، يمكنني الرجوع إلى ملفات CSS وجافا سكريبت الخاصة بنا، والارتباط بملف jQuery في Google، وإنشاء وظيفة document.ready () jQuery، وفتح div "الحاوية" القياسية.

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

داخلي مقابل. خارجي خارجي

بشكل عام، يجب إزالة كل CSS وجافا سكريبت من الصفحة ووضعها في ملفات خارجية خاصة بها.

لماذا ينبغي لنا أن نفعل ذلك؟

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

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

قم بتحديد ما إذا كان النص البرمجي PHP تم استدعاؤه بـ Javascript

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

تتمثل إحدى الطرق في إرفاق زوج فريد من نوع مفتاح القيمة مع جافا سكريبت عند إرسال POST. يمكنك بعد ذلك استخدام PHP لتحديد ما إذا كان هذا المفتاح محددًا أم لا. إذا حدث ذلك، فنحن نعرف أن Javascript ممكّنة.

أفضل طريقة هي استخدام ميزة مضمنة في PHP تسمى"HTTP_X_REQUESTED_WITH". لتوضيح...


if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
  // write some code and rest assured that the Javascript is enabled.
} else {
  // Do something different to compensate for users that have JS turned off.
}

رابط لـ CDN من Google

منذ فترة ليست طويلة، بدأت Google باستضافة نصوص برمجية شائعة مثل jQuery. إذا كنت تستخدم مكتبة كهذه، فمن المستحسن أن ترتبط بـ CDN في Google بدلاً من استخدام النص البرمجي الخاص بك.

AJAX Libraries API

كيف ذلك؟

التخزين المؤقت: هناك احتمال ألا يحتاج المستخدمون إلى تنزيل النص البرمجي مطلقًا! عندما يرى المتصفح طلبًا لملف تم تنزيله بالفعل على جهاز الكمبيوتر الخاص بالمستخدم، فإنه يتعرف على ذلك ويعيد استجابة "304" (غير معدلة). على سبيل المثال، دعنا نتخيل قيام مستخدم واحد بزيارة ثلاثين موقعًا ترتبط جميعها بـ CDN في Google. في هذا المثال، يقوم المستخدم بتنزيل jQuery مرة واحدة فقط!
تحسين التوازي: تحدثت عن ذلك في نصيحة سابقة. من خلال إزالة هذا الطلب الإضافي، يمكن لمتصفح المستخدم تنزيل المزيد من المحتوى بالتوازي.

احتضان ملحقات فايرفوكس

أنا من أكبر المعجبين بـ Chrome في Google. يتم فتحه بسرعة كبيرة ويعالج جافا سكريبت أسرع من أي متصفح آخر - على الأقل في الوقت الحالي (أعتقد أن أحدث نسخة من فايرفوكس قد تم اكتشافها).

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

عندما تكون مفيدة، استخدم IDE

بنفس الطريقة التي من الوقاحة فيها أن تكره Microsoft، يبدو أنه من الشائع في الوقت الحالي أن يهاجم الناس أولئك الذين يستخدمون IDEs عند تطويرها. انه سخيف تماماً.

في كثير من الحالات، يكون استخدام IDE متقدم هو الهدف الأسمى - خاصة عند العمل في لغات OOP. الآن، إذا كنت تقوم ببساطة بإنشاء قالب HTML صغير، فإن برامج مثل Notepad ++ و Coda ستعمل بشكل رائع. في الواقع، أوصي باستخدامها في هذه الحالات. لا تضيف انتفاخاً إضافيًا إذا لم تكن بحاجة إليه. ومع ذلك، عند تطوير التطبيقات المتقدمة، استفد من IDE.

هذا كل ما لدي أيها الناس!

يجب أن نفعل ذلك الآن. نأمل أن يساعد بعض من ذلك (ربما جميعهم!) في جعلك مصممًا ومطورًا أفضل. ما هي بعض من اختصاراتك المفضلة؟ اترك تعليقك لنكون على علم برأيك!