تعرَّف على لوحة بيانات Web Platform Dashboard وكيفية إجراء طلب بحث في واجهة برمجة التطبيقات HTTP API للحصول على بيانات عن الميزات التي وصلت إلى Baseline من أجل إنشاء أدوات لسير عمل التطوير.

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

اطّلِع على الأحداث المختلفة التي حدثت في Baseline خلال شباط (فبراير) 2025.

أصبحت سمة ruby-align الآن جزءًا من Baseline

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

تعرّف على معلومات حول تلميح الموارد rel=prefetch وكيفية استخدامه.

تعرَّف على طريقة تحديد متغيّرات التصميم وإصلاحها.

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

تم طرح scrollbar-color وscrollbar-gutter في CSS في جميع محركات المتصفّحات الرئيسية، ما يجعلهما متوفّرَين في Baseline حديثًا.

في طبعته الأولى، يتناول الملخّص الشهري لبرنامج Baseline الأحداث التي حدثت في Baseline في كلّ من Google ومجتمع مطوّري الويب في كانون الثاني (يناير) 2025.

تمّ الآن طرح ميزتَي WebAssembly Garbage Collection وWasm tail call optimizations في جميع محرّكات المتصفّحات الرئيسية، ما يجعلهما متوفّرتين في Baseline حديثًا.

تقدّم هذه المشاركة مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" (LCP) وتوضّح كيفية قياسه.

أصبحت دالة Promise.try متوفّرة الآن في جميع محرّكات المتصفّحات الرئيسية، ما يجعلها متاحة في Baseline.

وصف موجز

تاريخ النشر: 13 كانون الثاني (يناير) 2024 هناك العديد من المشاريع الرائعة التي يمكنك إنشاؤها باستخدام الذكاء الاصطناعي، باستخدام نماذج التعلم الآلي الكلاسيكية والنماذج اللغوية الكبيرة الأحدث. باستخدام النماذج اللغوية الكبيرة، يمكن للأجهزة إنشاء محتوى

تاريخ النشر: 13 كانون الثاني (يناير) 2024 هذه هي المقالة الأولى في سلسلة من ثلاث مقالات عن النماذج اللغوية الكبيرة ومحادثات الدردشة. سبق أن تم نشر الجزء 2 حول إنشاء chatbot باستخدام WebLLM والجزء 3 حول استخدام Prompt API. أصبحت النماذج اللغوية

لقد أخبرتك "عدم حظر سلسلة التعليمات الرئيسية" و"تقسيم المهام الطويلة"، ولكن ماذا يعني تنفيذ هذه الإجراءات؟

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

مجموعة بيانات ميزات الويب ولوحة بيانات حالة منصّة الويب والتطبيق المصغّر لحالة الأساس وغير ذلك اطّلِع على "البيانات الأساسية" لعام 2024.

توضّح هذه المشاركة طريقة "التحميل الكسول" والخيارات المتاحة لك لتفعيل هذه الطريقة في الفيديو.

يوفر التحميل المُسبق للوحدات طريقة لتحميل وحدات JavaScript بشكل تلقائي.

لتحسين تجربة المستخدم، من الضروري فهم كيفية تفاعل المستخدمين مع نماذجك. تلعب ميزة الملء التلقائي في المتصفّح دورًا مهمًا في هذه العملية. تعرَّف على كيفية جمع البيانات وتحليلها حول كيفية استخدام المستخدِمين ميزة الملء التلقائي في نماذجك.

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

توضّح هذه المشاركة مقياس "إجمالي وقت الحظر" (TBT) وتشرح كيفية قياسه.

تعرَّف على كيفية قياس "مؤشرات أداء الويب" لموقعك الإلكتروني في كلّ من البيئات الواقعية والمختبرية.

مجموعة من أفضل الممارسات التي حدّدها Chrome على أنّها أكبر الفرص لتحسين أداء الويب وتحسين "مؤشرات أداء الويب الأساسية"

دليل مفصّل حول كيفية تقسيم سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) وتحديد الجوانب الرئيسية التي يجب تحسينها.

مقاييس أساسية لإنشاء موقع إلكتروني سليم

أصبحت سمة CSS content-visibility متاحة الآن في "المستوى الأساسي".

الأبحاث والمنهجية المتّبعة في حدود "مؤشرات أداء الويب الأساسية"

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

تشرح هذه المقالة قصة انطلاق مشروع Baseline ومشاركة Google وملكية مجموعة WebDX Community Group.

تعرَّف على كيفية تحسين صفحاتك لإتاحة عمليات التحميل الفورية باستخدام زرَّي الرجوع وإعادة التوجيه في المتصفِّح.

تحسينات على ميزة "تداخل CSS"

تعرَّف على كيفية نَسْب بيانات أدائك بمعلومات تصحيح الأخطاء لمساعدتك في تحديد مشاكل المستخدِم الفعلي في الإحصاءات وحلّها.

تتناول هذه المشاركة مقياس "مهلة الاستجابة لأوّل إدخال" (FID) وتشرح كيفية قياسه.

ما هو تأثير السمة @property في أداء خدمة CSS؟

تعرَّف على كيفية استخدام أدوات Google للمساعدة في ربط "مؤشرات أداء الويب الأساسية" بالأرباح من الإعلانات.

هناك العديد من الخيارات المختلفة لتخزين البيانات في المتصفح. أيهما أفضل لاحتياجاتك؟

تتناول هذه المشاركة سمة التحميل وكيفية استخدامها للتحكم في تحميل إطارات iframe.

اطّلِع على الطرق المقترَحة وغير المقترَحة لإنشاء تطبيقات ويب تقدّمية (PWA) متعددة مع إعادة استخدام النطاق نفسه مع إبراز الإيجابيات والسلبيات.

برنامج تعليمي تفاعلي خطوة بخطوة يوضح لك كيفية إنشاء خادم يدير اشتراكات الإشعارات الفورية ويرسل طلبات بروتوكول الدفع على الويب إلى خدمة إرسال البيانات.

معايير قابلية تثبيت تطبيق الويب التقدّمي

ما يلزم تغيير الرموز والاختصارات والألوان والبيانات الوصفية الأخرى في بيان تطبيق الويب لتطبيق PWA.

ما الذي يجعل تطبيق ويب تقدّمي جيدًا أو رائعًا؟

بيان تطبيق الويب هو ملف JSON بسيط يوضح للمتصفح كيف يجب أن يعمل تطبيق الويب.

تعرَّف على كيفية نشر سياسة أمان محتوى (CSP) استنادًا إلى الأرقام الخاصة بالنص البرمجي أو علامات التجزئة كإجراء دفاعي ضد البرمجة النصية على مستوى المواقع الإلكترونية.

تساعد هذه المقالة مطوّري برامج الويب في اختيار واجهة برمجة تطبيقات الأجهزة المناسبة بناءً على جهاز معيّن.

تعرَّف على كيفية استخدام "طلبات المصدر ذات الصلة" للسماح بإعادة استخدام مفاتيح المرور في جميع مواقعك الإلكترونية.

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

تتناول هذه المشاركة سمة التحميل وكيفية استخدامها للتحكّم في تحميل الصور.

تتيح لك المقاييس المخصَّصة قياس وتحسين جوانب تجربة موقعك الإلكتروني التي يتفرّد بها موقعك الإلكتروني.

تعرَّف على كيفية إرسال بيانات "مؤشرات الأداء الرئيسية للويب" إلى مواقع "إحصاءات Google‏ 4" وتصدير البيانات للتحليل في BigQuery وLooker Studio.

يوضِّح هذا الدليل أفضل الممارسات التي يجب اتّباعها للمواقع الإلكترونية عند طلب الإذن بالوصول إلى الإمكانات الحساسة (مثل الكاميرا والميكروفون والموقع الجغرافي) للحدّ من الطلبات غير الضرورية وحظر الوصول.

تعرَّف على كيفية تأثير إشعارات ملفات تعريف الارتباط في الأداء وقياس الأداء وتجربة المستخدم.

يمكن لمطوّري الويب تخصيص إشعارات الوسائط والردّ على الأحداث ذات الصلة بالوسائط مثل تقديم طلب أو تتبُّع التغييرات باستخدام واجهة برمجة التطبيقات Media Session API.

استخدم سمة tabindex لتعيين موضع علامة تبويب عنصر ما بشكل صريح.

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

تقدّم هذه المشاركة تعريفًا بمقياس "وقت وصول أول بايت" (TTFB) وتشرح كيفية قياسه.

تعرَّف على كيفية تعديل طلباتك لتحقيق النتائج المفضّلة لديك على مستوى النماذج اللغوية الكبيرة والنماذج وأحجام النماذج المختلفة.

تقدم هذه المشاركة مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) وتشرح كيفية عمله وكيفية قياسه وتقدم اقتراحات حول كيفية تحسينه.

الوصف: حدد الألوان التي تتفاعل مع نظام الألوان المستخدم باستخدام الدالة light-dark().

في هذا الدليل الموجّه لمطوّري الويب الذين يريدون الاستفادة من WebAssembly، ستتعلم كيفية الاستفادة من Wasm لمساعدتهم في تنفيذ مهام تستهلك قدرًا كبيرًا من وحدة المعالجة المركزية (CPU) من خلال الاستعانة بمثال على التنفيذ.

في شبكة CSS، تسمح لك خاصية `grid-template-columns` و `grid-template-rows` بتحديد أسماء الأسطر وتتبع حجم أعمدة وصفوف الشبكة، على التوالي. يتيح دعم الاستيفاء لهذه الخصائص لتخطيطات الشبكة الانتقال بسلاسة بين الحالات، بدلاً من الانطباق في نقطة منتصف الرسوم المتحركة أو الانتقال.

تعرَّف على كيفية التحكّم في ألعاب الويب باستخدام واجهة برمجة التطبيقات Gamepad.

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

يمكن للجهات المعتمدة تحديد مصدر مفتاح المرور من خلال فحص AAGUID. يمكنك الاطّلاع على آلية عملها.

باستخدام مثال لغة لعبة اصطناعية يسمّى ExampleScript، يمكنك معرفة كيفية كتابة وحدات WebAssembly وتحسينها في JavaScript باستخدام واجهة برمجة التطبيقات Binaryen.js.

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

يتيح لك مكوّن الويب إمكانية استخدام التصاميم الثلاثية الأبعاد على صفحة الويب بشكل بياني.

التعرّف على كيفية استخدام "userverification" في WebAuthn

تعرَّف على الأسباب التي قد تؤدي إلى عرض أرقام مختلفة من "مؤشرات أداء الويب الأساسية" عن CrUX في بيانات RUM.

من المهم إنشاء مواقع شاملة ومتاحة للجميع. هناك ستة مجالات رئيسية على الأقل من حالات العجز التي يمكننا تحسينها: البصر والسمع والحركة والإدراك والكلام والعصبي.

توفِّر النصوص البرمجية التابعة لجهات خارجية مجموعة كبيرة من الميزات المفيدة، ما يجعل الويب أكثر ديناميكية. تعرَّف على كيفية تحسين تحميل النصوص البرمجية التابعة لجهات خارجية لتقليل تأثيرها في الأداء.

تعرَّف على كيفية منع إنشاء مفتاح مرور جديد في حال توفُّر مفتاح مرور في مدير كلمات المرور لدى المستخدم.

دليل لأساسيات قاعدة البيانات المفهرسة

CSS متميّزة وفعّالة وثابتة يمكنك استخدامها اليوم.

تعرّف على كيفية تحسين مقياس "وقت وصول أول بايت".

ما الفرق بين المضيف والموقع الإلكتروني والأصل؟ ما هو نطاق المستوى الأعلى (eTLD)+1؟ تشرح هذه المقالة ما يلي:

تعرَّف على بيانات الاعتماد القابلة للاكتشاف وكيفية إنشاء تجارب مستخدم تناسب حالة استخدامك.

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

يرسل لك "ResizeMonitorer" إشعارًا عند تغيير حجم مستطيل محتوى أحد العناصر بحيث يمكنك التفاعل وفقًا لذلك.

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

يشرح هذا المستند كيفية استخدام واجهة برمجة التطبيقات OffscreenCanvas API لتحسين الأداء عند عرض الرسومات في تطبيق الويب.

تقدّم هذه المشاركة مقياس "سرعة عرض المحتوى على الصفحة" (FCP) وتوضّح كيفية قياسه.

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

إرشادات عملية للمطوّر حول الإجراءات التي يجب اتّخاذها عندما يسجّل المستخدم الخروج من الموقع الإلكتروني

تقدّم هذه المشاركة تعريفًا بمقياس "وقت التفاعل" (TTI) وتوضّح كيفية قياسه.

تشير Fetch Priority API إلى الأولوية النسبية للموارد إلى المتصفِّح. وقد يؤدّي ذلك إلى توفير أفضل طريقة لتحميل البيانات وتحسين "مؤشرات أداء الويب الأساسية".

لمحة عن الفئات الزائفة من نوع :user-صالحة و :غير صالحة للمستخدم وكيفية استخدامها لتحسين تجربة المستخدم في التحقق من صحة الإدخال.

تعرَّف على الطريقة التي يمكن بها لصانعي القرار في مجال الأنشطة التجارية وغير المطوّرين تحسين "مؤشرات أداء الويب الأساسية".

فهم المشاكل الشائعة وتجنُّبها عند تطبيق ترميز Base64 وفك الترميز على السلاسل

تتيح Subgrid إمكانية مشاركة الشبكة، مما يسمح للشبكات المتداخلة بالمواءمة مع الأسلاف والأشقاء.

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

تعرف على معنى تغطية التعليمة البرمجية واكتشف أربع طرق شائعة لقياسها.

عليك تحديد العناصر التي تحتاج إلى اختبارها والعناصر التي يمكنك استبعادها.

تحديد ما تريد اختباره وتحديد حالات الاختبار وتحديد الأولويات.

تُعد مقاييس الأداء التي تركز على المستخدم أداة مهمة لفهم وتحسين تجربة موقعك على الويب بطريقة تفيد المستخدمين الحقيقيين.

تعرَّف على الإمكانيات الجديدة والمثيرة للتحميل المُسبَق للصور المتجاوبة مع مختلف الأجهزة لضمان تجربة رائعة للمستخدم.

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

تعرّف على كيفية دمج أنواع الاختبارات المختلفة في استراتيجية معقولة تناسب مشروعك.

لنبدأ بالأساسيات استكشاف وضعي الاختبار العامين والأنواع الثلاثة الشائعة من أتمتة الاختبار.

يجب عليك تدقيق مواردك بشكل دوري للتأكد من أن كل مورد يساعد في تقديم تجربة مستخدم أفضل.

مقدمة عن WebAssembly (يُختصر أحيانًا Wasm)، وهو تنسيق الرمز الثنائي المتنقل وتنسيق النص المقابل للبرامج القابلة للتنفيذ بالإضافة إلى واجهات البرامج لتيسير التفاعل بين هذه البرامج والبيئة المضيفة لها.

يقرأ برنامج mkbitmap C صورة ويطبق عليها واحدة أو أكثر من العمليات التالية، بهذا الترتيب: العكس، وفلترة المسار العالي، والتحجيم، ووضع حدود. يمكن التحكم في كل عملية بشكل فردي وتفعيلها أو إيقافها. توضح هذه المقالة كيفية تجميع ملفات mkbitmap في WebAssembly.

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

كيفية عرض المحتوى الذي يتحكم فيه المستخدم بشكل آمن في تطبيقات الويب

نظرة عامة على كيفية استخدام AVIF في المنظومة المتكاملة، وما نوع الأداء والجودة التي يمكن أن يتوقّعها المطوّرون من AVIF للصور الثابتة والصور المتحركة

تعرَّف على كيفية تحسين مدى استجابة موقعك الإلكتروني لسرعة عرض المحتوى على الصفحة.

لنتعرّف على بعض الميزات التي يوفّرها تطبيق Baseline.

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

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

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

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

تقدّم هذه المشاركة مقياس "متغيّرات التصميم التراكمية" (CLS) وتشرح كيفية قياسه.

إصدار WordPress الكامل المدعوم بـ PHP الذي يتم تشغيله فقط في المتصفح باستخدام WebAssembly

عرض للأدوات المتاحة الآن على الويب بفضل WebAssembly.

يمكنك تحسين تجربة تصحيح أخطاء الويب باستخدام خرائط المصدر.

يمكن إرسال تطبيقات الويب التقدّمية إلى متاجر التطبيقات، مثل "متجر Play" على أجهزة Android أو متجر Microsoft وغير ذلك.

CSS متميّزة وفعّالة وثابتة يمكنك استخدامها اليوم.

احسب جيب الزاوية وجيب التمام وظل الزاوية والمزيد في CSS.

تتيح طريقة requestVideoFrameCallback() لمؤلفي الويب تسجيل استدعاء يتم تشغيله في خطوات العرض عند إرسال إطار فيديو جديد إلى المؤلف.

واحدة من سلسلة من المقابلات مع أعضاء برنامج خبراء Google Developers (GDE).

لننشئ تأثير النص المتدرّج المتحرّك باستخدام السمات المخصّصة على مستوى النطاق وbackground-clip. انتقِل إلى CodePen وأنشئ قلمًا جديدًا. أنشئ ترميزًا للنص. لنستخدم عنوانًا يتضمّن كلمة "سريع": بعد ذلك، لنمنح body background-color أغمق: نريد زيادة

تعلن مشاركة المدونة هذه عن مجموعة جديدة من الأنماط لتطبيقات الوسائط.

تعرَّف على طريقة ابتكار الكتب التي يتم التنقّل من خلالها وإتاحة مشاركة نصائح حياتية مرحة ومخيفة في هذا الإصدار من Chrometober.

نظرة عامة أساسية حول كيفية إنشاء عنصر تلميح مخصّص تتكيّفي للألوان ويمكن الوصول إليه.

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

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

نظرة عامة أساسية حول كيفية بناء مكونات FAB قابلة للتكيف مع الألوان وسريعة الاستجابة ويمكن الوصول إليها.

اطّلِع على كيفية تحسين خطوط الويب بما يتوافق مع "مؤشرات أداء الويب الأساسية".

نظرة عامة على ثلاث أدوات وأساليب لاختبار التباين بين الألوان في تصميمك والتأكّد من أنّه سهل الاستخدام

واحدة من سلسلة من المقابلات مع أعضاء برنامج خبراء Google Developers (GDE).

لننشئ أداة تحميل مزوّدة بصور متحركة باستخدام CSS مع خصائص مخصّصة على مستوى النطاق وanimation-timing-function. انتقِل إلى CodePen وأنشئ قلمًا جديدًا. أنشئ علامات لملفّ تحميل البيانات. يُرجى ملاحظة استخدام السمات المخصّصة المضمّنة: يمكنك أيضًا استخدام

توضح هذه الدورة التعليمية كيفية إنشاء تنقل رئيسي يمكن الوصول إليه في موقع ويب. ستتعرَّف على لغة HTML الدلالية وإمكانية الوصول، وكيف يمكن أن يؤدي استخدام سمات ARIA إلى ضرر أكثر من نفعه.

يتيح لك محدِّد CSS الزائف المفيد هذا طريقة لاختيار العناصر المشروطة.

تعرَّف على طرق لإعادة ابتكار الخداع البصري باستخدام CSS.

يمكنك تحسين العلامات وإدارة العلامات في "مؤشرات أداء الويب الأساسية".

نظرة على بعض الطرق المفيدة والمبتكرة لتصميم قائمة.

مزايا استخدام الخصائص المخصصة في أنظمة التصميم ومكتبات المكونات.

تعرّف على كيفية استخدام خصائص CSS الفردية للترجمة والتدوير وتغيير الحجم للتعامل مع عمليات التحويل بطريقة سلسة.

الاطلاع على عدة طرق لتحريك حدود في CSS

تطرح هيئة الإذاعة البريطانية (BBC) آلية HSTS على موقعها الإلكتروني لتحسين مستوى الأمان والأداء. يمكنك الاطّلاع على معنى ذلك وكيف يمكن لآلية HSTS مساعدتك.

اطّلِع على الأسباب التي تجعل الأدوات التي تراقب مقاييس "مؤشرات أداء الويب الأساسية" تُبلغ عن أرقام مختلفة، وكيفية تفسير هذه الاختلافات.

يقدّم GDE إنريك فيرنانديز غيرا شرحًا حول المصدر المفتوح لمؤسسته غير الحكومية HelpDev.

ما أهمية الدعم النهائي لبرنامج Internet Explorer للعملاء والمطوّرين في Maersk.com.

منذ وقت طويل جدًا HTML5Rocks، كان من دواعي سروري التعرف عليك.

تعرَّف على كيفية ضبط ملفات تعريف الارتباط للطرف الأول من أجل ضمان الأمان والتوافق مع جميع المتصفِّحات وتقليل فرص تعطُّل ملفات تعريف الارتباط بعد إيقاف ملفات تعريف الارتباط التابعة لجهات خارجية.

تتيح واجهة برمجة التطبيقات Web Audio API تنفيذ مزامنة الصوت والفيديو بشكل صحيح.

يمكن استخدام التدرجات المخروطية لإنشاء بعض التأثيرات المثيرة للاهتمام، مثل مثال الحدود الجميل هذا. يعرض CodePen الذي أنشأه آدم أرجايل ، والذي تمت مشاركته في الأصل من خلال هذا التغريدة على Twitter، كيفية استخدام تدرّج conic ل إنشاء حدود. استخدم تيري

فهم القرارات المتعلّقة باستخدام مكتبة JavaScript أو إطار عمل JavaScript

رصد الأخطاء عند العمل باستخدام Fetch API

فهم الاختلافات بين أُطر العمل والمكتبات في سياق بيئة JavaScript من جهة العميل

يمكن لهذا المورد مساعدتك في العثور على طريقك سريعًا حول المحطة.

تعديل بشأن واجهة برمجة التطبيقات Google Fonts CSS API—طريقة عملها وكيفية استخدامها وكيفية تقديم خطوط الويب الخاصة بك بكفاءة.

أسقطت GOV.UK تبعية jQuery من الواجهة الأمامية. ولن تخمّن ما حدث أبدًا. (نعم يمكنك ذلك).

نظرة عامة أساسية حول كيفية بناء مكونات متكيفة للألوان وسريعة الاستجابة ويمكن الوصول إليها.

تعرَّف على برنامج فحص التحميل المُسبق في المتصفّح، وكيفية مساعدته في تحسين أدائه، وكيفية تجنُّب ذلك.

تسهيل عملية الإنشاء للإنترنت

كيفية قياس "مؤشرات أداء الويب" باستخدام أداة الإحصاءات الحالية

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

مشاركة دليل عملي للخطوط المتغيرة، مع الكثير من الأمثلة.

هذه الأداة من تصميم جوش وكومو تجعل من السهل للغاية إنشاء تدرّجات ذات مظهر جميل.

مجموعة من الرؤى حول أهم الشكاوى، تم جمعها من عدة محادثات مع مطوّري برامج الويب.

تحقق من حالة أدوات الصور.

تعرف على النطاق وكيف يعمل في JavaScript.

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

تعرَّف على كيفية تصحيح أخطاء تشغيل الوسائط على الويب.

واحدة من سلسلة من المقابلات مع أعضاء برنامج خبراء Google Developers (GDE).

يمكن أن يؤدي تحميل الصور بسرعة ضمن إطار العرض الأولي، مع التحميل الكسول للباقي، إلى تحسين "مؤشرات أداء الويب" مع تحميل عدد أقل من البايتات.

نظرة عامة أساسية حول كيفية بناء شريط تحميل متكيف مع الألوان يمكن الوصول إليه باستخدام العنصر ``.

اجعل نماذج التسجيل وتسجيل الدخول بسيطة قدر الإمكان. حفظ بيانات الاعتماد من نماذج تسجيل الدخول لكي لا يضطر المستخدمون إلى تسجيل الدخول مرة أخرى عند العودة لتخزين بيانات اعتماد المستخدمين من النماذج: قبل المتابعة، تحقَّق مما إذا كان النموذج يتضمّن سمات

التغييرات التي تطرأ على سلسلة وكيل المستخدم، والاستراتيجيات التي يتّبعها كلّ من Chrome وFirefox للحدّ من تأثيرها، والطُرق التي يمكنك من خلالها تقديم المساعدة

نظرة عامة أساسية حول كيفية إنشاء رمز مفضّل تكيُّفي

تعرّف على كيفية عرض رسومات ثنائية الأبعاد إلى لوحة على الويب من WebAssembly باستخدام Emscripten.

قد يؤثر حذف عنوان cache-Control أو إساءة استخدامه في أمان موقعك الإلكتروني وخصوصية المستخدمين. الحصول على اقتراحات للمواقع الإلكترونية العالية القيمة

مقاييس أساسية لإنشاء موقع إلكتروني سليم

تعرَّف على كيفية نقل gPhoto2 إلى WebAssembly للتحكم في الكاميرات الخارجية عبر USB من تطبيق ويب.

يمكنك استخدام تسجيل أخطاء الشبكة (NEL) لجمع أخطاء الشبكة من جهة العميل.

تعرّف على كيفية استخدام أحدث ميزات WebAssembly مع دعم المستخدمين في جميع المتصفحات.

تعرَّف على كيفية نقل الرمز الذي يتفاعل مع الأجهزة الخارجية إلى الويب باستخدام WebAssembly وFugu API.

نظرة عامة أساسية حول طريقة إنشاء مكوِّن لتبديل المظاهر تكيّفي ويسهل الوصول إليه

تعرف على كيفية تضمين رمز JavaScript في مكتبة WebAssembly للاتصال بالعالم الخارجي.

Oculus Quest 2 هي سماعة رأس مزوّدة بتقنية الواقع الافتراضي (VR) تم إنشاؤها من قِبل Oculus، وهو أحد أقسام شركة Meta. يمكن للمطوّرين الآن إنشاء تطبيقات ويب تقدّمية ثنائية وثلاثية الأبعاد (PWA) وتوزيعها للاستفادة من ميزة تعدد المهام في Oculus Quest 2's. توضّح هذه المقالة تجربة الاستخدام وكيفية إنشاء تطبيق الويب التقدّمي (PWA) وتحميله من مصدر غير معروف على Oculus Quest 2.

يمكنك إلقاء نظرة خاطفة على العملية والأدوات المستخدمة لبناء تجربة على نمط تقويم العطلات في Designcember.

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

اضطررت إلى استخدام حلول بديلة ومكتبات لإنشاء نسخة كبيرة من قيمة JavaScript، وذلك لأطول فترة ممكنة. تم تزويد النظام الأساسي الآن بـ `constructClone()`، وهي دالة مدمَجة للنسخ العميق.

نظرة عامة أساسية حول كيفية بناء مكوِّن نخب متكيف يمكن الوصول إليه.

الإعلان عن صندوق واجهة المستخدم من Chrome، والذي تم تصميمه لتقديم مِنح للأشخاص الذين يعملون على أدوات التصميم وCSS وHTML.

نظرة عامة أساسية حول كيفية إنشاء قائمة ألعاب ثلاثية الأبعاد سريعة الاستجابة وتكيّفية ويمكن الوصول إليها

تعرّف على كيفية قياس الرسوم المتحركة وكيفية التفكير في إطارات الصور المتحركة وسلاسة الصفحة بشكل عام.

جرِّب واجهة برمجة تطبيقات Lighthouse الجديدة لقياس الأداء وأفضل الممارسات في مسار المستخدِم.

ملخّص لأهم الإشعارات من مؤتمر Chrome Dev Summit لعام 2021، بالإضافة إلى الروابط التي تلزمك للاطّلاع على مزيد من المعلومات.

تعرَّف على آخر الأخبار في "إحصاءات PageSpeed" لمساعدتك في قياس وتحسين جودة صفحتك والموقع الإلكتروني بشكل أفضل.

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

نظرة عامة أساسية حول كيفية إنشاء مكوِّن متعدد الاختيارات سريع الاستجابة وتكيّفي ويمكن الوصول إليه من أجل ترتيب تجارب المستخدم وفلترتها.

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

تهدف واجهة برمجة التطبيقات Sanitizer API الجديدة إلى إنشاء معالِج قوي يتيح إمكانية إدخال السلاسل العشوائية بأمان في الصفحة. تقدّم هذه المقالة واجهة برمجة التطبيقات وتشرح كيفية استخدامها.

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

الحصول على إجابات عن الأسئلة الشائعة حول مراكز الخدمة العامة و"مؤشرات أداء الويب الأساسية" وخطة Google لمعالجة القيود الحالية على عمليات القياس