مقالات
تحسين المهام الطويلة
لقد أخبرتك "عدم حظر سلسلة التعليمات الرئيسية" و"تقسيم المهام الطويلة"، ولكن ماذا يعني تنفيذ هذه الإجراءات؟
تطبيق تأثيرات على الصور باستخدام خاصية mask-image في CSS
يمنحك إخفاء CSS خيار استخدام صورة كطبقة قناع. وهذا يعني أنه يمكنك استخدام صورة أو رسم SVG أو تدرج كقناع لإنشاء تأثيرات مثيرة للاهتمام بدون محرر صور.
Baseline 2024: مزيد من الأدوات لمساعدة مطوّري الويب
مجموعة بيانات ميزات الويب ولوحة بيانات حالة منصّة الويب والتطبيق المصغّر لحالة الأساس وغير ذلك اطّلِع على "البيانات الأساسية" لعام 2024.
فيديو كسول التحميل
توضّح هذه المشاركة طريقة "التحميل الكسول" والخيارات المتاحة لك لتفعيل هذه الطريقة في الفيديو.
وحدات التحميل المُسبق
يوفر التحميل المُسبق للوحدات طريقة لتحميل وحدات JavaScript بشكل تلقائي.
قياس ميزة الملء التلقائي للمتصفّح في نماذجك
لتحسين تجربة المستخدم، من الضروري فهم كيفية تفاعل المستخدمين مع نماذجك. تلعب ميزة الملء التلقائي في المتصفّح دورًا مهمًا في هذه العملية. تعرَّف على كيفية جمع البيانات وتحليلها حول كيفية استخدام المستخدِمين ميزة الملء التلقائي في نماذجك.
الجزء 2: إنشاء ميزة رصد المحتوى الضار من خلال الذكاء الاصطناعي من جهة العميل
تحمي ميزة رصد المحتوى الضار المستخدمين وتوفّر بيئة أكثر أمانًا على الإنترنت. في الجزء الثاني، نتعرّف على كيفية إنشاء أداة ذكاء اصطناعي من جهة العميل لرصد اللغة غير اللائقة والحدّ منها من مصدرها.
الجزء 1: الذكاء الاصطناعي من جهة العميل لمكافحة انتشار اللغة غير اللائقة على الإنترنت
"يمكنك حماية المستخدمين وتوفير بيئة أكثر أمانًا على الإنترنت من خلال رصد المحتوى الضار. في الجزء الأول، نشارك السياق الذي تحتاجه لنشر الذكاء الاصطناعي للحدّ من المحتوى الضار من مصدره: لوحات مفاتيح المستخدمين".
إجمالي وقت الحظر (TBT)
توضّح هذه المشاركة مقياس "إجمالي وقت الحظر" (TBT) وتشرح كيفية قياسه.
Web Vitals
مقاييس أساسية لإنشاء موقع إلكتروني سليم
الطرق الأكثر فعالية لتحسين "مؤشرات أداء الويب الأساسية"
مجموعة من أفضل الممارسات التي حدّدها فريق Chrome على أنّها أكبر الفرص لتحسين أداء الويب وتحسين "مؤشرات أداء الويب الأساسية"
بدء قياس "مؤشرات أداء الويب"
تعرَّف على كيفية قياس "مؤشرات أداء الويب" لموقعك الإلكتروني في كلّ من البيئات الواقعية والمختبرية.
تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة
دليل مفصّل حول كيفية تقسيم سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) وتحديد الجوانب الرئيسية التي يجب تحسينها.
مقارنة إمكانية النموذج اللغوي الكبير مع التلخيص
تقييم نتائج النماذج والطلبات المختلفة باستخدام نموذج لغوي كبير (LLM) كأسلوب تحكيم بدلاً من الاعتماد على الحكم البشري، يتم تفويض عملية التحقّق من صحة النموذج إلى نموذج لغوي كبير آخر.
أصبحت خاصية CSS content-visibility متاحة الآن في "المستوى الأساسي"
أصبحت سمة CSS content-visibility متاحة الآن في "المستوى الأساسي".
كيفية تحديد الحدود الدنيا لمقاييس "مؤشرات أداء الويب الأساسية"
الأبحاث والمنهجية المتّبعة في حدود "مؤشرات أداء الويب الأساسية"
سير عمل "مؤشرات أداء الويب الأساسية" باستخدام أدوات Google
في ظل الأهمية المتزايدة لـ "مؤشرات أداء الويب الأساسية"، يركِّز مالكو المواقع الإلكترونية والمطوّرون بشكل متزايد على الأداء وتجارب المستخدمين الرئيسية. توفر Google العديد من الأدوات للمساعدة في تقييم الصفحات وتحسينها ومراقبتها، ولكن غالبًا ما يرتبك المستخدمون بشأن مصادر البيانات المختلفة وكيفية استخدامها بفعالية. يقترح هذا الدليل سير عمل يجمع بين العديد من الأدوات ويوضح أين وكيف يكون منطقيًا خلال عملية التطوير.
تشخيص التفاعلات البطيئة في المختبر يدويًا
لقد نظرت في البيانات الميدانية، واتضح أن لديك بعض التفاعلات البطيئة. الخطوة التالية هي معرفة المزيد حول كيفية اختبار هذه التفاعلات يدويًا، وتحديد الأسباب وراءها.
الخط القاعدي
تشرح هذه المقالة قصة انطلاق مشروع Baseline ومشاركة Google وملكية مجموعة WebDX Community Group.
ميزة "التخزين المؤقت للصفحات"
تعرَّف على كيفية تحسين صفحاتك لإتاحة عمليات التحميل الفورية باستخدام زرَّي الرجوع وإعادة التوجيه في المتصفِّح.
تحسين تداخل CSS باستخدام CSSNestedDeclarations
تحسينات على ميزة "تداخل CSS"
First Input Delay (FID)
تتناول هذه المشاركة مقياس "مهلة الاستجابة لأوّل إدخال" (FID) وتشرح كيفية قياسه.
تصحيح أخطاء الأداء في الحقل
تعرَّف على كيفية نَسْب بيانات أدائك بمعلومات تصحيح الأخطاء لمساعدتك في تحديد مشاكل المستخدِم الفعلي في الإحصاءات وحلّها.
قياس أداء CSS @property
ما هو تأثير السمة @property في أداء خدمة CSS؟
تحسين الأداء وتجربة المستخدم للذكاء الاصطناعي من جهة العميل
اكتشِف مزايا الذكاء الاصطناعي من جهة العميل، بما في ذلك وقت الاستجابة المنخفض، وخفض التكاليف من جهة الخادم، وعدم الحاجة إلى مفتاح واجهة برمجة التطبيقات، وزيادة خصوصية المستخدم، وإمكانية الوصول بلا إنترنت.
الربط بين "مؤشرات أداء الويب الأساسية" والأرباح الإعلانية باستخدام أدوات Google
تعرَّف على كيفية استخدام أدوات Google للمساعدة في ربط "مؤشرات أداء الويب الأساسية" بالأرباح من الإعلانات.
مساحة التخزين على الويب
هناك العديد من الخيارات المختلفة لتخزين البيانات في المتصفح. أيهما أفضل لاحتياجاتك؟
حان الوقت للتحميل الكسول لإطارات iframe خارج الشاشة
تتناول هذه المشاركة سمة التحميل وكيفية استخدامها للتحكم في تحميل إطارات iframe.
إنشاء تطبيقات ويب تقدّمية متعدّدة على النطاق نفسه
اطّلِع على الطرق المقترَحة وغير المقترَحة لإنشاء تطبيقات ويب تقدّمية (PWA) متعددة مع إعادة استخدام النطاق نفسه مع إبراز الإيجابيات والسلبيات.
بروتوكول Web Push
برنامج تعليمي تفاعلي خطوة بخطوة يوضح لك كيفية إنشاء خادم يدير اشتراكات الإشعارات الفورية ويرسل طلبات بروتوكول الدفع على الويب إلى خدمة إرسال البيانات.
ما الذي يتطلبه تثبيت التطبيق؟
معايير قابلية تثبيت تطبيق الويب التقدّمي
ما الذي يجعل تطبيق ويب تقدّميًا جيدًا؟
ما الذي يجعل تطبيق ويب تقدّمي جيدًا أو رائعًا؟
كيفية تعامل Chrome مع تحديثات بيان تطبيق الويب
ما يلزم تغيير الرموز والاختصارات والألوان والبيانات الوصفية الأخرى في بيان تطبيق الويب لتطبيق PWA.
إضافة بيان تطبيق ويب
بيان تطبيق الويب هو ملف JSON بسيط يوضح للمتصفح كيف يجب أن يعمل تطبيق الويب.
الحدّ من النصوص البرمجية على المواقع الإلكترونية (XSS) من خلال تطبيق سياسة أمان المحتوى الصارمة (CSP)
تعرَّف على كيفية نشر سياسة أمان محتوى (CSP) استنادًا إلى الأرقام الخاصة بالنص البرمجي أو علامات التجزئة كإجراء دفاعي ضد البرمجة النصية على مستوى المواقع الإلكترونية.
الوصول إلى الأجهزة على الويب
تساعد هذه المقالة مطوّري برامج الويب في اختيار واجهة برمجة تطبيقات الأجهزة المناسبة بناءً على جهاز معيّن.
السماح بإعادة استخدام مفاتيح المرور في جميع مواقعك الإلكترونية من خلال "طلبات المصدر ذات الصلة"
تعرَّف على كيفية استخدام "طلبات المصدر ذات الصلة" للسماح بإعادة استخدام مفاتيح المرور في جميع مواقعك الإلكترونية.
طريقة \"التحميل الكسول\" للصور على مستوى المتصفّح على الويب
تتناول هذه المشاركة سمة التحميل وكيفية استخدامها للتحكّم في تحميل الصور.
اختيار التنسيق الصحيح للصورة
يمثل اختيار تنسيق الصورة المناسب الخطوة الأولى في تقديم صور محسّنة على موقعك الإلكتروني. تساعدك هذه المشاركة في اتخاذ القرار الصحيح.
المقاييس المخصّصة
تتيح لك المقاييس المخصَّصة قياس وتحسين جوانب تجربة موقعك الإلكتروني التي يتفرّد بها موقعك الإلكتروني.
قياس الأداء وتصحيح الأخطاء باستخدام "إحصاءات Google 4" وBigQuery
تعرَّف على كيفية إرسال بيانات "مؤشرات الأداء الرئيسية للويب" إلى مواقع "إحصاءات Google 4" وتصدير البيانات للتحليل في BigQuery وLooker Studio.
أفضل الممارسات المتعلقة بأذونات الويب
يوضِّح هذا الدليل أفضل الممارسات التي يجب اتّباعها للمواقع الإلكترونية عند طلب الإذن بالوصول إلى الإمكانات الحساسة (مثل الكاميرا والميكروفون والموقع الجغرافي) للحدّ من الطلبات غير الضرورية وحظر الوصول.
أفضل الممارسات لإشعارات ملفات تعريف الارتباط
تعرَّف على كيفية تأثير إشعارات ملفات تعريف الارتباط في الأداء وقياس الأداء وتجربة المستخدم.
تخصيص إشعارات الوسائط وعناصر التحكّم في التشغيل باستخدام واجهة برمجة التطبيقات Media session API
يمكن لمطوّري الويب تخصيص إشعارات الوسائط والردّ على الأحداث ذات الصلة بالوسائط مثل تقديم طلب أو تتبُّع التغييرات باستخدام واجهة برمجة التطبيقات Media Session API.
استخدام Tabindex
استخدم سمة tabindex لتعيين موضع علامة تبويب عنصر ما بشكل صريح.
البحث عن التفاعلات البطيئة في الحقل
قبل أن تتمكّن من إعادة إنتاج التفاعلات البطيئة في الدرس التطبيقي لتحسين مستوى تفاعل موقعك الإلكتروني مع مدة العرض التالية، ستحتاج إلى الاعتماد على البيانات الميدانية للعثور عليها. تعرَّف على كيفية إجراء ذلك في هذا الدليل.
وقت وصول أول بايت (TTFB)
تقدّم هذه المشاركة تعريفًا بمقياس "وقت وصول أول بايت" (TTFB) وتشرح كيفية قياسه.
هندسة الطلبات العملية للنماذج اللغوية الكبيرة الأصغر حجمًا
تعرَّف على كيفية تعديل طلباتك لتحقيق النتائج المفضّلة لديك على مستوى النماذج اللغوية الكبيرة والنماذج وأحجام النماذج المختلفة.
تحسين الوقت المطلوب للوصول إلى أول بايت
تعرّف على كيفية تحسين مقياس "وقت وصول أول بايت".
مدى استجابة الصفحة لتفاعلات المستخدم (INP)
تقدم هذه المشاركة مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) وتشرح كيفية عمله وكيفية قياسه وتقدم اقتراحات حول كيفية تحسينه.
الألوان المعتمدة على نظام ألوان CSS باستخدام light-dark()
الوصف: حدد الألوان التي تتفاعل مع نظام الألوان المستخدم باستخدام الدالة light-dark().
أنماط أداء WebAssembly لتطبيقات الويب
في هذا الدليل الموجّه لمطوّري الويب الذين يريدون الاستفادة من WebAssembly، ستتعلم كيفية الاستفادة من Wasm لمساعدتهم في تنفيذ مهام تستهلك قدرًا كبيرًا من وحدة المعالجة المركزية (CPU) من خلال الاستعانة بمثال على التنفيذ.
تخطيطات الشبكة المتحركة بتنسيق CSS
في شبكة CSS، تسمح لك خاصية `grid-template-columns` و `grid-template-rows` بتحديد أسماء الأسطر وتتبع حجم أعمدة وصفوف الشبكة، على التوالي. يتيح دعم الاستيفاء لهذه الخصائص لتخطيطات الشبكة الانتقال بسلاسة بين الحالات، بدلاً من الانطباق في نقطة منتصف الرسوم المتحركة أو الانتقال.
تشغيل لعبة الديناصور في Chrome باستخدام لوحة الألعاب
تعرَّف على كيفية التحكّم في ألعاب الويب باستخدام واجهة برمجة التطبيقات Gamepad.
سمة inert
سمة inert هي سمة HTML عمومية تبسّط طريقة إزالة أحداث إدخالات المستخدم واستعادتها لأحد العناصر، بما في ذلك أحداث التركيز والأحداث من التكنولوجيات المساعِدة.
الأخلاقيات والذكاء الاصطناعي
هناك العديد من الاعتبارات الأخلاقية عند استخدام أدوات الذكاء الاصطناعي وإنشاء محتوى جديد.
التعرّف على فريق Web.dev AI
تعرَّف على فريق علاقات المطوّرين والمؤلفين في مجال التكنولوجيا
ما هو الذكاء الاصطناعي؟
غالبًا ما يُستخدَم اختصار الذكاء الاصطناعي (AI) بالتبادل لتمثيل أنواع مختلفة من التكنولوجيات التي يتألّف منها مجال الذكاء الاصطناعي.
ترقية البحث في موقعك الإلكتروني: إجابات سياقية باستخدام الذكاء الاصطناعي التوليدي
هناك العديد من الاعتبارات الأخلاقية عند استخدام أدوات الذكاء الاصطناعي وإنشاء محتوى جديد.
تحديد موفِّر مفتاح المرور باستخدام AAGUID
يمكن للجهات المعتمدة تحديد مصدر مفتاح المرور من خلال فحص AAGUID. يمكنك الاطّلاع على آلية عملها.
التحويل إلى Wasm وتحسينه باستخدام Binaryen
باستخدام مثال لغة لعبة اصطناعية يسمّى ExampleScript، يمكنك معرفة كيفية كتابة وحدات WebAssembly وتحسينها في JavaScript باستخدام واجهة برمجة التطبيقات Binaryen.js.
التقاط الصوت والفيديو بتنسيق HTML5
لطالما كان تسجيل الصوت أو الفيديو الهدف الذي يسعى إليه مطوّرو الويب. كان علينا لعدة سنوات الاعتماد على المكوّنات الإضافية للمتصفّح ( Flash أو Silverlight ) لإنجاز المهام. تعالَ، HTML5 لإنقاذ الموقف قد لا يكون ذلك واضحًا، ولكنّ استخدام HTML5 بشكل
مكوّن الويب
يتيح لك مكوّن الويب إمكانية استخدام التصاميم الثلاثية الأبعاد على صفحة الويب بشكل بياني.
نظرة معمّقة على عملية "إثبات هوية المستخدم"
التعرّف على كيفية استخدام "userverification" في WebAuthn
لماذا تختلف بيانات CrUX عن بيانات RUM؟
تعرَّف على الأسباب التي قد تؤدي إلى عرض أرقام مختلفة من "مؤشرات أداء الويب الأساسية" عن CrUX في بيانات RUM.
أدوات تسهيل الاستخدام لمطوّري البرامج على الويب
من المهم إنشاء مواقع شاملة ومتاحة للجميع. هناك ستة مجالات رئيسية على الأقل من حالات العجز التي يمكننا تحسينها: البصر والسمع والحركة والإدراك والكلام والعصبي.
تحميل JavaScript لجهة خارجية
توفِّر النصوص البرمجية التابعة لجهات خارجية مجموعة كبيرة من الميزات المفيدة، ما يجعل الويب أكثر ديناميكية. تعرَّف على كيفية تحسين تحميل النصوص البرمجية التابعة لجهات خارجية لتقليل تأثيرها في الأداء.
Largest Contentful Paint (LCP)
تقدّم هذه المشاركة مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" (LCP) وتوضّح كيفية قياسه.
منع إنشاء مفتاح مرور جديد إذا كان متوفّرًا حاليًا
تعرَّف على كيفية منع إنشاء مفتاح مرور جديد في حال توفُّر مفتاح مرور في مدير كلمات المرور لدى المستخدم.
العمل باستخدام IndexedDB
دليل لأساسيات قاعدة البيانات المفهرسة
5 مقتطفات CSS يجب أن يعرفها كل مطوّر واجهة أمامية في 2024
CSS متميّزة وفعّالة وثابتة يمكنك استخدامها اليوم.
ما هي أجزاء عنوان URL؟
ما الفرق بين المضيف والموقع الإلكتروني والأصل؟ ما هو نطاق المستوى الأعلى (eTLD)+1؟ تشرح هذه المقالة ما يلي:
نظرة تفصيلية على بيانات الاعتماد القابلة للاكتشاف
تعرَّف على بيانات الاعتماد القابلة للاكتشاف وكيفية إنشاء تجارب مستخدم تناسب حالة استخدامك.
عرض الأداء
ويلاحظ المستخدمون ما إذا كانت المواقع الإلكترونية والتطبيقات لا تعمل بشكل جيد، لذا من المهم تحسين أداء العرض.
ResizeMonitorer: إنها مثل document.onresize للعناصر
يرسل لك "ResizeMonitorer" إشعارًا عند تغيير حجم مستطيل محتوى أحد العناصر بحيث يمكنك التفاعل وفقًا لذلك.
تحسين عملية ترميز وحجم نقل مواد العرض النصية
إلى جانب التخلص من عمليات تنزيل الموارد غير الضرورية، أفضل شيء يمكنك فعله لتحسين سرعة تحميل الصفحة هو تقليل إجمالي حجم التنزيل من خلال تحسين الموارد المتبقية وضغطها.
لوحة خارج الشاشة: يمكنك تسريع عمليات لوحة الرسم مع عامل على الويب.
يشرح هذا المستند كيفية استخدام واجهة برمجة التطبيقات OffscreenCanvas API لتحسين الأداء عند عرض الرسومات في تطبيق الويب.
First Contentful Paint (FCP)
تقدّم هذه المشاركة مقياس "سرعة عرض المحتوى على الصفحة" (FCP) وتوضّح كيفية قياسه.
شبكات توصيل المحتوى (CDN)
تقدّم هذه المقالة نظرة عامة شاملة على شبكات توصيل المحتوى (CDN). بالإضافة إلى ذلك، تشرح كيفية اختيار إعداد شبكة توصيل المحتوى (CDN) وإعداده وتحسينه.
ما الذي يجعل تجربة تسجيل الخروج جيدة؟
إرشادات عملية للمطوّر حول الإجراءات التي يجب اتّخاذها عندما يسجّل المستخدم الخروج من الموقع الإلكتروني
وقت التفاعل (TTI)
تقدّم هذه المشاركة تعريفًا بمقياس "وقت التفاعل" (TTI) وتوضّح كيفية قياسه.
تحسين تحميل الموارد باستخدام Fetch Priority API
تشير Fetch Priority API إلى الأولوية النسبية للموارد إلى المتصفِّح. وقد يؤدّي ذلك إلى توفير أفضل طريقة لتحميل البيانات وتحسين "مؤشرات أداء الويب الأساسية".
الفئات الزائفة من نوع :user-valid و :user-invalid
لمحة عن الفئات الزائفة من نوع :user-صالحة و :غير صالحة للمستخدم وكيفية استخدامها لتحسين تجربة المستخدم في التحقق من صحة الإدخال.
تحسين "مؤشرات أداء الويب الأساسية" لصالح صنّاع القرار في الأنشطة التجارية
تعرَّف على الطريقة التي يمكن بها لصانعي القرار في مجال الأنشطة التجارية وغير المطوّرين تحسين "مؤشرات أداء الويب الأساسية".
الفروق الطفيفة في سلاسل ترميز Base64 في JavaScript
فهم المشاكل الشائعة وتجنُّبها عند تطبيق ترميز Base64 وفك الترميز على السلاسل
الشبكة الفرعية لخدمة مقارنة الأسعار
تتيح Subgrid إمكانية مشاركة الشبكة، مما يسمح للشبكات المتداخلة بالمواءمة مع الأسلاف والأشقاء.
تحميل الإعلانات بفاعلية بدون التأثير في سرعة الصفحة
في العالم الرقمي اليوم، يُعد الإعلان على الإنترنت جزءًا أساسيًا من شبكة الويب المجانية التي نتمتع بها جميعًا. ومع ذلك، يمكن أن تؤدي الإعلانات التي تم تنفيذها بشكل غير صحيح إلى انخفاض مستوى تجربة التصفُّح، ما يؤدي إلى إزعاج المستخدمين وانخفاض مستوى التفاعل. تعرَّف على كيفية تحميل الإعلانات بفاعلية بدون التأثير في سرعة الصفحة، وضمان تجربة مستخدم سلسة، وزيادة فرص تحقيق الأرباح لمالكي المواقع الإلكترونية.
أربعة أنواع شائعة لتغطية الرمز
تعرف على معنى تغطية التعليمة البرمجية واكتشف أربع طرق شائعة لقياسها.
من أجل الاختبار أو عدم الاختبار، ينبغي أن يستند المنظور التقني
عليك تحديد العناصر التي تحتاج إلى اختبارها والعناصر التي يمكنك استبعادها.
تحديد حالات الاختبار والأولويات
تحديد ما تريد اختباره وتحديد حالات الاختبار وتحديد الأولويات.
مقاييس الأداء التي تركّز على المستخدم
تُعد مقاييس الأداء التي تركز على المستخدم أداة مهمة لفهم وتحسين تجربة موقعك على الويب بطريقة تفيد المستخدمين الحقيقيين.
تحميل الصور المتجاوبة مسبقًا
تعرَّف على الإمكانيات الجديدة والمثيرة للتحميل المُسبَق للصور المتجاوبة مع مختلف الأجهزة لضمان تجربة رائعة للمستخدم.
تعديل أسلوب الخط وفقًا لإعدادات المستخدم المفضّلة باستخدام لغة CSS
طريقة لتكييف الخط مع تفضيلات المستخدمين، حتى يشعروا بارتياح إلى أقصى حد عند قراءة المحتوى.
هرم أم سلطعون؟ العثور على استراتيجية اختبار تناسب
تعرّف على كيفية دمج أنواع الاختبارات المختلفة في استراتيجية معقولة تناسب مشروعك.
ثلاثة أنواع شائعة من التشغيل الآلي للاختبار
لنبدأ بالأساسيات استكشاف وضعي الاختبار العامين والأنواع الثلاثة الشائعة من أتمتة الاختبار.
التخلص من عمليات التنزيل غير الضرورية
يجب عليك تدقيق مواردك بشكل دوري للتأكد من أن كل مورد يساعد في تقديم تجربة مستخدم أفضل.
تحويل ملف mkbitmap إلى WebAssembly
يقرأ برنامج mkbitmap C صورة ويطبق عليها واحدة أو أكثر من العمليات التالية، بهذا الترتيب: العكس، وفلترة المسار العالي، والتحجيم، ووضع حدود. يمكن التحكم في كل عملية بشكل فردي وتفعيلها أو إيقافها. توضح هذه المقالة كيفية تجميع ملفات mkbitmap في WebAssembly.
ما هو WebAssembly وأين أتى؟
مقدمة عن WebAssembly (يُختصر أحيانًا Wasm)، وهو تنسيق الرمز الثنائي المتنقل وتنسيق النص المقابل للبرامج القابلة للتنفيذ بالإضافة إلى واجهات البرامج لتيسير التفاعل بين هذه البرامج والبيئة المضيفة لها.
نظام الملفات الخاصة وأصل
يقدّم معيار نظام الملفات نظام ملفات خاصًا بالمصدر (OPFS) كنقطة نهاية تخزين خاصة بمصدر الصفحة ولا تظهر للمستخدم، وهي توفّر إمكانية وصول اختيارية إلى نوع خاص من الملفات المحسّنة للغاية لتحقيق الأداء الأفضل. يتيح نظام الملفات الخاص الأصلي للمتصفّحات
استضافة بيانات المستخدم بأمان في تطبيقات الويب الحديثة
كيفية عرض المحتوى الذي يتحكم فيه المستخدم بشكل آمن في تطبيقات الويب
نشر AVIF للمواقع الإلكترونية الأكثر استجابة
نظرة عامة على كيفية استخدام AVIF في المنظومة المتكاملة، وما نوع الأداء والجودة التي يمكن أن يتوقّعها المطوّرون من AVIF للصور الثابتة والصور المتحركة
تحسين التفاعل مع سرعة عرض المحتوى على الصفحة التالية
تعرَّف على كيفية تحسين مدى استجابة موقعك الإلكتروني لسرعة عرض المحتوى على الصفحة.
الميزات الأساسية التي يمكنك استخدامها اليوم
لنتعرّف على بعض الميزات التي يوفّرها تطبيق Baseline.
تقييم النص البرمجي والمهام الطويلة
عند تحميل النصوص البرمجية، يستغرق المتصفّح بعض الوقت لتقييمها قبل تنفيذها، ما قد يؤدي إلى إنجاز مهام طويلة. اطّلِع على آلية عمل تقييم النص البرمجي وما يمكنك فعله لمنعه من التسبّب بمهام طويلة أثناء تحميل الصفحة.
تحسين مهلة الإدخال
ويمكن أن يساهم تأخير الإدخال بشكل كبير في إجمالي وقت استجابة التفاعل، كما يؤثر سلبًا في مدى استجابة الصفحة لتفاعلات المستخدم. في هذا الدليل، تعرَّف على مدة تأخير الإدخال وكيف يمكنك تقليلها لزيادة سرعة التفاعل.
مدى تأثير أحجام DOM الكبير على التفاعل، وما يمكنك القيام به حيال ذلك
يمكن أن تكون أحجام DOM الكبيرة عاملاً في ما إذا كانت التفاعلات سريعة أم لا. يمكنك الاطّلاع على مزيد من المعلومات حول العلاقة بين حجم DOM وINP، والإجراءات التي يمكنك اتّخاذها لتقليل حجم DOM والطرق الأخرى للحد من عمل العرض عندما تحتوي صفحتك على الكثير من عناصر DOM.
عرض HTML والتفاعل من جهة العميل
يختلف عرض HTML باستخدام JavaScript عن عرض رمز HTML الذي يرسله الخادم، ويمكن أن يؤثر ذلك في الأداء. تعرَّف على الفرق في هذا الدليل وعلى الإجراءات التي يمكنك اتّخاذها للحفاظ على أداء عرض موقعك الإلكتروني، خاصةً عندما يتعلّق الأمر بالتفاعلات.
تحسين متغيّرات التصميم التراكمية
متغيّرات التصميم التراكمية (CLS) هي مقياس يحدّد عدد المرّات التي يواجه فيها المستخدمون تغيّرات مفاجئة في محتوى الصفحة. سنتناول في هذا الدليل تحسين الأسباب الشائعة لمتغيّرات التصميم التراكمية (CLS)، مثل الصور وإطارات iframe بدون سمات أو محتوى ديناميكي.
إنشاء تجارب WordPress داخل المتصفح باستخدام WordPress Playground وWebAssembly
إصدار WordPress الكامل المدعوم بـ PHP الذي يتم تشغيله فقط في المتصفح باستخدام WebAssembly
Cumulative Layout Shift (CLS)
تقدّم هذه المشاركة مقياس "متغيّرات التصميم التراكمية" (CLS) وتشرح كيفية قياسه.
وظيفة جديدة للمطوّرين تقدّمها لك WebAssembly
عرض للأدوات المتاحة الآن على الويب بفضل WebAssembly.
تطبيقات الويب التقدّمية (PWA) في متاجر التطبيقات
يمكن إرسال تطبيقات الويب التقدّمية إلى متاجر التطبيقات، مثل "متجر Play" على أجهزة Android أو متجر Microsoft وغير ذلك.
ما هي خرائط المصدر؟
يمكنك تحسين تجربة تصحيح أخطاء الويب باستخدام خرائط المصدر.
6 مقتطفات CSS يجب أن يعرفها كل مطور واجهة أمامية في عام 2023
CSS متميّزة وفعّالة وثابتة يمكنك استخدامها اليوم.
الدوال المثلثية في CSS
احسب جيب الزاوية وجيب التمام وظل الزاوية والمزيد في CSS.
تنفيذ عمليات فعالة لكل إطار فيديو في الفيديو باستخدام الدالة requestVideoFrameCallback()
تتيح طريقة requestVideoFrameCallback() لمؤلفي الويب تسجيل استدعاء يتم تشغيله في خطوات العرض عند إرسال إطار فيديو جديد إلى المؤلف.
أبرز مشاركات منتدى GDE: لارس كنودسن
واحدة من سلسلة من المقابلات مع أعضاء برنامج خبراء Google Developers (GDE).
نصيحة سريعة بشأن خدمة مقارنة الأسعار (CSS) نص متدرج متحرك
لننشئ تأثير النص المتدرّج المتحرّك باستخدام السمات المخصّصة على مستوى النطاق وbackground-clip. انتقِل إلى CodePen وأنشئ قلمًا جديدًا. أنشئ ترميزًا للنص. لنستخدم عنوانًا يتضمّن كلمة "سريع": بعد ذلك، لنمنح body background-color أغمق: نريد زيادة
أنماط جديدة لتطبيقات الوسائط
تعلن مشاركة المدونة هذه عن مجموعة جديدة من الأنماط لتطبيقات الوسائط.
جارٍ إنشاء Chrometober.
تعرَّف على طريقة ابتكار الكتب التي يتم التنقّل من خلالها وإتاحة مشاركة نصائح حياتية مرحة ومخيفة في هذا الإصدار من Chrometober.
إنشاء مكوِّن تلميح
نظرة عامة أساسية حول كيفية إنشاء عنصر تلميح مخصّص تتكيّفي للألوان ويمكن الوصول إليه.
إنشاء مفتاح مرور لتسجيل الدخول بدون كلمة مرور
تجعل مفاتيح المرور حسابات المستخدمين على المواقع الإلكترونية أكثر أمانًا وأبسط وأسهل في الاستخدام وبدون كلمة مرور. تتناول هذه المقالة كيفية السماح للمستخدمين بإنشاء مفاتيح مرور لموقعك الإلكتروني.
تسجيل الدخول باستخدام مفتاح مرور من خلال الملء التلقائي للنموذج
تجعل مفاتيح المرور حسابات المستخدمين على المواقع الإلكترونية أكثر أمانًا وأبسط وأسهل في الاستخدام وبدون كلمة مرور. تناقش هذه المقالة كيف يجب تصميم تسجيل الدخول بدون كلمة مرور باستخدام مفاتيح المرور أثناء تلبية احتياجات المستخدمين الحاليين لكلمات المرور.
إنشاء مكون زر الإجراء العائم (FAB)
نظرة عامة أساسية حول كيفية بناء مكونات FAB قابلة للتكيف مع الألوان وسريعة الاستجابة ويمكن الوصول إليها.
أفضل الممارسات للخطوط
اطّلِع على كيفية تحسين خطوط الويب بما يتوافق مع "مؤشرات أداء الويب الأساسية".
اختبار تباين ألوان تصميم الويب
نظرة عامة على ثلاث أدوات وأساليب لاختبار التباين بين الألوان في تصميمك والتأكّد من أنّه سهل الاستخدام
أبرز مشاركات منتدى GDE: ألبا سيلفنتي فوينتيس
واحدة من سلسلة من المقابلات مع أعضاء برنامج خبراء Google Developers (GDE).
نصيحة سريعة بشأن خدمة مقارنة الأسعار (CSS) أداة تحميل الصور المتحركة
لننشئ أداة تحميل مزوّدة بصور متحركة باستخدام CSS مع خصائص مخصّصة على مستوى النطاق وanimation-timing-function. انتقِل إلى CodePen وأنشئ قلمًا جديدًا. أنشئ علامات لملفّ تحميل البيانات. يُرجى ملاحظة استخدام السمات المخصّصة المضمّنة: يمكنك أيضًا استخدام
إنشاء شريط التنقل الرئيسي لموقع ويب
توضح هذه الدورة التعليمية كيفية إنشاء تنقل رئيسي يمكن الوصول إليه في موقع ويب. ستتعرَّف على لغة HTML الدلالية وإمكانية الوصول، وكيف يمكن أن يؤدي استخدام سمات ARIA إلى ضرر أكثر من نفعه.
هل هو :مشروط؟
يتيح لك محدِّد CSS الزائف المفيد هذا طريقة لاختيار العناصر المشروطة.
نمط قائمة تصميمات الإعلانات
نظرة على بعض الطرق المفيدة والمبتكرة لتصميم قائمة.
بناء وهم شبكة متعرجة
تعرَّف على طرق لإعادة ابتكار الخداع البصري باستخدام CSS.
أفضل الممارسات المتعلّقة بالعلامات ومدراء العلامات
يمكنك تحسين العلامات وإدارة العلامات في "مؤشرات أداء الويب الأساسية".
كيفية استخدام تطبيق Nordhealth للخصائص المخصّصة في مكونات الويب
مزايا استخدام الخصائص المخصصة في أنظمة التصميم ومكتبات المكونات.
تحكم أكثر دقة في عمليات تحويل CSS مع خصائص التحويل الفردية
تعرّف على كيفية استخدام خصائص CSS الفردية للترجمة والتدوير وتغيير الحجم للتعامل مع عمليات التحويل بطريقة سلسة.
الصور المتحركة لحدود CSS
الاطلاع على عدة طرق لتحريك حدود في CSS
الآلية التي تتّبعها بي بي سي لطرح آلية HSTS لتحسين مستوى الأمان والأداء
تطرح هيئة الإذاعة البريطانية (BBC) آلية HSTS على موقعها الإلكتروني لتحسين مستوى الأمان والأداء. يمكنك الاطّلاع على معنى ذلك وكيف يمكن لآلية HSTS مساعدتك.
لماذا يمكن أن تختلف بيانات المختبر عن البيانات الميدانية (وماذا تفعل حيال ذلك)
اطّلِع على الأسباب التي تجعل الأدوات التي تراقب مقاييس "مؤشرات أداء الويب الأساسية" تُبلغ عن أرقام مختلفة، وكيفية تفسير هذه الاختلافات.
وضع مربح للجانبين
يقدّم GDE إنريك فيرنانديز غيرا شرحًا حول المصدر المفتوح لمؤسسته غير الحكومية HelpDev.
نهاية Internet Explorer
ما أهمية الدعم النهائي لبرنامج Internet Explorer للعملاء والمطوّرين في Maersk.com.
وداعًا لـ HTML5Rocks
منذ وقت طويل جدًا HTML5Rocks، كان من دواعي سروري التعرف عليك.
وصفات تحضير الكعك للطرف الأول
تعرَّف على كيفية ضبط ملفات تعريف الارتباط للطرف الأول من أجل ضمان الأمان والتوافق مع جميع المتصفِّحات وتقليل فرص تعطُّل ملفات تعريف الارتباط بعد إيقاف ملفات تعريف الارتباط التابعة لجهات خارجية.
مزامنة تشغيل الصوت والفيديو على الويب
تتيح واجهة برمجة التطبيقات Web Audio API تنفيذ مزامنة الصوت والفيديو بشكل صحيح.
استخدام التدرجات المخروطية لإنشاء حدود رائعة
يمكن استخدام التدرجات المخروطية لإنشاء بعض التأثيرات المثيرة للاهتمام، مثل مثال الحدود الجميل هذا. يعرض CodePen الذي أنشأه آدم أرجايل ، والذي تمت مشاركته في الأصل من خلال هذا التغريدة على Twitter، كيفية استخدام تدرّج conic ل إنشاء حدود. استخدم تيري
اختيار مكتبة JavaScript أو إطار عمل
فهم القرارات المتعلقة باستخدام مكتبة JavaScript أو إطار عمل JavaScript
تنفيذ معالجة الأخطاء عند استخدام واجهة برمجة تطبيقات الجلب
رصد الأخطاء عند العمل باستخدام Fetch API
الفرق بين مكتبات JavaScript وأطرها
فهم الاختلافات بين أُطر العمل والمكتبات في سياق بيئة JavaScript من جهة العميل
دليل مطور الواجهة الأمامية للمحطة
يمكن لهذا المورد مساعدتك في العثور على طريقك سريعًا حول المحطة.
واجهة برمجة تطبيقات لخطوط الويب السريعة والرائعة
تعديل بشأن واجهة برمجة التطبيقات Google Fonts CSS API—طريقة عملها وكيفية استخدامها وكيفية تقديم خطوط الويب الخاصة بك بكفاءة.
GOV.UK تسقط jQuery من الواجهة الأمامية.
أسقطت GOV.UK تبعية jQuery من الواجهة الأمامية. ولن تخمّن ما حدث أبدًا. (نعم يمكنك ذلك).
بناء مكون زر
نظرة عامة أساسية حول كيفية بناء مكونات متكيفة للألوان وسريعة الاستجابة ويمكن الوصول إليها.
لا تكافح ماسح فحص التحميل المسبق في المتصفّح.
تعرَّف على برنامج فحص التحميل المُسبق في المتصفّح، وكيفية مساعدته في تحسين أدائه، وكيفية تجنُّب ذلك.
سد الفجوة
تسهيل عملية الإنشاء للإنترنت
أفضل الممارسات لقياس "مؤشرات أداء الويب" في هذا الحقل
كيفية قياس "مؤشرات أداء الويب" باستخدام أداة الإحصاءات الحالية
العثور على الشجاعة والإلهام في منتدى المطوّرين
يوضح خبراء Google Developers على الإنترنت كيفية استفادةهم من برامج إرشادية من أجل أن يصبحوا قادة.
الخطوط المتغيرة في الحياة الواقعية
مشاركة دليل عملي للخطوط المتغيرة، مع الكثير من الأمثلة.
إنشاء تدرجات رائعة في CSS بسرعة باستخدام أداة إنشاء التدرجات في CSS
هذه الأداة من تصميم جوش وكومو تجعل من السهل للغاية إنشاء تدرّجات ذات مظهر جميل.
مناقشة تفصيلية عن أهم المشاكل التي يواجهها مطوِّرو البرامج على الويب
مجموعة من الرؤى حول أهم الشكاوى، تم جمعها من عدة محادثات مع مطوّري برامج الويب.
إضفاء صورة مثالية على موقعك الإلكتروني باستخدام image.tooling.report
تحقق من حالة أدوات الصور.
نطاق المتغيّر العام والمحلي
تعرف على النطاق وكيف يعمل في JavaScript.
إنشاء مكون مربع حوار
نظرة عامة أساسية حول كيفية تصميم عناصر مصغّرة وضخمة تتكيّف مع الألوان وتتّسم بالاستجابة ويمكن الوصول إليها باستخدام العنصر ``.
تصحيح أخطاء تشغيل الوسائط على الويب
تعرَّف على كيفية تصحيح أخطاء تشغيل الوسائط على الويب.
تسليط الضوء على منتدى GDE: نيشو جويل
واحدة من سلسلة من المقابلات مع أعضاء برنامج خبراء Google Developers (GDE).
تأثيرات الأداء الناتجة عن استخدام طريقة "التحميل الكسول" أكثر من اللازم
ويمكن تحسين "مؤشرات أداء الويب" مع تحميل وحدات بايت أقل عند تحميل الصور بسرعة في إطار العرض الأولي، مع السماح بالتحميل الكسول لبقية الصور.
إنشاء مكوِّن شريط التحميل
نظرة عامة أساسية حول كيفية بناء شريط تحميل متكيف مع الألوان يمكن الوصول إليه باستخدام العنصر ``.
حفظ بيانات الاعتماد من "نماذج Google"
اجعل نماذج التسجيل وتسجيل الدخول بسيطة قدر الإمكان. حفظ بيانات الاعتماد من نماذج تسجيل الدخول لكي لا يضطر المستخدمون إلى تسجيل الدخول مرة أخرى عند العودة لتخزين بيانات اعتماد المستخدمين من النماذج: قبل المتابعة، تحقَّق مما إذا كان النموذج يتضمّن سمات
الوصول إلى الإصدار الرئيسي 100 من متصفِّح Chrome وFirefox قريبًا
التغييرات التي تطرأ على سلسلة وكيل المستخدم، والاستراتيجيات التي يتّبعها كلّ من Chrome وFirefox للحدّ من تأثيرها، والطُرق التي يمكنك من خلالها تقديم المساعدة
إنشاء رمز مفضّل تكيُّفي
نظرة عامة أساسية حول كيفية إنشاء رمز مفضّل تكيُّفي
الرسم على اللوحة في Emscripten
تعرّف على كيفية عرض رسومات ثنائية الأبعاد إلى لوحة على الويب من WebAssembly باستخدام Emscripten.
تحسين الأمان والخصوصية من خلال تحديث ذاكرة التخزين المؤقت عبر HTTP
قد يؤثر حذف عنوان cache-Control أو إساءة استخدامه في أمان موقعك الإلكتروني وخصوصية المستخدمين. الحصول على اقتراحات للمواقع الإلكترونية العالية القيمة
عناصر HTML إضافية
مقاييس أساسية لإنشاء موقع إلكتروني سليم
جارٍ نقل تطبيقات USB إلى الويب. الجزء الثاني: gPhoto2
تعرَّف على كيفية نقل gPhoto2 إلى WebAssembly للتحكم في الكاميرات الخارجية عبر USB من تطبيق ويب.
تسجيل خطأ في الشبكة (NEL)
يمكنك استخدام تسجيل أخطاء الشبكة (NEL) لجمع أخطاء الشبكة من جهة العميل.
اكتشاف ميزة WebAssembly
تعرّف على كيفية استخدام أحدث ميزات WebAssembly مع دعم المستخدمين في جميع المتصفحات.
جارٍ نقل تطبيقات USB إلى الويب. الجزء 1: libusb
تعرَّف على كيفية نقل الرمز الذي يتفاعل مع الأجهزة الخارجية إلى الويب باستخدام WebAssembly وFugu API.
إنشاء مكوِّن تبديل المظهر
نظرة عامة أساسية حول طريقة إنشاء مكوِّن لتبديل المظاهر تكيّفي ويسهل الوصول إليه
تضمين مقتطفات JavaScript بلغة C++ باستخدام Emscripten
تعرف على كيفية تضمين رمز JavaScript في مكتبة WebAssembly للاتصال بالعالم الخارجي.
تطبيقات الويب التقدّمية (PWA) على Oculus Quest 2
Oculus Quest 2 هي سماعة رأس مزوّدة بتقنية الواقع الافتراضي (VR) تم إنشاؤها من قِبل Oculus، وهو أحد أقسام شركة Meta. يمكن للمطوّرين الآن إنشاء تطبيقات ويب تقدّمية ثنائية وثلاثية الأبعاد (PWA) وتوزيعها للاستفادة من ميزة تعدد المهام في Oculus Quest 2's. توضّح هذه المقالة تجربة الاستخدام وكيفية إنشاء تطبيق الويب التقدّمي (PWA) وتحميله من مصدر غير معروف على Oculus Quest 2.
خبير تصميم المباني
يمكنك إلقاء نظرة خاطفة على العملية والأدوات المستخدمة لبناء تجربة على نمط تقويم العطلات في Designcember.
حاسبة التصميم
محاولة غير الشكلية لإعادة إنشاء آلة حاسبة شمسية على الويب، حيث تستخدم أداة استشعار الضوء المحيط وميزة تراكب النوافذ التي تتحكم في النوافذ.
النسخ العميق في JavaScript باستخدام OrganizationClone
اضطررت إلى استخدام حلول بديلة ومكتبات لإنشاء نسخة كبيرة من قيمة JavaScript، وذلك لأطول فترة ممكنة. تم تزويد النظام الأساسي الآن بـ `constructClone()`، وهي دالة مدمَجة للنسخ العميق.
بناء مكون نخب
نظرة عامة أساسية حول كيفية بناء مكوِّن نخب متكيف يمكن الوصول إليه.
صندوق واجهة المستخدم
الإعلان عن صندوق واجهة المستخدم من Chrome، والذي تم تصميمه لتقديم مِنح للأشخاص الذين يعملون على أدوات التصميم وCSS وHTML.
إنشاء مكوِّن قائمة للعبة ثلاثية الأبعاد
نظرة عامة أساسية حول كيفية إنشاء قائمة ألعاب ثلاثية الأبعاد سريعة الاستجابة وتكيّفية ويمكن الوصول إليها
نحو مقياس سلاسة الرسوم المتحركة
تعرّف على كيفية قياس الرسوم المتحركة وكيفية التفكير في إطارات الصور المتحركة وسلاسة الصفحة بشكل عام.
الميزات الجديدة في إحصاءات PageSpeed
تعرَّف على آخر الأخبار في "إحصاءات PageSpeed" لمساعدتك في قياس وتحسين جودة صفحتك والموقع الإلكتروني بشكل أفضل.
الإعلان عن كل شيء في مؤتمر Chrome Dev Summit لعام 2021
ملخّص لأهم الإشعارات من مؤتمر Chrome Dev Summit لعام 2021، بالإضافة إلى الروابط التي تلزمك للاطّلاع على مزيد من المعلومات.
تدفقات مستخدم أداة Lighthouse
جرِّب واجهة برمجة تطبيقات Lighthouse الجديدة لقياس الأداء وأفضل الممارسات في مسار المستخدِم.
رحلة استخدام برنامج Photoshop إلى الويب
على مدار السنوات الثلاث الماضية، كان Chrome يعمل على تمكين تطبيقات الويب التي تريد تجاوز حدود ما يمكن فعله في المتصفح. ومن بين هذه التطبيقات تطبيق Photoshop. كان من الصعب تخيل فكرة تشغيل برامج معقّدة مثل Photoshop مباشرةً في المتصفح قبل بضع سنوات فقط. ومع ذلك، باستخدام العديد من تقنيات الويب الجديدة، طرحت Adobe الآن إصدارًا تجريبيًا عامًا من Photoshop على الويب.
إنشاء مكوِّن متعدد الاختيارات
نظرة عامة أساسية حول كيفية إنشاء مكوِّن متعدد الاختيارات سريع الاستجابة وتكيّفي ويمكن الوصول إليه من أجل ترتيب تجارب المستخدم وفلترتها.
كيفية تقييم أداء التحميل في الميدان باستخدام توقيت التنقّل وتوقيت الموارد
تعرف على أساسيات استخدام واجهات برمجة التطبيقات للتنقل وتوقيت الموارد لتقييم أداء التحميل في الحقل.
معالجة DOM الآمن باستخدام واجهة برمجة تطبيقات Sanitizer
تهدف واجهة برمجة التطبيقات Sanitizer API الجديدة إلى إنشاء معالِج قوي يتيح إمكانية إدخال السلاسل العشوائية بأمان في الصفحة. تقدّم هذه المقالة واجهة برمجة التطبيقات وتشرح كيفية استخدامها.
أفضل الممارسات لاستخدام التضمينات التابعة لجهات خارجية
يناقش هذا المستند أفضل ممارسات الأداء التي يمكنك استخدامها عند تحميل تنسيقات مضمّنة تابعة لجهات خارجية، وتقنيات التحميل الفعّالة، وأداة "أداة إنهاء متغيّرات التصميم" التي تساعد في تقليل متغيّرات التصميم للتضمينات الشائعة.
كيفية تأثير بنية SPA في "مؤشرات أداء الويب الأساسية"
الحصول على إجابات عن الأسئلة الشائعة حول مراكز الخدمة العامة و"مؤشرات أداء الويب الأساسية" وخطة Google لمعالجة القيود الحالية على عمليات القياس
نظرة معمّقة على أحداث JavaScript
preventDefault و stopPropagation: حالات استخدام كل طريقة ووظيفتها بالضبط غالبًا ما تكون معالجة أحداث JavaScript مباشرةً. وينطبق ذلك بشكل خاص عند التعامل مع بنية HTML بسيطة (مسطّحة نسبيًا). تصبح الأمور أكثر تعقيدًا عندما يتم نقل الأحداث (أو نشرها) من
تجميع موارد لا تعتمد على JavaScript
تعرَّف على كيفية استيراد أنواع مختلفة من مواد العرض وتجميعها من JavaScript بطريقة تعمل في كل من المتصفّحات وبرامج الحِزم.
بناء مكون انقسام الزر
نظرة عامة أساسية حول كيفية بناء مكوِّن مقسمة يمكن الوصول إليه.
استخدام النصوص البرمجية لوحدة CSS لاستيراد أوراق الأنماط
تعرّف على كيفية استخدام النصوص البرمجية لوحدة CSS لاستيراد أوراق أنماط CSS باستخدام بنية وحدات JavaScript نفسها.
إنشاء أحد مكونات المبدل
نظرة عامة أساسية حول كيفية إنشاء مكوِّن مفاتيح تحكّم سريع الاستجابة ويسهل الوصول إليه.
لون تمييز CSS
يمكنك إضافة لون علامتك التجارية إلى إدخالات نموذج HTML المضمّنة باستخدام سطر واحد من الرمز.
عناوين تعديلات العميل لميزات الوسائط المفضّلة للمستخدم
تسمح مجموعة من رؤوس تلميحات العميل للمواقع الإلكترونية بالحصول على الإعدادات المفضّلة للوسائط للمستخدم اختياريًا في وقت الطلب، ما يسمح للخوادم بتضمين ملف CSS المناسب لأسباب تتعلّق بالأداء. إنّ طلبات الاستعلام عن الوسائط في CSS، وعلى وجه التحديد ميزات
إنشاء مكوِّن أشرطة التنقّل
نظرة عامة أساسية حول كيفية إنشاء مكوِّن أشرطة تنقُّل سريعة الاستجابة ويسهل الوصول إليها للمستخدمين للتنقل في موقعك الإلكتروني.
استخدام سلاسل WebAssembly من C وC++ وRust
تعرف على كيفية إضافة التطبيقات المتعددة السلاسل المكتوبة بلغات أخرى إلى WebAssembly.
تطبيق ويب تقدّمي (PWA) مع البث بلا إنترنت
تواجه عملية إنشاء تطبيق ويب تقدّمي (PWA) باستخدام البث بلا إنترنت بعض التحديات. وستتعرّف في هذه المقالة على واجهات برمجة التطبيقات والتقنيات التي تزوّد المستخدمين بتجربة وسائط عالية الجودة بلا اتصال بالإنترنت.
أُطر عمل الوسائط
تأتي أطر عمل الوسائط في صورة مملوكة ومفتوحة المصدر، وتتكوّن في الأساس من مجموعة من واجهات برمجة التطبيقات التي تتيح تشغيل الصوت و/أو الفيديو لمختلف تنسيقات الحاويات وبروتوكولات الإرسال.
تشفير الوسائط
ستتعلّم مفاهيم إدارة الحقوق الرقمية والأوامر اللازمة للانتقال من ملف mov الأولي إلى الوسائط المشفرة التي تم حزمها لـ MPEG-DASH أو HLS باستخدام كل من تشفير القائمة الواضحة وتقنية التشفير ويندفين.
أساسيات بث الوسائط
بث الوسائط هو طريقة لتسليم محتوى الوسائط المتعددة باستمرار من خادم يتم فيه تقسيم المحتوى إلى أجزاء فردية من البيانات يمكن ضمها معًا أثناء التشغيل بترتيب معين من خلال طلب نطاق باستخدام بروتوكولات مثل DASH وHLS.
اكتشاف طريقك من خلال البيانات الفعلية في تحديث إضافة "مؤشرات أداء الويب"
تعرض لك إضافة "مؤشرات أداء الويب" الآن تجاربك المحلية مقارنةً بتجارب المستخدمين الحقيقية في هذا المجال.
ضبط حجم CSS لـ @font-face
أثناء تحميل خط على الويب، يمكنك الآن ضبط مقياسه لتسوية أحجام خطوط المستند ومنع متغيّرات التصميم عند التبديل بين الخطوط
بناء نظام ألوان
نظرة عامة أساسية حول كيفية إنشاء نظام ألوان ديناميكي وقابل للضبط
استخدام AVIF لضغط الصور على موقعك
ويمكن أن يؤدي عرض صور بحجم سطح المكتب على الأجهزة الجوّالة إلى استخدام بيانات أكثر من المطلوب بمقدار مرّتين إلى 4 أضعاف. فبدلاً من استخدام أسلوب "واحد يناسب الجميع" للصور، يمكنك عرض أحجام صور مختلفة للأجهزة المختلفة.
لغة CSS في "مؤشرات أداء الويب"
تتناول هذه المقالة الأساليب المتعلّقة بلغة CSS لتحسين "مؤشرات أداء الويب".
تطوّر متغيّرات التصميم التراكمية في أدوات الويب
بدءًا من اليوم، تم طرح تغيير على متغيّرات التصميم التراكمية (CLS) على عدد من مساحات عرض أدوات الويب في Chrome، بما في ذلك Lighthouse و"إحصاءات PageSpeed" و"تقرير تجربة المستخدم" في Chrome.
أدوات اختيار الفئة الزائفة وفعالة في CSS جديدة: :is() و:where()
سيكون لهذه الإضافات التي تبدو صغيرة إلى بنية أداة اختيار لغة CSS تأثيرًا كبيرًا.
يتوفّر الآن تدريب جديد على تطبيق الويب التقدّمي
يتوفّر الآن تدريب جديد حول تطبيق الويب التقدّمي مكوّن من ستة أجزاء، بالإضافة إلى سلسلة جديدة من الدروس التطبيقية حول الترميز لتعليمك كيفية إنشاء تطبيقات ويب تقدّمية (PWA) موثوقة وقابلة للتثبيت وفعّالة.
تصميم الويب سريع الاستجابة الجديد في عالم قائم على المكونات
ستتيح لنا ميزات الوسائط المستندة إلى تفضيل المستخدم، واستعلامات الحاوية، والاستعلامات عن الوسائط لأنواع الشاشات الجديدة، مثل الشاشات القابلة للطي، استخدام هذه الميزات في عصر جديد من تصميم الويب سريع الاستجابة.
النقل إلى تلميحات برنامج وكيل المستخدم
استراتيجيات لنقل موقعك من الاعتماد على سلسلة وكيل المستخدم إلى تلميحات برنامج وكيل المستخدم الجديدة.
Excalidraw وFugu: تحسين تجربة المستخدم الأساسية
مقالة عن حديث "توماس شتاينر" في مؤتمر Google I/O لعام 2021 بعنوان Excalidraw وFugu: تحسين تجارب المستخدمين الأساسية
المرجع السريع لعناوين الأمان
تسرد هذه المقالة أهم رؤوس الأمان التي يمكنك استخدامها لحماية موقعك الإلكتروني. يمكنك استخدامها لفهم ميزات الأمان المستنِدة إلى الويب والتعرّف على كيفية تنفيذها على موقعك الإلكتروني والرجوع إليها عند الحاجة إلى تذكير.
وحدات ES في مشغّلي الخدمات
يمكن لعامل الخدمة استخدام عمليات الاستيراد الثابتة لوحدات ES لإضافة رمز إضافي، كبديل لـImportScripts().
إنشاء مكون تمرير الوسائط
نظرة عامة أساسية حول كيفية إنشاء عرض تمرير أفقي سريع الاستجابة لأجهزة التلفزيون والهواتف وأجهزة الكمبيوتر المكتبي وما إلى ذلك
تحسين "مؤشرات أداء الويب" باستخدام أداة Lighthouse
واليوم، سنتناول ميزات أدوات جديدة في Lighthouse وPageSpeed وDevTools للمساعدة في تحديد كيفية تحسين موقعك الإلكتروني في "مؤشرات أداء الويب".
استخدام واجهات برمجة تطبيقات الويب غير المتزامنة من WebAssembly
تعرَّف على كيفية استدعاء واجهات برمجة تطبيقات الويب غير المتزامنة عند تجميع لغات متزامنة تقليديًا إلى WebAssembly.
يمكنك تخصيص عناصر التحكّم في النوافذ المركّبة في شريط عناوين تطبيق PWA.
باستخدام ميزة "نافذة عناصر التحكّم في النوافذ" التي تظهر في تطبيق الويب، يمكن للمطوّرين تخصيص شريط العناوين لتطبيقات الويب التقدّمية (PWA) المثبّتة كي تبدو تطبيقات الويب التقدّمية (PWA) أشبه بالتطبيقات.
التحكّم في النصوص البرمجية التابعة لجهات خارجية
يمكن أن تكون النصوص البرمجية التابعة لجهات خارجية أو "العلامات" مصدرًا لمشاكل الأداء على موقعك الإلكتروني، وبالتالي يمكن أن تكون هدفًا للتحسين. ومع ذلك، قبل البدء في تحسين العلامات التي أضفتها، تأكّد من أنّك لا تُحسِّن العلامات التي لا تحتاج إليها حتى. توضّح لك هذه المقالة كيفية تقييم طلبات العلامات الجديدة، وإدارة العلامات الحالية ومراجعتها.
ملء نماذج OTP ضمن إطارات iframe من مصادر متعددة باستخدام WebOTP API
يمكن لواجهة برمجة تطبيقات WebOTP API الآن تلقّي كلمة مرور لمرة واحدة من داخل إطار iframe.
تجاوز العوائق باستخدام واجهة برمجة التطبيقات DataTransfer API
يحتفظ كائن "DataTransfer" (نقل البيانات) بالبيانات التي يتم سحبها أثناء عملية السحب والإفلات. وقد تحتوي على عنصر بيانات واحد أو أكثر، وكل نوع من نوع واحد أو أكثر من أنواع البيانات. تشرح هذه المقالة كيفية الاستفادة من واجهة برمجة التطبيقات DataTransfer API.
إنشاء صور متحركة مقسّمة باستخدام نص
نظرة عامة أساسية حول كيفية إنشاء رسوم متحركة مقسّمة على شكل أحرف وأحرف.
تطوير مقياس CLS
خطط لتحسين مقياس متغيّرات التصميم التراكمية (CLS) ليصبح أكثر إنصافًا بالنسبة إلى الصفحات طويلة الأجل.
رضا المطوّرين على الويب
إنّ "رضا المطوّرين" على الويب هو أحد مشروعات Google لجمع معلومات عن احتياجات المطوّرين على الويب. والهدف من ذلك هو توفير منصة ويب أكثر موثوقية وقابلية للتنبؤ وقابلية للتشغيل، ما يتيح للمطوّرين الاستفادة منها والوثوق بها، واستخدام ميزات جديدة، واستخدامها لتطوير المنصة وأنشطتهم التجارية.
إنشاء أحد مكونات الإعدادات
نظرة عامة أساسية حول كيفية إنشاء مكوِّن إعدادات من أشرطة التمرير ومربعات الاختيار.
تصحيح الأخطاء في متغيّرات التصميم
تعرَّف على طريقة تحديد متغيّرات التصميم وإصلاحها.
JavaScript: ما معنى ذلك؟
إنّ معرفة قيمة "هذا" قد يكون أمرًا صعبًا في JavaScript، وإليك كيفية إجراء ذلك...
استنتاج أفكار من مطوّر تطبيقات على الويب حول التطبيقات المصغَّرة
يختتم هذا الفصل مجموعة التطبيقات الصغيرة بالملاحظة التي تفيد بأن التفكير خارج الصندوق والاستعانة بالمدخلات والإلهام من خارج فقاعة واحدة يمكن أن يساعد بالتأكيد عند بناء مستقبل أفضل على الويب..
مشاريع مفتوحة المصدر للتطبيقات الصغيرة
يقدم هذا الفصل مجموعة مختارة من مشروعات التطبيقات الصغيرة المفتوحة المصدر الشيقة.
هيكل المشروع ودورة الحياة والتجميع
يتناول هذا الفصل هيكل المشروع ودورة الحياة وحزمة التطبيقات الصغيرة.
تطبيق مبادئ برمجة التطبيقات الصغيرة على نموذج مشروع
يعرض هذا الفصل مثالاً على مشروع يتبع نهج "برمجة طريقة التطبيق المصغَّر"".
برمجة طريقة التطبيق المصغّر
يقدم هذا الفصل طريقة برمجة طريقة التطبيق المصغَّر.
ما هما H5 وQuickApp؟
يقدّم هذا الفصل معلومات أساسية عن تطبيقات H5 وQuickApp، وكلاهما يختلف عن التطبيقات الصغيرة.
ترميز التطبيقات المصغّرة وتصميمها وبرمجتها وتحديثها
يتناول هذا الفصل خيارات الترميز والنمط والبرمجة النصية والتحديث للعديد من الأنظمة الأساسية للتطبيقات الصغيرة.
مكونات التطبيق المصغّر
يقدم هذا الفصل تفاصيل حول المكونات التي توفرها جميع منصات التطبيقات الصغيرة.
أحداث البث: الدليل النهائي
تتيح Streams API لJavaScript الوصول آليًا إلى مصادر البيانات التي يتمّ تلقّيها على الشبكة ومعالجتها على النحو المطلوب.
إنشاء مكوّن علامات التبويب
نظرة عامة أساسية حول كيفية إنشاء مكوّنات علامات تبويب مشابهة لتلك المتوفّرة في تطبيقات iOS وAndroid
دليل لتفعيل ميزة حظر الوصول من نطاقات أخرى
من خلال ميزة "عزل المصادر المشتركة"، تستطيع صفحة الويب استخدام ميزات فعّالة، مثل SharedArrayBuffer. توضّح هذه المقالة كيفية تفعيل ميزة حظر الوصول من نطاقات أخرى على موقعك الإلكتروني.
طلب عزل الأداء باستخدام عنوان Origin-Agent-Cluster
يقطع عنوان Origin-Agent-Cluster إمكانية الوصول المتزامن إلى المصادر الأخرى في النطاق نفسه، ويتم إدخال تعديلات إلى المتصفِّح لمنح الموارد المخصّصة للمصدر.
خاصية نسبة العرض إلى الارتفاع في CSS
أصبح من السهل الآن الحفاظ على نسبة العرض إلى الارتفاع داخل الصور والعناصر باستخدام خاصية CSS الجديدة بنسبة عرض إلى ارتفاع.
أصبح WebRTC معيار W3C ومجموعة مهندسي شبكة الإنترنت (IETF)
نظرة عامة مختصرة على السجلّ والبنية وحالات الاستخدام ومستقبل WebRTC.
أفضل ممارسات لوحات العرض الدوّارة
تعرَّف على كيفية تحسين لوحات العرض الدوّارة من أجل تحقيق الأداء وسهولة الاستخدام.
حالات استخدام HTTPS في التطوير المحلي
لا بأس باستخدام http://localhost لتطوير التطبيقات على الجهاز في معظم الأحيان، باستثناء بعض الحالات الخاصة. توضّح هذه المشاركة الحالات التي تحتاج فيها إلى تشغيل موقع التطوير المحلي باستخدام بروتوكول HTTPS. اطّلِع أيضًا على المقالة كيفية استخدام HTTPS
استخدام HTTPS في التطوير المحلي
في معظم الأحيان، يتصرّف http://localhost مثل HTTPS لأغراض التطوير. ومع ذلك، هناك بعض الحالات الخاصة ، مثل أسماء المضيفين المخصّصة أو استخدام ملفات تعريف الارتباط الآمنة في جميع المتصفّحات، حيث تحتاج إلى إعداد موقعك الإلكتروني المخصّص للمطوّرين صراحةً
الملاحظات المطلوبة: التوصل إلى مقياس أفضل لمتغيّرات التصميم للصفحات طويلة العمر
تعرَّف على خططنا لتحسين مقياس "متغيّرات التصميم التراكمية" وأرسِل إلينا ملاحظاتك.
بناء مكون التنقل الجانبي
نظرة عامة أساسية حول كيفية إنشاء شريط تنقل جانبي سريع الاستجابة
درس تطبيقي حول الترميز: إنشاء مكوِّن Sidenav
تعرف على كيفية إنشاء مكون تخطيط تنقل جانبي سريع الاستجابة.
التوسيط في CSS
اتبع 5 تقنيات توسيط أثناء إجراء سلسلة من الاختبارات لمعرفة أيها أكثر مرونة للتغيير.
درس تطبيقي حول الترميز: التوسيط في CSS
تعرَّف على 5 أساليب مختلفة للتوسيط مع CSS.
أحب ذاكرة التخزين المؤقت ❤️
ولا شك أن أداء التحميل لأول مرة مهم للغاية، ولكنه ليس كل شيء. سيستخدم المستخدمون الذين يحمِّلون موقعك الإلكتروني مرة أخرى ذاكرة التخزين المؤقت الخاصة بهم للوصول إلى المحتوى، لذلك من الضروري التأكّد من أنّه يعمل بشكل جيد أيضًا من حيث السرعة والدقة.
وظائف عرض محتوى عبر المتصفحات وHoudini.how
تعرف على كيفية تنفيذ واجهة برمجة تطبيقات Houdini Paint API عبر المتصفحات واستكشاف عالم من وظائف Houdini باستخدام Houdini.how.
إتاحة عمليات التدقيق الآلي باستخدام AutoWebPerf
أداة جديدة وحدات تتيح جمع بيانات الأداء تلقائيًا من مصادر متعددة
أفضل الممارسات المتعلّقة بنموذج الدفع والعنوان
يمكنك زيادة الإحالات الناجحة إلى أقصى حدّ من خلال مساعدة المستخدمين على إكمال نماذج العنوان والدفع بأسرع وقت ممكن وبأسهل طريقة ممكنة.
أفضل الممارسات لنموذج كلمة المرور لمرة واحدة عبر الرسائل القصيرة SMS
إن مطالبة المستخدم بتقديم كلمة مرور لمرة واحدة (OTP) يتم تسليمها عبر الرسائل القصيرة SMS هي طريقة شائعة لتأكيد رقم هاتف المستخدم. تزودك هذه المشاركة بأفضل الممارسات لإنشاء نموذج كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS مع تقديم تجربة مستخدم رائعة.
الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات في نموذج الاشتراك
يمكنك استخدام ميزات المتصفّح التي تعمل على عدّة أنظمة أساسية لإنشاء نموذج اشتراك بسيط آمن وسهل الاستخدام ويمكن الوصول إليه.
الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات المتعلّقة بنموذج العناوين
اطّلِع على أفضل الممارسات المتعلّقة بنماذج العناوين.
الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات لنموذج الدفع
التعرّف على أفضل الممارسات المتعلّقة بنماذج الدفع
أفضل الممارسات لنموذج الاشتراك
ساعد المستخدمين في الاشتراك، وتسجيل الدخول، وإدارة تفاصيل حساباتهم بأقل مجهود.
بث التحديثات على الصفحات التي تتضمن مشغّلي الخدمات
كيف يمكن للعاملين في الخدمة التواصل بشكل استباقي مع الصفحة لإبلاغهم بفعاليات معيّنة.
نظرة عامة على العاملين
كيف يمكن للعاملين على الويب ومشغّلي الخدمات تحسين أداء موقعك الإلكتروني، والحالات التي يجب فيها استخدام عامل ويب مقابل عامل تقديم الخدمات.
التواصل الثنائي مع عاملي الخدمة
كيفية إنشاء قناة اتصال ثنائية الاتجاه بين الصفحة ومشغّل الخدمات.
دليل التخزين المؤقت الأمري
طريقة توصيل النوافذ ومشغّل الخدمات لتنفيذ المهام المتعلقة بالأداء والتخزين المؤقت ووضع عدم الاتصال بالإنترنت.
إيقاف ميزة تسريع الماوس لتوفير تجربة أفضل لعدد اللقطات في الثانية
يمكن لتطبيقات الويب الآن إيقاف تسريع الماوس عند تسجيل أحداث المؤشر.
إنشاء مكوِّن القصص
نظرة عامة أساسية حول طريقة إنشاء تجربة مشابهة لـ "قصص Instagram" على الويب
درس تطبيقي حول الترميز: إنشاء مكوِّن للقصص
تعرَّف على طريقة إنشاء تجربة تشبه "قصص Instagram" على الويب.
الموقع الإلكتروني نفسه المخطط
يتم تطوير تعريف "الموقع الإلكتروني نفسه" ليتضمن مخطّط عنوان URL، وبالتالي يتم الآن احتساب الروابط بين إصدارَي HTTP وHTTPS من أي موقع إلكتروني كطلبات من مواقع إلكترونية متعددة. ننصحك بالترقية إلى بروتوكول HTTPS تلقائيًا لتجنُّب حدوث مشاكل متى أمكن، أو مواصلة القراءة للحصول على تفاصيل حول قيم سمات SameSite المطلوبة.
التحميل الكسول على مستوى المتصفّح لأنظمة إدارة المحتوى (CMS)
تقدّم هذه المشاركة إرشادات حول كيفية استخدام سمة التحميل في أنظمة إدارة المحتوى.
درس تطبيقي حول الترميز: إنشاء خادم إشعارات فورية
برنامج تعليمي تفاعلي خطوة بخطوة يوضح لك كيفية إنشاء خادم يدير اشتراكات الإشعارات الفورية ويرسل طلبات بروتوكول الدفع على الويب إلى خدمة إرسال البيانات.
درس تطبيقي حول الترميز: إنشاء عميل للإشعارات الفورية
برنامج تعليمي تفاعلي خطوة بخطوة يوضح لك كيفية إنشاء برنامج يشترك فيه المستخدم في خدمة الإشعارات الفورية ويعرض الرسائل الفورية كإشعارات ويُلغي اشتراك المستخدم من الإشعارات الفورية
نظرة عامة على الإشعارات الفورية
نظرة عامة على الإشعارات الفورية ولماذا قد تستخدمها وآلية عملها
قياس الاستخدام في وضع عدم الاتصال
طريقة تتبُّع استخدام موقعك الإلكتروني بلا اتصال بالإنترنت لمعرفة سبب احتياج موقعك الإلكتروني إلى تجربة أفضل بلا إنترنت.
أمثلة على الصور المتحركة العالية الأداء في CSS
توضيح كيف يمكن لتقنيات الأداء العالية إنشاء صور متحركة معقدة وجميلة.
آلية Signed Exchange (SXG)
آلية SXG هي آلية تسليم تتيح مصادقة مصدر المورد بشكل مستقل عن طريقة تسليمه.
CSS min() وmax() وclamp()
يوفر الحد الأدنى والحد الأقصى والتثبيت إمكانات CSS فعالة تتيح نمطًا أكثر استجابة مع تقليل فترات الرموز. تتناول هذه المشاركة كيفية التحكم في تغيير حجم العناصر والحفاظ على المسافات بشكل مناسب وتنفيذ أسلوب الخط المرن باستخدام هذه الدوال الحسابية لـ CSS المتوافقة بشكل جيد.
تحسينات تصميم منطقية مع اختصارات متعلقة بالتدفق
اختصارات جديدة للخصائص المنطقية وخصائص داخلية جديدة لـ Chromium.
كيفية إنشاء صور متحركة CSS عالية الأداء
لتحسين أداء الصور المتحركة في CSS، استخدم خصائص CSS للتحويل والتعتيم قدر الإمكان، وتجنب أي شيء يؤدي إلى تشغيل التنسيق أو الرسم.
معالجة طلبات النطاق في مشغّل الخدمات
تأكد من أن مشغّل الخدمات يعرف ما يجب فعله عند طلب استجابة جزئية.
ما سبب بطء بعض الصور المتحركة؟
يُعدّ إنشاء تأثيرات حركية جيدة أمرًا أساسيًا للحصول على تجربة رائعة على الويب. توضّح هذه المشاركة سبب أداء بعض أنواع الصور المتحركة بشكل أفضل من غيرها.
التحكّم في تحريك الكاميرا وإمالتها وتكبيرها/تصغيرها
ويمكنك أخيرًا التحكم في ميزات العرض الشامل والإمالة والتكبير/التصغير في الكاميرات على الويب.
ما هي تجارب المصدر التابعة لجهات خارجية؟
تجارب المصدر هي طريقة لاختبار ميزة جديدة أو تجريبية على منصّة الويب. إنّ مرحلة التجربة والتقييم من جهة خارجية تتيح لموفّري المحتوى المضمّن تجربة ميزة جديدة على عدة مواقع إلكترونية. مرحلة التجربة والتقييم هي طريقة لاختبار ميزة جديدة أو تجريبية على
تسرّب ذاكرة النافذة المنفصلة
النوافذ المنفصلة هي نوع شائع من تسرُّب الذاكرة الذي يصعُب العثور عليه وإصلاحه بشكل خاص.
إنشاء صفحة احتياطية بلا اتصال بالإنترنت
تعرَّف على كيفية إنشاء تجربة بسيطة لتطبيقك بلا اتصال بالإنترنت.
إنشاء أشكال صور مثيرة للاهتمام باستخدام خاصية مسار المقطع في CSS's
يمكن أن يساعدنا استخدام الاقتصاص في CSS في الابتعاد عن كل شيء في تصميماتنا يبدو كصندوق. باستخدام الأشكال الأساسية المتنوعة أو SVG، يمكنك إنشاء مسار مقطع. ثم قم بقص أجزاء العنصر التي لا تريد عرضها.
رموز نقطية مخصصة باستخدام CSS ::marker
استخدِم CSS لتخصيص لون الأرقام أو التعداد النقطي أو حجمها أو نوعها في عناصر `` أو ``.
مساعدة المستخدمين على تغيير كلمات المرور بسهولة من خلال إضافة عنوان URL معروف لتغيير كلمات المرور
من خلال إعادة توجيه الطلبات إلى /.well-known/change-password إلى عنوان URL لتغيير كلمة المرور، يمكنك السماح للمستخدمين بتعديل كلمات المرور بشكلٍ أسهل من ذي قبل.
معالجة معلومات الدفع الاختيارية مع مشغّل الخدمات
بعد تسجيل تطبيق الدفع المستنِد إلى الويب، يصبح جاهزًا لقبول طلبات الدفع من التجّار. توضِّح لك هذه المقالة كيفية تنسيق معاملة دفع من عامل خدمات أثناء وقت التشغيل.
إدارة معاملات الدفع مع عامل الخدمات
بعد تسجيل تطبيق الدفع المستنِد إلى الويب، يصبح جاهزًا لقبول طلبات الدفع من التجّار. توضِّح لك هذه المقالة كيفية تنسيق معاملة دفع من عامل خدمات أثناء وقت التشغيل.
ARIA: سم أم علاج؟
كيف يساعد الكذب على برامج قراءة الشاشة في علاج إمكانية الوصول، عندما لا يفرك الملح!
تصحيح أخطاء تسرّبات الذاكرة في WebAssembly باستخدام Emscripten
تعرَّف على كيفية استخدام WebAssembly لعرض المكتبات المكتوبة بلغات أخرى على الويب بطريقة آمنة ومألوفة.
content-visibility: خاصيّة CSS الجديدة التي تحسِّن أداء العرض
تتيح خاصية رؤية المحتوى في CSS إمكانية عرض محتوى الويب مزايا الأداء عن طريق تخطي عرض المحتوى خارج الشاشة. توضّح لك هذه المقالة كيفية استخدام سمة CSS الجديدة هذه للحصول على أوقات تحميل أوّلي أسرع، وذلك باستخدام الكلمة الرئيسية التلقائية. ستتعرف أيضًا على مواصفات احتواء CSS والقيم الأخرى المتعلقة بإمكانية رؤية المحتوى، والتي تمنحك مزيدًا من التحكم في كيفية عرض المحتوى في المتصفح.
جارٍ إزالة حظر الوصول إلى الحافظة
تبسّط واجهة برمجة التطبيقات Async Clipboard API عمليات النسخ واللصق المتوافقة مع الأذونات.
أفضل الممارسات المتعلقة بسياسة المُحيلين والمحيلين
ننصحك بضبط سياسة المُحيل على"strict-origin-when-cross-origin`. فهي تحتفظ بالكثير من فائدة المُحيل، مع الحد من خطر تسرب البيانات من مصادر متعددة.
الويب على أجهزة Android
تعرَّف على طريقة استخدام المكوّنات المختلفة لعرض محتوى الويب داخل تطبيقات Android.
إنشاء تطبيق ويب تقدّمي (PWA) في Google، الجزء 1
ما تعلمه فريق تطبيق "قصص" عن مشغّلي الخدمات أثناء تطوير تطبيق ويب تقدّمي (PWA)
رصد الأداء باستخدام Lighthouse CI
تعرَّف على كيفية إعداد Lighthouse CI ودمجه في مهام سير عمل المطوّرين.
تصميم تجربة المستخدم الخاصة بمفاتيح المرور على حسابات Google
توفير مستوى أمان أفضل وتجربة مستخدم أفضل لحسابات Google
@property: منح قوى خارقة لمتغيرات CSS
تعرَّف على كيفية تنفيذ خصائص CSS المخصّصة باستخدام الكتابة الدلالية وقيمة احتياطية وغير ذلك في ملف CSS مباشرةً.
تقديم معلومات الشحن والاتصال من تطبيق دفع على Android
تعرَّف على كيفية تعديل تطبيق الدفع على Android لتقديم عنوان الشحن الذي اختاره المستخدم بالإضافة إلى معلومات الاتصال عندما يطلبها التاجر عبر واجهة برمجة التطبيقات Payment Request API.
العلاقة بين سرعة الموقع الإلكتروني ومقاييس النشاط التجاري
استفِد من اختبار أ/ب لتقييم تأثير سرعة الموقع الإلكتروني في مقاييس نشاطك التجاري.
تسجيل تطبيق دفع مستند إلى الويب
تعرَّف على كيفية تسجيل تطبيق دفع مستند إلى الويب في أحد متصفحات العملاء. ستتعلم أيضًا كيفية تصحيح أخطائها.
نظرة عامة حول تطبيقات الدفع المستندة إلى الويب
تعرَّف على كيفية تكييف تطبيق الدفع المستند إلى الويب للعمل مع Web Payments وتقديم تجربة مستخدم أفضل للعملاء.
التخزين المؤقت لعامل الخدمات والتخزين المؤقت باستخدام بروتوكول HTTP
الإيجابيات والسلبيات الناتجة عن استخدام منطق متسق أو مختلف لانتهاء الصلاحية في طبقات ذاكرة التخزين المؤقت لمشغِّل الخدمة وذاكرة التخزين المؤقت لـ HTTP.
معالجة طلبات التنقّل
طلبات التنقّل هي طلبات لملفات HTML يتم إجراؤها كلّما أدخلت عنوان URL جديدًا في شريط التنقّل أو تتّبع رابطًا على إحدى الصفحات. وهذا هو المكان الذي يترك فيه عاملو الخدمة أكبر تأثيرهم على الأداء: فباستخدام عامل الخدمة للاستجابة بدون انتظار الشبكة، يمكنك ضمان أن تكون عمليات التنقّل سريعة ومرنة بشكل موثوق.
استخدام تقرير تجربة المستخدم في Chrome للاطّلاع على الأداء في هذا الحقل
إنّ تقرير تجربة المستخدم في Chrome (المعروف أيضًا باسم CrUX) هو مجموعة بيانات عامة لبيانات تجربة المستخدم الحقيقية على الملايين من المواقع الإلكترونية. وعلى عكس بيانات المختبر، تأتي بيانات CrUX في الواقع من المستخدمين المشتركين في المجال.
عرض مثالي لوحدات البكسل باستخدام devicePixelContentBox
منذ الإصدار 84 من Chrome، تتيح أداة ResizeObserver قياس مربع جديد يُسمى device-pixel-content-box، وهو يقيس بُعد العنصر بوحدات البكسل الفعلية. وهذا أمر بالغ الأهمية لعرض رسومات مثالية للبكسل، خاصة في سياق الشاشات عالية الكثافة.
عشرة تخطيطات حديثة في سطر واحد من CSS
تسلّط هذه المشاركة الضوء على بضعة أسطر فعّالة في CSS تؤدي إلى تنفيذ مهام صعبة بصورة كبيرة وتساعدك في إنشاء تنسيقات حديثة وقوية.
ملخص مباشر لـ web.dev
ملخص لأهم الأخبار والتحديثات التي تم الإعلان عنها خلال حدث المنتدى على الإنترنت الذي يستمر لمدة 3 أيام، وتذكير بشأن الأحداث الإقليمية القادمة.
أفضل ممارسات نموذج تسجيل الدخول
استخدِم ميزات المتصفّح الذي يعمل على عدّة أنظمة أساسية لإنشاء نماذج تسجيل دخول آمنة وسهلة الاستخدام ويمكن الوصول إليها.
تحسين تطبيق الويب التقدّمي تدريجيًا
تعرَّف على كيفية التحسين التدريجي لتطبيق الويب التقدّمي الخاص بك بحيث يظل مفيدًا على جميع المتصفّحات الحديثة، ولكنّه يقدّم تجربة متقدّمة على المتصفّحات التي تتوافق مع إمكانات الويب الجديدة مثل الوصول إلى نظام الملفات والوصول إلى حافظة النظام واسترداد جهات الاتصال والمزامنة الدورية للخلفية وقفل تنشيط الشاشة وميزات مشاركة الويب وغير ذلك الكثير.
استخدام ميزات المتصفّح على جميع الأنظمة الأساسية لإنشاء نموذج تسجيل الدخول
استخدِم ميزات المتصفّح على جميع الأنظمة الأساسية لإنشاء نموذج تسجيل دخول بسيط وآمن وسهل الاستخدام ومتاح للجميع.
أدوات المطوّرين على الويب لتصحيح أخطاء JavaScript في "بحث Google "
كيفية تصحيح مشاكل تحسين محركات البحث على صفحات فردية أو على مستوى موقع إلكتروني بأكمله
إنشاء تجارب بحث مرنة باستخدام Workbox
كيفية تنفيذ تجربة بحث مرنة مع Workbox، باستخدام Background Sync وPussh API.
إضافة الوسائط إلى صفحة ويب
يمكنك تضمين ملف وسائط في صفحة ويب باستخدام العلامات و.
إضافة روابط جريئة في فيديوهات لم يربطها أحد من قبل: أجزاء من النص
تتيح لك أجزاء النص تحديد مقتطف نصي في جزء عنوان URL. عند الانتقال إلى عنوان URL يحتوي على جزء من النص، يمكن للمتصفح التأكيد و/أو جذب انتباه المستخدم.
جعل تطبيق الويب التقدّمي (PWA) أشبه بتطبيق
تعرَّف على كيفية جعل تطبيق الويب التقدّمي الخاص بك يبدو تطبيقًا "حقيقيًا" من خلال فهم كيفية تنفيذ أنماط التطبيقات الخاصة بالنظام الأساسي باستخدام تقنيات الويب.
كيفية الإبلاغ عن خطأ جيد في المتصفِّح
إنّ إبلاغ مورّدي المتصفح بالمشاكل التي تجدها في متصفحاتهم على جهاز أو نظام أساسي محدد جزء لا يتجزأ من تحسين النظام الأساسي للويب.
قياس الأداء باستخدام نموذج RAIL
يتيح نموذج RAIL للمصممين والمطورين استهداف أعمال تحسين الأداء التي لها أعلى تأثير على تجربة المستخدم بشكل موثوق. تعرَّف على الأهداف والإرشادات التي يوفّرها نموذج RAIL والأدوات التي يمكنك استخدامها لتحقيقها.
تسريع عمليات التنقّل في React باستخدام الرابط السريع
"الرابط السريع" هو مكتبة لتحقيق عمليات تحميل لاحقة أسرع للصفحات من خلال جلب الروابط ضمن إطار العرض مسبقًا أثناء عدم النشاط.
حماية الموارد من هجمات الويب باستخدام ميزة "جلب البيانات الوصفية"
"جلب البيانات الوصفية" هي ميزة جديدة للنظام الأساسي للويب مصممة للسماح للخوادم بحماية نفسها من الهجمات المتعددة المصادر.
إعادة ترتيب المحتوى
عند إنشاء تخطيط باستخدام CSS، يجب أن تحرص على عدم إنشاء تجربة غير متصلة للمستخدمين الذين يتنقلون باستخدام لوحة المفاتيح.
تحسينات على Web Animations API في Chromium 84
أنت على وشك أن تصبح الرسوم المتحركة المتشابكة على الويب أسهل بكثير.
مسار معاملة الدفع
تعرَّف على كيفية دمج التجّار لتطبيقات الدفع، وكيفية عمل معاملات الدفع مع Payment Request API، وإمكانيات Web Payments.
تعزيز قدرات تطبيقات الدفع باستخدام "دفعات الويب"
تهدف "دفعات الويب" إلى توفير تجربة دفع سلسة على الويب. تعرَّف على آلية عمل التطبيق ومزاياه واستعِد لدمج تطبيق الدفع الخاص بك مع "دفعات الويب".
دليل مطوّري تطبيقات الدفع المتوافقة مع Android
تعرَّف على كيفية تعديل تطبيق الدفع على Android للتوافق مع خدمة "دفعات الويب" وتقديم تجربة أفضل للعملاء.
إعداد طريقة دفع
تبدأ معاملة دفع باستخدام خدمة "دفعات الويب" عندما تكتشف تطبيق الدفع الخاص بك. تعرَّف على كيفية إعداد طريقة دفع وتجهيز تطبيق الدفع للتجار والعملاء لإجراء عمليات الدفع.
مزيد من خيارات الخط المتغيّرة لخط واجهة مستخدم النظام macOS في Chromium 83
واجه Chromium 80 تراجعًا في كثافة خط واجهة مستخدم النظام على نظام التشغيل macOS. يرجع سبب تعطلها والقوى الخارقة الجديدة لما بعد الدقة إلى انتظار الانتظار في Chromium 83.
إنجاز المهام بسرعة باستخدام اختصارات التطبيقات
تتيح اختصارات التطبيقات الوصول سريعًا إلى مجموعة من الإجراءات الشائعة التي يحتاجها المستخدمون بشكل متكرر.
كيف يمكن لتطبيقات الويب التقدمية أن تحقق نجاح نشاطك التجاري
أنشئ حالة عمل قوية لتطبيق الويب التقدّمي (PWA). تعرَّف على الوقت المناسب للاستثمار وكيف يمكنك قياس مدى نجاحه.
جارٍ التحضير لإزالة Appcache
تخطط تفاصيل Chrome والمتصفحات الأخرى لإزالة Appcache.
كيفية تحديد استراتيجية التثبيت
أفضل الممارسات للجمع بين عروض التثبيت المختلفة من أجل زيادة معدلات التثبيت وتجنُّب المنافسة على النظام الأساسي والاستيلاء على المنتج
التخزين الدائم
يمكن أن يساعد التخزين المستمر على حماية البيانات المهمة من الإخلاء وتقليل فرصة فقدان البيانات.
كيفية استفادة مؤسسة CommonJS من حِزمك
تتسم وحدات CommonJS بأنها ديناميكية للغاية، ما يمنع محسّني JavaScript والحِزم من تنفيذ عمليات تحسين متقدمة بدلاً منها.
إنشاء ملفات صوتية لتطبيقات الويب في Chrome
تعرَّف على طريقة تحليل أداء تطبيقات Web Audio في Chrome باستخدام `about://tracing` والإضافة **WebAudio** في "أدوات مطوري البرامج في Chrome".
سبب حاجتك إلى استخدام ميزات فعالة مع "حصر إمكانية الوصول من مصادر خارجية"
تزيد بعض واجهات برمجة تطبيقات الويب من خطر الهجمات على القنوات الجانبية، مثل Spectre. للحدّ من هذه المخاطر، توفّر المتصفِّحات بيئة معزولة قائمة على الموافقة تُسمى "عزل من مصادر متعددة". تعرَّف على أهمية استخدام ميزة حظر الوصول من نطاقات أخرى لاستخدام ميزات فعّالة، مثل `SharedArrayBuffer` و`performance.measureUserAgent specificMemory()` وموقّت عالي الدقة بدقة أفضل.
تحسين أداء تحميل الصفحات في Next.js وGatsby باستخدام ميزة التقسيم الدقيق
تعرّف على كيفية تحسين كلٍّ من Next.js وGatsby لمخرجات الإصدار لتقليل الرموز المكرّرة وتحسين أداء تحميل الصفحة.
"نفس الموقع" و "اقتباسه المصدر نفسه"
كثيرًا ما يتم الاستشهاد بمصطلحات "الموقع نفسه" و "المصدر نفسه" ولكن يُساء فهمها في كثير من الأحيان. وتوضّح هذه الصفحة ماهيتها وأوجه الاختلاف بينها.
جعل موقعك الإلكتروني "معزولاً من مصادر متعددة" باستخدام COOP وCOEP
تزيد بعض واجهات برمجة تطبيقات الويب من خطر الهجمات على القنوات الجانبية، مثل Spectre. للحدّ من هذه المخاطر، توفّر المتصفِّحات بيئة معزولة قائمة على الموافقة تُسمى "عزل من مصادر متعددة". استخدِم COOP وCOEP لإعداد هذه البيئة وتفعيل ميزات فعّالة مثل `SharedArrayBuffer` أو `performance.measureUserAgent specificMemory()` أو موقّت عالي الدقة بدقة أفضل.
راقِب إجمالي استخدام الذاكرة في صفحة الويب من خلال قياسUserAgentspecificMemory()
تعرَّف على طريقة قياس استخدام الذاكرة لصفحة الويب في مرحلة الإنتاج لاكتشاف حالات التراجع.
مدونة web.dev الهندسية رقم 1: كيفية إنشاء الموقع واستخدام مكونات الويب
تعرَّف في هذه المشاركة الأولى من فريق web.dev الهندسي على كيفية إنشاء الموقع الإلكتروني، بما في ذلك استخدامنا لـ Eleventy وWeb Components.
تم تحسين النمط التلقائي للوضع الداكن من خلال خاصية CSS لنظام الألوان والعلامة الوصفية المقابلة لها.
تسمح سمة CSS لنظام الألوان والعلامة الوصفية المقابلة لها بتفعيل الإعدادات التلقائية الخاصة بالمظهر في ورقة أنماط وكيل المستخدم، مثل عناصر التحكّم في النموذج وأشرطة التمرير وألوان نظام CSS. وفي الوقت نفسه، تمنع هذه الميزة المتصفِّحات من تطبيق أي عمليات تحويل من تلقاء نفسها.
احرص على أن يكون موقعك الإلكتروني متاحًا وقابلاً للاستخدام للجميع خلال أزمة فيروس كورونا المستجد (كوفيد-19).
كيفية التأكّد من أنّ الوظائف الأساسية لموقعك الإلكتروني متاحة دائمًا ويمكن الوصول إليها وآمنة وسهلة الاستخدام وقابلة للاكتشاف وسريعة
أهداف نقر يسهل الوصول إليها
من المهم أن تكون العناصر التفاعلية بها مساحة كافية حولها، عند استخدامها على جهاز محمول أو شاشة تعمل باللمس. سيساعد هذا الإجراء الجميع، لا سيما الذين يعانون من عجز حركية.
حلّ مشكلة التحميل الزائد على الخادم
كيفية تحديد المؤثِّر السلبي في الخادم وإصلاحه بسرعة وتحسين أداء الخادم ومنع أي تراجع فيه.
تصميم سريع الاستجابة يسهل الوصول إليه
نعلم أنه من الجيد التصميم سريع الاستجابة لتوفير أفضل تجربة لأجهزة متعددة، ولكن التصميم سريع الاستجابة يحقق أيضًا فوزًا في سهولة الوصول.
إمكانية الوصول إلى الألوان والتباين
تعرَّف على كيفية تسهيل الوصول إلى صفحاتك من خلال تحسين استخدام الألوان والتباين.
منع الثغرات الأمنية في البرمجة النصية للمواقع الإلكترونية المستندة إلى DOM باستخدام ميزة "الأنواع الموثوق بها"
إضافة الأنواع الموثوق بها: واجهة برمجة تطبيقات للمتصفح لمنع البرمجة النصية على مستوى الموقع عبر DOM في تطبيقات الويب الحديثة.
استخدام تطبيق ويب تقدّمي (PWA) في تطبيق Android
طريقة فتح تطبيق ويب تقدّمي في تطبيق Android
منع تغيير التنسيق وميض النص غير المرئي (FOIT) من خلال التحميل المُسبق للخطوط الاختيارية
من خلال تحسين دورات العرض، يحدّ Chrome 83 من متغيّرات التصميم عند التحميل المُسبق للخطوط الاختيارية. يعد الجمع بين عرض الخط والنمط الاختياري هو الطريقة الأكثر فعالية لضمان عرض الخطوط المخصصة بسهولة.
كيفية إعداد Signed HTTP Exchanges (SXG) باستخدام nginx
كيفية إنشاء شهادة بروتوكول أمان طبقة النقل (TLS) باستخدام امتدادات SXG، وتثبيت أدوات لإنشاء ملفات SXG، وضبط nginx لعرض ملفات SXG.
كيفية توزيع Signed HTTP Exchanges (SXG) باستخدام nginx
كيفية الحصول على ملفات SXG وتقديمها باستخدام nginx، وتحديات الجلب المسبق للموارد الفرعية.
تحسين صور خلفية CSS باستخدام طلبات البحث عن الوسائط
استخدِم الاستعلامات عن الوسائط لإرسال صور بحجم كبير كما يجب، وهو أسلوب يُعرف عادةً باسم الصور المتجاوبة مع مختلف الأجهزة.
إصلاح سرعة موقع الويب بشكل متعدد الوظائف
كيف يمكن للأقسام الأخرى المساعدة في تحقيق نجاح أكبر لمشروع تحسين سرعة موقعك الإلكتروني.
محاذاة التمرير بعد تغيير التنسيق
بدءًا من إصدار Chrome 81، تظل برامج التمرير الانطباق عند تغيير تنسيق الصفحة. بعبارة أخرى، لم تعُد بحاجة إلى إضافة أدوات معالجة الأحداث لفرض إعادة التقاط الصورة.
كيفية إعداد Signed Exchange باستخدام Web Packager
تعرَّف على كيفية تقديم آلية Signed Exchange (SXG) باستخدام Web Packager.
كيفية توفير تجربة التثبيت داخل التطبيق
يمكنك استخدام حدث before installprompt لتوفير تجربة تثبيت مخصّصة وسلسة للمستخدمين داخل التطبيق.
الواقع المعزّز: قد تكون على عِلم به
إذا سبق لك استخدام WebXR Device API، يمكنك معرفة القليل جدًا من المعلومات الجديدة التي ستتعلّمها. الدخول إلى جلسة WebXR هو نفسه إلى حد كبير. تشغيل التكرار الحلقي للإطار هو نفسه إلى حد كبير. تكمن الاختلافات في التكوينات التي تسمح بعرض المحتوى بشكل مناسب للواقع المعزّز.
استخدام الواقع الافتراضي على الويب، الجزء الثاني
أصبح الواقع الافتراضي ظاهرًا على الويب في الإصدار 79 من Chrome. استنادًا إلى واجهة برمجة التطبيقات WebXR Device API، يمثّل هذا الإطلاق الأساس لكل من الواقع المعزّز والواقع الافتراضي. هذه المقالة هي الثانية في السلسلة، مع التركيز على حلقة الإطار، وهي جزء من جلسة XR يتم فيها عرض الصور للمشاهد. وقريبًا، ستتوافق متصفحات أخرى مع WebXR Device API، بما في ذلك Firefox Reality وOculus Browser وEdge وMagic Leap's Helio وغيرهما.
وضع العناصر الافتراضية في عرض العالم الحقيقي
تُعد واجهة WebXR Hit Test API تحسينًا للواقع المعزّز على الويب الذي يتيح لك وضع عناصر افتراضية في مشهد واقعي.
تطوير المنظومة المتكاملة لإطار عمل الويب
تعرَّف على كيفية استثمار Chrome جهوده في عدد من الأدوات المفتوحة المصدر لتطوير منظومة JavaScript المتكاملة.
ما هي تطبيقات الويب التقدّمية؟
مقدمة عن تطبيقات الويب التقدّمية (PWA) والركائز الثلاث التي تفصلها عن تطبيقات الويب الأخرى
دمج تطبيقات الويب التقدّمية (PWA) في واجهات المستخدم المدمَجة للمشاركة باستخدام Workbox
طريقة تسجيل المسارات في Workbox بحيث يظهر تطبيق الويب التقدّمي الخاص بك في واجهات المستخدم الخاصة بالمشاركة على مستوى النظام، بالإضافة إلى التطبيقات الخاصة بالنظام الأساسي.
التوافق مع الرموز التكيُّفية في تطبيقات الويب التقدّمية (PWA) مع رموز قابلة للإخفاء
الرموز القابلة للإخفاء هي تنسيق يمنحك المزيد من التحكّم ويسمح لتطبيق الويب التقدّمي باستخدام الرموز التكيُّفية. يمكن أن يظهر الرمز القابل للإخفاء بشكل رائع على جميع أجهزة Android.
تحسين إغلاق الصفحة في تنسيق XMLHttpRequest() متزامنًا
من الشائع أن تحتوي صفحة أو تطبيق على إحصاءات أو بيانات أخرى لم يتم إرسالها في الوقت الذي يغلقه المستخدم. تستخدم المواقع الإلكترونية استدعاءًا متزامنًا إلى XMLHttpRequest() للإبقاء على الصفحة أو التطبيق مفتوحًا حتى يتم تمرير بياناته إلى الخادم. لأنه يضر بتجربة المستخدم ويتجاهل طرقًا أفضل لحفظ البيانات. ينفِّذ Chrome 80 تغييرًا حديثًا في المواصفات لمعالجة هذه المشكلة.
توفير سلاسل محادثات على الويب باستخدام عمال الوحدات
يسهّل مشغّلو الوحدات إزالة حظر سلسلة التعليمات الرئيسية عن طريق نقل رمز باهظ الثمن إلى سلسلة محادثات في الخلفية مع الحفاظ على المزايا المريحة والأداء لوحدات JavaScript العادية.
التحميل التكيُّفي: تحسين أداء الويب على الأجهزة البطيئة
تعرَّف على نمط التحميل التكيّفي وكيفية تطبيقه وكيفية استخدام Facebook وTinnder وeBay وشركات أخرى لميزة "التحميل التكيّفي" في مرحلة الإنتاج.
التطورات في أدوات السرعة: أبرز الأخبار من مؤتمر Chrome Developer Summit لعام 2019
يمكنك الاطّلاع على آخر التطورات في أدوات السرعة، بما في ذلك مقاييس الأداء الجديدة والتعديلات على "إحصاءات PageSpeed" و"تقرير تجربة المستخدم في Chrome" (CrUX)، وإحصاءات من تحليل "تقويم الويب" لمنظومة الويب المتكاملة.
استخدام عاملي الويب لتشغيل JavaScript من سلسلة التعليمات الرئيسية للمتصفِّح
تعد سلسلة التعليمات الرئيسية للمتصفح مرهقة بشكل كبير. يمكنك تحسين موثوقية تطبيقك وتجربة المستخدم بشكل كبير من خلال الاستعانة بالعاملين على الويب لتغيير الرمز البرمجي خارج سلسلة التعليمات الرئيسية.
الملاحظات والآراء من استطلاع تحسين الصور لصيف 2019
تعليقات من المشاركين في الاستطلاع حول الأساليب المختلفة لتحسين الصور
إنشاء خادم للإشعارات الفورية
في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إنشاء خادم للإشعارات الفورية.
الجلب المسبق للمسار في Next.js
كيفية تسريع Next.js للتنقّل باستخدام التحميل المُسبَق للمسارات وكيفية تخصيصه في هذا المنشور، ستتعرّف على آلية عمل التوجيه في Next.js وكيفية تحسينه لزيادة السرعة وكيفية تخصيصه بما يناسب احتياجاتك على أفضل نحو. في Next.js ، لا تحتاج إلى إعداد التوجيه
تقسيم الرمز باستخدام عمليات الاستيراد الديناميكية في Next.js
كيفية تسريع تطبيق Next.js باستخدام ميزة "تقسيم الرموز البرمجية" واستراتيجيات التحميل الذكية توضّح هذه المشاركة الأنواع المختلفة من تقسيم الرمز البرمجي وكيفية استخدام عمليات الاستيراد الديناميكية لتسريع تطبيقات Next.js. يقسّم Next.js تلقائيًا
كيف تضمن صفحات AMP السرعة في تطبيق Next.js
الاطّلاع على مزايا وفوائد دعم AMP في تطبيق Next.js AMP عبارة عن إطار عمل لمكوّنات الويب يضمن تحميلًا سريعًا للصفحات. يحتوي الإصدار Next.js على دعم مدمج لصفحات AMP. يقدّم هذا الدليل أولاً وصفًا موجزًا للطريقة التي تضمن بها صفحات AMP تحميل الصفحات
الأداء كافتراضي باستخدام Next.js
تهتم أداة Next.js بالعديد من التحسينات في تطبيق React كي لا تضطر إلى إجراء ذلك بنفسك. Next.js هو إطار عمل React يعتمد على آراء معيّنة ويتضمّن عددًا من تحسينات الأداء. إنّ الفكرة الرئيسية التي يستند إليها إطار العمل هي ضمان بدء التطبيقات والحفاظ على
الدمج مع واجهة مستخدم مشاركة نظام التشغيل مع Web Share API
باستخدام واجهة برمجة التطبيقات Web Share API، يمكن لتطبيقات الويب استخدام إمكانيات المشاركة التي يوفّرها النظام نفسها مثل التطبيقات الخاصة بنظام التشغيل. تتيح واجهة برمجة التطبيقات Web Share API لتطبيقات الويب مشاركة الروابط والنصوص والملفات مع التطبيقات الأخرى المثبَّتة على الجهاز بالطريقة نفسها المتّبَعة مع التطبيقات الخاصة بالنظام الأساسي.
إتاحة الواقع الافتراضي على الويب
أصبح الواقع الافتراضي ظاهرًا على الويب في الإصدار 79 من Chrome. استنادًا إلى واجهة برمجة التطبيقات WebXR Devicer API، يشكّل هذا الإطلاق أساسًا لكل من الواقع الافتراضي والواقع المعزّز. هذه المقالة هي الأولى في سلسلة، تستكشف المفاهيم الأساسية وتصف كيفية الدخول إلى جلسة XR. وقريبًا، ستتوافق متصفحات أخرى مع WebXR Device API، بما في ذلك Firefox Reality وOculus Browser وEdge وMagic Leap's Helio وغيرهما.
فهم ملفات تعريف الارتباط
تعرَّف على آلية عمل ملفات تعريف الارتباط وما هي ملفات تعريف الارتباط للطرف الأول والطرف الثالث.
وصفات حلوى SameSite
يمكن للمواقع الإلكترونية الآن وضع علامات واضحة على ملفات تعريف الارتباط لاستخدامها على مواقع إلكترونية متعددة. تعرَّف على كيفية ترميز ملفات تعريف الارتباط لضمان استمرار عمل ملفات تعريف الارتباط للطرف الأول والجهات الخارجية بعد تنفيذ هذا التغيير.
الإعلانات السريعة مهمة
يمكنك فهم قيمة الإعلانات السريعة وكيفية التفكير في سرعة الإعلانات.
استخدام الإشعارات الفورية للتفاعل مع المستخدمين وإعادة جذبهم
يمكنك استخدام الإشعارات الفورية لجذب اهتمام المستخدمين من خلال تقديم تحديثات مستهدفة في الوقت المناسب.
بدء استخدام notifications API
في هذا الدرس التطبيقي حول الترميز، تعرَّف على كيفية طلب إذن المستخدم وإرسال الإشعارات.
استخدام عامل الخدمات لإدارة الإشعارات
في هذا الدرس التطبيقي حول الترميز، تعرَّف على كيفية إدارة الإشعارات مع مشغّل الخدمات.
إصلاح عدم ثبات التنسيق
جولة تفصيلية حول استخدام WebPageTest لتحديد مشاكل عدم ثبات التنسيق وإصلاحها.
أساليب تحميل تطبيق ويب بسرعة، حتى على هاتف عادي
تجتذب الهواتف العادية انتشارًا جديدًا وهي تحظى بشعبية، خاصة في الأسواق الناشئة التي تكون فيها شبكة الجيل الثاني هي القاعدة. إليك ما نتعلمه من كيفية إنشاء نسخة طبق الأصل من PROXX، وهي نسخة طبق الأصل من لعبة Minesweeper على الأجهزة الجوّالة، والتي يتم تحميلها بسرعة على الهواتف العادية المزوّدة بشبكة الجيل الثاني.
خصائص مخصّصة أكثر ذكاءً مع واجهة برمجة تطبيقات Houdini الجديدة
على الرغم من أهميتها، من الصعب التعامل مع متغيرات CSS لأنها يمكن أن تأخذ أي قيمة ويتم إلغاؤها ولا يمكنك استخدام الانتقالات معها. يمكن لـ "مواقع CSS" وواجهة برمجة التطبيقات للقيم في المستوى 1 التغلّب على هذه المشاكل.
هناك طريقتان للجلب المسبق: العلامات <link> وعناوين HTTP
تعرَّف على كيفية تسريع عمليات الانتقال المستقبلية من خلال الجلب المُسبَق للموارد.
الجلب المُسبَق للموارد لتسريع عمليات الانتقال المستقبلية
تعرّف على معلومات حول تلميح الموارد rel=prefetch وكيفية استخدامه.
إصلاح المحتوى المختلط
تعرَّف على كيفية إصلاح أخطاء المحتوى المختلط على موقعك الإلكتروني لحماية المستخدمين والتأكّد من تحميل جميع المحتوى.
ما هو المحتوى المختلَط؟
يحدث المحتوى المختلط عندما يتم تحميل HTML مبدئي عبر اتصال HTTPS آمن، ولكن يتم تحميل موارد أخرى عبر اتصال HTTP غير آمن.
ابتكار ميزات جديدة تتجاوز الصور باستخدام الفيديوهات الأساسية على الويب
تشير الأبحاث إلى أنّ الفيديوهات على الويب تؤدي إلى زيادة التفاعل والمبيعات. وحتى إذا لم تكن قد أضفت فيديو إلى مواقعك الإلكترونية بعد، فلن يستغرق الأمر سوى بعض الوقت حتى تنتهي من هذا الإجراء.
إضافة رمز Apple touch إلى "تطبيق الويب التقدّمي"
عرض توضيحي تفاعلي لكيفية تحديد الرمز الذي يجب أن يظهر على الشاشات الرئيسية لنظام iOS.
موقع ويب جاهز للّاعب
أصبحت منصة الويب جاهزة جدًا لتطوير الألعاب في الوقت الحالي. يتمثل العامل الأساسي في إنشاء لعبة ويب حديثة في اتّباع أفضل الممارسات المتعلقة بتصميم الألعاب وتحقيق الربح منها. تقدّم هذه المشاركة إرشادات حول هذا الهدف.
تطبيقات الويب التقدّمية في المواقع الإلكترونية المتعددة المصادر
تشكِّل البُنى متعددة المصادر العديد من التحديات عند إنشاء تطبيقات الويب التقدّمية (PWA). تعرَّف على الاستخدامات الجيدة والسيئة للمصادر المتعددة، وبعض الحلول البديلة لإنشاء تطبيقات ويب تقدّمية (PWA) في مواقع إلكترونية متعددة المصادر.
تقليل حجم الخط على الويب
تشرح هذه المشاركة كيفية تقليل حجم WebFonts التي تستخدمها على موقعك الإلكتروني، بحيث لا يعني أسلوب الخط الجيد بطء الموقع.
تحسين تحميل WebFont وعرضه
توضّح هذه المشاركة كيفية تحميل WebFonts لمنع متغيّرات التصميم والصفحات الفارغة عند عدم توفُّر WebFonts عند تحميل الصفحة.
إنشاء تطبيق ويب تقدّمي باستخدام Angular CLI
تعرَّف على كيفية إنشاء تطبيقات Angular تقدّمية قابلة للتثبيت.
استخدام شبكات توصيل المحتوى (CDN) للصور لتحسين الصور
يمكنك استخدام شبكة توصيل للمحتوى (CDN) للصور لتحسين صور موقعك الإلكتروني وتقليل تكلفة البيانات على المستخدمين.
تحديد لغة JavaScript البطيئة التابعة لجهة خارجية
تعرَّف على طريقة استخدام Lighthouse و"أدوات مطوري البرامج في Chrome" لتحديد الموارد البطيئة التابعة لجهات خارجية.
تحميل لغة JavaScript من جهة خارجية بكفاءة
اطّلِع على كيفية تحسين أوقات التحميل وتجربة المستخدم عن طريق تجنُّب المخاطر الشائعة لاستخدام النصوص البرمجية التابعة لجهات خارجية.
أداء JavaScript من جهة خارجية
توضّح هذه المشاركة الأنواع الشائعة لنصوص JavaScript التابعة لجهات خارجية ومشاكل الأداء التي يمكن أن تسبّبها. وتوفّر أيضًا إرشادات عامة حول كيفية تحسين النصوص البرمجية التابعة لجهات خارجية.
تحسين JavaScript للجهات الخارجية
تعرَّف على أساليب تحسين الموارد البطيئة التابعة لجهات خارجية باستخدام بعض المساعدة من Lighthouse.
عناصر تحكّم أكثر فعالية في النموذج
تسهّل الميزات الجديدة للنظام الأساسي للويب إنشاء عناصر مخصّصة تعمل مثل عناصر التحكّم المضمّنة في النموذج.
أنشِئ اتصالات بالشبكة مبكرًا لتحسين سرعة الصفحة التي يتم رصدها.
تعرّف على تلميحات الموارد rel=preconnect وrel=dns-prefetch وكيفية استخدامها.
إنشاء خلفيات تشبه أنظمة التشغيل باستخدام فلتر الخلفية
تعرَّف على كيفية إضافة تأثيرات الخلفية مثل التمويه والشفافية إلى عناصر واجهة المستخدم على الويب باستخدام خاصية فلاتر الصور الخلفية في CSS.
الحفاظ على التجديد من خلال ميزة إعادة التحقق
تساعد عملية إعادة التحقق القديمة المطوّرين على تحقيق التوازن بين التحميل الفوري للمحتوى المخزّن مؤقتًا والحداثة، ما يضمن استخدام التحديثات على المحتوى المخزَّن مؤقتًا في المستقبل.
إنشاء قائمة افتراضية للقوائم الكبيرة باستخدام Angular CDK
تعرَّف على كيفية جعل القوائم الكبيرة أكثر استجابة من خلال تنفيذ التمرير الافتراضي باستخدام مجموعة أدوات تطوير المكوّنات في Angular.
تحسين رصد التغيير في Angular
تعرف على كيفية تحسين اكتشاف التغيير في تطبيق Angular لجعله أكثر استجابة.
توجيه استراتيجيات التحميل المُسبق في Angular
تعرَّف على كيفية استخدام استراتيجيات التحميل المُسبق في Angular's للحصول على تطبيقات أسرع.
تنقُّل أسرع على الويب باستخدام ميزة الجلب المُسبَق وبشكل توقّعي
يتيح لك تقسيم الرمز زيادة سرعة تطبيقاتك، ولكنه قد يؤدي إلى إبطاء الانتقال التالي. يُعد الجلب المسبق التنبؤي طريقة فعالة لاستخدام تحليلات البيانات للجلب المسبق بذكاء ما قد يستخدمه المستخدم بعد ذلك، مما يؤدي إلى تحسين استخدام الشبكة.
تكييف عرض الفيديو مع عرض الصور استنادًا إلى جودة الشبكة
تعرَّف على طريقة استخدام Network Information API لتعديل المحتوى بناءً على جودة الشبكة.
تدقيق إمكانية الوصول في تطبيق Angular باستخدام أداة تحليل الرموز
تعرف على كيفية جعل تطبيق Angular يمكن الوصول إليه باستخدام برنامج Codelyzer.
ميزانيات الأداء باستخدام واجهة سطر الأوامر في Angular
تعرَّف على كيفية استخدام الميزانيات القائمة على الأداء مباشرةً في واجهة سطر الأوامر في Angular!
الاستعداد مع مشغّل الخدمات في Angular
تعرَّف على كيفية استخدام مشغّل خدمات Angular لتخزين الأصول الثابتة مؤقتًا في تطبيقك.
Preferred-color-scheme: مرحبًا يا صديقي الظلام يا صديقي القديم
تتيح العديد من الأجهزة الآن استخدام الوضع الداكن على مستوى نظام التشغيل أو تجربة المظهر الداكن. توضّح هذه المشاركة كيفية إتاحة الوضع الداكن على صفحات الويب، وتدرج أفضل الممارسات، كما تقدّم عنصرًا مخصّصًا باسم "الوضع الداكن" يتيح لمطوّري برامج الويب تقديم طريقة للمستخدمين لإلغاء الإعدادات المفضّلة على مستوى نظام التشغيل في صفحات ويب محدّدة.
تقسيم الرمز على مستوى المسار بتنسيق Angular
تعرَّف على كيفية تصغير حزمة التطبيق الأولية باستخدام ميزة تقسيم الرمز على مستوى المسار.
البدء: تحسين تطبيق Angular
تعرَّف على كيفية جعل تطبيق Angular أسرع وأكثر موثوقية وقابلية للاكتشاف وإمكانية التثبيت ويمكن الوصول إليه.
أهم النصائح لتحسين أداء الويب
استخدِم srcset لاختيار حجم الصورة الصحيح تلقائيًا.
مكونات الويب: المكون السري الذي يساعد على تعزيز الويب
تلخص هذه المشاركة محادثة عن حالة مكونات الويب في عام 2019، ألقاها كيفن سكاف من مشروع البوليمر وكاريدي باتينيو من Salesforce.
استخدام Lighthouse لميزانيات الأداء
أصبحت أداة Lighthouse تتيح الآن الميزانيات المستندة إلى الأداء. يمكن إعداد هذه الميزة، LightWallet، في أقل من خمس دقائق، وتوفر ملاحظات عن حجم موارد الصفحة وكميتها.
قيمة السرعة
توضيح الأرباح الناتجة عن تحسينات الموقع مع استبعاد العوامل الخارجية مثل الحملات التسويقية.
تعديلات على واجهات برمجة تطبيقات Web Payments
منذ إطلاق Payment Request API في Chrome 53 وPayment Handler API في متصفّح Chrome 68، تم إجراء بعض التغييرات على مواصفات كلّ منها. تلخّص هذه المشاركة هذه التعديلات وستستمر في تجميع هذه التغييرات في واجهة برمجة التطبيقات.
تثبيت شريط العناوين لتطبيقات الويب التقدّمية على الكمبيوتر المكتبي
من السهل تثبيت تطبيقات الويب التقدّمية باستخدام زر تثبيت جديد في شريط عناوين Chrome (المربّع المتعدّد الاستخدامات).
كيف يمكن للأداء تحسين الإحالات الناجحة؟
معرفة تأثير أداء الموقع الإلكتروني في الأجزاء المختلفة من مسار الإحالة الناجحة للتجارة الإلكترونية
أنماط الترويج لتثبيت تطبيق الويب التقدّمي (PWA)
كيفية الترويج لتثبيت تطبيقات الويب التقدّمية وأفضل الممارسات
كيف يمكنني إشعار المستخدمين بأنّ تطبيق الويب التقدّمي (PWA) الخاص بي قابل للتثبيت؟
كيفية الترويج لتثبيت تطبيقات الويب التقدّمية وأفضل الممارسات
عقلية عامل الخدمات
يُعدّ العمل مع عاملي الخدمة جديدًا وغير مألوف للعديد من مطوّري برامج الويب. تقدّم هذه المشاركة بعض النصائح للفت انتباهك إليها.
سياسات الصور لأوقات التحميل السريع وغيرها
تشغل الصور قدرًا كبيرًا من المساحة المرئية وتشكّل غالبية وحدات البايت التي يتم تنزيلها على موقع الويب. استخدم سياسات الميزة الجديدة لتحديد الصور الكبيرة الحجم.
استخراج ملفات CSS المهمة
تعرَّف على كيفية تحسين أوقات العرض باستخدام أسلوب CSS المهم وكيفية اختيار أفضل أداة لمشروعك.
استخراج محتوى CSS المهم وتضمينه باستخدام "حرج"
تعرَّف على كيفية استخدام Primary لاستخراج ملفات CSS المهمة وتضمينها، وتحسين أوقات العرض.
هل تعمل مهام JavaScript الطويلة على تأخير وقت التفاعل؟
تعرف على كيفية تشخيص تفاعلات المستخدم المكلفة ومنعها من العمل.
السرعة على نطاق واسع: ما هي الميزات الجديدة في أداء الويب؟
بالنسبة إلى مؤتمر Google I/O لعام 2019، طرحنا ثلاث مبادرات جديدة تتعلّق بأداء الويب نأمل أن تؤدي إلى تحسين تجارب المستخدمين للجميع.
نقدّم لك PROXX
PROXX هي لعبة تشبه لعبة الألغام، وهي مصمّمة كتطبيق ويب تقدّمي. تعمل هذه الميزة على مجموعة كبيرة من الأجهزة، وتُحسِّن بشكل تدريجي المظهر المرئي كلما كان الجهاز أكثر قدرة.
البحث المرئي باستخدام مجموعة أدوات تصور الويب
ألن يكون من الرائع أن يتمكن المستخدمون من البحث في موقعك الإلكتروني باستخدام الكاميرا التي يستخدمونها؟
ملفات تعريف الارتباط المستخدَمة في SameSite
تعرَّف على كيفية وضع علامة على ملفات تعريف الارتباط لاستخدام الطرف الأول والطرف الثالث باستخدام السمة SameSite. يمكنك تحسين أمان موقعك الإلكتروني باستخدام قيم "لاx" و"المتشدد" في SameSite لتحسين الحماية من هجمات CSRF. يتيح لك تحديد السمة "بدون" الجديدة وضع علامة واضحة على ملفات تعريف الارتباط للاستخدام على عدة مواقع إلكترونية.
العرض التكيُّفي استنادًا إلى جودة الشبكة
استخدِم Network Information API لتعديل مواد العرض المعروضة للمستخدمين استنادًا إلى جودة اتصالهم بالإنترنت.
التدريب العملي على البوابات: التنقل السلس على الويب
تساعد واجهة برمجة تطبيقات المدخلات المقترحة حديثًا في إبقاء الواجهة الأمامية بسيطة مع السماح بالتنقل السلس من خلال الانتقالات المخصصة. يمكنك في هذه المقالة الحصول على تجربة عملية باستخدام البوابات لتحسين تجربة المستخدم على موقعك الإلكتروني.
تصغير حمولات الشبكة وضغطها باستخدام brotli
في هذا الدرس التطبيقي حول الترميز، يمكنك التعرّف على طريقة استخدام ضغط Brotli لتقليل نسب الضغط وحجم تطبيقك الكلي.
web.dev في مؤتمر I/O لعام 2019
بالنسبة إلى مؤتمر Google I/O لعام 2019، شحن أعضاء فريق web.dev عددًا من التعديلات التي تضمّنت تصميمًا جديدًا ومزيدًا من مستندات Lighthouse ومدوّنة جديدة.
كيف يمكن قياس السرعة؟
الأداء في العالم الحقيقي متغير للغاية بسبب الاختلافات في أجهزة المستخدمين واتصالات الشبكة وغيرها من العوامل. في هذه المشاركة، نستكشف الأدوات التي يمكن أن تساعدك في جمع بيانات المختبر أو البيانات الميدانية لتقييم أداء الصفحة.
ما هي السرعة؟
للسرعة أهمية كبيرة، ولكن ما الذي نعنيه بها بالضبط؟ ما معنى أن يكون الموقع الإلكتروني سريعًا؟
كيف تبقى سريعًا؟
غالبًا ما تجد العلامات التجارية التي تحسِّن السرعة تتراجع بسرعة. في هذه المشاركة، نستكشف كيفية ضمان تسريع تجربة استخدامك.
تقسيم الرمز باستخدام React.lazy وSuspense
تسهِّل طريقة React.lazy تقسيم تطبيق React على مستوى المكوِّن باستخدام عمليات الاستيراد الديناميكية. استخدِم هذه السمة مع قسم "التشويق" لعرض حالات التحميل المناسبة للمستخدمين.
تدقيق تسهيل الاستخدام باستخدام react-axe وeslint-plugin-jsx-a11y
Interact-axe هي مكتبة تراجع تطبيق React وتسجّل أي مشاكل متعلقة بإمكانية الوصول إلى وحدة تحكم Chrome DevTools. eslint-extension-jsx-a11y هو مكوّن إضافي لـ ESLint يحدد ويفرض عددًا من قواعد إمكانية الوصول مباشرةً في JavaScript. يمكن أن يوفر استخدامها معًا نهج تدقيق شامل للعثور على أي مخاوف لإمكانية الوصول في تطبيقك وإصلاحها.
إنشاء قائمة افتراضية للقوائم الكبيرة باستخدام نافذة التفاعل
React-window هي مكتبة تتيح عرض القوائم الكبيرة بكفاءة.
ميزة "التخزين المؤقت" في "إنشاء تطبيق React باستخدام Workbox"
تم دمج Workbox في Create React App (إنشاء تطبيق React) من خلال إعدادات تلقائية تخزِّن مؤقتًا جميع مواد العرض الثابتة في تطبيقك مع كل إصدار.
أضِف بيان تطبيق ويب باستخدام ميزة "إنشاء تطبيق React".
يتضمن إنشاء تطبيق React بيان تطبيق الويب تلقائيًا. سيتيح لك تعديل هذا الملف تغيير كيفية عرض التطبيق عند تثبيته على جهاز المستخدم.
البدء: تحسين تطبيق React
React هي مكتبة مفتوحة المصدر تسهّل عملية إنشاء واجهات المستخدم. سيغطي هذا المسار التعليمي واجهات برمجة التطبيقات والأدوات المختلفة ضمن المنظومة المتكاملة التي يجب أن تفكر في استخدامها لتحسين أداء تطبيقك وسهولة استخدامه.
عرض المسارات مسبقًا باستخدام ميزة "تفاعل الانطباق"
تكون ردود الفعل هي مكتبة تابعة لجهة خارجية تعرض صفحات موقعك الإلكتروني مسبقًا في ملفات HTML ثابتة. يمكن أن يؤدي ذلك إلى تحسين أوقات عرض أوّل محتوى في تطبيقك.
درس تطبيقي حول الترميز: تحميل مواد العرض المهمة مسبقًا لتحسين سرعة التحميل
في هذا الدرس التطبيقي حول الترميز، يمكنك التعرّف على كيفية تحسين أداء صفحة من خلال التحميل المُسبق للموارد والجلب المُسبَق.
يفضل الحركة الأقل: في بعض الأحيان تكون الحركة الأقل أكثر
يكشف الاستعلام عن الوسائط المفضلة مع تقليل الحركة ما إذا كان المستخدم قد طلب من النظام تقليل مقدار الرسوم المتحركة أو الحركة التي يستخدمها. هذا للمستخدمين الذين يحتاجون أو يفضلون الرسوم المتحركة المصغرة؛ على سبيل المثال، غالبًا ما يفضل الأشخاص الذين يعانون من اضطرابات في الدهزل الحد الأدنى من الرسوم المتحركة.
تأجيل محتوى CSS غير المهم
تعرَّف على كيفية تأجيل عرض صفحات CSS غير المهمة بهدف تحسين مسار العرض الحرج وتحسين سرعة عرض أول محتوى مرئي (FCP).
الثقة جيدة، والملاحظة أفضل: الإصدار 2 من أداة مراقبة تقاطع
يضيف الإصدار 2 من أداة مراقبة التقاطعات إمكانية مراقبة التقاطعات في حد ذاتها، ولكن أيضًا لاكتشاف ما إذا كان العنصر المتقاطع مرئيًا وقت التقاطع.
أساسيات تصميم الويب سريع الاستجابة
إنشاء مواقع إلكترونية تفي باحتياجات وإمكانات الجهاز الذي يتم عرضها عليه
أوراق أنماط قابلة للبناء
توفر أوراق الأنماط القابلة للإنشاء طريقة سلسة لإنشاء الأنماط وتوزيعها على المستندات أو جذور الظل دون القلق بشأن FOUC.
العرض على الويب
اقتراحات لتنفيذ المنطق والعرض في التطبيقات
استخدام الحزمة مع Travis CI
حدِّد الميزانيات المستندة إلى الأداء من خلال الحد الأدنى من الإعداد، ونفِّذها كجزء من سير عمل التطوير باستخدام حجم الحزمة مع Travis CI.
دمج ميزانيات الأداء في عملية الإنشاء
أفضل طريقة لمراقبة ميزانية الأداء هي برمجة الميزانية. تعرّف على كيفية اختيار الأداة التي تناسب احتياجاتك والإعداد الحالي على أفضل وجه.
ضبط ميزانيات للأداء باستخدام حزمة الويب
تعرَّف على كيفية تحديد ميزانيات الأداء والتحكّم في حجم الحزمة باستخدام Webpack.
استخدام برنامج تتبُّع Lighthouse لضبط ميزانية للأداء
لقد بذلت جهدًا كبيرًا لزيادة سرعة موقعك الإلكتروني، ولكن يمكنك الآن اختبار الأداء آليًا في Travis CI باستخدام برنامج Lighthouse Bot.
Emscripten وnpm
كيف تدمج WebAssembly في هذا الإعداد؟ في هذه المقالة، سنتناول ذلك مع C/C++ وEmscripten كمثال.
هل تم تثبيت تطبيقك؟ ستخبرك إحدى هذه الأدوات الخطوات التالية: getثبِّتمنتجات ذات صلة() .
تُمثِّل واجهة برمجة التطبيقات getReportsConnectedApps() واجهة برمجة تطبيقات للنظام الأساسي للويب تسمح لك بالتحقق مما إذا كان تطبيق iOS/Android/سطح المكتب أو تطبيق PWA مثبّتًا على جهاز المستخدم.
عرض الرمز الحديث في المتصفِّحات الحديثة لتحميل الصفحات بشكلٍ أسرع
في هذا الدرس التطبيقي حول الترميز، تعلّم كيفية تحسين أداء تطبيق من خلال تقليل عدد الرموز التي يتم ترجمتها.
التكيّف مع المستخدمين من خلال تلميحات العملاء
تلميحات العميل هي مجموعة من عناوين طلبات HTTP التي يمكننا استخدامها لتغيير كيفية تسليم موارد الصفحة بناءً على خصائص جهاز المستخدم واتصال الشبكة. ستطّلع في هذه المقالة على كل ما يخص تلميحات العملاء وآلية عملها وبعض الأفكار عن كيفية الاستفادة منها لزيادة سرعة موقعك الإلكتروني للمستخدمين.
التركيز على النمط
يحدد مؤشر التركيز (غالبًا ما تشير إليه "حلقة التركيز") العنصر محل التركيز حاليًا. بالنسبة للمستخدمين الذين لا يستطيعون استخدام الماوس، يعد هذا المؤشر مهمًا للغاية، حيث إنه يعمل كمرجع لمؤشر الماوس.
استخدام HTML الدلالي للاستفادة من ميزات لوحة المفاتيح بسهولة
باستخدام عناصر HTML الدلالية الصحيحة، قد تتمكّن من تلبية معظم احتياجاتك أو جميعها المتعلّقة بالوصول إلى لوحة المفاتيح. وهذا يعني تقليل الوقت الذي تقضيه في تعديل علامة tabindex، وزيادة عدد المستخدمين الراضين.
أساسيات الوصول إلى لوحة المفاتيح
يعتمد العديد من المستخدمين المختلفين على لوحة المفاتيح للتنقل بين التطبيقات - بدءًا من المستخدمين الذين يعانون من إعاقات حركية مؤقتة ودائمة وحتى المستخدمين الذين يستخدمون اختصارات لوحة المفاتيح ليكونوا أكثر كفاءة وإنتاجية. يخلق وجود استراتيجية تنقُّل جيدة باستخدام لوحة المفاتيح لتطبيقك تجربة أفضل للجميع.
ما المقصود بإمكانية الوصول؟
الموقع الإلكتروني الذي يمكن الوصول إليه هو الموقع الذي يمكن الوصول إلى محتواه بغض النظر عن أي عجز لدى المستخدم، ويمكن أيضًا تشغيل وظائفه من قِبل مجموعة كبيرة من المستخدمين الأكثر تنوعًا.
العناوين والمعالم
باستخدام العناصر الصحيحة للعناوين والمعالم، يمكنك تحسين تجربة التنقل بشكل كبير لمستخدمي التكنولوجيا السلبية.
الدلالات وقارئات الشاشة
هل توقفت يومًا عن التساؤل عن كيف تعرف التكنولوجيا المساعدة، مثل قارئ الشاشة، ما تعلن عنه للمستخدمين؟ الإجابة هي أنّ هذه التقنيات تعتمد على المطوّرين في ترميز صفحاتهم باستخدام ترميز HTML الدلالي. ولكن ما الدلالات، وكيف تستخدمها برامج قراءة الشاشة؟
التصنيفات وبدائل النصوص
لكي يتمكن قارئ الشاشة من تقديم واجهة مستخدم منطوقة للمستخدم، يجب أن تحتوي العناصر المفيدة على تسميات أو بدائل نصية مناسبة. تعطي التسمية أو بديل النص العنصر اسمًا يسهل الوصول إليه، وهي إحدى الخصائص الرئيسية للتعبير عن دلالات العنصر في شجرة تسهيل الاستخدام.
التحكم في التركيز باستخدام Tabindex
تحتوي عناصر HTML العادية على ميزة إمكانية الوصول إلى لوحة المفاتيح. عند إنشاء مكونات تفاعلية مخصصة، استخدم tabindex للتأكد من إمكانية الوصول إليها باستخدام لوحة المفاتيح.
إزالة الرموز غير المستخدَمة
تحليل حزمة JavaScript لرصد الرموز غير المستخدَمة وإزالتها
تقليل حمولات JavaScript من خلال تقسيم الرمز
إنّ إرسال حمولات كبيرة من JavaScript يؤثر في سرعة موقعك الإلكتروني بشكل كبير. بدلاً من شحن جميع ملفات JavaScript إلى المستخدم فور تحميل الصفحة الأولى من تطبيقك، يمكنك تقسيم الحزمة إلى أجزاء متعدّدة وإرسال العناصر الضرورية فقط في البداية.
ما هي الهجمات الأمنية؟
قد يعرِّض التطبيق غير الآمن المستخدمين والأنظمة لأنواع مختلفة من الأضرار. عندما يستخدم طرف ضار ثغرات أمنية أو نقصًا في ميزات الأمان لصالحه لإحداث ضرر، فإن ذلك يسمى هجوم. سنلقي نظرة على الأنواع المختلفة من الهجمات في هذا الدليل حتى تعرف ما يجب البحث عنه عند تأمين تطبيقك.
استبدال ملفات GIF بفيديو
في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية تحسين الأداء من خلال استبدال صورة GIF متحركة بفيديو.
تقليل حمولات JavaScript من خلال تقسيم الرمز
في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية تحسين أداء تطبيق بسيط من خلال تقسيم الرمز.
كيفية قياس تحسين محركات البحث باستخدام Lighthouse
يفحص نظام "التدقيق في تحسين محركات البحث من خلال أداة Lighthouse" صفحتك ويختبر العناصر التي تهم محرّكات البحث ويمنحك نتيجة تتيح لك الاطّلاع على جوانب محدّدة تحتاج إلى التحسين. إنّ عملية تحسين محركات البحث مهمة لأنها الطريقة التي تجعل المزيد من المستخدمين المهتمين بالاطّلاع على المحتوى الذي تقدّمه.
استخدام صور WebP
تكون صور WebP أصغر من صورها بتنسيقَي JPEG وPNG، عادةً ما يكون حجم الملف أقل بنسبة تتراوح بين 25 و35%. ويؤدي ذلك إلى تقليل أحجام الصفحات وتحسين الأداء.
جعله قابلاً للتثبيت
في هذا الدرس التطبيقي حول الترميز، اطّلِع على كيفية جعل موقع إلكتروني قابلاً للتثبيت باستخدام حدث beforeinstallprompt.
آلية عمل البحث
محركات البحث هي النسخة الرقمية من أمين المكتبة. ويستخدم فهرسًا شاملاً للمساعدة في العثور على المعلومات الصحيحة لاستعلام ما. من خلال فهم أساسيات البحث، يمكنك تسهيل اكتشاف المحتوى الذي تقدّمه للمستخدمين.
الاتجاه الفني
في هذا الدرس التطبيقي حول الترميز، تعلّم كيفية تحميل صور مختلفة تمامًا بناءً على حجم شاشة الجهاز.
تحديد عرض عدة فتحات
في هذا الدرس التطبيقي حول الترميز، تعرف على كيفية استخدام سمة الأحجام لضبط حجم الصور بشكل صحيح بناءً على إطار العرض للمستخدم.
تحديد الموارد التي تم تحميلها من الشبكة
ولوضع استراتيجيات التخزين المؤقت المناسبة لتطبيق الويب، عليك التعامل مع البيانات التي يتم تحميلها تحديدًا. عند إنشاء تطبيق ويب موثوق به، يمكن أن تتعرض الشبكة لجميع أنواع القوى المظلمة. يجب عليك فهم الثغرات الأمنية في الشبكة إذا كنت تأمل في التعامل معها في تطبيقك.
إطار العمل: مجموعة أدوات مشغّلي الخدمات عالية المستوى
Workbox هي مجموعة أدوات عالية المستوى لمشغّلي الخدمات تم إنشاؤها فوق "واجهات برمجة التطبيقات (API)" التي تخص "مشغّل الخدمات" و"مساحة التخزين في ذاكرة التخزين المؤقت". وتوفّر هذه الخدمة مجموعة من المكتبات الجاهزة للإنتاج لإضافة إتاحة استخدام تطبيقات الويب بلا اتصال بالإنترنت.
عرض الصور بالأبعاد الصحيحة
في هذا الدرس التطبيقي حول الترميز، تعرّف على كيفية عرض الصور بالأبعاد الصحيحة لتحسين أداء الشبكة.
استكشاف لوحة شبكة "أدوات مطوري البرامج"
في هذا الدرس التطبيقي حول الترميز، تعرَّف على طريقة تفسير حركة بيانات الشبكة باستخدام "أدوات مطوري البرامج" في Chrome.
استكشاف فرص تحسين الأداء باستخدام Lighthouse
Lighthouse هي أداة تساعدك على قياس أداء الصفحات والعثور على طرق لتحسين أداء هذه الصفحات. تقدّم لك أداة Lighthouse تقريرًا عن أداء الصفحة. ويقدّم التقرير نتيجة لكل مقياس وقائمة بالفرص التي ستؤدي في حال تنفيذها إلى زيادة سرعة تحميل الصفحة.
تجنب وميض النص غير المرئي
في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية عرض النص على الفور باستخدام Font Face Monitorer.
ميزانيات الأداء 101
الأداء الجيد نادرًا ما يكون له تأثير جانبي. تعرَّف على الميزانيات القائمة على الأداء، وكيف يمكنها وضعك على المسار الصحيح لتحقيق النجاح.
ميزانية الأداء الأولى
تأكّد من أنّه يتم تحميل موقعك بسرعة أكبر من خلال الاستعانة بدليل مفصّل حول تحديد الحدود الدنيا لمقاييس الأداء المهمة لموقعك الإلكتروني.
العمل مع عاملي الخدمة
تعرَّف في هذا الدرس التطبيقي حول الترميز على طريقة جعل تطبيق موثوقًا به من خلال تسجيل مشغّل الخدمات.
استبدل ملفات GIF المتحركة بالفيديو لتحميل الصفحات بشكل أسرع
هل سبق لك أن رأيت ملف GIF متحرّكًا على خدمة مثل Imgur أو Gfycat واطّلع عليه في أدوات مطوّري البرامج وتبيّن أنّ ملف GIF عبارة عن فيديو في الواقع؟ هناك سبب وجيه لذلك. قد تكون ملفات GIF المتحركة هائلة جدًا. من خلال تحويل ملفات GIF الكبيرة إلى فيديوهات، يمكنك توفير كبير في معدل نقل البيانات للمستخدمين.
مشاركة الموارد المتعدّدة المصادر (CORS)
تحظر سياسة المصدر نفسه في المتصفِّح قراءة مورد من مصدر مختلف لأغراض الأمان. يتيح تفعيل CORS للخادم إمكانية إعلام المتصفّح بأنّه يمكنه استخدام مصدر إضافي.
وضع حماية المتصفّح
للحماية من الهجمات، يحتاج مطوّر البرامج إلى تقليل الثغرات الأمنية وإضافة ميزات الأمان إلى التطبيق. لحسن الحظ، يوفر المتصفح على الويب العديد من ميزات الأمان، بما في ذلك فكرة استخدام "وضع الحماية".