با استفاده از Image CDN

از

jonarnesJon Arne Sæterås

VP در ScientiaMobile

ساخت یک وب سایت سودآور که تجربه کاربری فوق العاده ای را در هر نوع دستگاه خاصی ارائه می دهد ، به زمان و تلاش زیادی نیاز دارد. هنگامی که شما از یک تخته سنگ تمیز شروع می کنید ، باید به تنهایی از همه امور مراقبت کنید: سازگاری مرورگر ، عملکرد ، طراحی پاسخگو ، قابلیت کشف و مجموعه ای از عوامل دیگر.

اگر فقط یک میانبر وجود داشت

چقدر خوب است اگر مسیری کاملاً مشخص برای ساخت وب سایت های جذاب و کارآمد و بدون نیاز به یک متخصص تخصص از قبل وجود داشته باشد؟

AMP: روشی سریع برای ایجاد یک وب سایت مدرن

صفحات موبایل تسریع شده (AMP) یک چارچوب HTML منبع باز از Google است که تمرکز تقویت شده بر تجربه کاربر را حفظ می کند ، مرکز همه کارهایی است که انجام می شود.

AMP از عناصر سفارشی HTML بهینه شده استفاده می کند و بهترین شیوه های مختلف را در بر می گیرد که در واقع هیچ فرصتی برای کاهش سرعت و خطر ایجاد نمی کند. برخی ممکن است آن را بسیار منطقی و محدود کننده ببینند ، اما در حقیقت ، AMP تلاش می کند تا شما را از معرفی اشکالات و تخریب تجربه کاربر محافظت کند.

به عنوان مثال ، بیایید نگاهی به تصاویر پاسخگو بیندازیم . اغلب اوقات ، تصاویر موجود در وب سایت ها ابعاد خود را از قبل مشخص نمی کنند.

این یک گلوگاه عملکرد معمول است – مرورگر ابتدا باید تصویر را بارگیری کند تا ابعاد اولیه را درک کند ، سپس اندازه آن را تغییر اندازه دهد ، مجدداً صفحه را روشن کند ، صفحه را دوباره رنگ کند و فقط بعد از همه اینها مرحله تصویر را در جلوی چشم کاربر نشان می دهد.

AMP اجازه نمی دهد این لغزش انجام شود زیرا قبل از بارگذاری هر یک از دارایی ها برای اطمینان از مسیر ارائه بهینه باید طرح صفحه را بفهمد – هنگام مواجه شدن با خطا یک تصویر بدون بعد و شما را در روند بازگشت امور به

پاشنه آشیل AMP

AMP به نظر می رسد یک قرص جادویی برای کسانی است که می خواهند به طور مداوم کاربران خود را خوشحال می کند و به طور قابل توجهی معیارهای تجاری آنها را افزایش می دهد ، اما نقطه ضعفی دارد: تصاویر پاسخ دهنده فوق الذکر.

ارائه تصاویر با اندازه مناسب با مقدار مناسب فشرده سازی که روی آنها اعمال می شود در حالی که همزمان با در نظر گرفتن نوع دستگاه کاربر و مرورگر ، یک چالش پیچیده است. AMP به همان اندازه که قدرتمند است ، هیچ کمکی به وظیفه خسته کننده بهینه سازی تصاویر نمی کند. CDN تصویری می تواند یکپارچه باشد تا تمام کارهای سنگین را از طرف شما انجام دهد. این تصاویر دقیقاً متناسب با هر نوع دستگاه درخواستی است در حالی که اندازه آنها را به شدت کاهش می دهد بدون اینکه کیفیت بصری را به طرز منفی تحت تأثیر قرار دهد – و همه اینها در حین پرواز اتفاق می افتد.

نگاه دقیق تر به مکانیک تصویر CDN

هنگام استفاده از CDN تصویر ، معمولاً می توانید از هر تصویری که به عنوان منبع در یک برچسب تصویری به عنوان منبع ارجاع داده می شود ، از یک نسخه با وضوح بالا استفاده کنید. پسوند پرونده اهمیتی ندارد – بسته به نوع مرورگر و نوع دستگاه ، سرویس Image CDN یک تبدیل خودکار به مناسب ترین قالب تصویر را انجام می دهد. بارگذاری مجدد دارایی ها نیز ضروری نیست زیرا همه درخواست های مرورگر برای تصاویر پروکسی شده و به سرور نزدیک به کاربر مجدداً هدایت می شوند که به نوبه خود نسخه ای از تصویر را در حافظه نهان خود نگه می دارد تا پاسخ سریع رعد و برق در آینده.

در اینجا یک قطعه کد از یک پروژه آزمایشی وجود دارد که استفاده از ImageEngine در AMP را به نمایش می گذارد:

html
< amp-img src = “//codesandboxamp.io.imgeng.in/images/tangerines.webp” alt = “درخت نارنگی و آسمان آبی” عرض = “750” قد = “500”
> < amp-img بازگشت src = “//codesandboxamp.io.imgeng.in/images/tangerines.jxr” alt = “درخت نارنگی و آسمان آبی” عرض = “750” قد = “500” > amp-img > < amp-img بازگشت src = “//codesandboxamp.io.imgeng.in/images/tangerines.jpeg” alt = “درخت نارنگی و آسمان آبی” عرض = “750” قد = “500” > amp-img >
amp-img>

شما مجبور نیستید خیلی بیشتر اقدام کنید (به عنوان مثال ، اضافه کردن چندین ورودی به ویژگی های srcset / اندازه برای جای دادن دستگاه های معمولی) تا بلافاصله متوجه شوید که این کار چقدر سریع انجام می شود از دست خارج شده و به یک بار نگهداری تبدیل می شوند. لازم به ذکر است که برخی از CDN های تصویر از نکات مشتری پشتیبانی می کنند. Client Hints مکانیزمی برای به اشتراک گذاشتن چند بیت اطلاعات اضافی درباره پارامترهای دستگاه و همچنین شرایط و تنظیمات شبکه است.

این اطلاعات برای بهبود بیشتر روند تحویل تصویر استفاده می شود ، به ویژه اگر بسیاری از مخاطبان شما از طریق دستگاه های تلفن همراه به خدمات شما دسترسی پیدا کنند ، تفاوت زیادی ایجاد می کند ،

لپ تاپ با صفحه نمایش DPI بالا

07/73824″ <> = “”>> p class = “paragraph”> iPhone SE

کنجکاو هستید که ببینید کار با CDN تصویر چقدر ساده است؟ در اینجا نمونه ای از پروژه وجود دارد که ادغام را به نمایش می گذارد .

نتیجه گیری

AMP مجموعه شگفت انگیزی از م componentsلفه ها و بهترین روش هایی که بدون افزایش هزینه های بهره برداری و توسعه ، محتوای شما و تحویل محصول را به ترتیب سفارش افزایش می دهد.

تمرکز بی وقفه آن بر روی یک تجربه کاربری برتر ، منجر به عملکرد بالا در انواع مختلف دستگاه ها و سیستم عامل های توزیع می شود. اما با وجود همه ویژگی های بسیار خوبی که ارائه می دهد ، کار با دارایی های تصویر همچنان بهینه به نظر می رسد زیرا تفاوت کمی با رویکرد سنتی وجود دارد که نیاز به ایجاد یک علامت گذاری عظیم و شکننده دارد.

ImageEngine مثال خوبی از Image CDN است که بصورت یکپارچه با وب سایتهای دارای AMP جفت می شود و به شما امکان می دهد تمام سردردهای مرتبط با وظیفه سرویس دهی و حفظ منطق عکس پاسخگو را ضمن بهبودی فراموش کنید. معیارهای عملکرد و بازرگانی به یکباره. اگر بارگیری سایت شما به مدت طولانی انجام می شود ، مهم نیست که محتوای شما یا محصولات شما چقدر عالی است ، برخی از افراد صفحه را ترک می کنند قبل از اینکه ببینند چه چیزهایی در آنجا وجود دارد.

افشا: I من درگیر توسعه ImageEngine هستم.