رسم توضيحي لأشخاص يقومون بإدخال آلة مقاييس في مستند.
حتى في عام 2021 ، لا يزال أداء الويب يمثل مشكلة. وفقًا لأرشيف HTTP ، تتطلب الصفحة المتوسطة تنزيلًا بحجم 2 ميغابايت ، وتقدم أكثر من 60 طلب HTTP ، ويمكن أن تستغرق 18 ثانية للتحميل على جهاز محمول بالكامل. تبلغ مساحة أوراق الأنماط 60 كيلو بايت مقسمة على سبعة طلبات ، لذلك نادرًا ما تكون أولوية قصوى عند محاولة معالجة مشكلات الأداء.
ومع ذلك ، فإن CSS لها تأثير ، مهما بدا طفيفًا. بمجرد معالجة JavaScript الخاص بك ، يجب أن يكون تعلم تحسين CSS بشكل صحيح هو الأولوية التالية.
دعنا نصل إلى ذلك!
تبدو CSS بريئة ولكنها قد تتطلب بعض المعالجة الثقيلة.
عندما يواجه متصفحك <link>علامة ، فإنه يوقف تنزيلات المتصفح الأخرى ومعالجتها أثناء جلب ملف CSS وتحليله.
يمكن لجافا سكريبت أيضًا حظر عرض المتصفح ، ولكن المعالجة غير المتزامنة ممكنة مع:
و asyncالسمة لتحميل البرامج النصية في موازاة ذلك، والتي تدار على الفور أنها على استعداد.
و deferالسمة لتحميل في موازاة ذلك، ثم تشغيل من أجل عندما DOM جاهز.
و type=”module”السمة لتحميل وحدة ES (الذي مثل سلوك defer).
غالبًا ما تتطلب الأصول مثل الصور مزيدًا من النطاق الترددي ، ولكن تتوفر تنسيقات فعالة ، ويمكن تحميلها كسول ( loading=”lazy”سمة) دون حظر عرض المتصفح.
لا شيء من هذا ممكن مع CSS. يتم تخزين الملف في ذاكرة التخزين المؤقت ، لذا يجب أن تكون عمليات تحميل الصفحة اللاحقة أسرع ، ولكن تظل عملية حظر العرض قائمة.
كلما كانت ورقة الأنماط الخاصة بك أكبر ، كلما طال وقت التنزيل والمعالجة في نموذج كائن CSS (CSSOM) ، والذي يمكن للمتصفح وواجهات برمجة تطبيقات جافا سكريبت استخدامها لعرض الصفحة. على الرغم من أن أوراق أنماط CSS أصغر من معظم ملفات مواقع الويب الأخرى ، إلا أنها ليست محصنة ضد قاعدة التجربة “الأصغر هو الأفضل”.
قد يكون من الصعب تحديد الأنماط التي لم تعد مستخدمة ، وقد تؤدي إزالة الأنماط الخاطئة إلى إحداث فوضى في الموقع. يختار المطورون عادةً نهج “الاحتفاظ بكل شيء” الأكثر أمانًا. أنماط الصفحة ، مكونات تستمر، والحاجيات التي لم تعد تستخدم في الوجود في CSS. النتيجة؟ يزداد حجم الملف وتعقيده وجهود الصيانة بشكل كبير ، مما يجعل المطورين أقل وأقل عرضة لإزالة التعليمات البرمجية الزائدة.
يمكن لـ CSS الرجوع إلى أوراق الأنماط الأخرى باستخدام قواعدimport. تمنع عمليات الاستيراد هذه معالجة ورقة الأنماط الحالية وتحميل المزيد من ملفات CSS على التوالي .
يمكن أيضًا الرجوع إلى الأصول الأخرى ، مثل الخطوط والصور. سيحاول المتصفح تحسين التنزيلات ، ولكن في حالة الشك ، سيقوم بجلبها على الفور. لا تزال الملفات المضمنة بترميز base64 بحاجة إلى مزيد من المعالجة.
تحتوي المستعرضات على ثلاث مراحل للتقديم :
و التخطيط (أو إنحسر المرحلة) تحسب أبعاد كل عنصر وكيف يؤثر ذلك على حجم أو تمركز عناصر من حوله.
و الطلاء تلفت المرحلة الأجزاء المرئية من كل عنصر على طبقات منفصلة: النص، والألوان، والصور، والحدود، والظلال، الخ
على مركب يستند كل طبقة على الصفحة بالترتيب الصحيح وفقا للسياقات التراص، وتحديد المواقع، ض المؤشرات، الخ
إذا لم تكن حريصًا ، يمكن أن تتسبب التغييرات والرسوم المتحركة في خصائص CSS في إعادة عرض المراحل الثلاث جميعها. بعض الخصائص ، مثل الظلال والتدرجات اللونية ، تكون أيضًا أكثر تكلفة من الناحية الحسابية من كتلة الألوان والهوامش.
إن الاعتراف بأن لديك مشكلة في أداء CSS هو الخطوة الأولى على طريق الاسترداد! العثور على الأسباب ومعالجتها مسألة أخرى.
يمكن أن تساعدك الأدوات والخدمات التالية (غير مرتبة بأي ترتيب) في تحديد اختناقات التصميم في التعليمات البرمجية الخاصة بك.
المتخصصين أداء ويب يقضون وقتا طويلا في DevTools و شبكة لوحة على وجه الخصوص. تعد DevTools أصليًا لمعظم المتصفحات الحديثة ، على الرغم من أننا سنستخدم Google Chrome في أمثلةنا .
يمكن فتح DevTools من قائمة المتصفح ، عادةً في المزيد من الأدوات > أدوات المطور ، أو عبر اختصارات لوحة المفاتيح Ctrl | Cmd + Shift + I أو F12 .
قم بالتبديل إلى علامة التبويب الشبكة وتأكد من تحديد تعطيل ذاكرة التخزين المؤقت لمنع الملفات المخزنة مؤقتًا التي تؤثر على التقرير. يمكنك أيضًا تغيير خيار الاختناق لمحاكاة شبكات المحمول الأبطأ.
قم بتحديث الصفحة لعرض المخطط الانحداري للتنزيل والمعالجة:
لوحة شبكة DevTools.
لوحة شبكة DevTools.
يعد أي شريط طويل مدعاة للقلق ، ولكن يجب أن تكون حذرًا بشكل خاص من القضبان الطويلة المسدودة / المتوقفة (الموضحة باللون الأبيض). في هذا المثال ، لا يمكن بدء تنزيل الصف المميز وجميع الصفوف التالية حتى تتم معالجة ملفات CSS و JavaScript التي تحظر العرض في أعلى صفحة HTML.
و تصفية مربع يسمح لك لإظهار أو إخفاء أصول محددة:
larger-than:<S>: الحد الأقصى للملفات الأكبر من <S> ، معبرًا عنها بالبايت (10000) أو كيلو بايت (1000 كيلو بايت) أو ميغا بايت (1 ميجا)
-larger-than:<S>: الحد من الملفات الأصغر من <S>
-domain:*<.yourdomain.com>: اعرض طلبات الجهات الخارجية التي لم يتم تحميلها من نطاقك الأساسي. هذه هي المساهم الرئيسي في المواقع البطيئة.
عادةً ما تحتوي الصفحة عالية الأداء ذات CSS المحسّن على عدد أقل من الأصول المحملة بالتوازي مع أشرطة قصيرة محظورة / متوقفة.
يوفر WebPageTest عرضًا شلالًا مشابهًا للشبكة ، بالإضافة إلى العديد من مخططات الأداء الأخرى:
WebPageTest.org شلال الأصول للمساعدة في تحسين css
WebPageTest.org شلال الأصول.
تستخدم الخدمة أجهزة موجودة في مواقع عالمية مختلفة حتى تتمكن من تقييم أداء العالم الحقيقي وتحسينات CSS.
يتم توفير لوحة DevTools Lighthouse في المتصفحات القائمة على Chromium مثل Chrome و Edge و Brave و Opera و Vivaldi. يمكنك إنشاء تقارير الأداء ، وتطبيق الويب التقدمي ، وأفضل الممارسات ، وإمكانية الوصول ، وتحسين محرك البحث للأجهزة المحمولة وأجهزة سطح المكتب.
لوحة منارة DevTools.
لوحة منارة DevTools.
تقدم الأداة اقتراحات للتحسين ، بما في ذلك طرق تحسين CSS. قد لا تكون جميعها عملية أو ممكنة ، ولكن يتم إبراز المكاسب السريعة الأكثر فائدة.
PageSpeed Insights هو الإصدار المتاح عبر الإنترنت من Lighthouse. يحتوي على ميزات أقل ولكن يمكن استخدامه في أي متصفح ويوفر بعض الأفكار البديلة.
على سبيل المثال ، يعرض المخطط الشبكي أكبر أصول JavaScript بمقياس تغطية ، مما يشير إلى نسبة الشفرة المستخدمة وغير المستخدمة:
Google PageSpeed Insights مخطط هيكلي للمساعدة في تحسين Css
خرائط Google PageSpeed Insights.
لا يتم عرض CSS ، لكن كمية JavaScript سيكون لها تأثير على كفاءة الأنماط.
تتضمن أدوات اختبار سرعة مواقع الويب المشابهة اختبار سرعة موقع الويب Pingdom و GTmetrix .
تساعد لوحة DevTools Coverage في المتصفحات القائمة على Chromium في تحديد موقع رمز CSS (وجافا سكريبت) غير المستخدم. حدد Coverage من القائمة الفرعية DevTools More tools ، ثم حدِّث صفحتك وتصفح موقعك / تطبيقك:
لوحة تغطية DevTools.
لوحة تغطية DevTools.
تظهر أصول CSS و JavaScript في لوحة Coverage ، مع نسبة التعليمات البرمجية غير المستخدمة باللون الأحمر. انقر فوق أي ملف لعرض مصدره مع تمييز الكود غير المستخدم باللون الأحمر في هامش رقم السطر.
بعض الأشياء التي يجب مراعاتها:
تتم إعادة تعيين مقاييس التغطية إذا قمت بالتحديث أو الانتقال إلى صفحة جديدة ، كما هو معتاد في موقع وورد بريس. سيقل مقياس الشفرة غير المستخدمة فقط إذا كنت تتصفح تطبيق صفحة واحدة يقوم بتحميل المحتوى دون تحديث الصفحة.
يمكن للأداة حساب CSS المستخدمة فقط حتى نقطة زمنية معينة. لا يمكن تحديد ما إذا لم يتم عرض عنصر واجهة المستخدم أو أنه يحتوي على حالات متعددة مرتبطة بجافا سكريبت.
تحتوي المتصفحات القائمة على Chromium على شاشة أداء في الوقت الفعلي. مرة أخرى ، هذا متاح من قائمة أدوات DevTools More . يتم تحديث المخططات أثناء التنقل بين الصفحات والتمرير وتشغيل الرسوم المتحركة:
مراقبة الأداء في الوقت الحقيقي DevTools.
مراقبة الأداء في الوقت الحقيقي DevTools.
تعتبر المقاييس التالية ذات أهمية خاصة لتحسين أداء CSS (كلما كان ذلك أقل ، كان ذلك أفضل):
استخدام وحدة المعالجة المركزية: استخدام المعالج من 0٪ إلى 100٪.
التخطيطات في الثانية: المعدل الذي يجب على المستعرض إعادة تخطيط الصفحة به.
عمليات إعادة حساب النمط في الثانية: المعدل الذي يجب على المستعرض إعادة حساب الأنماط به.
قد تكون المقاييس الأخرى مفيدة أيضًا إذا كانت CSS تكافح بسبب عوامل خارجية (مرة أخرى ، تشير القيم الأقل إلى أداء أفضل):
حجم كومة JS: إجمالي الذاكرة المستخدمة بواسطة كائنات JavaScript.
عقد DOM: عدد العناصر في مستند HTML .
مستمعي أحداث JS: عدد مستمعي أحداث JavaScript المسجلين.
المستندات: عدد الموارد ، بما في ذلك الصفحة وملفات CSS ووحدات JavaScript النمطية وما إلى ذلك.
إطارات المستندات: عدد الإطارات ، وإطارات iframes ، ونصوص العاملين في JavaScript.
تتيح لك لوحة أداء DevTools تسجيل أنشطة الصفحة لمزيد من التحليل والمساعدة في تحديد مشكلات الأداء. التقارير التي تم إنشاؤها معقدة ، ويتجنبها العديد من المطورين ، لكنها توفر معلومات قيمة.
تسمح لك أيقونة إعدادات لوحة الأداء بتعيين خيارات متنوعة ، مثل إبطاء الشبكة ووحدة المعالجة المركزية. يمكنك أيضًا تعطيل نماذج JavaScript بحيث لا يتم تسجيل مكدسات المكالمات التفصيلية.
للبدء ، انقر فوق رمز السجل الدائري ، وقم بتحميل و / أو استخدام صفحتك ، ثم انقر فوق الزر ” إيقاف” لعرض التقرير:
تقرير أداء DevTools للمساعدة في تحسين css
تقرير أداء DevTools.
ستكون جميع هذه المقاييس تقريبًا مفيدة لمطوري JavaScript ، ولكن قد تكون مشكلات تحسين CSS واضحة بشكل خاص من:
الشريط الأحمر العلوي: يشير هذا إلى انخفاض معدل الإطارات بشكل كبير ، مما قد يتسبب في حدوث مشكلات في الأداء. يُتوقع حدوث ذلك في بداية تحميل الصفحة ، ولكن قد تكون رسوم CSS المتحركة الزائدة مشكلة أيضًا.
مخطط ملخص: قد تشير مقاييس التحميل والعرض والطلاء إلى وجود مشكلات في CSS.
لن تعالج الإصلاحات التالية مشكلات CSS بشكل مباشر ، لكنها يمكن أن تساعدك في معالجة بعض مشكلات الأداء بجهد ضئيل نسبيًا.
سيؤدي استخدام مضيف جيد مع خوادم أقرب ماديًا إلى مستخدميك إلى تحقيق فوائد أداء فورية. تختلف خطط الاستضافة ، ولكن هناك ثلاثة أنواع أساسية:
الاستضافة المشتركة: تتم استضافة موقع الويب الخاص بك على خادم فعلي ، وربما بجانب مئات المواقع الأخرى. يتم مشاركة مساحة القرص وذاكرة الوصول العشوائي ووقت وحدة المعالجة المركزية والنطاق الترددي. غالبًا ما تكون الخطط غير مكلفة ، لكن الأداء والتوافر يتأثران بالمواقع الأخرى. قد تكون الترقية ممكنة ، ولكن سيظل موقعك بشكل عام على نفس البنية التحتية.
الاستضافة المخصصة: تتم استضافة موقعك على خادم مادي واحد أو أكثر تمتلكه. يمكن تكوين الجهاز وتحديثه وفقًا للمتطلبات. غالبًا ما تكون الخطط باهظة الثمن ، ولا يزال فشل الأجهزة يمثل مشكلة.
الاستضافة السحابية: تستخلص الاستضافة السحابية البنية التحتية للأجهزة في مجموعة من الخدمات التي يمكن الوصول إليها عند الطلب. يمكن توفير موقعك عبر مجموعة من الأجهزة لتسهيل الترقيات.
تختلف خطط وأسعار الاستضافة السحابية بشكل كبير. يمكنك التفكير في:
النظام الأساسي كخدمة (PaaS) ، مثل خوادم الويب الافتراضية وقواعد البيانات ، أو
خيارات البرامج كخدمة (SaaS) ، والتي تقدم تطبيقات مُدارة بالكامل مثل وورد بريس .
يمكن أن يؤدي تبديل المضيفين إلى تعزيز الأداء. من غير المحتمل أن تحل جميع مشاكلك ، لكنه حل فعال من حيث التكلفة لمشكلات الخلفية والنطاق الترددي.
يمكنك أيضًا التفكير في استخدام شبكة توصيل المحتوى (CDN) أو شبكة CDN للصور والفيديو المتخصصة التي يمكنها توزيع الحمل عبر مواقع متعددة أقرب جغرافيًا إلى المستخدمين.
حوالي 10٪ من المواقع لا تقوم بتنشيط ضغط gzip (أو أفضل) ، والذي عادة ما يكون خيار الخادم الافتراضي. يؤدي ذلك إلى تقليل حجم CSS بنسبة 60٪ أو أكثر عن طريق ضغط الملفات قبل الإرسال. لن يصلح CSS غير الفعال ، لكن الكود سيصل عاجلاً!
يجب عليك أيضًا تنشيط HTTP / 2 (أو أفضل منه) ، والذي يرسل البيانات بتنسيق ثنائي أصغر ، ويضغط الرؤوس ، ويمكنه إرسال أكثر من ملف على نفس اتصال TCP.
أخيرًا ، تأكد من أن المتصفح يمكنه تخزين CSS والملفات الأخرى بشكل فعال. هذا هو عادة مسألة وضع منتهية ، آخر تعديل، و / أو ETAG علامات الرقم في HTTP رأس.
يمكن توسيع أنظمة إدارة المحتوى مثل وورد بريس مع السمات والإضافات التي تخدم CSS الخاصة بها. حيثما أمكن ، يجب عليك تسريع نظام إدارة المحتوى لديك من أجل:
إزالة الإضافات غير المستخدمة.
استخدم موضوعات أصغر حجمًا
قم بتمكين التخزين المؤقت لمنع إعادة إنشاء الصفحة بشكل مفرط.
لا تحتوي الصور على نفس تكاليف المعالجة والعرض مثل HTML و CSS و JavaScript ، لكنها تمثل نسبة كبيرة من وزن الصفحة وعرض النطاق الترددي القابل للاستخدام. انصح:
إزالة الصور غير الضرورية.
تغيير حجم الصور الكبيرة – ربما إلى ما لا يزيد عن 150٪ من الحجم الأقصى الذي يمكن أن تظهر فيه على الشاشة.
استخدام تنسيق صورة مناسب – من الناحية المثالية خيار مضغوط للغاية مثل WebP أو AVIF ، ولكن من المحتمل أن يكون SVG للشعارات والمخططات.
استبدال الصور بتدرجات CSS أو تأثيرات أخرى.
إضافة سمات العرض والارتفاع إلى <img>علامات HTML أو استخدام خاصية نسبة العرض إلى الارتفاع CSS الجديدة لضمان حجز مساحة مناسبة على الصفحة قبل تنزيل الصورة.
يمكن لصورة CDN المتخصصة التعامل مع بعض هذا العمل نيابة عنك. لمزيد من النصائح ، راجع دليلنا حول كيفية تحسين الصور للويب .
أسرع الأنماط هي تلك التي لا تحتاج أبدًا إلى تحميلها أو تقديمها! حاول إزالة / تحرير أي كود CSS لم تعد بحاجة إليه ، مثل تلك الخاصة بالصفحات القديمة أو عناصر واجهة المستخدم أو أطر العمل. قد يكون هذا صعبًا على المواقع الكبيرة ، وليس من الواضح دائمًا ما إذا كانت مجموعة معينة من الأنماط ضرورية أم لا.
تحلل الأدوات التالية استخدام HTML و CSS في وقت الإنشاء أو عن طريق الزحف إلى عناوين URL لتحديد الشفرة المكررة. هذا ليس مناسبًا دائمًا ، لذلك يمكن تعيين تكوينات إضافية لضمان إدراج الأنماط التي يتم تشغيلها بواسطة JavaScript وتفاعلات المستخدم المسموح بها:
UnCSS
غير مستخدم CSS
تطهير CSS
PurifyCSS
هناك خيار أفضل: تقسيم CSS إلى ملفات منفصلة بمستويات واضحة من المسؤولية وتوثيق وفقًا لذلك. تصبح إزالة الأنماط غير الضرورية أسهل بكثير.
لا يتم تحميل جميع CSS بشكل متساوٍ. تحتوي <link>العلامة المتواضعة على عدد من الخيارات والمراوغات غير المنطقية دائمًا.
أحدثت شركة Google Fonts وغيرها من مؤسسات الخطوط المماثلة ثورة في خطوط الويب ، ولكن بضعة أسطر من رمز الخط يمكن أن تتكبد مئات الكيلو بايت من عرض النطاق الترددي.
فيما يلي اقتراحات التحسين الخاصة بنا:
قم بتحميل الخطوط التي تحتاجها فقط: قم بإزالة الخطوط التي لا تستخدمها وتحقق مما إذا كانت الخطوط الجديدة ضرورية.
تحميل الأوزان والأنماط التي تحتاجها فقط: يمكن لمعظم مؤسسي الخطوط قصر التنزيل على مجموعات أحرف معينة (مثل اللاتينية فقط) والأوزان (السُمك) والمائل (المنحدرات). يمكن للمتصفحات عرض الأنماط المفقودة تلقائيًا ، على الرغم من أن النتائج قد تكون رديئة.
الحد من الأحرف المطلوبة: يمكن تقييد الخطوط المستخدمة بشكل غير متكرر بأحرف معينة. على سبيل المثال ، يمكن تحديد العنوان “تعليمي CSS” في Open Sans عن طريق إضافة &text=معلمة إلى سلسلة استعلام خطوط Google:fonts.googleapis.com/css?family=Open+Sans&text=CStuorial
ضع في اعتبارك الخطوط المتغيرة: تحدد الخطوط المتغيرة مجموعة كبيرة ومتنوعة من الأنماط والأوزان والمائلة باستخدام الاستيفاء المتجه. ملف الخط أكبر قليلاً ، لكنك تحتاج إلى واحد فقط بدلاً من عدة. على الخط عودي يوضح مرونة الخطوط المتغيرة.
تحميل الخطوط من خادمك المحلي: خطوط الاستضافة الذاتية أكثر كفاءة من استخدام مسبك. مطلوب عدد أقل من عمليات بحث DNS ، ويمكنك تقييد التنزيل على WOFF2 ، الذي تدعمه جميع المتصفحات الحديثة . يمكن أن تعود المتصفحات القديمة (أنظر إليك IE) إلى خط نظام التشغيل.
ضع في اعتبارك خطوط نظام التشغيل: قد يبدو خط الويب بحجم 500 كيلو بايت رائعًا ، ولكن هل سيلاحظ أي شخص ما إذا كنت قد تحولت إلى خطوط Helvetica أو Arial أو Georgia أو Verdana المتاحة بشكل شائع؟ يعد نظام التشغيل أو الخطوط الآمنة للويب طريقة سهلة لتعزيز الأداء.
يمكن أن تستغرق خطوط الويب بضع ثوانٍ للتنزيل والمعالجة. المتصفح إما:
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
Show a Flash of Unstyled Text (FOUT): يتم استخدام أول خط احتياطي متاح في البداية ولكن يتم استبداله بمجرد أن يصبح خط الويب جاهزًا.
إظهار وميض النص غير المرئي (FOIT): لا يتم عرض أي نص حتى يصبح خط الويب جاهزًا. هذه هي العملية الافتراضية في المتصفحات الحديثة ، والتي تنتظر عادةً ثلاث ثوانٍ قبل الرجوع إلى الخط الاحتياطي.
لا يعتبر أي منهما مثاليًا. يمكن لخاصية CSS font-display و Google Font & display = parameter تحديد خيار بديل:
auto: السلوك الافتراضي للمتصفح (عادةً FOIT).
كتلة: FOIT بشكل فعال. النص غير مرئي لمدة تصل إلى ثلاث ثوانٍ. لا يوجد تبديل للخط ، لكن النص قد يستغرق وقتًا حتى يظهر.
المقايضة: FOUT بشكل فعال. يتم استخدام الإجراء الاحتياطي الأول حتى يتوفر خط الويب. النص قابل للقراءة على الفور ، لكن تأثير تبديل الخط يمكن أن يكون مزعجًا. يمكن استخدام Font Style Matcher لتعريف احتياطي بنفس الحجم.
احتياطي: حل وسط بين FOIT و FOUT. النص غير مرئي لفترة قصيرة (عادةً 100 مللي ثانية) ، ثم يتم استخدام الإجراء الاحتياطي الأول حتى يتوفر خط الويب.
اختياري: مشابه للاحتياطي ، باستثناء عدم حدوث تبديل للخط. سيتم استخدام خط الويب فقط إذا كان متاحًا خلال الفترة الأولية. من المحتمل أن يُظهر عرض الصفحة الأولى الخاص بك خطًا احتياطيًا ، مع طرق العرض اللاحقة باستخدام خط الويب الذي تم تنزيله والمخزن مؤقتًا.
يمكن أن يؤدي استخدام المبادلة أو الاحتياطية أو الاختيارية إلى تعزيز الأداء الملحوظ.
و import في القاعدة يسمح ملفات CSS لإدراجها ضمن أمور أخرى:
/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");يبدو هذا كطريقة فعالة لتحميل مكونات وخطوط أصغر. لسوء الحظ ، يتم حظر كل استيراد ، ويجب تحميل كل ملف وتحليله في سلسلة.
تعد <link>العلامات المتعددة داخل HTML أكثر فاعلية وتحمل ملفات CSS بالتوازي:
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="widget.css">ومع ذلك ، من الأفضل …
يمكن لأدوات البناء الحديثة والمعالجات المسبقة لـ CSS مثل Sass و وورد بريس أن تجمع كل الأجزاء في ملف CSS كبير واحد . يتم بعد ذلك إزالة المسافات البيضاء والتعليقات والأحرف غير الضرورية لتقليل حجم الملف إلى الحد الأدنى.
تعد الملفات المتعددة مشكلة أقل في الأداء مع HTTP / 2 والإصدارات الأعلى ، لكن الملف الواحد يتطلب رأسًا واحدًا فقط ويمكن ضغطه بواسطة gzip وتخزينه مؤقتًا بشكل أكثر كفاءة.
تكون ملفات CSS المنفصلة عملية فقط عندما يكون لديك ورقة أنماط واحدة أو أكثر يتم تغييرها بشكل متكرر – ربما عدة مرات في الأسبوع. حتى مع ذلك ، لا يزال من الممكن دمج كود CSS الثابت في ملف واحد.
يمكن للأدوات ترميز الصور إلى سلاسل base64 ، والتي يمكنك استخدامها كعناوين URI للبيانات في <img>علامات HTML وخلفيات CSS:
.background {
background-image: url('data:image/jpg;base64,ABC123...');
}هذا يقلل من عدد طلبات HTTP ، لكنه يضر بأداء CSS:
يمكن أن تكون سلاسل base64 أكبر بنسبة 30٪ من مكافئها الثنائي.
يجب أن تقوم المتصفحات بفك تشفير السلسلة قبل استخدام الصورة ، و
يؤدي تغيير بكسل صورة واحدة إلى إبطال ملف CSS بالكامل.
ضع في اعتبارك ترميز base64 فقط إذا كنت تستخدم صورًا صغيرة جدًا وغير متكررة حيث لا تكون السلسلة الناتجة أطول بشكل ملحوظ من عنوان URL.
ومع ذلك ، يمكنك ترميز رموز SVG القابلة لإعادة الاستخدام باستخدام UTF8 ، على سبيل المثال
.svgbackground {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>');
}ما لم تكن مؤسفًا ولديك نسبة عالية من مستخدمي Internet Explorer ، يمكن إزالة أوراق الأنماط والاختراقات الشرطية لـ IE من CSS الخاص بك. في معظم الحالات ، سيظل مستخدمو IE يرون شيئًا ما ، خاصةً إذا كنت تستخدم تصميمًا للجوال أولاً يعرض عرضًا خطيًا أبسط بشكل افتراضي. قد لا تكون النتيجة جميلة ، ولن تكون مثالية للبكسل ، ولكن من الأفضل إنفاق ميزانية التطوير الخاصة بك في التفكير في إمكانية الوصول لجميع المستخدمين.
و <link>توفر بطاقة اختياري السمة التحميل المسبق الذي يمكن بدء التنزيل فورا بدلا من الانتظار للمرجعية حقيقية في HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<!-- preload styles -->
<link rel="preload" href="/css/main.css" as="style" />
<!-- lots more code -->
<!-- load preloaded styles -->
<link rel="stylesheet" href="/css/main.css" />هذا مفيد بشكل خاص في وورد بريس وأنظمة إدارة المحتوى الأخرى حيث يمكن أن يضيف المكون الإضافي ورقة أنماط أسفل الصفحة.
قد تقترح أدوات التحليل “CSS الهامة المضمنة” أو “تقليل أوراق أنماط حظر العرض”. هذا يحسن الأداء من خلال:
هل تحتاج إلى استضافة سريعة وموثوقة وآمنة تمامًا لموقع التجارة الإلكترونية الخاص بك؟ يوفر Kinsta كل هذا ودعمًا عالميًا على مدار الساعة طوال أيام الأسبوع من خبراء WooCommerce. تحقق من خططنا
تحديد الأنماط الأساسية التي تستخدمها العناصر الموجودة في الجزء المرئي من الصفحة (تلك التي تظهر عند تحميل الصفحة)
تضمين CSS المهم في <style>علامة في ملف<head>
تحميل CSS المتبقية بشكل غير متزامن لتجنب حظر العرض. يمكن تحقيق ذلك عن طريق تحميل ورقة الأنماط بأسلوب “طباعة” يعطي المستعرض أولوية أقل. يقوم JavaScript بعد ذلك بتحويله إلى نمط وسائط “all” بمجرد تحميل الصفحة ( <noscript>يضمن عمل CSS أن JavaScript غير متوفر):
<style>
/* critical styles */
body { font-family: sans-serif; color: #111; }
</style>
<!-- load remaining styles -->
<link rel="stylesheet"
href="/css/main.css"
media="print"
onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="/css/main.css">
</noscript>أدوات مثل حاسمة و criticalCSS يمكن أن يساعد على استخراج الاساليب لعناصر في الرأي.
تعمل هذه التقنية على تحسين الأداء بشكل ملحوظ وتعزيز نتائج التدقيق. يجب أن تكون المواقع أو التطبيقات ذات الواجهات المتسقة أسهل في التنفيذ ، ولكنها قد تكون أكثر صعوبة في أي مكان آخر:
تعتبر أداة البناء ضرورية لجميع المواقع باستثناء أبسطها.
يختلف “الطي” على كل جهاز.
يمكن أن تحتوي المواقع على مجموعة متنوعة من التخطيطات التي تتطلب CSS مهمًا مختلفًا.
يمكن أن تكافح أدوات CSS المهمة مع أطر عمل محددة ، و HTML من جانب العميل ، ومحتوى ديناميكي.
تستفيد هذه التقنية في الغالب من تحميل الصفحة الأولى. يتم تخزين CSS مؤقتًا للصفحات اللاحقة ، لذا ستزيد الأنماط المضمنة الإضافية من وزن الصفحة.
ستفيد معظم المواقع المتسلسلة والمصغرة ، لكن المواقع التي تتطلب كمية كبيرة من أنماط الشاشة الأكبر يمكن أن تقسم ملفات CSS وتحميلها باستخدام استعلام وسائط:
<!-- core styles loaded on all devices -->
<link rel="stylesheet" href="core.css">
<!-- served to screens at least 40em wide -->
<link rel="stylesheet" media="(min-width: 40em)" href="40em.css">
<!-- served to screens at least 80em wide -->
<link rel="stylesheet" media="(min-width: 80em)" href="80em.css">يفترض هذا المثال منهجية “الجوال أولاً”. تقوم الأجهزة المحمولة بتحميل core.css ولكن قد لا تحتاج إلى تنزيل أوراق الأنماط المتبقية أو تحليلها.
يعد العرض التدريجي أسلوبًا يعرف أوراق الأنماط الفردية لصفحات أو مكونات منفصلة. يمكن أن تفيد المواقع الكبيرة جدًا حيث يتم إنشاء صفحات فردية من مجموعة واسعة من المكونات.
يتم تحميل كل ملف CSS على الفور قبل الإشارة إلى أحد المكونات في HTML:
<head>
<!-- core styles -->
<link rel="stylesheet" href="core.css" />
</head>
<body>
<!-- header -->
<link rel="stylesheet" href="header.css" />
<header>...</header>
<!-- primary content -->
<link rel="stylesheet" href="main.css" />
<main>
<!-- widget styling -->
<link rel="stylesheet" href="widget.css" />
<div class="mywidget>...</div>
</main>
<!-- footer -->
<link rel="stylesheet" href="footer.css" />
<footer>...</footer>
</body>هذا يعمل بشكل جيد في معظم المتصفحات. (يعرض Safari صفحة فارغة حتى يتم تحميل CSS بالكامل ، ولكن لا ينبغي أن يكون أسوأ بشكل ملحوظ من ورقة أنماط واحدة كبيرة.)
يشجع اعتماد مكونات الويب أيضًا على استخدام الأنماط المحددة النطاق والتي يتم تحميلها عند عرض العنصر المخصص.
تضع تقنيات وخصائص CSS ضغوطًا مختلفة على المتصفح ووحدة المعالجة المركزية والذاكرة والنطاق الترددي والموارد الأخرى. يمكن أن تساعدك النصائح التالية في تجنب المعالجة غير الضرورية والأداء البطيء.
يصعب إنشاء التخطيطات المستندة إلى Float ، واستخدام العديد من الخصائص ، وتتطلب تعديلات مستمرة للهامش والحشو ، ويجب إدارتها باستخدام استعلامات الوسائط ، وتتطلب معالجة كبيرة للمستعرض. لقد كانت طريقة التخطيط الوحيدة القابلة للتطبيق لسنوات عديدة ، لكنها لم تعد ضرورية. استخدام إما:
CSS Flexbox للتنسيقات أحادية البعد التي يمكن أن تلتف إلى الصف التالي. إنه مثالي للقوائم ومعارض الصور والبطاقات وما إلى ذلك.
شبكة CSS للتخطيطات ثنائية الأبعاد ذات الصفوف والأعمدة الصريحة. إنه مثالي لتخطيطات الصفحات.
كلاهما أسهل في التطوير ، واستخدام كود أقل ، وتقديم أسرع ، والتكيف مع أي حجم شاشة بدون استعلامات الوسائط.
لن تتعرف المتصفحات القديمة جدًا على خصائص flexbox والشبكة الحديثة ، لذلك يصبح كل عنصر كتلة. اعرضها في تخطيط خطي بسيط يشبه الهاتف المحمول: ليست هناك حاجة لمحاكاة التصميم باستخدام احتياطيات قائمة على الطفو .
حيثما أمكن ، اختر كود CSS بدلاً من الصور. جرب التدرجات ، والحدود ، ونصف القطر ، والظلال ، والمرشحات ، وأوضاع المزج ، والأقنعة ، والقص ، وتأثيرات العناصر الزائفة لإعادة استخدام الصور الموجودة أو استبدالها.
تستخدم تأثيرات CSS نطاقًا تردديًا أقل إلى حد كبير ، كما أنها أسهل في التعديل ويمكن عادةً أن تكون متحركة.
قد يكون لديك رمز تعريفي مقتضب ، لكن بعض CSS تتطلب معالجة أكثر من غيرها. تؤدي الخصائص التالية إلى عمليات حسابية للطلاء قد تكون باهظة الثمن عند استخدامها بشكل زائد:
position: fixed
border-radius
box-shadow
text-shadow
opacity
transform
filter
backdrop-filter
background-blend-mode
ستكون انتقالات CSS والرسوم المتحركة دائمًا أكثر سلاسة من التأثيرات المدعومة من JavaScript ، والتي تعدل الخصائص المماثلة. لن تتم معالجتها في المتصفحات القديمة جدًا ، ولكن نظرًا لأنه من المحتمل أن تعمل على أجهزة أقل قدرة ، فهذا هو الأفضل.
ومع ذلك ، تجنب الرسوم المتحركة المفرطة. يجب أن تعزز التأثيرات تجربة المستخدم دون التأثير سلبًا على الأداء أو التسبب في دوار الحركة. تحقق من استعلام الوسائط ذو الحركة المنخفضة المفضل وقم بتعطيل الرسوم المتحركة عند الضرورة.
يمكن أن يؤدي تغيير أبعاد عنصر (العرض ، الارتفاع ، الحشو ، الحد) أو الموضع (أعلى ، أسفل ، يسار ، يمين ، هامش) إلى إعادة تخطيط الصفحة بأكملها في كل إطار للرسوم المتحركة. أكثر الخصائص فعالية للرسوم المتحركة هي:
opacity
filter: تمويه وتباين وظل وتأثيرات أخرى
transform: لترجمة (تحريك) عنصر أو قياسه أو تدويره
يمكن للمتصفحات استخدام وحدة معالجة الرسومات المسرَّعة بالأجهزة لعرض هذه التأثيرات في طبقتها الخاصة ، بحيث تتأثر مرحلة التركيب فقط.
إذا كان عليك تحريك خصائص أخرى ، فيمكنك تحسين الأداء عن طريق إخراج العنصر من تدفق الصفحة بالموضع: مطلق.
ستقوم المتصفحات بتحليل أكثر محددات CSS تعقيدًا بسرعة ، ولكن تبسيطها يقلل من أحجام الملفات ويحسن الأداء. غالبًا ما يتم إنشاء المحددات المعقدة عندما تقوم بإنشاء هياكل متداخلة بعمق في معالجات CSS الأولية مثل Sass.
و الملكية CSS إرادة التغيير يسمح لك لتحذير كيف سيتم تغيير عنصر أو المتحركة حتى متصفح يمكن أن أمثل مقدما:
.myelement {
will-change: transform, opacity;
}يمكن تحديد أي عدد من القيم المفصولة بفواصل ، ولكن يجب استخدام الخاصية فقط كحل أخير لإصلاح مشكلات الأداء المعروفة. يجب ألا تقوم بتطبيقه على عدد كبير جدًا من العناصر ، وتأكد من منحه الوقت الكافي للتهيئة.
الاحتواء هي ميزة CSS جديدة يمكنها تحسين الأداء من خلال السماح لك بتحديد الأشجار الفرعية المعزولة للصفحة. يمكن للمتصفح تحسين المعالجة من خلال تقديم – أو عدم العرض – كتلة محتوى DOM محددة.
و يحتوي على خاصية تقبل واحد أو أكثر من القيم التالية في قائمة مفصولة الفضاء:
none: الاحتواء غير مطبق
layout: يتم عزل تخطيط العنصر عن باقي الصفحة – لن يؤثر محتواه على العناصر الأخرى
paint: لا يتم عرض توابع العنصر خارج حدوده
size: يمكن تحديد حجم العنصر بدون التحقق من العناصر الفرعية – الأبعاد مستقلة عن المحتوى
تتوفر أيضًا قيمتان خاصتان:
strict: يتم تطبيق جميع قواعد الاحتواء (باستثناء لا شيء)
content: يطبق التخطيط والطلاء
الأهمية
تحتوي الصفحة على <ul>قائمة contain: strict;مطبقة. إذا قمت بتغيير محتوى أي طفل <li>، فلن يقوم المستعرض بإعادة حساب حجم أو موضع هذا العنصر أو العناصر الأخرى في القائمة أو أي عناصر أخرى على الصفحة.احتواء CSS مدعوم في معظم المتصفحات الحديثة . لا يوجد دعم في Safari أو التطبيقات الأقدم ، ولكن يمكن استخدام الاحتواء بأمان في هذه التطبيقات لأن المتصفح سيتجاهل ببساطة الخاصية.
حفظ البيانات هو عنوان طلب HTTP يشير إلى أن المستخدم قد طلب بيانات أقل. قد يتم تسميته بوضع “Lite” أو “Turbo” في بعض المتصفحات.
عند التمكين ، Save-Dataيتم إرسال رأس مع كل طلب متصفح:
GET /main.css HTTP/1.0
Host: site.com
Save-Data: onيمكن للخادم الاستجابة وفقًا لذلك عند اكتشاف حفظ البيانات. في حالة CSS ، يمكن أن يرسل تخطيطًا خطيًا أبسط يشبه الهاتف المحمول ، أو يستخدم خط نظام التشغيل ، أو يتحول إلى حظر الألوان ، أو تحميل خلفيات صور منخفضة الدقة.
لاحظ أن الخادم يجب أن يُرجع العنوان التالي عند الطلبات المعدلة لضمان عدم تخزين الحد الأدنى من المحتوى مؤقتًا وإعادة استخدامه عندما يقوم المستخدم بإيقاف تشغيل الوضع Lite / Turbo:
Vary: Accept-Encoding, Save-Dataيمكن أيضًا اكتشاف الرأس بواسطة JavaScript من جانب العميل. تضيف الكود التالي فئة bestUX إلى <html>العنصر عندما لا يتم تمكين Save-Data :
if ('connection' in navigator && !navigator.connection.saveData) {
document.documentElement.classList.add('bestUX');
}يمكن بعد ذلك أن تتفاعل أوراق الأنماط وفقًا لذلك دون أي تلاعب بالخادم:
/* no hero image by default */
header {
background-color: #abc;
background-image: none;
}
/* hero image when no Save-Data */
.bestUX header {
background-image: url("hero.jpg");
}و يفضل-انخفاض البيانات الاستعلام وسائل الإعلام العروض خيار-CSS الوحيد كبديل، على الرغم من أن هذا غير معتمد في أي متصفح في وقت كتابة هذا التقرير:
/* no hero image by default */
header {
background-color: #abc;
background-image: none;
}
/* hero image when no Save-Data */
@media (prefers-reduced-data: no-preference) {
header {
background-image: url("hero.jpg");
}
}هناك العديد من الخيارات لتحسين أداء CSS ، ولكن بالنسبة للمشروعات الجديدة ، ضع في اعتبارك الممارسات التالية:
استخدم نهج الجوال أولاً : قم بتشفير أبسط تخطيط للجوال أولاً ، ثم أضف تحسينات مع زيادة مساحة الشاشة ومجموعة ميزات المتصفح.
قم بتقسيم CSS إلى ملفات منفصلة بمسؤوليات محددة: يمكن للمعالج المسبق لـ CSS أو المكون الإضافي CMS دمج أجزاء CSS في ملف واحد .
إضافة خطوة بناء: تتوفر الأدوات التي يمكنها تلقائيًا فحص التعليمات البرمجية وتحديد المشكلات والتسلسل والتقليل وتقليل أحجام الصور والمزيد. تجعل الأتمتة الحياة أسهل ، ومن غير المرجح أن تنسى خطوة التحسين.
قم بتوثيق أوراق الأنماط الخاصة بك: دليل النمط مع الأمثلة الموثقة سيجعل من السهل التقاط التعليمات البرمجية الخاصة بك وصيانتها. ستكون قادرًا على تحديد وإزالة CSS القديمة دون كسر عرق.
أخيرًا ، تعلم CSS ! كلما عرفت أكثر ، قل الرمز الذي ستحتاج إلى كتابته ، وأصبح تطبيق الويب الخاص بك أسرع. سيجعلك مطورًا أفضل بغض النظر عن الأنظمة الأساسية والأطر التي تستخدمها.
