تحميل الخطوط

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

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

الابتداء

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

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

وأخيرًا ، تم وضع رابط ملف الخط في شفرة CSS المضمنة في الصفحة ، أعلى كود HTML ، وليس في ملف CSS الخارجي.

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

مفاجأة

نظرًا لأن الخطوط الخاصة ضرورية لعرض النص ، يجب أن يعامل المتصفح هذه الموارد ذات الأولوية العالية.

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

عندما قمت بتحليل الموقع ، صُدمت قليلاً.

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


يتم تنزيل الصور قبل تنزيل الخط

بدا لي كامل الهراء.

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

تحميل الخطوط كحل للمشكلة

تخبر سمة preload المتصفح بأنه يحتاج إلى التحميل المسبق للمورد المقابل المطلوب لعرض الصفحة الحالية.

يُعد استخدام هذه السمة طريقة جيدة لتنزيل الموارد الهامة مبكرًا والتي يمكن اكتشافها بواسطة المتصفح لاحقًا.

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

يؤدي استخدام سمة preload تطبيقها على ملفات الخطوط إلى إخبار المستعرض بأنها ستحتاج إلى الخطوط المناسبة عندما تعرض الصفحة.
بالإضافة إلى ذلك ، من السهل جدًا تنفيذ هذه الآلية باستخدام عنصر <link> .

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

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

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

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

فيما يلي مخطط الشلال من Webpagetest - لقد أبرزت تلك الأماكن التي يظهر فيها العمل مع ملف الخط. في الجزء العلوي من الشكل ، لا يتم استخدام التحميل المسبق. في الجزء السفلي - المستخدمة.


التحميل المسبق والعمل مع ملف الخط.

ربما سيكون من المفيد النظر في لوحة العمل الخاصة بعملية تحميل الصفحة (هنا ، من أجل الوضوح ، تم استخدام تقليد للاتصال البطيء للغاية).


في لوحة العمل العليا ، لا يتم استخدام التحميل المسبق. في القاع - المستخدمة

بشكل عابر ، ألاحظ أنني استخدمت font-display: fallback مقبض font-display: fallback . أي أنه تم عرض العنوان في الأصل باستخدام خط النسخ الاحتياطي في حالة تحميل الخط ببطء. ومع ذلك ، بالنسبة لهذا الاختبار ، قمت بإيقاف تشغيل هذه الميزة ، لأنه سيكون من الصعب للغاية التمييز بين خطوات تحميل الصفحة.

لماذا عملت؟

لعرض صفحة ويب ، يحتاج المستعرض إلى بناء شجرة DOM وشجرة CSSOM ، والتي يتم استخدامها لاحقًا لإنشاء شجرة التقديم.

preload أن استخدام عنصر <link> مع سمة preload لتنزيل الخط يتيح للمتصفح بدء بناء CSSOM قبل اكتمال DOM.

يمكنك رؤية ذلك في الصور التالية ، والتي تعرض استكشاف عملية تحميل الصفحة باستخدام أدوات مطور Chrome.

إليك كيفية ظهور مواد الصفحة دون استخدام التحميل المسبق. أولاً ، يتم إنشاء DOM وتحميل الصورة ، ثم يتم إنشاء CSSOM ويتم تحميل الخط.


العمل مع الصفحة دون استخدام التحميل المسبق

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


العمل مع الصفحة باستخدام التحميل المسبق

هل هناك بدائل للتحميل المسبق؟

افترض أنه لا يمكنني استخدام سمة preload لزيادة أولوية ملف الخط. ماذا يمكنني أن أفعل بعد ذلك؟ كيف يمكنك تقليل أولوية الصور؟

بدافع الفضول ، حاولت تطبيق الفكرة أعلاه وأضفت السمة loading="lazy" إلى العناصر التي تصف الصور. في Chrome 76 (المتصفح الوحيد الذي دعم هذا في وقت كتابة هذا التقرير) ، يجب أن يقلل هذا من أولوية الصور خارج المنطقة المرئية الأصلية للصفحة.

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

المتصفحات المختلفة تتصرف بشكل مختلف

لقد اختبرت المشروع في عدة متصفحات مختلفة وعلى العديد من الأجهزة. في الاختبار ، اكتشفت أن iOS Safari (iPhone 8) يُظهر نفس سلوك Chrome. وهي الخطوط ، افتراضيًا ، يتم تحميلها بعد الصور ، لكن استخدام سمة preload يسمح preload بإصلاح الموقف.

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

في Edge ، يتم تحميل الخطوط أيضًا لاحقًا مما هو مطلوب. كان هناك شعور بأن استخدام Webload Pagetest باستخدام سمة preload يعمل بشكل جزئي فقط. وهي ، يبدو لي أنها تبدو وكأنها تنزيل خط مزدوج. بمجرد تحميله في وقت سابق ، في المرة الثانية في وقت لاحق.

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

النتائج

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

لا تتصرف المتصفحات دائمًا كما نريد ، أو كما نتوقع منها. ولكن لدينا الأدوات التي تساعد على التأثير في سلوك المتصفحات ، وتساعد على توحيدها في الاتجاه الذي نحتاج إليه.

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

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

أعزائي القراء! هل تستخدم آليات تحميل الخط في مشاريع الويب الخاصة بك؟