تحسين أداء خطوط جوجل
نشرت: 2020-03-28تتميز تصميمات مواقع الويب الجيدة بصور وخطوط مذهلة. لسوء الحظ ، يساهم هذان العنصران في الويب بشكل كبير في الأسباب التي تجعل العديد من مواقع الويب تظهر زمن انتقال مزعج. بالطبع ، يمكن لخطوط الويب فقط تقديم شيء منعش وغير متوقع وجديد.
ومع ذلك ، هناك طرق لاحتواء هذه الظاهرة المروعة. تساعد SVG المطورين على إدارة بعض تحديات عرض الصور. وبالنسبة لخطوط Google ، وهي أكثر خطوط الويب استخدامًا ، فإن تحسين وقت عرض الصفحة يتعلق فقط بنشر الحيل المتعددة المتاحة لتحسين أداء Google Font.
ما هي خطوط جوجل؟
خطوط Google هي مجموعة مضبوطة خصيصًا من الحروف الرسومية التي تشكل الخطوط للاستخدام على مواقع الويب. تم تصميمها خصيصًا لاستخدامها عبر الإنترنت ، وبالتالي ، اسم خطوط الويب.
من الأفضل وصف تشريح خط الويب على أنه مجموعة من الأشكال المتجهة (الحروف الرسومية) مرتبة خصيصًا لتشكيل رمز أو حرف للكتابة.
تم إطلاقها باسم Google Web Fonts في عام 2010 بحوالي 30 خطًا فقط ، تمتلك Google Fonts الآن حوالي 17 مليار خط وتشغل حاليًا حوالي 57 ٪ من جميع مواقع الويب. تسجل Google Fonts ، وهي مجانية تمامًا ، حوالي 500000 مشاهدة كل ثانية حتى وقت كتابة هذا التقرير ، وقد جمعت أكثر من 37 تريليون مشاهدة منذ عام 2010.
يتيح لك استخدام خطوط Google على موقع الويب الخاص بك الابتعاد عن الاقتصار على خطوط النظام أو "الخطوط الآمنة للويب" ، مثل Arial و Georgia ، والتي غالبًا ما تكون مثبتة مسبقًا عبر جميع أنظمة التشغيل.
كيفية تنفيذ خطوط جوجل
يتم تنفيذ Google Fonts على موقع الويب باستخدام واجهة برمجة التطبيقات (API) ، مع الإشارة إلى اختيار المستخدم للخط (الخطوط). يمكن تضمين واجهة برمجة التطبيقات التي تقدمها Google في مستند HTML الخاص بك باستخدام علامة ارتباط CSS القياسية أو بناء الجملة للاستيراد. فيما يلي مثال على واجهات برمجة التطبيقات لتنفيذ Baloo Chettan 2.
استخدام علامة ارتباط CSS القياسية
استخدام صيغة الاستيراد
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>
باستخدام أي من واجهات برمجة التطبيقات المذكورة أعلاه في مستند HTML الخاص بك ، يمكنك استخدام عائلة الخطوط في مستند CSS الخاص بك عن طريق الرجوع إليها ، كما هو موضح في المثال أدناه.
عائلة الخطوط : 'Baloo Chettan 2' ، مخطوطة ؛
أهمية تحسين أداء خط Google
لا يعد تنفيذ واستخدام خطوط Google ، مثل خطوط الويب الأخرى ، صفقات كبيرة ولكنها تقدم الخطوط إلى زوار موقعك على الويب. تذكر أن المستخدمين ليس لديهم هذه الخطوط على أجهزتهم. بمعنى آخر ، يجب أن تقوم المستعرضات الخاصة بهم بتنزيلها قبل أن يتمكنوا من رؤية محتوى موقع الويب الخاص بك.
وزن الخط
يأتي كل خط بوزن يؤثر سلبًا على زمن انتقال موقع الويب الخاص بك. على سبيل المثال ، يبلغ إجمالي حجم خط Baloo Chettan 2 من Google 720 كيلوبايت. هذا يعني أنك بحاجة إلى تضمين ما يقرب من 9 ميجابايت في تحميل موقع الويب الخاص بك إذا كان يجب عليك استخدام عائلة خطوط Baloo بالكامل (19) ، مع جميع اللغات والمتغيرات المتاحة على موقع الويب الخاص بك. بالطبع ، هذا أمر غير مثالي وليس قريبًا من تحسين خط الويب. ومع ذلك ، فإن فهمها بشكل خاطئ يعني إبقاء زوار موقعك على الويب ينتظرون لبضع ثوان قبل أن يتمكنوا من رؤية أي نص على موقع الويب الخاص بك.
تنسيق الخط
حتى الآن ، هناك أربعة (4) تنسيقات أساسية لخطوط الويب قيد الاستخدام على الويب. وهي TrueType Font (TTF) ، و Embedded Open Type (EOT) ، و Web Open Font Format (WOFF) ، و Web Open Font Format 2.0 (WOFF2).
لسوء الحظ ، لا يتم اعتبار أي من هذه التنسيقات تنسيقًا عالميًا يعمل عبر جميع المتصفحات.
يتم دعم EOT بواسطة IE فقط. يتمتع كل من Chrome و Opera بأكبر قدر من الدعم لمعظم التنسيقات ، بينما يدعم حوالي 86 بالمائة من جميع المتصفحات تنسيق WOFF. قد يتطلب هذا منك تضمين جميع تنسيقات الخطوط لكل خط تريد استخدامه. الفكرة هي توفير تجربة متسقة من خلال ضمان أن جميع المتصفحات يمكنها عرض كل خط.
تعد هذه المشكلات جزءًا من العديد من الأسباب التي تجعل هناك حاجة ماسة لتحسين أداء خط Google.
تحسين أداء خط جوجل
يبدأ تحسين خط Google بموضع Font API وتنسيق الطلب ، وصولاً إلى العرض. فيما يلي بعض الحيل البسيطة حول كيفية تحسين خطوط Google.
تحميل موارد خط Google مسبقًا
يوصى بشدة باستخدام ميزة النظام الأساسي للويب الجديدة: <link rel="preload"> التي تتيح لك تحميل خطوط الويب مسبقًا. تتيح لك هذه الميزة تجاوز سلوك المتصفح الافتراضي ، والذي عادةً ما يؤخر عرض النص من خلال إنشاء شجرة العرض أولاً لمعرفة موارد الخط التي يحتاجها قبل الوصول إلى رابط المورد.
عادةً ما يتم تضمين <link rel="preload"> في علامة <head> في HTML لتشغيل طلب لخطوطك مبكرًا بما يكفي ، دون انتظار إنشاء CSSOM. تمنح الميزة للمتصفح فقط معلومات مسبقة تفيد بأن خطوط الويب ستكون مطلوبة قريبًا ، دون تقديم أي معلومات حول كيفية استخدامها.
يُنصح أيضًا باستخدام تعريف CSS @ font-face مناسب إلى جانب ميزة التحميل المسبق لإبلاغ المتصفح بكيفية استخدام عنوان URL للمورد. انظر الى مثال في النقطة التالية.
ملاحظة: لا تدعم جميع المتصفحات <link rel = ”preload”>. المتصفحات التي لا تدعمها ستتجاهل الرمز فقط. ومع ذلك ، فإن هذه الميزة أحيانًا تؤدي إلى إهدار الطلبات عند وجود نسخة بعيدة من الخط المفضل.
استخدم طلبًا واحدًا لخطوط متعددة
مقياس آخر جيد لتحسين خط Google هو دمج طلبات خطوط متعددة في علامة واحدة. عدم تضمين علامة <link> منفصلة لكل خط ، وبالتالي إرسال طلبات متعددة على دفعات مختلفة. لدمج طلبات الخطوط ، ما عليك سوى فصل الخطوط في API مع | حرف. ومع ذلك ، يمكن تحقيق ذلك ببساطة عن طريق اختيار جميع الخطوط التي قد تحتاجها مرة واحدة على صفحة Google Font.
تنسيق طلبات خط غير صالح:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"
rel="stylesheet">
تنسيق طلبات الخطوط الموصى بها:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"
rel="stylesheet">
من خلال الجمع بين طلبات الخطوط المتعددة في علامة واحدة ، نقوم بحفظ المتصفح من عدة رحلات إلى الخادم وكذلك نساعد المتصفحات القديمة مع اتصالين كحد أقصى في المرة الواحدة لكل مجال.
تنسيقات الخطوط المحسنة لجميع المتصفحات
المتصفحات التي لا تدعم تنسيق خط معين ببساطة تجاهله وانتقل إلى الخطوة التالية في شجرة العرض. ولتوفير تجربة متسقة ، عليك تضمين جميع تنسيقات الخطوط في إعلان CSS @ font-face.
ومع ذلك ، يمكن تقليل الوزن. تتكون الرسوم البيانية الفردية التي تصف الخط من معلومات مماثلة يمكن ضغطها باستخدام ضاغط متوافق مثل GZIP. بينما يتم ضغط تنسيقات TTF و EOT افتراضيًا ، فإنك تحتاج إلى التأكد من تكوين خوادمك لتطبيق الضغط عند تقديم كلا تنسيقي الخطوط.
استخدم إعداد الضغط الأمثل لـ WOFF ، الذي يحتوي على ضغط مدمج ويلجأ إلى المعالجة المسبقة المخصصة وخوارزميات الضغط لتقديم WOFF2 مع تقليل حجم الملف بنسبة 30٪ تقريبًا.
مثال على إعلان CSS @ font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */
ملاحظة: يشير src: إلى العديد من متغيرات الموارد بينما يسمح لك عنوان url () بتحميل خطوط خارجية ويسمح لك local () بمصدر للخطوط محليًا. يشير التنسيق () إلى تنسيق الخط في عنوان URL المحدد.
إعطاء الأسبقية لـ local () في قائمة src الخاصة بك
على الرغم من أن فكرة تحسين خط Google هذه قد لا تنطبق حقًا على مستخدمي الهواتف المحمولة إلا إذا كنت تشير إلى خطوط النظام الافتراضية ، إلا أنها تظل حيلة فعالة لتحسين خطوط الويب.
إذا نظرت إلى مثال إعلان CSS @ font-face أعلاه ، ستلاحظ أن المحلي () يتصدر قائمة متغيرات الموارد المفصولة بفواصل في src: descriptor. يتم تحديد الأولويات عن قصد ، والفكرة هي إرسال متصفح المستخدم إلى المصدر الأول للخط محليًا قبل اختيار تنزيله إذا لم يكن متاحًا محليًا.
يضمن ذلك عدم استمرار المتصفح في تنزيل الخطوط المثبتة بالفعل محليًا على كمبيوتر المستخدم ، وبالتالي ضمان أداء أفضل لموقع الويب.
تخصيص عرض الخط: عرض خط CSS
يتيح لك التحكم في أداء الخط باستخدام واصف عرض الخط لـ @ font-face تحديد كيفية عرض خطوط Google ، بناءً على المدة التي يستغرقها التنزيل. في الأصل ، تحتوي متصفحات الويب على إعدادات افتراضية لما يجب القيام به عندما تستغرق الخطوط وقتًا طويلاً في التحميل. حدد معظمهم مهلة يستخدمونها بعد ذلك الخط الاحتياطي ، ولكن لسوء الحظ ، تختلف فترة المهلة الخاصة بهم.
يلجأ كل من Chrome و Firefox إلى الخطوط الاحتياطية بعد ثلاث ثوانٍ إذا كانت خطوط الويب غير جاهزة وسوف يقوموا بتبديل النص إلى الخطوط المقصودة بمجرد تنزيلها. سيقوم Internet Explorer بالشيء نفسه في غضون صفر من الثانية بينما لا يوجد لدى Safari سلوك مهلة لعرض الخط.
تدعم خاصية عرض الخط التي تم تقديمها حديثًا خمسة نطاق من القيم: تلقائي | كتلة | مبادلة | احتياطي | اختياري
يجب عليك تعيين الخاصية على حظر القيمة إذا كان عرض النص في محرف معين مهمًا جدًا. هذا لأنه يتيح للمتصفح استخدام نص لا يقهر بدلاً من وجه الخط المفضل عندما لا يكون جاهزًا ويقوم بتبديلها بمجرد الانتهاء من التنزيل. تستخدم معظم المتصفحات هذه القيمة كقيمة افتراضية ( تلقائية ).
يمكن استخدام المبادلة في الحالات التي يمكنك فيها تحمل تكلفة عرض وجه خط مؤقت حتى يصبح وجه الخط المفضل جاهزًا. يشبه Swap الحظر ولكنه يعرض الخط الاحتياطي فورًا تبدأ الصفحة في التحميل وستستبدلها بالمحرف المفضل بمجرد أن تصبح جاهزة. هذه القيمة لها فترة مقايضة لانهائية وفترة كتلة صفرية ثانية.
قيمة المبادلة ليست مثالية للنص الأساسي حتى لا تعطل تجربة القارئ في منتصف الطريق عن طريق تغيير النص. يمكنك استخدام هذا لنص الشعار حيث تحتاج إلى عرض اسم الشركة أو شعارها بسرعة باستخدام احتياطي ولكن في النهاية تتطلب المحرف الرسمي لأغراض العلامة التجارية.
مثال: تعيين خاصية عرض الخط للمبادلة
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */
يمكن رؤية قيمة المبادلة مطبقة في الأسطر الأولى من التعليمات البرمجية (Google Font API) المستخدمة في توضيح كيفية ربط خطوط Google في مستند HTML الخاص بك.
الاحتياطي مشابه للمبادلة ولكن فترة المبادلة محدودة. إذا لم يتم تحميل وجه الخط المفضل خلال فترة محددة ، عادةً ما تكون صفر ثانية ، فسيحتفظ النص بالخط الاحتياطي لبقية عمر الصفحة. هذا مرشح جيد للنص الأساسي ؛ يعرض النص بأسرع ما يمكن ولن يغيره في الوقت الذي يبدأ فيه أي شخص القراءة.
القيمة الاختيارية هي نسخة طبق الأصل من النسخ الاحتياطي ولكنها تسمح للمتصفح بتحديد ما إذا كان سيبدأ تنزيل خط الويب أم لا ، مع الأخذ في الاعتبار سرعة شبكة المستخدمين. في الحالة التي يكون فيها الاتصال ضعيفًا للغاية ، سيتعين على المتصفح تقييد الطلبات وتحديد أولويات الموارد الأكثر احتياجًا من خلال عدم إرسال أي طلبات لتنزيل خط الويب.
حدد عائلة الخطوط والمتغيرات
نظرًا لأن كل مجموعة خطوط ومتغير تساهم في وزن الصفحة ، يجب أن يتضمن جزء من عملية تحسين خط Google تقييد هذين العنصرين.
يوصي معظم الخبراء باستخدام مجموعتي خطوط كحد أقصى ؛ للعناوين والمحتوى. هذا منطقي ويسمح لك باللعب بأمان مع الاستفادة من خطوط الويب لتحسين التصميم.
لا يعني توفر العديد من المتغيرات مثل الخط المائل والعادي والجريء وما إلى ذلك بالضرورة أن لديك "الاختيار" لتضمينها في التنزيل الخاص بك. قلل التنزيل إلى المتغير الدقيق المطلوب وتجنب تضمين الكثير. سيكون من الضياع تنزيل متغير كامل لأنك تريد فقط استخدام كلمة واحدة منه. هذا هو المكان الذي تكون فيه خدعة التحسين التالية لخطوط Google مفيدة.
استخدم معلمة النص
تعد معلمة النص واحدة من أفضل حيل تحسين الخطوط في Google التي تحتاج إلى معرفتها ، ومن المدهش أن معظم المطورين لا يستخدمونها. تسمح لك المعلمة بتحميل الأحرف التي تحتاجها فقط.
بافتراض أنك ترغب في استخدام حرفين فقط من وجه الخط في اسم شركتك كما في المثال أدناه. لقد استخدمت خطوطًا مختلفة للحرفين C و N:
اسم الشركة
يمكنك طلب تحميل هذين الحرفين فقط ، بدلاً من واجهة الخط بالكامل. سيتضمن عنوان URL الخاص بالخط معامِلات إضافية مثل هذا:
https://fonts.googleapis.com/css؟family=Baloo+Chettan+2=CN
هذه الطريقة لتحسين أداء Google Font فعالة للغاية وتسمح لك بقطع ما يصل إلى 90٪ من وزن الخط.
ختاماً
يعد تحسين خط Google إستراتيجية مهمة لتحسين الأداء العام لموقع الويب.
تعد إمكانية الوصول وسهولة القراءة دائمًا من العوامل الرئيسية التي يجب التركيز عليها ، بصرف النظر عن التصميم الجيد في الطباعة. تركز جميع الأساليب المذكورة أعلاه لتحسين أداء الخط على تصغير وزن الخط ، والوصول إلى خطوط الويب في أسرع وقت ممكن ، وتقديم تنسيق / بدائل صالحة عندما تكون شبكة المستخدم غير مستقرة.
يرجى إعلامنا إذا كنت قد جربت أيًا من هذه الطرق ، وبشأن أي عملية تحسين خط ويب غير مذكورة في هذه المقالة.