AMP

إنشاء صفحات AMP سريعة الاستجابة

مقدمة

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

وسنوضح لك في هذا الدليل طريقة تنفيذ هذه الأسس سريعة الاستجابة في AMP بسهولة:

تعرف على التصميم سريع الاستجابة في AMP في هذا الفيديو.

التحكم في منفذ العرض

[تصفية التنسيقات="مواقع الويب، الإعلانات، القصص"] لتحسين صفحة الويب الخاصة بك بحيث يتسع المحتوى ويتناسب مع نافذة المتصفح لأي جهاز، يلزمك تحديد عنصر منفذ العرض meta. إذ يوجه عنصر منفذ العرض المتصفح نحو طريقة تغيير حجم المنطقة المرئية (منفذ العرض) لصفحة الويب وحجمها.

لكن ما هي القيم التي يجب أن تستخدمها؟ حسنًا، تم توضيح ذلك بالفعل في AMP من أجلك. كجزء من لغة الترميز المطلوبة لصفحات AMP، عليك تحديد منفذ العرض التالي:

<meta name="viewport" content="width=device-width" />

هذه هي إعدادات منفذ العرض النموذجية التي تستخدمها لموقع سريع الاستجابة. على الرغم من أن initial-scale=1 ليس مطلوبًا لصفحة AMP صالحة، إلا أنه يوصى به لأنه يضبط مستوى التكبير/التصغير على 1 عند تحميل الصفحة لأول مرة. [/filter]

[تصفية التنسيقات="البريد الإلكتروني"] هذا القسم صالح فقط لمواقع AMP وإعلاناته وقصصه. [/filter]

إنشاء مخطط سريع الاستجابة

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

قد يكون تغيير حجم كل عنصر ليلائم الشاشة أمرًا صعبًا*. ومع ذلك، يمكنك في AMP جعل العنصر مستجيبًا بسهولة من خلال تحديد السمة "layout=responsive" مع سمتي width وheight للعنصر. وعندما تقوم بتطبيق التخطيط responsive على عنصر ما، فسيتم تغيير حجم هذا العنصر تلقائيًا حسب عرض عنصر الحاوية الخاص به، وسيتغير الارتفاع بناءً على نسبة العرض إلى الارتفاع المحددة بواسطة عرض العنصر وارتفاعه. وتدعم جميع عناصر AMP تقريبًا تخطيط responsive؛ ارجع إلى الوثائق المرجعية للعنصر لمعرفة التخطيطات المدعومة.

على الرغم من أنه يمكنك بسهولة جعل العناصر تستجيب باستخدام "layout=responsive"، فلا يزال عليك التفكير في طريقة ظهور عناصرك على جميع أحجام الشاشات؛ بما في ذلك سطح المكتب والجهاز اللوحي. ويتمثل الخطأ الشائع في السماح للصورة بأخذ العرض الكامل للشاشة، مما يؤدي إلى توسيع الصورة إلى أكثر من الحجم المقصود، مما يتسبب في تجربة سيئة لمستخدمي الشاشة العريضة. وعلى نحو افتراضي، ستأخذ العناصر ذات layout=responsive العرض الكامل لحاوية العنصر، والذي غالبًا ما يكون عرضه غير مقيد (على سبيل المثال، العرض = 100٪). ويمكنك تحسين طريقة ظهور الصور بمجرد تقييد عرض حاوية الصورة. على سبيل المثال، من خلال تعيين قاعدة "max-width" إلى "body" أو "main"، حيث يمكنك تقييد جميع الصور بحد أقصى محدد للعرض.

مثال: تقييد عرض الصور المتجاوبة

في المثال التالي، لدينا صورة زهور (640 × 427 بكسل) نرغب في عرضها على جميع أحجام الشاشات، لذلك حددناwidth وheight، ثم قمنا بتعيين التخطيط إلى responsive.

<div class="resp-img">
  <amp-img
    alt="flowers"
    src="/static/inline-examples/images/flowers.jpg"
    layout="responsive"
    width="640"
    height="427"
  ></amp-img>
</div>
فتح هذه القصاصة في الساحة

ومع ذلك، لا نرغب في أن تتعدى الصورة حجمها المقصود، لذا قمنا بتعيينmax-width إلى الحاوية على 700 بكسل عبر CSS المخصص:

<style amp-custom>
.resp-img {
    max-width: 700px;
  }
</style>

تابع القراءة – لمعرفة المزيد حول التنسيقات المختلفة في AMP، راجع دليل استعلامات التخطيط والوسائط.

ما السبب وراء صعوبة تغيير حجم العناصر لتلائم الشاشة بينما يمكنني القيام بذلك بسهولة باستخدام النمط width=100%؟

يتمثل الجزء الصعب في عرض العناصر سريعة الاستجابة على الصفحة دون التأثير سلبًا على مقاييس الأداء أو تجربة المستخدم. نعم، يمكنك بسهولة الحصول على صور تناسب الشاشة مع "العرض = 100٪" ولكن هناك تدني في مستوى الأداء. ويجب أن يقوم المتصفح بتنزيل الصورة أولًا للحصول على أبعادها، ثم تغيير حجمها بشكل مناسب لحجم الشاشة، وأخيرًا إعادة تدفق الصفحة وإعادة رسمها. أما في AMP، يتم تحسين مسار العرض بحيث يتم تخطيط الصفحة أولًا، مع وضع العناصر النائبة للصور جانبًا بناءً على الأبعاد المتوفرة في amp-img (باستخدام هذه الأرقام لتحديد نسبة العرض إلى الارتفاع)، ثم يتم تنزيل الموارد، ويتم رسم الصفحة. ولا يلزم إعادة التدفق.

Scaling media for the page

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

تضمين مقاطع الفيديو

عند القيام بتضمين مقطع فيديو في صفحة الويب الخاصة لديك، فأنت ترغب في التأكد من أن المستخدم بإمكانه رؤية محتويات الفيديو وعناصر التحكم به (على سبيل المثال، عدم وجود تدفق زائد). وستحقق ذلك عادةً من خلال مجموعة من استعلامات وسائط CSS والحاوية وCSS الأخرى. أما في AMP، تحتاج فقط إلى إضافة عنصر الفيديو إلى صفحتك، وتحديد layout=responsive على العنصر — لا توجد CSS إضافية.

مثال: تضمين فيديو YouTube

في المثال التالي، نرغب في عرض فيديو YouTube مضمن يستجيب لحجم واتجاه شاشة الجهاز. بإضافة "layout=responsive" إلى العنصر amp-youtube، يتم تغيير حجم الفيديو ليناسب النافذة، ويتم الحفاظ على نسبة العرض إلى الارتفاع وفقًا لـ width وheight. المحددين.

<amp-youtube
  data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315"
>
</amp-youtube>
فتح هذه القصاصة في الساحة

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

عرض صور متجاوبة

تشكل الصور جزءًا كبيرًا من صفحة الويب (حوالي 65% من مقدار بايت الصفحة). على الأقل، يجب أن تكون صورك مرئية على أحجام واتجاهات مختلفة للشاشة (على سبيل المثال، لا يتعين على المستخدم التمرير التصغير/التكبير لرؤية الصورة بأكملها). ويتم إجراء ذلك بسهولة في AMP عبر السمة "layout=responsive" (راجع تضمين الصور في AMP ). بالإضافة إلى الصورة المتجاوبة الأساسية، إذ قد ترغب في خدمة موارد صور متعددة من أجل:

عرض صور نقية للحصول على الدقة المناسبة

بالنسبة للشاشات عالية الدقة (على سبيل المثال، شاشة Retina)، يجب توفير صور تبدو نقية وحادة؛ ومع ذلك، لا ترغب في استخدام الصورة نفسها على الأجهزة منخفضة الدقة لأن ذلك سيؤدي إلى وقت تحميل إضافي غير ضروري. أما في صفحات AMP والتي ليست بتنسيق AMP، يمكنك عرض الصورة الصحيحة لكثافة بكسل الشاشة باستخدام srcset مع واصف العرض w ).

ملحوظة – يعمل محدد srcset المستند إلى DPR (x) أيضًا؛ ومع ذلك، ومن أجل مزيد من المرونة؛ نوصي باستخدام محدد w. وقام الواصف w مسبقًا (في اقتراح srcset القديم) بوصف عرض منفذ العرض، لكنه يصف الآن عرض ملف مصدر الصورة، مما يسمح لوكيل المستخدم بحساب كثافة البكسل الفعالة لكل صورة واختيار الصورة المناسبة لعرضها.

مثال: عرض صورة نقية تلائم الشاشة

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

  • لعرض منفذ عرض يصل إلى 400 بكسل، قم بعرض الصورة بنسبة 100٪ من عرض منفذ العرض.
  • لعرض منفذ عرض يصل إلى 900 بكسل، قم بعرض الصورة بنسبة 75% من عرض منفذ العرض.
  • لأي شيء أكبر من 900 بكسل، قم بعرض الصورة عند 600 بكسل على نطاق واسع.
<amp-img
  alt="apple"
  src="/static/inline-examples/images/apple.jpg"
  height="596"
  width="900"
  srcset="/static/inline-examples/images/apple-900.jpg 900w,
            /static/inline-examples/images/apple-800.jpg 800w,
            /static/inline-examples/images/apple-700.jpg 700w,
            /static/inline-examples/images/apple-600.jpg 600w,
            /static/inline-examples/images/apple-500.jpg 500w,
            /static/inline-examples/images/apple-400.jpg 400w"
  sizes="(max-width: 400px) 100vw,
            (max-width: 900px) 75vw, 600px"
>
</amp-img>
فتح هذه القصاصة في الساحة

على سبيل المثال، لنفترض أن لدينا جهازًا يبلغ عرض منفذ العرض الخاص به 412 بكسل وDPR 2.6. وبناءً على الرمز أعلاه، يجب عرض الصورة بنسبة 75٪ من عرض منفذ العرض، لذلك يختار المتصفح صورة قريبة من 803 بكسل (412 * 0.75 * 2.6)، والتي تصادف أن تكون apple-800.jpg.

تابع القراءة – لمزيد من المعلومات حول استخدام srcset والأحجام في AMP، راجع الدليل الاتجاه الفني مع srcset، والأحجام والارتفاعات.

تغيير الاتجاه الفني للصورة

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

مثال: صور مختلفة الحجم لنقاط توقف مختلفة

في المثال التالي، لدينا 3 صور مقصوصة مختلفة لقطط نريد عرضها في نقاط توقف مختلفة. لذا، في حالة ما إذا كان عرض منفذ العرض عبارة عن:

  • 670 بكسل أو أكبر، اعرض cat-large.jpg (650 × 340 بكسل)
  • 470 - 669 بكسل، اعرض cat-medium.jpg (450 x 340 بكسل)
  • 469 بكسل أو أقل، اعرض cat-small.jpg (226 x 340 بكسل)

ملحوظة – نظرًا لأننا أردنا أن تكون الصور ذات أحجام ثابتة (على سبيل المثال، عدم وجود انحرافات)، لم نحدد قيمة مخطط، والتي سيتم تعيينها افتراضيًا إلى layout=fixed لأننا قمنا بتعيين العرض والارتفاع. ولمزيد من المعلومات، راجع "ماذا لو لم يتم تحديد سمة التخطيط؟".

<amp-img
  alt="grey cat"
  media="(min-width: 670px)"
  width="650"
  height="340"
  src="/static/inline-examples/images/cat-large.jpg"
></amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 470px) and (max-width: 669px)"
  width="450"
  height="340"
  src="/static/inline-examples/images/cat-medium.jpg"
></amp-img>
<amp-img
  alt="grey cat"
  media="(max-width: 469px)"
  width="226"
  height="340"
  src="/static/inline-examples/images/cat-small.jpg"
></amp-img>
فتح هذه القصاصة في الساحة

تابع القراءة – لمعرفة المزيد حول الاتجاه الفني في AMP، راجع دليل الاتجاه الفني باستخدام srcset والأحجام والارتفاعات.

توفير تنسيقات محسَّنة

يتطلب تقديم صفحات تحميل سريعة صورًا محسَّنة؛ وذلك من حيث الحجم والجودة والتنسيق. قم دائمًا بتقليل أحجام الملفات إلى أدنى مستوى جودة مقبول. وهناك العديد من الأدوات التي يمكنك استخدامها "لضغط" الصور (على سبيل المثال، ImageAlph أو TinyPNG). أما فيما يتعلق بتنسيقات الصور، توفر بعض تنسيقات الصور قدرات ضغط أفضل من غيرها (على سبيل المثال، WebP وJPEG XR مقابل JPEG). وستحتاج إلى توفير الصورة الأكثر تحسينًا للمستخدم، بالإضافة إلى ضمان دعم الصورة بواسطة متصفح المستخدم (على سبيل المثال، لا تدعم جميع المتصفحات كل تنسيقات الصور).

في HTML، يمكنك تقديم تنسيقات صور مختلفة باستخدام علامة picture. أما في AMP، على الرغم من أن علامة picture غير مدعومة، يمكنك عرض صور مختلفة باستخدام السمة fallback.

تابع القراءة – لمعرفة المزيد حول الاحتياطيات، راجع الدليل العناصر النائبة والاحتياطية.

في AMP، هناك طريقتان للنجاح في عرض الصور المحسَّنة:

  • يمكن للمطورين الذين يستخدمون تنسيقات صور غير مدعومة على نطاق واسع، مثل WebP، تهيئة خادمهم لمعالجة ترويسات Accept للمتصفح والاستجابة بوحدات بايت الصورة وترويسة Content-Type المناسبة. وهذا يجعل المتصفح يتجنب تنزيل أنواع الصور التي لا يدعمها. اقرأ المزيد حول تفاوض المحتوى.

     Accept: image/webp,image/apng,image/,/*;q=0.8 
    

  • توفير صور احتياطية متداخلة، مثل المثال أدناه.

مثال: عرض تنسيقات صور مختلفة

في المثال التالي، إذا كان المستعرض يدعم WebP، فقم بعرض Mountains.webp، وبخلاف ذلك قم بعرض Mountains.jpg.

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp"
>
  <amp-img
    alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"
  ></amp-img>
</amp-img>
فتح هذه القصاصة في الساحة

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

تابع القراءة – لمعرفة المزيد حول تحسينات الصور التي تطبقها ذاكرة Google AMP للتخزين المؤقت، راجع منشور التدوينة "ذاكرة Google AMP للتخزين المؤقت وAMP Lite والحاجة إلى السرعة".

أمثلة لإلهامك

إليك بعض الأمثلة التي نأمل أن تكون مصدر إلهام لك لإنشاء صفحات AMP سريعة الاستجابة:

الإنتاج

منشأة بواسطة AMP