تحسين أداء خطوط جوجل

من العدل أن نقول إن خطوط Google شائعة. حتى وقت الكتابة ، تمت مشاهدتها أكثر من 29 تريليون مرة عبر الويب ومن السهل فهم السبب - تمنحك المجموعة الوصول إلى أكثر من 900 خط جميل يمكنك استخدامها على موقع الويب الخاص بك مجانًا. بدون Google Fonts ، ستقتصر على عدد قليل من "خطوط النظام" المثبتة على جهاز المستخدم الخاص بك.

خطوط النظام أو "خطوط الويب الآمنة" هي الخطوط الأكثر شيوعًا التي يتم تثبيتها مسبقًا عبر أنظمة التشغيل. على سبيل المثال ، يتم حزم Arial و Georgia مع توزيعات Windows و macOS و Linux.

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

تم تحسين خطوط Google بالفعل

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

لنلقِ نظرة على Roboto ، يخبرنا GitHub أن المتغير العادي يزن 168 كيلو بايت.

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

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

إذا قمت بتغيير وكيل المستخدم الخاص بي إلى Internet Explorer 11 ، فسيتم تقديم الخط بتنسيق WOFF بدلاً من ذلك.

أخيرًا ، إذا قمت بتغيير وكيل المستخدم الخاص بي إلى IE8 ، فسأحصل على الخط بتنسيق EOT (نوع OpenType مضمن).

تحتفظ Google Fonts بأكثر من 30 متغيرًا مُحسَّنًا لكل خط وتكتشف تلقائيًا وتوفر الخيار الأمثل لكل نظام أساسي ومتصفح.

- إيليا جريجوريك ، تحسين خط الويب

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

متصفح التخزين المؤقت

من التحسينات المضمنة الأخرى لخطوط Google التخزين المؤقت للمتصفح.

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

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

- التعليمات ، خطوط جوجل

تم تعيين ذاكرة التخزين المؤقت لمتصفح Google Fonts بحيث تنتهي صلاحيتها بعد عام واحد ما لم يتم مسح ذاكرة التخزين المؤقت في وقت أقرب.

ملاحظة: Mija ليس أحد خطوط Google ، لكن مبادئ التخزين المؤقت ليست خاصة بالمورد.

مزيد من التحسين ممكن

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

1. الحد من مجموعات الخطوط

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

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

2. استبعاد المتغيرات

نظرًا لمعايير الجودة العالية لخطوط Google ، تحتوي العديد من مجموعات الخطوط على النطاق الكامل لأوزان الخطوط المتاحة:

• نحيف ضعيف (100)
• مائل رقيق (100i)
• ضوء (300)
• مائل خفيف (300i)
• منتظم (400)
• مائل عادي (400i)
• وسط (600)
• مائل متوسط ​​(600i)
• بولد (700)
• بولد مائل (700i)
• أسود (800)
• أسود مائل (800i)

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

على سبيل المثال ، تزن عائلة خطوط Roboto حوالي 144 كيلو بايت. ومع ذلك ، إذا كنت تستخدم فقط المتغيرات Regular و Regular Italic و Bold ، فإن هذا الرقم ينخفض ​​إلى ~ 36 كيلوبايت. 75٪ توفير!

يبدو الرمز الافتراضي لتطبيق Google Fonts كما يلي:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

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

بدلاً من ذلك ، لتحميل جميع متغيرات الخطوط ، نحتاج إلى تحديد الأوزان في عنوان URL على النحو التالي:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

من النادر أن يستخدم موقع الويب جميع أشكال الخط من Thin (100) إلى Black (900) ، والاستراتيجية المثلى هي تحديد الأوزان التي تخطط لاستخدامها فقط:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

هذا مهم بشكل خاص عند استخدام مجموعات خطوط متعددة. على سبيل المثال ، إذا كنت تستخدم Lato للعناوين ، فمن المنطقي أن تطلب فقط المتغير الغامق (وربما بخط مائل غامق):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. الجمع بين الطلبات

يقوم مقتطف الشفرة الذي عملنا معه أعلاه بإجراء اتصال بخوادم Google ( fonts.googleapis.com ) ، وهذا ما يسمى طلب HTTP. بشكل عام ، كلما زادت طلبات HTTP التي تحتاجها صفحة الويب الخاصة بك ، كلما استغرق تحميلها وقتًا أطول.

إذا كنت تريد تحميل خطين ، فيمكنك القيام بشيء مثل هذا:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

قد ينجح ذلك ، لكنه سيؤدي إلى قيام المتصفح بتقديم طلبين. يمكننا تحسين ذلك من خلال دمجها في طلب واحد مثل هذا:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

لا يوجد حد لعدد الخطوط والمتغيرات التي يمكن أن يحتفظ بها طلب واحد.

4. الموارد تلميحات

تلميحات الموارد هي ميزة تدعمها المتصفحات الحديثة والتي يمكن أن تعزز أداء موقع الويب. سنلقي نظرة على نوعين من تلميحات الموارد: "الجلب المسبق لنظام أسماء النطاقات" و "الاتصال المسبق".

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

الجلب المسبق لنظام أسماء النطاقات

يسمح الجلب المسبق لنظام أسماء النطاقات للمتصفح ببدء الاتصال بواجهة برمجة تطبيقات خطوط Google ( fonts.googleapis.com ) بمجرد بدء تحميل الصفحة. هذا يعني أنه بحلول الوقت الذي يصبح فيه المتصفح جاهزًا لتقديم طلب ، يكون بعض العمل قد تم بالفعل.

لتنفيذ الجلب المسبق لنظام أسماء النطاقات لخطوط Google ، ما عليك سوى إضافة هذا الخط الأحادي إلى صفحات الويب الخاصة بك <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

توصيل مسبق

إذا نظرت إلى رمز تضمين خطوط Google ، فيبدو أنه طلب HTTP واحد:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

ومع ذلك ، إذا قمنا بزيارة عنوان URL هذا ، يمكننا أن نرى أن هناك ثلاثة طلبات أخرى إلى عنوان URL مختلف ، https://fonts.gstatic.com. طلب واحد إضافي لكل متغير خط.

تكمن مشكلة هذه الطلبات الإضافية في أن المتصفح لن يبدأ العمليات لإجراءها حتى يكتمل الطلب الأول لـ https://fonts.googleapis.com/css . هذا هو المكان الذي يأتي فيه نظام Preconnect.

يمكن وصف الاتصال المسبق بأنه نسخة محسنة من الجلب المسبق. يتم تعيينه على عنوان URL المحدد الذي سيقوم المتصفح بتحميله. بدلاً من مجرد إجراء بحث DNS ، فإنه يكمل أيضًا تفاوض TLS ومصافحة TCP أيضًا.

تمامًا مثل الجلب المسبق لـ DNS ، يمكن تنفيذه بسطر واحد من التعليمات البرمجية:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

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

5. الخطوط المضيفة محليا

تم ترخيص خطوط Google بموجب ترخيص "Libre" أو "برنامج مجاني" ، والذي يمنحك حرية استخدام الخطوط وتغييرها وتوزيعها دون طلب إذن. هذا يعني أنك لست بحاجة إلى استخدام استضافة Google إذا كنت لا ترغب في ذلك - يمكنك استضافة الخطوط بنفسك!

جميع ملفات الخطوط متوفرة على Github. يتوفر أيضًا ملف مضغوط يحتوي على جميع الخطوط (387 ميجابايت).

أخيرًا ، هناك خدمة مساعدة تمكنك من اختيار الخطوط التي تريد استخدامها ، ثم توفر الملفات و CSS اللازمة للقيام بذلك.

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

لاحظ المعلمة lastModified في API. يتم تعديل الخطوط وتحسينها بانتظام.

6. عرض الخط

نحن نعلم أن المتصفح يستغرق وقتًا لتنزيل خطوط Google ، ولكن ماذا يحدث للنص قبل أن يصبح جاهزًا؟ لفترة طويلة ، سيعرض المتصفح مساحة فارغة حيث يجب أن يكون النص ، والمعروف أيضًا باسم "FOIT" (فلاش للنص غير المرئي).

القراءة الموصى بها : "FOUT، FOIT، FOFT" بقلم Chris Coyier

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

عن طريق إضافة font-display: swap; إلى إعلان @ font-face ، نطلب من المتصفح إظهار الخط الاحتياطي حتى يتوفر خط Google.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

في عام 2019 ، أعلنت Google أنها ستضيف دعمًا لعرض الخطوط: swap. يمكنك البدء في تنفيذ ذلك على الفور عن طريق إضافة معلمة إضافية إلى عنوان URL الخاص بالخطوط:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. استخدم معلمة Text

الميزة غير المعروفة لواجهة برمجة تطبيقات Google Fonts هي معلمة text . تسمح لك هذه المعلمة نادر الاستخدام بتحميل الأحرف التي تحتاجها فقط.

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

يعمل مثل هذا:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

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

ملاحظة: عند استخدام معلمة text ، يتم تحميل وزن الخط "العادي" فقط بشكل افتراضي. لاستخدام وزن آخر ، يجب تحديده صراحةً في عنوان URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

تغليف

مع وجود ما يقدر بـ 53٪ من أفضل مليون موقع يستخدم خطوط Google ، فإن تنفيذ هذه التحسينات يمكن أن يكون له تأثير كبير.

كم حاولت مما سبق؟ اسمحوا لي أن أعرف في قسم التعليقات.