منذ إنشاء الإنترنت ، كان متوسط حجم الملفات يتزايد باطراد. ما بدأ من كيلوبايت تقدم إلى ميغابايت (نعم ، جمع) ، وملفاتنا تنمو فقط لا يزال.
على الرغم من أن هذه الظاهرة لا تثير القلق من النظرة الأولى ، إلا أن تأثيرها على الأداء وقابلية الصيانة أمر مروع. أضف في الأجهزة القديمة أو قيود النطاق الترددي أو السرعة البطيئة بشكل عام ... ولدينا مشكلة أكبر بكثير.
لحسن الحظ ، لا يمكننا التحكم في أحجام الملفات فقط ، ولكن أيضًا كيفية عرض صفحاتنا في المتصفح. يمنح هذا النوع من التحكم مطوري الويب مثلنا فرصة للمساعدة في تخفيف هذه المشكلة ، وتحسين الشفرة الخاصة بنا للحصول على أداء أفضل في هذه العملية.
أنا أفهم تماما عدم الاهتمام عندما تكون معظم اتصالات الإنترنت في الولايات المتحدة سريعة إلى حد ما في هذه الأيام. أعني ، إذا كان كل شيء يعمل بشكل جيد بالفعل لماذا تهتم؟
الأداء والتحسين هما أكثر من مجرد سرعة تنزيل المحتوى. هناك أيضًا بعض فوائد SEO و UX التي يمكن الحصول عليها من خلال تخصيص الوقت للنظر في الشفرة. ناهيك عن أن تقليل أحجام الملفات من خلال تحسين الشفرة الخاصة بنا للحصول على أداء أفضل له ميزة إضافية تتمثل في تقليل تكاليف النطاق الترددي كمضيفين ، ويقلل من استخدام عرض النطاق الترددي (أعتقد أن قابس بيانات شبكة الجوال / ISP) على مستوى المستخدم أيضًا.
عادة ما تضيف الشفرات المعيارية سخامًا في شكل مزيد من الخيارات. هنا ، نريد أن نفكر في وحدات من حيث دمج أكبر عدد ممكن من شفرتنا الشائعة. إذا تمكنا من الجمع بين فئتين CSS في واحد واستخدام رمز أقل لتوفير نفس النتيجة ، ينبغي لنا.
لا تتسم النموذجية بالأهمية عندما يتعلق الأمر بـ HTML و CSS الأساسيين ، ولكن عندما تصل إلى عالم جافا سكريبت الأكثر تعقيدًا ، فإن وجود عدد كبير جدًا من النقود يمكن أن يؤذيك - وخاصةً على الجوال.
تعتبر طلبات الإعالة أكبر عامل في إبطاء سرعة تحميل معظم الصفحات. يضيف كل طلب إضافي سخامًا وطبقة أخرى من التعقيد إلى عملية التحليل والتنزيل. غالبًا ما يكون من السهل نسيان أن استدعاء الصور من ورقة الأنماط الخاصة بك يتم احتسابها أيضًا ، لذا تأكد من تقييدها واستخدام طرق بديلة للتحسين مثل النقوش المتحركة أو SVG عندما يكون ذلك ممكنًا.
بينما نتناول موضوع التبعيات الخارجية ، إذا كان موقع الويب الخاص بك كبيرًا بما يكفي لطلب بضع عشرات من الطلبات كحدٍ أدنى ... فقد يكون الوقت قد حان للتفكير في استخدام CDN. لن يؤدي استخدام CDN لتوزيع المحتوى الخاص بك إلى تقليل أحجام الملفات و / أو أوقات التحميل بقدر ما يؤدي إلى إزالة طلبات HTTP الإضافية كلها ، ولكن من المحتمل أن يزيل أي اتصالات خادم بطيئة من المعادلة على الأقل.
يجب أن يكون هناك اختلاف صارخ جدًا عند مقارنة القواعد البرمجية لمستوى التطوير والإنتاج. يمكن أن يؤدي اتخاذ هذه الخطوة بمفردها في بعض الأحيان إلى أكبر انخفاض في أحجام الملفات عبر اللوحة.
من المعتاد اليوم رؤية المطورين يشيرون إلى بيئة "الإنتاج" أو "التطوير" الخاصة بهم ، خاصة في المشروعات الكبيرة. ولكنه مفيد أيضًا في النهاية الأصغر للأشياء أيضًا. يمكن رؤية أكبر اختلاف بين البيئتين باستخدام ضغط الصورة و تصغير / ضغط الشفرة. في النهاية ، نريد أن تكون بيئة الإنتاج لدينا هزيلة وسريعة قدر الإمكان بينما يجب أن تكون بيئة التطوير الخاصة بنا هي نفسها ، فقط ناقص تحسين ضغط الصورة / الشفرة.
يمكن أن يكون استخدام الأدوات المدمجة مثل ضغط "Save for web" في Photoshop نقطة بداية جيدة للصور. هناك وفرة من المعرفة استكشافها في مكان آخر بالإضافة إلى المحادثات حول تنسيقات الصور وخوارزميات الضغط ومراقبة الجودة وأفضل الممارسات.
بالنسبة إلى التعليمة البرمجية ، يعتمد أفضل استخدام للضغط عادةً على اللغة التي تعمل بها. ومن الأمور المثيرة للجدل أيضًا ما إذا كان ضغط الشفرة يساعد أو يؤذي الأشخاص الآخرين الذين يحاولون فهم شفرتك ، ولكن هذه محادثة لمرة أخرى. عندما يتعلق الأمر بلغة HTML و CSS ، أستخدم خدمات مثل جوجل htmlcompressor و ال YUI الضاغط لـ CSS.
أحيانًا يكون الرمز الذي نكتبه هو أبطأ حلقة في السلسلة. يمكن أن يضر جافا سكريبت غير الفعال أو جافا سكريبت المتضخمة بأوقات التحميل أكثر مما تعتقد. هذه موزيلا تدوِّن المشاركة تفاصيل كثيرة حول أهمية كتابة محددات CSS الصعبة وشرح طريقة عرض المتصفحات لها. باختصار ، فإن كتابة المسار الدقيق لأسفل سلسلة من المحددات أقل كفاءة بكثير من مجرد استخدام أصغر محدد محدد بشكل فريد بدلاً من ذلك. كلاهما يوجهان التصميم إلى نفس العنصر ، وهذا الأخير يؤدي ببساطة إلى إنجاز المهمة بشكل أسرع بكثير.
قد تكون JavaScript أكثر سوءًا من CSS مكتوبة بشكل سيء ، وفي كثير من الحالات يمكن التغاضي عنها بسهولة. كم عدد المرات التي قمت فيها بنسخ ولصق مكتبة JS خارجية في مشروعك دون النظر بعمق في المصدر نفسه؟ يعتبر Typekit مثالاً رائعاً على ذلك ، فعندما تتوقف ملقماتهم ، يمكن أن يجلبوا صفحة ويب باستخدام خطوطهم إلى ركبتيها ويسبب 30 ثانية إضافية أو حتى دقائق من وقت التحميل الإضافي.
لحسن الحظ ، نادرًا ما يحدث مثل هذه الأحداث ، ولكن لا تزال الممارسة الجيدة للاتصال بجافا سكريبت إذا كان ذلك ممكنًا ، كما هو الحال مع Google Analytics. يتيح القيام بذلك للمستعرض تحليل ملفات الرأس (CSS ، طلبات HTTP ، إلخ) وعرض الترميز ، قبل أن تبدأ JavaScript في إبطاء الأشياء.
تماشيًا مع هدفنا لكتابة متصفحات CSS أصغر حجماً والحفاظ على الانتفاخ إلى أدنى حد ممكن ، يجب أن تكون كتابة HTML الفعالة أولوية أيضًا.
غالبًا ما تستهدف عمليات إعادة تعيين CSS جميع العناصر المشتركة وتطبق "إعادة تعيين" التصميم عليها. لذلك ، حتى إذا لم تكن تستهدف هذا القسم الإضافي ، فمن المحتمل أن يتباطأ الأمر من خلال الحاجة إلى إعادة تعيين مساحة الحشو وإعادة ضبط الهامش إلى الحد الأدنى. عادة ، لا يضر div إضافي أو اثنين حقا أي شيء رغم ذلك. فقط عندما تبدأ في النهاية مع العشرات منهم تفعل أشياء مجنونة. مع إدخال المزيد من العناصر في مواصفات HTML5 ، لدينا أيضًا مرونة أكثر في هذا المجال أيضًا.
جعلت جوجل من أولوية سوط الإنترنت بشكل جماعي. من أجل احتلال مواقع بارزة في نتائج البحث ، يجب على الصفحات الآن أن تولي اهتمامًا كبيرًا بالعديد من السمات المختلفة حول كيفية تقديمها. يمكن أن يؤدي استدعاء الكثير من الموارد الخارجية ، أو الحصول على صور كبيرة بشكل سخيف ، أو حتى كتابة جافا سكريبت مكتوبة بطريقة سيئة إلى سحب الموقع في الترتيب.
لحسن الحظ رغم ذلك ، هذا كله بنية جيدة حيث أن متطلباتهم لتصنيف البحث الجيد مبنية على ممارسات التطوير الجيدة. جوجل تقدم أيضا دليل عميق جدا لتحسين جوانب مختلفة من موقعك لتحسين SEO - والذي يحدث أيضًا للترويج لممارسات تطوير رائعة في الوقت نفسه.
عند تحسين الشفرة ، يجب علينا ألا نفكر في أحجام الملفات فحسب ، بل نفكر أيضًا في كيفية قراءتها ؛ إما عن طريق المتصفحات أو حتى البشر الآخرين. يجب أيضًا مراعاة استخدام المحمول ، حيث يفرض العديد من مزودي الخدمات قيودًا كبيرة جدًا على البيانات في هذه الأيام.
لذلك ، في حين قد يستغرق الأمر وقتًا إضافيًا لإجراء كل هذا التحسين ، فمن المؤكد أنها محاولة جديرة بالاهتمام نظرًا لأنها لا تقدم أداءً أفضل في المتصفح وعلى الجوال فحسب ، بل لديها أيضًا فرصة للترويج لممارسات تطوير أفضل بل وحتى الحصول على ترتيب أعلى لمحتواك على محركات البحث مثل جوجل.
في المرة التالية التي تستعد فيها للتشغيل ، ارمي صورك في محرك ضغط ... قد يفاجئ عدد الميجابايت الذي يمكن أن تحلق به!