👩‍👩‍👧‍👦 👏🏽 💡 حول التأثير الإيجابي للخطوط المتغيرة على أداء مشروع الويب 👩‍👩‍👧‍👦 🤙🏾 🏂🏽

عند التفكير في خطوط الويب ، وما تأثيرها على أداء الموقع ، فإنها غالبًا ما تنتبه إلى المؤشرات الثلاثة التالية:

عدد الطلبات لتنزيل ملفات الخطوط.
أحجام ملفات الخطوط.
الوقت حتى تقديم الصفحة الأولى.

أردت أن أعرف كيف يؤثر استخدام الخطوط المتغيرة على هذه المؤشرات. لذلك ، قارنتهم مع الخطوط العادية. هذا ما فعلته.

قلل عدد الطلبات لتنزيل ملفات الخطوط

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

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

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

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

تقليل أحجام ملفات الخطوط

هناك العديد من الطرق لتقليل أحجام ملفات الخطوط. عادةً ما تكون الخطوة الأولى في هذه العملية هي اختيار التنسيق الأكثر فعالية لتخزين خطوط الويب. على سبيل المثال - WOFF2.

▍Find إشارة مرجعية

لقد أجريت دراسة لأحجام ملفات الخطوط المختلفة. على وجه الخصوص ، باستخدام الخط Source Sans Pro من Adobe. لقد اخترت هذا الخط بالتحديد لأن كوده مستضاف على GitHub ولأنه مفتوح المصدر.

مقارنة بين أحجام ملفات OTF لخط Source Sans Pro - ملف يخزن خط تشبع واحد وملف يخزن خطًا متغيرًا.

كنقطة مرجعية ، أخذت ملفًا يصف خط تشبع واحد للإصدار القياسي من Source Sans Pro. حجمه بتنسيق OTF هو 248 كيلوبايت. حجم ملف OTF الخط المتغير هو 405 كيلو بايت. هذا يعني أن حجم ملف الخط المتغير أكبر بنسبة 73٪ من حجم الملف الذي يحتوي على إصدار واحد من Source Sans Pro القياسي.

ولكن بالنظر إلى حقيقة أن ملف الخط المتغير يحتوي على جميع المعلومات اللازمة لمتغيرات الخط مع أي تشبع ، فإن حجم مجموعة من ملفات الخطوط العادية ، المشابهة في القدرات ، سيكون حوالي 1170 كيلوبايت.

وهذا ما يقرب من 3 أضعاف حجم ملف الخط المتغير.

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

مقارنة بين صيغ OTF و WOFF2

ملفات OTF ، بالمقارنة مع التنسيقات المضغوطة WOFF و WOFF2 ، تصبح كبيرة جدًا.

ملف بخيار خط واحد: OTF - 234 كيلوبايت ، WOFF2 - 111 كيلوبايت. ملف خط متغير: OTF - 405 كيلوبايت ، WOFF2 - 112 كيلوبايت.

إذا قارنت أحجام الملفات بتنسيقات مختلفة ، فقد تبين أنه يمكنك تقليل حجم الملف بشكل كبير باستخدام تنسيق WOFF2.

بدا لي أنه من المثير للاهتمام مقدار التوفير الذي يتم توفيره باستخدام تنسيق WOFF2 عند تخزين بيانات الخط المتغير. حقيقة أن حجم الملف قد انخفض من 405 كيلوبايت إلى 112 كيلوبايت يؤدي إلى حقيقة أن ملف الخط المتغير هو تقريبًا نفس حجم الملف الذي يخزن نسخة واحدة فقط من Source Sans Pro القياسي.

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

sizes تقليل أحجام الملفات باستخدام مجموعات فرعية من الخطوط

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

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

يمكنك إنشاء مجموعات فرعية من الخطوط باستخدام أدوات خاصة - مثل glyphhanger. على وجه الخصوص ، تم إعداد دليل جيد على GitHub لهذه الأداة. يعمل مع كل من الخطوط القياسية والمتغيرة.

لقد قمت بمعالجة الإصدارات القياسية والمتغيرة من Source Sans Pro باستخدام glyphhanger وأحرف لاتينية صغيرة وكبيرة ، بالإضافة إلى الأرقام والأحرف الخاصة مثل علامات التعجب.

استخدام مجموعات فرعية من الخطوط لتقليل أحجام الملفات

سمحت لنا هذه العملية بتقليل حجم الملف الذي يحتوي على خط تشبع واحد من 111 كيلوبايت إلى 16 كيلوبايت (توفير 85٪ جيد جدًا). في حالة الخط المتغير ، انخفض حجم الملف من 112 كيلو بايت إلى 27 كيلو بايت (75٪ هو مستوى مقبول من المدخرات).

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

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

▍ اعتبارات إضافية بخصوص أحجام الملفات

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

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

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

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

تقليل الوقت للعرض لأول مرة

الآن دعونا نتحدث عن تقليل الوقت قبل عرض الصفحة الأولى. كلما كانت هذه المرة أقصر ، كان الأداء أفضل. هذا واضح تماما. بالإضافة إلى ذلك ، يجب أن يوضع في الاعتبار أنه ، كما ذكرنا سابقًا ، يمكن تحميل ملف الخط المتغير الكبير الوحيد بشكل أبطأ من عدد قليل من ملفات الخطوط الصغيرة. ولكن حتى في التأخير البسيط في إخراج الصفحة ، فإن "وميض النص غير المرئي" الوحيد (فلاش النص غير المرئي ، FOIT) يمكن أن يؤدي إلى حقيقة أن المستخدم سيشعر كما لو أن الصفحة يتم تحميلها بشكل أبطأ مما يحدث بالفعل. ونتيجة لذلك ، أعتقد أنه بدلاً من تعريض الصفحة لخطر FOIT ، يجب أن نحاول قصر هذه المشكلة على ما يسمى "Flash of Unstyled Text" (FOUT).

▍FOIT

هذا هو شكل FOIT.

يحدث مثال على المظهر المرئي لـ FOIT

"Flash للنص غير المرئي" عندما نقوم بحظر أو تأخير إخراج النص حتى يتم تحميل الخط المطلوب. نتيجة لذلك ، قبل تحميل الخط ، ستبدو الصفحة فارغة.

OUFOUT

وإليك مثال على FOUT.

يحدث مثال على المظهر المرئي لـ FOUT

“Flash of non-stylized text” إذا تم عرض النص لأول مرة باستخدام خط النسخ الاحتياطي ، ثم عندما يتوفر الخط المطلوب ، فإنه يتحول إليه أو يستبدل الخط المستخدم مسبقًا.

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

إن أسهل طريقة لتنفيذ آلية FOUT في المشروع هي استخدام خاصيةfont-displayذات قيمةswap. سيسمح هذا بعرض النص باستخدام الخط الاحتياطي الموضح في مجموعة الخطوط. بعد ذلك ، بعد تحميل الخط المطلوب ، سيتم استبدال خط النسخ الاحتياطي. font-displayيمكن أن تأخذ الخاصية قيمًا أخرى ، وأوصيك بفحصها ، ولكن لتنفيذ سلوك FOUT للنصوص ، تعد القيمة swapنقطة بداية جيدة.

font-display: swap;

تتمثل إحدى مشكلات FOUT في أنه عند استبدال الخط ، يمكنك غالبًا رؤية النص الذي يعاد ترتيبه على الصفحة لتكييف المحتوى مع خط يتم "قياس" معلماته بشكل مختلف عن معلمات الخط المستخدم سابقًا.

عند العمل مع الخطوط القياسية ، يمكننا تعديل خصائص مثل line-height، font-sizeومن letter-spacingخلال القيام بذلك من أجل تكييف النص لاستبدال الخط وتقليل تحولات المحتوى التي تحدث أثناء هذه العملية. يمكنك القيام بذلك باستخدام أداة Font Style Matcher الرائعة . تم إنشاؤه من قبل مونيكا دينكوليسكو ، التي استلهمت من هذه المقالة الممتازة التي كتبها هيلين هولمز (بجدية - مقالة رائعة - أوصي بقراءتها).

آمل أنه بمرور الوقت ، ستتمتع الخطوط المتغيرة بدعم أوسع لأنظمة التشغيل. سيتيح لك ذلك تسهيل التغيير في التخطيطات باستخدام خط متغير النظام كنسخة احتياطية.

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

سيكون ذلك رائعًا ، وآمل أن يكون الأمر كذلك.

ملخص

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

حتى إذا كانت أحجام ملفات الخطوط المتغيرة قد تبدو كبيرة جدًا بالنسبة لك - انتبه إلى حقيقة أنه باستخدام مثل هذه الخطوط ، يمكنك تطبيق تقنيات تحسين أخرى. وبالتحديد ، نتحدث عن تنسيقات الخطوط المتقدمة مثل WOFF2 ، حول تشكيل مجموعات فرعية من الخطوط ، حول استخدام الخاصية font-display: swap. يشير كل هذا إلى أنه باستخدام الخطوط المتغيرة ، يمكننا الحصول على تقليل في بيانات الخطوط وزيادة كبيرة في القدرة على تصميم الصفحات.

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

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

القراء الأعزاء! هل تستخدم خطوط متغيرة في مشاريعك؟

حول التأثير الإيجابي للخطوط المتغيرة على أداء مشروع الويب