السرعة هي قابلية الاستخدام.
للقول بشكل أكثر دقة ، تعد سرعة موقع الويب جزءًا رئيسيًا من قابلية الاستخدام. إن الواجهة الأكثر بديهية على الإطلاق التي تم إنشاؤها من قبل العقل البشري لن تفيدك إذا تم إيقاف تشغيل المستخدم في الوقت الذي يتم تحميله فيه.
هذا هو. تم عمل المقال ... حسناً ، إذن هناك الكثير من الأمور الأخرى ، لكن الجملة الأولى هي نصف ما تحتاج إلى معرفته. علينا أن نجعل مواقعنا الإلكترونية سريعة.
يمكنني استخدام الكثير من التعبيرات الفائقة مثل "سريعًا" أو "سريع جدًا" أو حتى "أسرع من الرصاصة السريعة" ، لكنها ستكون غير كافية. من الأسهل القول أنه لا يوجد شيء اسمه "سريع جدًا".
نحن بحاجة إلى أخذ دقيقة للحديث عن نوع السرعة التي أشير إليها. باختصار ، كل السرعة. بشكل أكثر تحديدا ، ثلاثة أنواع من السرعة:
قد يكون هذا هو الوقت الذي يستغرقه تنزيل جميع المعلومات على أجهزة المستخدمين لديك. يتأثر هذا بشكل أساسي بسرعة اتصال الإنترنت ، والحجم الفعلي للملفات.
لا يمكنك فعل الكثير بشأن الاتصال ، ولكن يمكنك القيام بالكثير حول حجم الملف.
بعد تنزيل ملفاتك ، يجب أن تتم معالجتها وعرضها بواسطة المتصفح. تتأثر كل هذه المعالجة والتقديم بمدى جودة كتابة شفرتك ، وأي شيء آخر يحدث على هاتف المستخدم أو الجهاز اللوحي أو الكمبيوتر المحمول / سطح المكتب.
الشيء الوحيد الذي يمكنك التحكم به هو رمزك الخاص ، لكن ذلك يحدث فرقًا كبيرًا.
ثم هناك العامل النفسي. يمكن أن تبدو مواقع الويب السريعة وكأنها بطيئة. يمكن جعل المواقع البطيئة تشعر بسرعة أكبر مع التطبيق القضائي لبعض الحيل.
يدور هذا الجزء حول دراسة مستخدمك ، والسماح لهم بمعرفة ما يحدث عندما يتفاعلون مع موقعك على الويب أو تطبيقك.
يجب أن تنتبه إلى الجوانب الثلاثة لسرعة موقع الويب لجعل موقعك يبدو وكأنه يسير بسرعة. وكلما كان الموقع أكبر ، كلما كان هناك الكثير لتحسينه.
دعونا نبدأ ، بعد ذلك.
في كثير من الأحيان ، وخاصة في المشروعات التجريبية الأصغر حجمًا التي أحبها كثيرًا ، أجد نفسي أقضي وقتًا في CSS أكثر من أي جزء آخر من الشفرة. في كثير من الأحيان ، يوجد أيضًا CSS أكثر من HTML أو JavaScript. لذلك ، هناك ، يوجد مؤشر على مدى تأثير CSS على حجم الملف.
ثم ، بالطبع ، هناك مسألة مدى سرعة تشغيل موقعك على سطح مكتب المستخدم أو الكمبيوتر المحمول أو الجهاز اللوحي أو الهاتف. يتم تنفيذ الكثير من "العمل" الفعلي أو تقديم صفحة ويب بواسطة البرنامج ، مع القليل من المساعدة من GPU الخاص بك.
قد يتم تحميله بسرعة ، ولكن انتقل ببطء. إن الطريقة التي تتم بها كتابة CSS لها تأثير مباشر على مدى سرعة جهاز معين قادرًا على عرض صفحة الويب فعليًا بمجرد تنزيل الملفات.
عند تحسين موقع ويب للتشغيل بشكل أسرع ، يكون CSS عادةً مكانًا جيدًا للبدء.
CSS الذي يجلس في ورقة الأنماط الخاصة بك ولا يقوم بأي شيء يجعل ملفاتك غير ضرورية بشكل أكبر. حسنا ، هذا قد يبدو وكأنه لا يفكر. لكنه لا يزال يحدث لأفضل منا.
يمكنك إخراج بعض المحتوى ونسيان حذف CSS القديم. يمكنك تغيير فئة أو عنصر عنصر حاوية ، وننسى حذف CSS القديم. تكتب بعض CSS ، تدرك أن هناك طريقة أفضل ، وأنسي… تحصل عليه.
ارمي العديد من مطوري الواجهة الأمامية إلى المزيج ، ولديك وصفة لورقة الأنماط غير القابلة للتصنيع أو غير قابلة للإدارة ، أو جمعها ، إذا لم تكن حذراً. يبطئ الرمز غير المستخدم من تحميل الصفحة بحكم وجودها كبيانات. يبطئ التطوير لأنه يمكن أن يربك الناس قراءة ورقة الأنماط.
ويمكن أن يعني أيضًا أوقات عرض أبطأ ، نظرًا لأنها مجرد CSS أكثر لإلقاء نظرة على المتصفح أثناء مطابقته لكل CSS لعناصر HTML المناسبة.
سواء كنت تقوم بمراجعة جميع CSS القديمة يدويًا وحذفها ، استخدم أدوات تلقائية لمساعدتك في العثور على أدوات اختيار CSS غير المستخدمة ، أو قم فقط بحذف الأشياء عشوائياً إلى أن يحدث شيء ما (لا تفعل ذلك) ، يجب عليك سحب هذا الرمز القديم.
عند التحدث عن كيفية تطابق المتصفح مع CSS مع HTML المناسب ، فقد حان الوقت للنظر في محددات CSS. لقد كتب الكثير عن أي من الاختيارات التي تجعل الأسرع ، والتي هي بطيئة ، سواء كان عليك أن تهتم بالأبطاء على الإطلاق ، وما إلى ذلك.
المشكلة هي أن الكثير من هذه المعلومات قديمة. مرة أخرى في عام 2000 ، كتب ديف حياة (مطور يعمل في سفاري ، وعضو نشط في مجموعة عمل CSS في W3C):
الحقيقة المحزنة حول محددات CSS3 هي أنه لا يجب استخدامها على الإطلاق إذا كنت مهتمًا بأداء الصفحة.
إذا كنت ستلقي نظرة على المستند جاء هذا الاقتباس من ، سترى أنه كان يتحدث عن محددات مثل : الطفل الأول وغيره من المحددات الزائفة. وكان على حق.
لا يزال ولكن في الخمسة عشر عامًا الأخيرة ، تقدمت أجهزة الكمبيوتر قليلاً. في الوقت الحاضر ، لا ينبغي أن يكون المجهود الإضافي المطلوب من الكمبيوتر لجعل CSS ملحوظة من قبل أي شخص باستثناء أولئك الذين يستخدمون أرخص الأجهزة المحمولة الرخيصة.
هذا هو مصدر قلق في حد ذاته ، لذلك حقا ، فإنه يعتمد على المشروع في متناول اليد ، الديموغرافيات المستهدفة ، وهلم جرا. ببساطة ، استخدم أفضل حكم ممكن ، وربما لا تسرف في اختيار الزائرين.
بخلاف ذلك ، ما لم تصل صفحاتك إلى طول الكتاب ، فإن المحددات التي تستخدمها لا ينبغي أن يكون لها تأثير كبير على أداء موقعك. لا يزال ، إلقاء نظرة على الوثيقة المرتبطة أعلاه والتعرف على ما يجعل أسرع وما لا. قد لا تزال تجد المعلومات مفيدة.
يمكنك أيضا رؤية هذا المقال من CSS-Tricks لاتخاذ بعض الشيء أكثر حداثة حول هذا الموضوع.
بالطبع ، هناك أيضًا خصائص CSS تستغرق وقتًا أطول من غيرها. لا تزال الخصائص الكلاسيكية مثل العرض والطول واللون هي الأسرع. تميل تلك التي تستغرق وقتًا أطول قليلاً (وقد تختلف من متصفح إلى متصفح) إلى أن تكون خصائص CSS3 مثل box-shadow.
تعد عملية إضافة ظل مسقط إلى عنصر أمرًا معقدًا ، فيما يتعلق بعرض صفحات الويب. ما هو مثير للاهتمام أن نلاحظ أنه ، كما أشير على HTML5 Rocks يمكن أن تختلف طاقة المعالجة المطلوبة اختلافًا كبيرًا اعتمادًا على الأبعاد المحددة للظل المسقط.
هذا المقال يشير إلى أن الأمر نفسه ينطبق على الخصائص الأخرى مثل نصف قطر الحدود والتحويل.
مرة أخرى ، لن يكون لهذه التأثيرات تأثير كبير على عرض صفحة على متوسط جهاز الكمبيوتر المكتبي أو الكمبيوتر المحمول. ومع ذلك ، قد تتعرض الأجهزة المحمولة لضربة أكبر ، ومع ذلك قد تعاني التجربة نتيجة لذلك. الجميع يكره التمرير متقلب.
ومع ذلك ، يجب موازنة ذلك مقابل تكلفة استخدام الصور لإنتاج التأثيرات نفسها. أي شخص يتذكر الأشياء التي فعلناها للحصول على الزوايا الدائرية ، ذات مرة؟
فقط لا تسرف ، وأنماطك يجب أن تقدم بسرعة كافية.
الآن ندخل إلى الأراضي الأخرى. يمكن أن تكون رسوم متحركة CSS سريعة جدًا ، أو يمكن أن تبطئ المتصفح إلى الحد الذي تواجهه منصات الألعاب في مواكبة المشكلة.
يرجع ذلك جزئيًا إلى أنه لا يتم عرض جميع الرسوم المتحركة بشكل متساوٍ. يتم تنفيذ بعض من الرفع الثقيل من قبل الأجهزة ، في حين أن أنواع أخرى من الرسوم المتحركة يجب أن يتم تقديمها بالكامل من خلال وظائف المستعرض الخاصة. هذا مكلف للغاية على الأجهزة المحمولة.
في مقال آخر على HTML5 Rocks ، تكون خصائص CSS الأسرع في تحريك الموضع ، المقياس ، التدوير ، والعتامة.
راجع المقالة للحصول على نظرة عامة أكثر اكتمالًا لما يمكن تحريكه مع الحفاظ على "التكلفة" منخفضة.
هنا حيث أقدم لك النصيحة الأكثر عملية التي يمكن أن أقدمها لك ، أنا ، المؤلف. استخدم معالجات ما قبل CSS مثل LESS و SASS و Stylus. بالتأكيد ، إذا كنت تستخدمها بشكل خاطئ ، يمكنك إنشاء أوراق أنماط أكبر مما تريده ؛ لكن الفوائد المحتملة تستحق العناء.
على سبيل المثال ، إذا كنت ترغب في تقليل عدد طلبات HTTP التي تم إجراؤها على الخادم (دائمًا فكرة جيدة) ، فقم بتضمين جميع عمليات إعادة التعيين والأطر في ملف LESS / SASS واحد. عندما يتم تجميعها ، ستكون كلها في ورقة أنماط واحدة. بالإضافة إلى ذلك ، تقدم معظم المعالجات التمهيدية خيار إخراج جميع CSS في شكل مبسط.
بهذه الطريقة ، يمكنك استخدام العديد من الملفات المختلفة التي تحتاجها لأغراض تنظيم التعليمات البرمجية ، دون التأثير بشكل غير ملائم على حجم الملف.
جافا سكريبت يمكن أن تكون بطيئة حقا . لتكون أكثر تحديدًا ، يمكن أن يكون لجافا سكريبت تأثير مباشر أكثر بكثير على جزء "المعالجة" من معادلة السرعة من CSS. أسوأ من ذلك ، يمكن الحصول على JS أثقل أضعافا مضاعفة من حيث حجم الملف من أجل تحقيق أشياء تافهة على ما يبدو.
إنها ضربة مزدوجة من البطؤ المؤلم ، ومستخدمينا غالبًا ما يكونون ضحايا ، خاصةً أولئك المتصفحات على متصفحات الجوّال. هذا ليس ، مع ذلك ، خطأ اللغة. إن مدى ثغراتنا في JS يحصل غالباً بشكل مباشر على جهلنا بالبرمجة بشكل عام.
أنا غير مطور. غالبًا ما استعملت مكتبات مثل jQuery ، أو ملحقات JS المستقلة الفردية لإنجاز المهام. كلما كنت بحاجة إلى القيام بالمزيد من المكونات الإضافية التي أحتاجها لجعل كل شيء يعمل. هذه الإضافات والأطر تأتي مع خيارات وميزات إضافية لا يجوز لي استخدامها.
هناك سخام بالنطاق الترددي ، هناك.
بالإضافة إلى ذلك ، قد لا تعمل المكونات الإضافية معًا بشكل جيد. قد يبطئون بعضهم البعض ، أو قد يوقف أحدهم الآخر عن العمل تمامًا.
هناك قوة المعالجة المهدرة ، هناك.
إذا كنت تريد حقاً تسريع موقع الويب الخاص بك ، قم بحل أجزاء من الثانية (أو ثواني كاملة ، في بعض الحالات) إليك ما تحتاج إلى القيام به:
مثل CSS ، من الأفضل الاحتفاظ بـ JS في الملفات الخارجية ، وربطه بلغة HTML. قد لا تظن أنها صفقة كبيرة إذا لم يكن لديك رمز JS كثيرًا ، وهي تضيف طلب HTTP ، ولكن إليك الشيء التالي: يتم تخزين ملفات CSS و JS المخزنة مؤقتًا بواسطة المتصفح.
لذلك عند طلب هذه الصفحة مرة أخرى ، أو الحصول على صفحات أخرى على موقعك تستخدم نفس CSS أو JS ، يتم استخدام تلك الملفات الخارجية المخزنة مؤقتًا بدلاً من تنزيلها مرة أخرى. وهذا أسرع أوقات تحميل الموقع ومعالجة أسرع قليلاً. الأمر يستحق المكالمة الإضافية إلى الخادم بين الحين والآخر.
أساسا ، النظرية تسير على هذا النحو: يعرض المتصفح كل ما يوجد في أعلى شفرة مصدر الصفحة أولاً. هذا هو السبب في أن أشياء مثل العلامة تذهب بالقرب من القمة.
ومع ذلك ، يمكن لملفات جافا سكريبت إبطاء كل شيء عن طريق إيقاف المتصفح من عرض HTML حتى يتم تحميله. نظرًا لأن معظم تأثيرات ومقابس JS شائعة الاستخدام تحتاج فقط إلى العمل بعد ظهور بقية الصفحة على الشاشة ، فهذا أقل من مثالي.
تحسين تجربة المستخدم وتقليل وقت التحميل المدرك عن طريق الربط بتلك الملفات الخارجية في أسفل الصفحة ، قبل العلامة مباشرةً.
عند وصول المستخدم للتفاعل مع أي شيء يتطلب JS ، يجب أن يكون جاهزًا للاستخدام.
إذا كنت تصمم تطبيقًا متكاملًا ، فيمكنك ، وربما ، تجاهل هذا القسم. يمكن للإطار الجيد والمرن والخفيف أن يمنح المطورين ميزة هائلة. بالنسبة إلى مواقع الويب صغيرة إلى متوسطة الحجم ، ومع ذلك ، قد يكون إطار JavaScript جافا سكريبًا. في هذه المواقع ، سيتم استخدام JS في الجزء الخلفي من CMS لإدارة المحتوى. على الواجهة الأمامية ، قد يكون لديك شريط تمرير للصورة ، أو تخطيط حواري أو اثنين. إذا كنت تتوهم حقًا ، فقد يكون لديك إتمام تلقائي على شريط البحث.
لا يحتاج معظم المحتوى إلى أن يتم تصميمه وتحريكه بهذه الطريقة. يجب حجز جافا سكريبت قدر الإمكان لتحسين تجربة المستخدم. قد يؤدي الاعتماد عليه ببساطة إلى موقع ويب إلى ظهور موقع بطيء بطيء ، لا سيما على أجهزة الجوال.
بطريقة ما ، تكون جميع إطارات الأكواد هي نفسها ، سواء كانت جافا سكريبت أو PHP أو Python أو HTML أو CSS: كل ميزة هي مجموعة من الأكواد البرمجية. عند اختيار إطار عمل أو مكون إضافي لوظيفة ، اسأل نفسك عما إذا كنت ستستخدم كل ميزة تقدمها ، أو حتى معظمها.
إذا لم يكن كذلك ، فهل هي وحدات الإطار؟ هل يمكنك اختيار واختيار الأجزاء التي تحتاجها بالفعل؟ إذا كان الأمر كذلك ، وتعتقد أن المقايضة بحجم الملف تستحق العناء ، فبكل الوسائل تذهب إليها! بخلاف ذلك ، من الأفضل أن ترى ما يمكنك أخذه أكثر مما يمكنك إحتضانه.
ليس بشكل دائم! فكر في الأمر بهذه الطريقة ، هل هناك أي محتوى أو وظائف على موقعك مخفي عن طريق JS؟ هل يمكن للأشخاص الوصول إليه بدون تمكين JS في المتصفحات الخاصة بهم؟
إذا كان الأمر كذلك ، ثم عظيم. ومع ذلك ، إذا لم يتمكن الأشخاص من الاطلاع على معلومات مهمة أو الاتصال بك أو التنقل بشكل سليم بدون جافا سكريبت ، فستواجه مشكلة. بالتأكيد ، يمكنك الاعتماد على معظم الأشخاص الذين ما زالوا قادرين على تمكينه ، ولكنك دائمًا ما تحصل على هذه الحالات.
كيف يرتبط هذا بسرعة الموقع؟ تخيل كيف سيحصل التصفح البطيء إذا كان جزء من موقعك الإلكتروني لا يعمل فجأة.
لا جدية ، إذا لم تكن مطورًا ، ولديك ميزانية لأحد ، فاحصل على واحدة ، حتى بالنسبة للوظائف الصغيرة والبسيطة. إنه أرخص على المدى الطويل لتوظيف شخص من ذوي الخبرة للقيام بذلك بشكل صحيح ، مرة واحدة.
في حالة أن الأمور تسير على نحو خاطئ (ونحن نتحدث عن أجهزة الكمبيوتر هنا ، لذلك سيحدث خطأ ما) ، فسوف يكتشفون الخطأ الذي حدث بشكل أسرع. سيكون لديهم خبرة في العثور على هذه الأنواع من المشاكل وحلها. إذا لم يكن هناك أي شيء آخر ، فسيكون من الأفضل البحث في googling عن هذه الموضوعات.
الأهم من ذلك ، أنهم سوف يعرفون كيفية القيام بما يجب القيام به مع رمز أقل. يعمل رمز أقل (عادةً) بشكل أسرع و (دائمًا) بشكل أسرع. هذه هي أبسط نصيحة يمكنني تقديمها.
(إذا كنت مطورًا ، أو تتعلم ، قمت بتجميع قائمة من البرامج التعليمية التي ستكون في أسفل هذه المقالة. وشملت بعض أدلة المبتدئين لكتابة JavaScript الذي يتم تشغيله بسرعة.)
عندما تخرج الفيديو من المعادلة ، فإن أفضل شيء في أي موقع مدفوع بالمحتوى هو الصور. تميل الصور إلى أن تكون كبيرة وكبيرة الحجم وبطيئة كالجحيم عندما لا يتم تحسينها.
الآن ، مع انتشار شاشات شبكية العين التي تجبرنا على استخدام صور أكبر إذا أردنا أن تبدو الأشياء جيدة على كل جهاز ، فإن المشكلة لن يسهل حلها. والأسوأ من ذلك ، إنها مسألة سهلة النسيان حتى ينتهي بك الأمر في إنفاق أكثر مما هو مقصود على عرض النطاق الترددي.
عندما نعد كل بايت ، لا يمكننا أن ننسى.
والخبر السار هو أن هذه ليست مشكلة جديدة بأي وسيلة. لماذا هو على ما يرام؟ وهذا يعني أن هناك العديد من الحلول المحتملة للاختيار من بينها ، ويمكنك استخدام أكثر من واحد منها في كل مرة. في الواقع ، هذه فكرة جيدة بشكل عام.
لذا حتى يبدأ مقدمو خدمات الإنترنت وشركات الاستضافة في إعطائنا جميعًا نطاقًا مجانيًا غير محدود (لا تحبس أنفاسك) ، إليك بعض الأشياء التي يمكنك القيام بها:
ببساطة ، افعل قدر ما تستطيع ، بصريًا ، مع CSS وجافا سكريبت قبل أن تتحول إلى صور. ستكون الشفرة دائمًا أرخص للنقل من الصور ، لذا عليك الالتزام بها قدر المستطاع. على الرغم من قوة المعالجة التي تستهلكها الظلال المسقطة على CSS ، والتدرجات اللونية ، وما شابه ، فكر في المفاضلات.
ضع في اعتبارك أيضًا أن صور SVG تحسب ، في هذه الحالة ، كـ "رمز" ، لأن هذا هو كل ما يلي: رمز XML الذي يتم تقديمه كصورة. وبالتالي ينبغي استخدامها كلما كنت بحاجة إلى أي شيء متعلق بالمتجه.
الآن ، بالعودة إلى شاشات شبكية العين المذكورة أعلاه ، ماذا نفعل حيالها؟ كيف نقوم بحفظ النطاق الترددي هناك؟
هذا هو المكان الذي ننتقل إلى العنصر والخاصية مجموعة الصور . وهي جديدة نسبيًا وغير مدعومة بشكل كامل ، ولكنها تسمح للمتصفحات باختيار حجم الصورة المناسب للجهاز الذي يتم استخدامه.
لذلك ، في حين أن هذا لن يوفر لك أي عرض النطاق الترددي لشخص ما يشاهد موقعك في iMac ، إلا أنه ليس كبيرًا بصفقة لأنهم على الأرجح يملكون النطاق العريض. في هذه الأثناء ، يحصل شخص ما على هاتفه على نسخة أصغر من الصورة نفسها ، مما يمنعه من الانتظار لمدة طويلة.
يتم إصلاح العديد من مشكلات حجم الصورة بمجرد معرفة تنسيق الصورة الذي سيتم استخدامه في أي موقف معين. يمكنني متابعة تنسيقات الصور المحددة ، وكيف يعمل الضغط ، وما إلى ذلك ، ولكنك تحتاج فقط إلى تذكر بعض الأشياء:
هذا حقا كل ذلك. إذا قمت بذلك ، وقمت بتشغيل إعدادات التحسين عند حفظ الصور ، فغالبًا ما يمكنك الحصول على جودة محترمة جدًا بأحجام ملفات صغيرة نسبيًا.
ومع ذلك ، هناك تنسيق جديد يطلق عليه WebP ، وهو معتمد من Chrome و Opera تلقائيًا. جوجل مطالبات أن ملفات WebP أصغر بنسبة 26٪ من PNG ، وأن حجمها يتراوح من 25 إلى 34٪ اعتمادًا على اثنين من العوامل.
هذه أخبار رائعة ، باستثناء شيئين: Firefox و IE. الآن ، إذا كنت لا تمانع في استخدام البرامج الاحتياطية ونصوص إضافية ، فيمكنك استخدام تنسيق WebP الآن ، اليوم. مجرد تحميل WebPJS ، وأنت على ما يرام.
يستخدم WebPJS جافا سكريبت وقليلا من فلاش ( تنهد ... لكن هذا فقط لـ IE) لجعله يعمل ، لكنه يعمل. قد تفكر في ذلك إذا كنت بحاجة إلى عرض الكثير والكثير من الصور الكبيرة بسرعة ، مع وجود الجانب السلبي أنها لن تعمل بدون JS.
هناك نوعان من الضغط يمكنك استخدامه على صورك. أولا ، لدينا ضياع الضغط . يتم استخدام هذا على الصيغ الفاشلة مثل JPEG. إنه يسمح لك بضغط أي صورة عنك بقدر ما تريد مع إدراك أن الجودة ستصبح أسوأ وأسوأ وأسوأ. سوف تحصل على pixelated الأشياء وتفقد التعريف.
يتم استخدام الضغط بدون فقده على تنسيقات مثل PNG ، ويمكن تقليل حجم ملفه إلى حد ما. ومع ذلك ، فقد حدودها. هناك دائما نقطة يستحيل فيها جعل الصورة أصغر دون أن تفقد الجودة.
إذا كان لديك Photoshop أو محرر صور متطور ، فمن الأفضل استخدام تلك الملفات لضغط صورك بحيث يمكنك رؤية الشكل الذي ستبدو عليه عند الانتهاء.
(الأدوات التلقائية ، وخاصة الأدوات عبر الإنترنت ، في تجربتي ، تميل إلى ضغط الأشياء ربما قليلاً جدًا. على الرغم من ذلك ، سأدرج أفضل أدوات الضغط التي وجدتها في قسم الروابط أدناه.)
إذا كنت تستخدم نظام إدارة المحتوى مثل WordPress ، فسيؤدي ذلك إلى تغيير حجم الصور التي تكون كبيرة جدًا تلقائيًا. من السهل أيضًا العثور على المكونات الإضافية التي سيتم ضغطها تلقائيًا نيابةً عنك.
ضع في اعتبارك ، أنا أوصي فقط بالضغط التلقائي في الحالات التي تعرف فيها أنك ستحمل الكثير من اللقطات ، والكثير من الصور ذات الجودة المماثلة لنفس الغرض. مدونة الصور هي مثال على ذلك.
إذا كنت تدير موقعًا يحمِّل فيه المستخدمون صورًا خاصة بهم ، حسنًا ... يجب أن تكون عملية الضبط التلقائي للضغط والضغط هي ضرورة مطلقة ، وهذا هو السبب في قيام كل شبكة اجتماعية بذلك.
إليك مجموعة من النصائح التي لا تلائم أي من الفئات الثلاث المذكورة أعلاه.
"تصغير" شفرتك تعني فقط أن جميع المسافات الإضافية وفواصل الأسطر يتم إخراجها. هذا يمكن أن يقلل حجم الملف إلى حد كبير.
قد يبدو مثل الكثير من العمل ، ولكن هناك أدوات هناك لتصغير CSS و JS تلقائيًا ، والاحتفاظ بالملفات المصغرة منفصلة عن الملفات المصدر ، لأسباب واضحة تمامًا.
كما ذكرنا سابقًا ، يمكن لمختلف معالجات CSS الفرعية إخراج كل شفرتك في صيغة مبسطة في المقام الأول.
بشرط إعداد الخادم الخاص بك بشكل صحيح ، يمكن إرسال كافة التعليمات البرمجية إلى المستعرض بتنسيق مضغوط. ملفات نصية ضغط بشكل جيد للغاية ، مما يقلل من حجم الملفات المرسلة بشكل كبير.
الآن ، يجب على خادمك أن يأخذ لحظة أو اثنتين لضغط الملفات التي يرسلها ، ويجب على متصفح المستخدم فك ضغطها ، ولكن هذا عادة ما يكون مفيدًا لموازنة النطاق الترددي.
للحصول على شرح كامل عن كيفية عمل هذا ، راجع كيفية تحسين موقعك مع ضغط GZIP .
يحدث التخزين المؤقت للمستعرض تلقائيًا إلى حدٍ ما بفضل المتصفحات الحديثة. ينتقل المتصفح إلى أحد المواقع ، ويخزن مؤقتًا الصور والمعلومات الأخرى التي يعثر عليها هناك.
وبهذه الطريقة ، إذا عاد المستخدم نفسه خلال فترة زمنية معينة ، فلن يحتاج المتصفح إلى طلب نفس الصور من جديد. كل ما عليك فعله هو تحميل التطبيقات الموجودة بالفعل ، وطلب أي صور جديدة قد لا تحتوي عليها.
ومع ذلك ، هناك شيء يمكنك فعله لإخبار المستعرضات بماذا يجب تخزينها مؤقتًا وطول المدة ، كما هو موضح في هذا الدليل .
ثم هناك التخزين المؤقت للخادم. إن التخزين المؤقت للخادم يأخذ موقعك في الأساس ويضع نوعًا من "نسخة" منه بين المستخدمين وخادمك الفعلي. لماذا تزعج نفسك؟
حسنًا ، إنه مفيد بشكل خاص للأشخاص الذين يستخدمون أنظمة إدارة المحتوى على نطاق واسع. يؤدي وصول المستخدمين إلى نسخة مؤقتة من موقعك بدلاً من الشيء الفعلي إلى تقليل عدد المكالمات إلى قاعدة البيانات الخاصة بك. يتم عرض المعلومات وتحميلها بشكل أسرع لأنه لا يلزم إعادة معالجتها في كل مرة.
استنادًا إلى كيفية إعداده ، يمكن أن يؤدي التخزين المؤقت للخادم إلى خفض تكاليف النطاق الترددي بشكل عام. في الأساس ، كلما زاد حجم موقعك ، زاد السبب الذي يجعلك تبحث في التخزين المؤقت له.
والآن ، القسم الذي كنت تنتظره جميعًا: قائمة الروابط! لدينا برامج تعليمية وأدلة ، في الغالب ، واثنين من أدوات ضغط الصور للتوصية.
ياهو! قد لا تكون صفقة كبيرة كما كانت من قبل ، لكن شبكة المطورين لديها الكثير من الأشياء الجيدة عليها. وهذا يشمل بهم أفضل الممارسات لتسريع موقع الويب الخاص بك ، والتي تغطي بعض الأشياء الأساسية التي يمكنك القيام بها. بعض منها يغطي نفس الأرضية مثل هذه المقالة ، ولكن هناك ما هو أبعد من ذلك.
في المقدمة ، ذكرت سرعة الموقع المدركة ، والتي تعرف أيضا باسم perfomance المدركة. إذا كنت ترغب في قراءة المزيد عن ذلك ، راجع دليل المبتدئين إلى الأداء المدرك: 4 طرق لجعل موقعك على المحمول يشعر وكأنه تطبيق أصلي .
Effeckt.css هي مجموعة من الرسوم المتحركة المستندة إلى CSS تم تصميمها لتقديم سريع ، بغض النظر عن النظام الأساسي الذي يعمل عليه المستخدم.
هذه هو دليل للتأكد من تنزيل CSS ومعالجته بأسرع ما يمكن من خلال المتصفح.
عندما تبدأ للتو ، تعلم رمز بشكل صحيح يمكن أن تكون كبيرة مثل سرعة أي نصائح عشوائية من الحيل التي قد تتعلمها. تكاليف التعليمة البرمجية السيئة أكثر من حيث وقت المعالجة ، لذلك تعلم كيفية القيام بالأمور بالطريقة الصحيحة.
هنا الدليل الأساسي يركز بشكل أكثر تحديدًا على كتابة JavaScript الذي يتم تشغيله بسرعة.
تماما مثل العنوان يقول، هذه هي جميع النصائح التي تستهدف على وجه التحديد في جافا سكريبت V8.
وأحيانًا ، ربما ينتهي بك الحال إلى استخدام jQuery. إذا كنت ستفعل ذلك ، على الأقل يجب أن تعرف كيف تكتب محددات jQuery التي لن تبطئك. وهنا من أين لقد قمت بتغطية نقطة الموقع .
اقرا هذا لمزيد من المعلومات حول تنسيقات الصور على الويب. المعلومات قديمة بعض الشيء ، ولكنها لا تزال صالحة وجيدة المعرفة.
هذه دليل أكثر تقنية لتحسين الصورة المقدمة من قِبل Google Developer Network.
Compressor.io هي واحدة من الأدوات الأكثر إثارة للإعجاب التي واجهتها شخصيا. إنه تطبيق عبر الإنترنت ، لذا سيكون عليك تحميل أي ملفات تريد ضغطها ، ولكنها تستطيع أن تفعل المعجزات لـ JPG. فهو يقدم خيارات ضغط غير متوقعة وخالية من الضياع ، لكل منها نتائج مذهلة ، ويمكنه أيضًا إجراء معالجة الدفعات.
Trimage يتخصص في الضغط بدون فقدان ، ولكن يمكن تثبيته على جهاز الكمبيوتر الخاص بك ، على نظام التشغيل Windows أو Mac أو Linux. نظرًا لأنه يتم تثبيته على جهاز الكمبيوتر الخاص بك (ونعم ، ويأتي مع خيارات سطر الأوامر المتعددة بالإضافة إلى واجهة المستخدم الرسومية) ، يمكن بسهولة تشغيله تلقائيًا كجزء من سير عمل التطوير.
كما هو الحال دائمًا ، هناك الكثير لتعلمه. ولكن مع المعلومات التي قدمناها ، والموارد التي قمنا بربطها ، سوف تكون في طريقك إلى بناء المواقع والتطبيقات التي لا تزعج الجحيم من المستخدمين.
وهذه هي الخطوة الأولى نحو الإعجاب بها.