19آبان

۱۰ ترند مهم سئو ۲۰۲۱ که شما باید بدانید (2)

آبان 19, 1400 نویسنده آوین آویسا

در این مقاله قصد داریم به بررسی مهم ترین نکات کلیدی سئو ۲۰۲۱ بپردازیم. متن پیش رو ادامه قسمت اول مقاله با عنوان ” ۱۰ ترند مهم سئو ۲۰۲۱ که شما باید بدانید (۱) ” می باشد. پیشنهاد می شود قبل از خواندن ادامه مطلب، برای بررسی ۳ مورد اول از مهم ترین نکات کلیدی سئو ۲۰۲۱ به مقاله نامبرده مراجعه نمایید.

ترند شماره 4: Web Vitals و بهینه سازی تجربه کاربری صفحه

بنا به گفته آریج ابوعلی، مدیر SEO، Zoopla، با معرفی Core Web Vitals به عنوان یک عامل رتبه‌بندی در سال 2021، دیگر نمیتوان تجربه کاربر از یک صفحه را نادیده گرفت.

ابوعلی اضافه کرد: «وب سایت ها و کسب و کارها باید به دنبال تدوین وپیاده سازی استراتژی هایی باشند تا مطمئن شوند در طول زمان از رقبای خود در حوزه سئو عقب نمی مانند، همچنین برای پیروزی در این رقابت میبایست از نتایج ارائه شده بوسیله ابزارهایی مانند Lighthouse و Crux API حداکثر استفاده را ببرید. تمام موارد از جمله سرعت صفحه، سازگاری با موبایل، تصویرسازی سه بعدی، بهینه‌سازی تصویر و پروتکل‌های امنیتی باید بهینه شوند.

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

صفحات چقدر سریع و روان بارگذاری می شوند.
صفحات با چه سرعتی به تعاملات کاربر پاسخگو می شوند.
استفاده و پیمایش یک وب سایت در دستگاه های تلفن همراه چقدر آسان است.
بررسی ایمنی و امنیت اتصال یک سایت در حالی که کاربران در حال مرور آن هستند.

کاستلو گفت: استفاده از نتایج مطلوب تعامل کاربر با صفحه مربوطه در گردش کار SEO شما نه تنها به اثبات عملکرد و رتبه‌بندی وب‌سایت شما قبل از به‌روزرسانی الگوریتم آتی کمک می‌کند، بلکه در حال حاظر نیز می‌تواند به بهبود UX و تبدیل‌ها کمک کند.

جس پک، مشاور ارشد تجزیه و تحلیل، CVS خاطرنشان کرد: همچنین باید مطمئن شوید که گوگل می تواند از همه جا به بهترین محتوای سایت شما دسترسی داشته باشد – و مطمئن شوید که سایت شما رابط کاربری بهتری نسبت به رقبای شما دارد.

پک گفت: اندازه گیری، آزمایش، و استفاده از یادگیری ماشینی برای مشاهده محتوای خود – این کار به شما قدرت بزرگی می دهد. تمرکز Google بر Core Web Vitals نشان می‌دهد که آنها شروع به اندازه‌گیری میزان مزاحم بودن سایت‌ها کرده‌اند، بنابراین به کاربران خود تجربه‌ای خوشایند بدهید و گوگل همین کار را برای شما انجام خواهد داد.

ترند شماره 5: همه سئوها سئوی موبایل هستند

جف ریدال، معاون محصول و موفقیت مشتری، مینتنت، گفت: اطمینان از عملکرد خوب محتوا/وب‌سایت شما از دیدگاه تلفن همراه نیز باید همچنان یک نقطه کانونی باشد زیرا اکثر جستجوها از این طریق انجام می‌شوند.

وی اضافه کرد: کاربران شما چه نوع تجربه ای هنگام دسترسی به محتوای شما به هنگام استفاده از دستگاه های تلفن همراه خود دارند؟.

به همین دلیل است که براک موری، یکی از بنیانگذاران seoplus+، گفت که تمرکز بزرگ سئو در سال 2021 باید تجربه کاربر دستگاه تلفن همراه (UX) باشد.

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

همانطور که Shelly Fagin، مدیر و موسس SEO ,Highly Searched ,Inc توضیح داد، دلایل زیادی وجود دارد که همه این اصول سئویی که برای حالت وب برقرار است اکنون به سئوی موبایل تبدیل شده است.

برای گوگل اساساً سایت موبایل اهمیت فراوانی دارد (در مقایسه با سایت شما در حالت دسکتاپ). فاگین گفت: سایت موبایل شما رتبه بندی شما را تعیین می کند.

بنابراین اگر روی برآورده کردن حداقل الزامات برای سایت موبایل تمرکز کرده اید، سال 2021 سالی است که تمرکز خود را به بهبود این تجربه برای کاربران خود تغییر دهید.

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

او افزود: «این خوب است که تجربه متفاوتی بین دسک‌تاپ و موبایل داشته باشید، اما مهم است که بدانید Google دیگر تجربه‌های دسکتاپ و تلفن همراه شما را متفاوت رتبه‌بندی نمی‌کند.» “اگر هنوز یک سایت تلفن همراه جداگانه دارید، ممکن است اکنون زمان آن باشد که به جای استفاده از آن به مهاجرت به یک سایت واکنش گرا (رسپانسیو) برای موبایل تجدید نظر کنید.”

ترند شماره 6: ارزیابی، پذیرش و اجرا

به گفته موتوکو هانت، رئیس و مشاور بازاریابی جستجوی بین‌المللی، AJPR، در سال 2021، کار سخت تر از همیشه خواهد بود و شما قبل از دسترسی، سازگاری و اجرا سازی نیاز به مهارت ها و دانش اولیه دارید و مغز شما باید برای سازگاری با تغییرات سریع انعطاف پذیر باشد.

“فکر کردن خارج از چارچوب مهم تر از همیشه خواهد بود. فرصت های تجاری هنوز وجود دارد.” هانت گفت: اگر در جایی که همیشه به آن نگاه می کنید، نیستید، فقط باید راهی که آنها رفته اند را پیدا کنید.

کوری موریس، مدیر ارشد استراتژی ولتاژ گفت: فعال بودن در سال 2021 نیز مهم خواهد بود.

موریس گفت: “شاید این بیشتر یک موضوع یا طرز فکر باشد تا یک روند – اما دیدن آن به عنوان یک نیاز شناخته شده و چیزی که بسیاری به آن می رسند، آن را برای من به یک روند تبدیل می کند.” “اکنون زمان سازماندهی، ایجاد یک برنامه، توسعه یک فرآیند و پیشرفت است.”

اندی بتز، مشاور و مشاور جستجو و دیجیتال، گفت: تغییر به سئو استراتژیک تر برای مرتبط ماندن و حفظ توجه مشتریان در سال 2021 بسیار مهم است. او توصیه می کند رویکرد خود را از تمرکز منحصر به فرد بر روی رفتار مصرف کننده به یک فرآیند دوگانه بچرخانید که علاوه بر تحلیل رفتار مصرف کننده شامل درک بازار و مواردی باشد که مصرف کنندگان در ابتدای ورود به وبسایت شما به آن نیاز دارند و به دنبال آن هستند. (با علم به بازار مربوطه و مسائل مورد نیاز مصرف کننده در هنگام ورود به وبسایتتان، داده های مربوطه را در اختیار کاربران قرار دهید تا مصرف کننده به راحتی بتواند با آن وبسایت تعامل برقرار کرده و در کوتاهترین زمان ممکن به هدف خود برسد)

betts گفت: ” برای درک آنچه در بازار اتفاق می افتد، نیاز به رویکردی استراتژیک و ترکیبی تر وجود دارد تا بتوان اتفاقات بازار و مواردی که تقاضا در گذر زمان تغییر کرده است و حتی زمانی که در حال تغییر است، را تحلیل کنید.” برای درک اینکه چگونه عوامل اقتصادی، جامعه‌شناختی و روان‌شناختی بر تقاضای جستجو تأثیر می‌گذارند، رویکردی مشاوره‌ای اتخاذ کنید و از افراد متخصص در حوزه کسب و کار مربوطه و متخصصان سئو کمک بگیرید. سپس به درک رفتار و قصد مصرف‌کننده در سطح کلی نگاه کنید. در واقع، از همه ابزارها، پلتفرم ها و منابع هوش تجاری که در اختیار دارید، استفاده کنید.

روند شماره 7: اتوماسیون بیشتر

هملت باتیستا، مدیر عامل RankSense گفت: اگر به تعداد فزاینده وظایف سئو در گذشته نگاه کنیم، می‌توانیم داده های 2020 را خودکارسازی کنیم ( تولید داده‌های ساختاریافته، محتوای باکیفیت و غیره ) اینجاست که احتمالات برای سال 2021 قابل توجه خواهد بود.

انتظار می رود کیفیت و کمیت محتوای تولید شده توسط هوش مصنوعی به طور چشمگیری افزایش یابد. باتیستا گفت: قطعاً چالش بزرگتری برای موتورهای جستجو ایجاد خواهد کرد تا محتوای غیر مفید و هرزنامه را خارج از نتایج جستجو نگه دارند. “طی این فرایند چرخه خودکارسازی، تمرکز اصلی ما، تولید محتوای باکیفیت تر به کاربران جستجو در جهت کاهش میزان مجازات و رقابتی ماندن گستره برای کسب و کارها خواهد بود.”

esse McDonald، استراتژیست سئو جهانی | رهبر بهینه سازی، IBM، معتقد است یکی از بزرگترین روندها در سئو برای سال 2021، به ویژه در نقش های داخلی، تمرکز مداوم بر ایجاد راه حل های مقیاس پذیرتر برای بهینه سازی با استفاده از روند خودکارسازی است.

طی چند سال گذشته، ابزارهای پیشرو در صنعت که بسیاری از متخصصان سئو در کارهای روزمره خود از آنها استفاده می کنند، بیشتر و بیشتر شده است و عملکردهای خودکار را برای ایجاد تغییرات سایت منتشر کرده اند. مک‌دونالد می‌گوید: «تقریباً مانند اضافه کردن یک عضو دیگر به بخش اجرایی تیم است. در نتیجه فرآیند خودکارسازی حتی می تواند در روند پیشرفت و سرعت کار برای رسیدن به نتیجه بهینه نیز تاثیر گذار باشد.

روند شماره 8: تغییرات چیدمان و عملکرد SERP

دیو دیویس، دوک URL، بازاریابی اینترنتی Beanstalk، انتظار دارد که به لطف رتبه‌بندی Google Passage، شاهد تغییر بزرگی در کل نحوه مشاهده و نمایش محتوا در وب‌سایت‌ها باشد. در واقع مسیر درست این است تا یک صفحه در مورد یک موضوع کلی ایجاد کرده و در صورت نیاز به صفحات فرعی، آن را در جایی دیگر ایجاد کنید و با استفاده از لینک های داخلی، بین صفحات خود ارتباط ایجاد کنید. درواقع، این کار بسیار مفید تر از ایجاد یک صفحه طولانی و خسته کننده برای کاربر است، همچنین خوب است بدانید که گوگل به راحتی می تواند محتوای هدف کاربر را از بین محتواهای دسته بندی شما تشخیص داده و او را به سمت صفحه هدفش هدایت کند. این روش هم برای وبسایت شما و کاربرتان مفید خواهد بود، هم برای موتورهای جستجوی گوگل و ارائه مطالب هرچه نزدیک تر به هدف کاربر.

سیندی کروم، مدیر عامل و بنیانگذار MobileMoxie، مدت زیادی است که در مورد این موضوع صحبت می کند – چیزی که او از آن به عنوان بهینه سازی Fraggle یا شکستن یاد می کند. او می گوید که انجام کارهایی برای کمک به گوگل برای شناسایی و رتبه بندی صفحات وب سایت یک قدم جدید و بزرگ در دنیای سئو در سال 2021 خواهد بود.

Fraggles یا صفحات شکسته بسیار مهم هستند زیرا واقعاً توانایی Google را برای یافتن و بالا بردن دقیق اطلاعاتی که کاربران به دنبال آن هستند بهبود می بخشد. ساختار قوی صفحه به بهینه‌سازی Fraggle/Passage کمک می‌کند، اما در کنار این موارد، قطعا داشتن متنی که ارزیابی آن برای پردازش زبان طبیعی آسان باشد و دارای امتیاز خوانایی بالایی باشد، نیز مهم است.

ترند شماره 9: محتوای طولانی

قطعا خود شما به عنوان کاربر نیاز به برقراری ارتباط و ایجاد حس تعامل با محتوایی که می خوانید، دارید این مورد یکی از مهم ترین نکات کلیدی سئو ۲۰۲۱ است که ران لیبک، مدیرعامل/بنیان‌گذار ContentMender، در این مورد این گونه بیان کرده است” یکی از گرایش‌هایی که به شما کمک می‌کند از رقبای خود پیشی بگیرید، انتشار مداوم محتوای طولانی‌تر است که مطابق با دستورالعمل‌های E-A-T Google و همچنین در نظرگرفتن احساسات مخاطب است.”

Lieback گفت: “در طول سال 2020، من به طور مداوم شاهد بودم که وبلاگ های بیش از 2000 کلمه به طور چشمگیری بهتر از وبلاگ های 1000 کلمه یا کمتر بودند.” «انتظار داشته باشید که این روند محتوای طولانی در سال 2021 ادامه دارد و هر چه تعداد وب‌سایت‌های بیشتری از این روند پیروی می‌کنند، طول آن بزرگ‌تر می‌شود – شاید حتی به 2500 تا 3000 کلمه برای یک وبلاگ.

ترند شماره 10: مقیاسه پذیری SEO

اکنون اخرین مورد از مهم ترین نکات کلیدی سئو ۲۰۲۱ را با گفته Mark Traphagen، معاون بازاریابی و آموزش محصول، seoClarity، بیان می کنیم اگر می‌خواهید از رقبا پیشی بگیرید، سال 2021 باید سال شما برای ایجاد مقیاس‌پذیری در سئوی سایت شما باشد.

چگونه؟

Traphage این سه نکته را به اشتراک گذاشته است:

تمام وظایف، فرآیندها و گردش‌های کاری را که به طور منظم انجام می‌دهید، فهرست کنید. تعیین کنید که کدام مراحل از آن‌ها می‌توانند خودکار سازی شوند یا با استفاده از یک ابزار بهتر انجام شوند.
یک سیستم هشدار راه اندازی کنید که تغییرات قابل توجه در مواردی مانند رتبه بندی کلمات کلیدی مهم شما، تغییرات ناگهانی رتبه بندی URL های برای همان کلمه کلیدی، (URL cannibalization)، تغییرات محتوای صفحه، تغییرات URL و غیره را نظارت می کند.
SoP (روش‌های عملیاتی استاندارد) را برای هر کار معمولی که نمی‌توانید خودکار کنید، ایجاد کنید تا تیم شما وقت خود را برای نوآوری مجدد نحوه انجام آن‌ها، هر بار که نیاز به انجام دارند، تلف نکند.

تا اینجا که با مهم ترین نکات کلیدی سئو ۲۰۲۱ آشنا شدید می توانید از روش های گفته شده در سئو سایت یا فروشگاه خود استفاده کنید و شانس دیده شدن خود را افزایش دهید.

منبع:

https://www.searchenginejournal.com/10-important-2021-seo-trends-you-need-to-know/389395/#close

ادامه مطلب

23شهریور

۱۰ ترند مهم سئو ۲۰۲۱ که شما باید بدانید (۱)

شهریور 23, 1400 نویسنده آوین آویسا

سئو ۲۰۲۱ برای متخصصان سئو چگونه خواهد بود؟ ۱۰ ترند مهم که از زبان ۴۲ متخصص برتر در این زمینه بیان شده است را بررسی می‌کنیم.

زمان آن فرا رسیده است که نگاهی سالانه به آنچه در پیش روی متخصصان SEO در سال ۲۰۲۱ است، بیندازیم. اگر TLDR می‌خواهید، به سخنی از Lily Ray، مدیر SEO ، Path Interactive اشاره می‌کنیم:

“در یک استراتژی SEO عالی مهمترین نکته این است که خود را جای کاربر بگذارید و از خود بپرسید که آیا محتوا واقعاً ارزشمند است، برند تجاری قابل‌اعتماد است و وب‌سایت (به ویژه در موبایل) به راحتی قابل استفاده است.”

کاملا درست است!

اما وقتی صحبت از سئو ۲۰۲۱ می‌کنیم، چیزهای بیشتری برای بررسی وجود دارد. بنابراین چه استراتژی‌ها و تاکتیک‌های SEO کار می‌کند و به شما کمک می کند تا در SERPs تسلط داشته باشید و درآمد بیشتری در سال ۲۰۲۱ کسب کنید؟ این سوالی است که ما هر سال در اینجا در Search Engine Journal می‌پرسیم. امسال، من از ۴۲ نفر از متخصصان برتر سئو نظراتشان را پرسیدم.

ترند ۱: تمرکز بر کاربر + هدف جستجو

در سئو ۲۰۲۱، زمان تمرکز بر هدف کاربر و جستجو است. در حالی که این نکته را می‌توان به سختی یک روند یا مفهوم جدید دانست، اما هر سال تمرکز مجدد بر این مفهوم اهمیت دارد زیرا قصد و رفتار جستجوگر همیشه در حال تغییر است. به خصوص بعد از سال ۲۰۲۰ که خیلی سریع تغییر کرد.

Jenn Mathews، مدیر سئو در GitHub ، می‌گوید: “در اصل، Google (و دیگر موتورهای جستجو) جایی است که افراد می‌توانند به سوالی پاسخ دهند یا در مورد چیزی بیشتر بدانند. هنگامی که ما ماهیت علت جستجو و درک مطالب را که افراد به آنها پاسخ می‌دهند را درک کنیم، کسب و کار ما از آن سود می‌برد. ”

بنابراین این برای فعالیت‌های SEO شما در سال ۲۰۲۱ چه معنایی دارد؟

به گفته Britney Muller، مشاور SEO و دانشجوی علوم داده، این بدان معناست که متخصصان SEO باید از بهترین شیوه‌های سنتی که ارزش کمتری خواهند داشت دور شوند، زیرا الگوریتم‌ها قوی‌تر می‌شوند (به عنوان مثال، تلاش برای نوشتن توضیحات متا برای هر صفحه) و بیشتر بر درک بهتر آنچه در SERPs/هدف جستجوگر اتفاق می‌افتد، متمرکز شوند.

«گوگل اطلاعات جهان را در خود جای داده است و آن‌ها می‌دانند که اکثریت افرادی که“x” را جستجو می‌کنند به دنبال چه چیزی هستند. توجه بیشتر به نتایج جستجو به متخصصان سئو کمک می‌کند تا محتوای رقابتی را به نحوی که جستجوکنندگان تمایل به استفاده از آن دارند، ایجاد کنند.»

و بسیاری دیگر از متخصصان سئو ما با Muller موافق هستند. Andrew Dennis، متخصص بازاریابی محتوای Page One Power است.

«گوگل در حال حاضر به شما نشان می‌دهد که به نظر او چه نتایجی به هدف سرچ کاربران نزدیک است، از این داده‌ها برای استراتژی خود استفاده کنید. برای من، تجزیه و تحلیل SERP نه فقط در سال ۲۰۲۱، یک فعالیت مهم خواهد بود، اما با تغییر اهداف جستجو و پیشرفت گوگل در ادامه کار، پیشرفت خواهد کرد.»

برای Marie Haynes، مدیرعامل Marie Haynes Consulting Inc، واضح است که اگر می‌خواهید در SEO در سال ۲۰۲۱ برنده شوید، باید در ارائه اطلاعات به کاربران یک کار فوق‌العاده انجام دهید.

“وقتی جستجوگر به دنبال مشاوره متخصصان است، گوگل حتی بهتر تشخیص می‌دهد و پست‌ها را در رتبه بهتری از مقالاتی قرار می‌دهد نوشته شده که فاقد E-A-T هستند. متخصصان SEO که در سال ۲۰۲۱ موفق خواهند شد کسانی هستند که واقعا می‌توانند نحوه برآوردن نیازهای جستجوگران را درک کنند.”

در اینجا توصیه های Adam Riemer، رئیس بازاریابی Adam Riemer است:

«برندها باید خود را فراموش کرده و به فکر بازدیدکنندگان خود باشند. نیازها و نگرانی‌های بازدیدکننده را در نظر بگیرید و در مورد محصولاتتان، شرکتتان، دلیل کیفیت محصولاتتان صحبت نکنید. یک وب‌سایت سریع که سریع بارگزاری می‌شود. عدم نیاز به تلاش کاربر برای یافتن محتوای شما یا هزینه کردن برای آن. بدون پاپ آپ اجباری، ثبت نام و غیره.»

با توجه به تمرکز بیشتر گوگل بر ارضای هدف کاربر، Steven van Vessum، معاون انجمن ContentKing، معتقد است که تمرکز بر یادگیری آنچه کاربر به دنبال آن است بیش از هر زمان دیگری اهمیت دارد.

«از نظر پاسخ واقعی – بلکه نوع محتوای ترجیحی آن‌ها (به عنوان مثال ، ویدئو ، پادکست یا PDF). از آنجا که پی بردن به هدف کاربر از پرس و جو بسیار وقت گیر است، ابزارهای تحقیق کلمات کلیدی که به ما این امکان را می‌دهند سریعاً در مقیاس بزرگ مقایسات را انجام دهیم، کمک شایانی در این حوزه انجام می‌دهند.»

ترند شماره ۲: تجزیه و تحلیل مشتری، حفظ و ارزش مادام العمر

SEO قبلاً (بیشتر) در مورد مدیریت ترافیک بود. اما SEO به موارد بیشتری تبدیل شده است. همانطور که Miracle Inameti-Archibong ، رئیس سئو Erudite، خاطرنشان کرد، در سئو ۲۰۲۱ شما بیشتر و بیشتر تحت فشار قرار می‌گیرید تا ترافیک بیشتری را ایجاد کنید تا شکاف در درآمد را کاهش دهید و ROI را نشان دهید.

بنابراین، در سال ۲۰۲۱، داده‌های تجزیه و تحلیل رفتاری به داغ‌ترین کالا تبدیل می‌شود.

Inameti-Archibong معتقد است: «با پیشرفت سریع‌تر و سریع‌تر گوگل برای جلب رضایت فوری، مسئولیت‌پذیری فراتر از بازدیدها، و همچنین در نظر گرفتن بیشتر UX، نرخ تبدیل و درآمد اهمیت بیشتری پیدا کرده است. حجم کلمات کلیدی نقش کمرنگ‌تری پیدا می‌کند و تجزیه و تحلیل رفتاری تقش مهم‌تری خواهد داشت – مشتری شما چه کار می‌کند، چگونه این کار را انجام می‌دهد و چگونه می‌توانیم آن‌ها را وادار کنیم تا سریع‌تر این کار را انجام دهند – و مهندسی معکوس را برای محتوای تولید شده انجام دهید.»

John McAlpin، مدیر سئو Cardinal Digital Marketing، موافق است. وی خاطرنشان کرد که همه گیری COVID-19 به ما نشان داده است که تحقیقات کلمات کلیدی همیشه در مواقعی که جهان در حال تغییر مداوم است، مفید نیست. McAlpin می‌گوید: «برای متمایز کردن خود، ما متخصصان SEO را مشاهده می‌کنیم که تحقیقات کلمات کلیدی را کمتر کرده و تحقیقات بر پایه را افزایش می‌دهند. این تحقیق فرصت‌های پنهان را با ارائه خدمات و ایده‌های محتوا که تحقیقات کلمات کلیدی ممکن است به ما نگویند باز می‌کند.»

Stephan Bajaio می‌گوید: با توجه به درآمد کمتر، مشاغل باید بیش از هر زمان دیگری بر حفظ مشتری و افزایش ارزش عمر مشتری (LTV) تمرکز کنند. «محتوای شما باید به سوالات، نگرانی‌ها و نیازهایی که مشتریان شما در جستجو ابراز می‌کنند پاسخ دهد و شما باید برای آن شرایط آماده شوید. در غیر این صورت، این خطر وجود دارد که دیگران توجه کاربران به برند شما را کاهش دهند. درک بهتر مشتری و ارائه محتوای ارزشمند به او، یا خطر از دست دادن و معرفی آن‌ها به کسی است که آنها را بهتر درک می‌کند، این کار توسط دوست مورد اعتماد کاربران، Google، به آنها معرفی شده است.»

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

«برای یافتن موضوعات مرتبط و موجود که باید به آنها توجه شود، داده‌های کلید واژه کنسول سرچ Google خود را با اصلاح‌کننده های سوال متداول جستجو کنید. اطمینان حاصل کنید که به این موارد به طور خلاصه و واقعی پاسخ داده شده و در صفحه موضوعات متداول پرسش و پاسخ منتشر شده است. مراکز راهنما و بخش‌های سؤالات متداول باید با در نظر گرفتن UX ایجاد شود و نباید یک صفحه واحد و غیرقابل کنترل سوالات باشد.”

یکی از کلیدهای جذب و حفظ مشتریان به یک کلمه خلاصه می شود: ارزش. به همین دلیل Julia McCoy، گفت که شما باید روی ارزش در سئو ۲۰۲۱ تمرکز کنید که بخش عمده‌ای از آن از محتوای شما ناشی می‌شود.

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

ترند شماره ۳: بهینه سازی SERP برند، گراف‌های دانش و موجودیت‌ها

به گفته Jason Barnard، در سئو ۲۰۲۱، ردیابی SERP ها و پنل‌های دانش متداول خواهد شد.

«در سال ۲۰۲۱، واقعیت این است که جستجوی مبتنی بر نهاد با درک مطمئن گوگل از اینکه شما که هستید، چه چیزی ارائه می‌دهید و برای چه مخاطبی خدمات ارائه می‌دهید بسیار مورد توجه قرار می‌گیرد. بازاریابان باهوش واقعاً با نگاه به نام تجاری خود به عنوان یک نهاد آشنا و با ایجاد یا بهبود حضور خود در گراف دانش، به طور جدی در درک گوگل از “شما کی هستید” بخشی از آن سه گانه کار خواهند کرد.»

در حقیقت، Nik Ranger، متخصص SEO، باور دارد که ما ممکن است از سال ۲۰۲۱ شروع به مشاهده گراف‌های دانش شخصی کنیم. Ranger می‌گوید: «Google به اطلاعات زیادی در مورد شما، سابقه جستجوی شما، ایمیل‌ها، رسانه‌های اجتماعی و سایر انواع اطلاعات کاربر دسترسی دارد که به او توانایی و ابزارهای مقیاس‌بندی گراف دانش شخصی را می‌دهد. تعیین روابط بین مشروعیت اعتبارنامه نویسنده به محتوا، علاوه بر این که گوگل ارزش محتوا را درک می‌کند، اهمیت بیشتری پیدا خواهد کرد.»

همه اینها برای سئو ۲۰۲۱ به چه معناست؟

Patrick Reinhart، معاون استراتژی‌های دیجیتال، معتقد است: این به معنای بهینه‌سازی کل نمایش دیجیتال برند شما (به عنوان مثال، کانال YouTube شما، تصاویر) و نحوه نمایش آنها در Google است. Reinhart گفت: “این روزها این فقط مربوط به وب‌سایت شما نیست، این مربوط به تمام دارایی‌های شما و نحوه تعامل آن‌ها با یکدیگر در SERP است. اگر همه آنها از طریق قطعات مختلف گرد هم آیند، آیا داستان خوبی در مورد نام تجاری شما نشان می دهد؟“

John Shehata، بحث را فراتر می‌برد و می‌افزاید که متخصصان SEO باید مفاهیم پیچیده پشت موضوعات (موجودیت‌ها، موضوعات فرعی) و پردازش زبان طبیعی (NLP) و نحوه عملکرد نهادها را درک کنند. TF*IDF ، فراوانی کلمات کلیدی را فراموش کرده و تمرکز خود را بر روی موجودیت‌ها و موضوعات آغاز کرده و از زبان طبیعی Google (و/یا سایر ابزارهای SEO مشابه که تجزیه و تحلیل NLP را ارائه می‌دهند) استفاده کنید. موتورهای جستجو روز به روز هوشمندتر می‌شوند و از پرسش‌ها تا حدی فراتر از کلمات کلیدی مورد استفاده در چنین پرس و جوها درک خوبی دارند. اشتباه متوجه نشوید، تحقیقات کلید واژه‌ای خوب هنوز مورد نیاز است، اما در درجه دوم. درجه اول، درک موضوعات/موجودیت‌های مربوط به پرس و جو و هدف پشت پرس و جو است.”

یکی از مکان‌هایی که هیچ کلمه کلیدی در آن وجود ندارد Google Discover است. بنابراین، به گفته Jes Scholz، مدیر دیجیتال بین المللی Ringier، تنها راه برای بهینه‌سازی برای Google Discover این است که نهاد خود را در گراف دانش قرار دهید و نحوه ارتباط آن را در لایه موضوع مشخص کنید.

“اولین قدم که هر متخصص SEO باید انجام دهد این است که نمره نتایج نام تجاری خود را در API گراف دانش ردیابی کند. سپس، روی فعالیت‌هایی علاوه بر تولید محتوای عالی کار کنید تا حضور آن‌ها را در گراف دانش تقویت کنید. برخی از فعالیتهایی که باید در سال ۲۰۲۱ روی آن‌ها تمرکز شود عبارتند از:

اطمینان از نشانه گذاری کامل و صحیح سازمان.
ایجاد حضور در پایگاه های دانش مرتبط مانند Wikidata.
معرفی پنل دانش خود برای استفاده از ویژگی پست ها توسط Google.
برای مشاغل فیزیکی، نمایه Google برای کسب و کار خود را تنظیم کنید.

منبع:

https://www.searchenginejournal.com/10-important-2021-seo-trends-you-need-to-know/389395/#close

ادامه مطلب

14شهریور

انطباق ويژگی‌های اپلیکیشن های وب پیشرو (PWA) به اپلیکیشن های مخصوص پلتفرم

شهریور 14, 1400 نویسنده آوین آویسا

مقالات مایکروسافت در مورد PWA بیان می‌کنند که این اپلیکیشن‌ها همان سایت‌ها هستند. بله، PWA ها فقط وب‌سایت هستند، اما بسیار فراتر از این هم هستند. اگر به درستی اجرا شوند، اپلیکیشن های وب پیشرو (PWA) مانند یک وب‌سایت نخواهد بود، بلکه شبیه یک برنامه “واقعی” خواهد بود. حالا احساس یک برنامه نیتیو به چه معناست؟ در این نوشتار در مورد نزدیک کردن اپلیکیشن های وب پیشرو (PWA) به اپلیکیشن های مخصوص پلتفرم صحبت خواهیم کرد.

برای پاسخ به این سوال، اجازه دهید از برنامه Apple Podcasts به عنوان مثال استفاده کنم. این برنامه در macOS روی دسکتاپ و در iOS (و به ترتیب iPadOS) در تلفن همراه موجود است. در حالی که پادکست یک برنامه رسانه‌ای است، ایده‌های اصلی که من با کمک آن مساله را توضیح می‌دهم در مورد سایر دسته‌های برنامه نیز کاربرد دارند.

قابلیت اجرای آفلاین

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

محتوای آفلاین در دسترس و مدیای قابل پخش

در حالت آفلاین، از طریق کشوی سمت چپ، همچنان می‌توانم به بخش بارگیری شده رفته و از قسمت‌های پادکست بارگیری شده که آماده پخش هستند و با تمام داده‌های مکمل مانند آثار هنری و توضیحات نمایش داده می‌شوند، لذت ببرم.

بارگیری فعال در پس‌زمینه

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

اشتراک‌گذاری و تعامل با سایر برنامه‌ها

برنامه پادکست به طور طبیعی با سایر برنامه‌ها ادغام می‌شود. به عنوان مثال، وقتی روی قسمتی که دوست دارم راست کلیک می‌کنم، می‌توانم آن را در برنامه‌های دیگر دستگاه خود، مانند برنامه پیام‌ها، به اشتراک بگذارم. همچنین به طور طبیعی با کلیپ بورد سیستم ادغام می‌شود. می‌توانم روی هر قسمت راست کلیک کرده و پیوند آن را کپی کنم.

برنامه در پس زمینه داده‌های جدید را بارگیری می‌کند

در تنظیمات برنامه Podcasts، می‌توانم برنامه را برای بارگیری خودکار قسمت‌های جدید پیکربندی کنم. من حتی مجبور نیستم در مورد آن فکر کنم، محتوای به روز همیشه فقط در آنجا خواهد بود. شعبده بازي.

حالت همگام بر روی ابر

در عین حال، اشتراک‌های من در همه دستگاه‌هایی که من مالک آن هستم همگام‌سازی می‌شود. در دنیایی بی عیب و نقص، من نگران این نیستم که اشتراک‌های پادکست خود را به صورت دستی همگام کنم. به همین ترتیب، من نباید اضطراب داشته باشم که حافظه دستگاه تلفن همراه من توسط قسمت‌هایی که قبلاً در دسکتاپ گوش داده‌ام و بالعکس مصرف شود. حالت پخش هماهنگ می‌شود و قسمت‌های گوش داده شده به طور خودکار حذف می‌شوند. امروزه این ویژگی برای اپلیکیشن های وب پیشرو (PWA) اهمیت زیادی پیدا کرده است.

کنترل‌های کلید سخت‌افزاری مدیا

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

مولتی‌تسک و میانبر برنامه

البته من همیشه می‌توانم از هر کجا به برنامه پادکست با مولتی‌تسک برگردم. این برنامه دارای آیکونی است که به وضوح قابل تشخیص است و می‌توانم آن را بر روی دسکتاپ یا داک برنامه خود قرار دهم تا پادکست‌ها بلافاصله در صورت تمایل راه‌اندازی شوند.

اقدامات سریع در منو

متداول‌ترین اقدامات برنامه، جستجو برای محتوای جدید و بررسی قسمت‌های جدید، درست از منوی زمینه برنامه در Dock در دسترس است. از طریق منوی Options، می‌توانم تصمیم بگیرم که برنامه را در زمان ورود باز کنم.

ادغام فایل سیستم

ممکن است فوراً به آن فکر نکنید، اما برنامه Podcasts به طور طبیعی با فایل سیستم ادغام می‌شود. وقتی یک قسمت پادکست را بارگیری می‌کنم، روی لپ تاپ من در مسیری ذخیره می‌شود.

ظاهر و احساس یک اپ مخصوص پلتفرم

نکته ظریف‌تری وجود دارد که برای یک برنامه iOS مانند پادکست بدیهی است:

هیچ یک از برچسب‌های متن قابل انتخاب نیستند و همه متن با فونت سیستم دستگاه ترکیب می‌شود. همچنین انتخاب تم رنگ سیستم (حالت تیره) قابل انجام است.

نوار عنوان سفارشی

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

انیمیشن‌های روان

انیمیشن‌های درون برنامه در پادکست‌ها سریع و روان هستند. به عنوان مثال، وقتی کشوی Episode Notes را در سمت راست باز می‌کنم، به زیبایی وارد می‌شود. وقتی یک قسمت را از بارگیری‌های خود حذف می‌کنم، قسمت‌های باقی مانده شناور می‌شوند و از فضای آزاد شده استفاده می‌کنند.

نمایش محتوا خارج از برنامه

برنامه Podcasts در iOS می‌تواند محتوا را در مکان‌های دیگری غیر از برنامه واقعی، به عنوان مثال، در نمای ابزارک‌های سیستم یا در قالب پیشنهاد Siri، نشان دهد. داشتن فراخوان‌های فعال که فقط نیاز به ضربه زدن دارند تا بتوانید با آنها ارتباط برقرار کنید، می‌تواند میزان تعامل مجدد برنامه‌ای مانند پادکست را تا حد زیادی افزایش دهد.

ویجت کنترل قفل صفحه

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

پوش نوتیفیکیشن

پوش نوتیفیکیشن‌ها در وب کمی آزاردهنده شده‌اند. اما اگر به درستی مورد استفاده قرار گیرند، می توانند ارزش زیادی را به تجربه کاربری اضافه کنند. به عنوان مثال، برنامه پادکست iOS می‌تواند قسمت‌های جدیدی از پادکست‌هایی را که در آنها مشترک هستم به من اطلاع دهد یا قسمت‌های جدیدی را توصیه کند. همچنین من را از ویژگی‌های جدید برنامه مطلع می‌کند.

نشان آیکون برنامه

هرگاه قسمت‌های جدیدی برای یکی از پادکست‌هایی که من مشترک آن هستم وجود دارد، نشان نماد برنامه در نماد صفحه اصلی Podcasts ظاهر می‌شود و به شکلی که آزاردهنده نیست دوباره من را تشویق می‌کند تا مجدداً وارد برنامه شوم.

پخش رسانه بر تنظیمات صرفه‌جویی در مصرف انرژی اولویت دارد

هنگام پخش رسانه پادکست، ممکن است صفحه خاموش شود، اما سیستم وارد حالت آماده به کار نمی‌شود. برنامه‌ها می‌توانند صفحه را نیز روشن نگه دارند، برای مثال برای نمایش اشعار یا زیرنویس‌ها.

مشاهده برنامه از طریق فروشگاه برنامه

در حالی که برنامه Podcasts بخشی از تجربه دسکتاپ macOS است، در iOS باید از App Store نصب شود.

app-like-pwas19

منبع:

https://web.dev/app-like-pwas/

ادامه مطلب

17مرداد

استراتژی نصب اپلیکیشن وب پیشرو (PWA)

مرداد 17, 1400 نویسنده آوین آویسا

در گذشته، نصب اپلیکیشن فقط برای برنامه‌های مخصوص پلت‌فرم‌ها امکان‌پذیر بود. امروزه، استراتژی نصب اپلیکیشن وب پیشرو (PWA) که تجربه‌های قابل‌نصب ارائه می‌دهند و همان سطح یکپارچه‌سازی و قابلیت‌اطمینان برنامه‌های خاص پلت‌فرم را فراهم می‌کنند، دارای اهمیت بالایی است.

شما از دو طریق می‌توانید این کار را انجام دهید:

نصب از طریق مرورگر.
نصب از اپ استور.

داشتن کانال‌های توزیع مختلف راهی قدرتمند برای دستیابی به تعداد زیادی از کاربران است، اما انتخاب استراتژی مناسب برای تبلیغ آنها می‌تواند چالش‌برانگیز باشد.

این راهنما بهترین روش‌ها را برای ترکیب پیشنهادات نصب مختلف برای افزایش نرخ نصب و جلوگیری از رقابت بررسی می‌کند. پیشنهادات، شامل PWAهای نصب‌شده از مرورگر و App Store و همچنین برنامه‌های مخصوص پلت‌فرم است.

چرا اپلیکیشن را قابل‌نصب کنیم؟

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

اما داشتن هر دو برنامه وب قابل‌نصب و برنامه مخصوص پلتفرم می‌تواند برای کاربران گیج‌کننده باشد. بنابراین داشتن استراتژی نصب اپلیکیشن وب پیشرو (PWA) اهمیت خود را نشان می‌دهد. برای برخی از کاربران ممکن است بهترین برنامه، برنامه مخصوص پلتفرم باشد، اما برای برخی دیگر می‌تواند دارای اشکالاتی باشد:

محدودیت‌های ذخیره‌سازی: نصب یک برنامه جدید ممکن است به معنی حذف دیگر برنامه‌ها یا پاک کردن فضا با حذف محتوای ارزشمند باشد. این به خصوص برای کاربران با دستگاه‌های ضعیف‌تر نمود بیشتری دارد.
پهنای باند موجود: بارگیری یک برنامه می‌تواند یک روند پرهزینه و کند باشد. این مساله برای کاربرانی که دارای اتصال کند و اینترنت گران هستند، بسیار آزاردهنده است.
اصطکاک: ترک یک وب‌سایت و انتقال به اپ استور برای بارگیری یک برنامه باعث ایجاد اصطکاک اضافی می‌شود و عملکرد کاربر را که می‌تواند مستقیماً در وب انجام شود به تأخیر می‌اندازد.
چرخه به روزرسانی: ایجاد تغییر در برنامه‌های مخصوص پلتفرم ممکن است نیاز به انجام یک فرآیند بررسی برنامه داشته باشد، که می‌تواند روند تغییرات و آزمایشات را آهسته کند (به عنوان مثال آزمایشات A / B).

در برخی موارد، ممکن است درصد کاربرانی که برنامه مخصوص پلتفرم شما را بارگیری نمی‌کنند، زیاد باشد. به عنوان مثال، کسانی که فکر می‌کنند زیاد از برنامه استفاده نمی‌کنند یا نمی‌توانند هزینه چند مگابایت فضای ذخیره‌سازی را توجیه کنند. شما می‌توانید درصد این بخش از کاربران را از چند طریق تعیین کنید، به عنوان مثال با استفاده از یک تجزیه و تحلیل برای ردیابی درصد کاربران “فقط وب همراه“. آنالیز این داده ها کمک شایانی برای انتخاب مناسب استراتژی نصب اپلیکیشن وب پیشرو (PWA) می‌باشد.

اگر اندازه این بخش قابل‌توجه باشد، این نشانگر خوبی است که شما باید روش‌های جایگزین نصب خود را ارائه دهید.

تبلیغ نصب PWA خود از طریق مرورگر

اگر PWA با کیفیت بالا دارید، بهتر است نصب آن را از طریق برنامه مخصوص پلتفرم خود تبلیغ کنید. به عنوان مثال، اگر برنامه مخصوص پلتفرم فاقد ویژگی است که توسط PWA شما ارائه شده است، یا اگر مدتی است به روز نشده است. اگر برنامه مخصوص پلتفرم برای صفحات بزرگتر مانند سیستم عامل Chrome بهینه نشده باشد، تبلیغ نصب PWA نیز می‌تواند مفید باشد.

برای برخی از برنامه‌ها، نصب برنامه‌های مخصوص پلتفرم بخشی کلیدی از مدل کسب و کار است، در این صورت، نشان دادن تبلیغات نصب برنامه ویژه پلتفرم منطقی است. اما، برخی از کاربران ممکن است راحت‌تر در وب بمانند. اگر بتوان آن بخش را شناسایی کرد، PWA فقط برای آنها نشان داده می‌شود (آنچه ما “PWA به عنوان بازگشت” می‌نامیم).

در این بخش روش‌های مختلف به حداکثر رساندن میزان نصب PWAهای نصب‌شده از طریق مرورگر را بررسی خواهیم کرد.

PWA به عنوان تجربه قابل‌نصب اولیه

هنگامی که PWA معیارهای قابلیت نصب را برآورده می‌کند، بیشتر مرورگرها نشانه‌ای را برای نصب PWA نشان می‌دهند. به عنوان مثال، دسک‌تاپ کروم یک نماد قابل‌نصب در نوار آدرس و در تلفن همراه یک مینی نوار نشان می‌دهد:

install-pwa-1 اگرچه این ممکن است برای برخی از تجربیات کافی باشد، اما اگر هدف شما این است که نصب PWA خود را هدایت کنید، ما به شما توصیه می‌کنیم به رویداد BeforeInstallPromptEvent توجه کنید و از الگوی پیشبرد نصب PWA خود پیروی کنید.

مانع از این شوید که PWA میزان نصب برنامه ویژه پلتفرم شما را بکاهد

در بعضی موارد، ممکن است شما ترجیح دهید نصب برنامه مخصوص پلتفرم خود را بر روی PWA خود تبلیغ کنید، اما در این حالت، ما همچنان به شما پیشنهاد می‌کنیم مکانیزمی را برای نصب PWA به کاربران ارائه دهید. این گزینه بازگشت، امکان استفاده از برنامه را برای کاربرانی که نمی‌توانند برنامه مخصوص پلتفرم شما را نصب کنند یا نمی‌خواهند نصب کنند، فراهم می‌کند.

اولین قدم برای اجرای این استراتژی، تعریف ابتکاری برای زمانی است که تبلیغ نصب PWA را به کاربران نشان می‌دهید، به عنوان مثال:

“یک کاربر PWA کاربری است که برنامه مخصوص پلتفرم را مشاهده کرده است اما آن را نصب نکرده است. کاربرانی که حداقل پنج بار به سایت بازگشته‌اند یا روی بنر برنامه کلیک کرده‌اند اما همچنان از وب‌سایت استفاده کرده‌اند. “

بنابراین، روش ابتکاری را می‌توان به روش زیر پیاده‌سازی کرد:

بنر نصب برنامه مخصوص پلتفرم را نشان دهید.

اگر کاربری بنر را رد کرد، یک کوکی با آن اطلاعات تنظیم کنید (به عنوان مثال document.cookie= "app-install-banner=dismissed“).
از کوکی دیگری برای ردیابی تعداد بازدیدهای کاربران از سایت استفاده کنید (به عنوان مثال document.cookie= "user-visits=1").
تابعی بنویسید، مانند isPWAUser، که از اطلاعات ذخیره شده در کوکیها به همراه getInstalledRelatedApps () API برای تعیین اینکه آیا کاربر “کاربر PWA” محسوب می‌شود، استفاده کند.
در لحظه‌ای که کاربر اقدام معنی‌داری را انجام می‌دهد، isPWAUser را فراخوانی کنید. اگر تابع پاسخ مثبت داد، می توانید دکمه نصب PWA را نشان دهید.

تبلیغ نصب PWA خود از طریق فروشگاه برنامه

برنامه‌هایی که در App Store موجود هستند می‌توانند با فناوری‌های مختلف از جمله تکنیک‌های PWA ساخته شوند.

در این بخش ، برنامه ها را در فروشگاه در دو گروه طبقه بندی می کنیم:

برنامه‌های مخصوص پلتفرم: این برنامه‌ها بیشتر با کد مخصوص پلتفرم ساخته می‌شوند. اندازه آنها بستگی به سیستم عامل دارد، اما در Android معمولاً بالای 10 مگابایت و در iOS بالای 30 مگابایت است. اگر PWA ندارید یا اگر برنامه خاص پلتفرم، مجموعه ویژگی‌های کامل‌تری را ارائه می‌دهد، ممکن است بخواهید برنامه مخصوص پلتفرم خود را تبلیغ کنید.
برنامه‌های سبک: این برنامه‌ها می‌توانند با کد اختصاصی سیستم عامل نیز ساخته شوند، اما معمولاً با فناوری وب ساخته می‌شوند و در یک پوشش مخصوص پلتفرم بسته‌بندی می‌شوند. PWA های کامل را می‌توان در فروشگاه‌ها نیز بارگذاری کرد. برخی از شرکت‌ها ارائه این موارد به عنوان تجربه “ساده” را انتخاب می‌کنند و برخی دیگر نیز از این روش برای برنامه‌های اصلی (هسته) خود استفاده کرده‌اند.

تبلیغ برنامه‌های سبک

طبق یک مطالعه Google Play، به ازای هر 6 MB افزایش اندازه APK، نرخ تبدیل نصب 1٪ کاهش می‌یابد. این بدان معنی است که میزان تکمیل بارگیری یک برنامه 10 مگابایتی می‌تواند تقریباً 30٪ بیشتر از برنامه 100 مگابایتی باشد!

برای حل این مسئله، برخی از شرکت‌ها از PWA خود استفاده می‌کنند تا نسخه کم‌حجم‌تری از برنامه خود را با استفاده از وب در فروشگاه اپ ارائه دهند.

ارائه یک تجربه وب سبک

به طور مستقیم، ممکن است کاربران در دستگاه‌های سطح پایین تمایل بیشتری به بارگیری نسخه‌های سبک برنا‌مه‌ها نسبت به کاربران در تلفن‌های گران‌قیمت داشته باشند. بنابراین، اگر شناسایی دستگاه کاربر امکان‌پذیر باشد، می‌توان بنر نصب برنامه سبک را نسبت به نسخه برنامه سنگین‌تر مخصوص پلتفرم اولویت‌بندی کرد.

در وب می‌توان سیگنال‌های دستگاه را به دست آورد و تقریباً آنها را بر اساس دسته‌بندی دستگاه ها طبقه‌بندی کرد (به عنوان مثال “بالا” ، “متوسط” یا “پایین“). می‌توانید این اطلاعات را به روش‌های مختلف مانند استفاده از API های JavaScript یا رفتار مشتری بدست آورید.

استفاده از API های JavaScript

با استفاده از رابط های برنامه کاربردی JavaScript مانند موارد زیر، می‌توانید به ترتیب در مورد پردازنده دستگاه، حافظه و وضعیت شبکه اطلاعات کسب کنید:

navigator.hardwareConcurrency
navigator.deviceMemory
navigator.connection

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

1	const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

نتیجه‌گیری

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

منبع:

https://web.dev/define-install-strategy/

ادامه مطلب

11مرداد

مولفه‌های یک برنامه وب پیشرو خوب

مرداد 11, 1400 نویسنده آوین آویسا

برنامه‌های وب پیشرو (PWA) با استفاده از API های مدرن ساخته شده و بهبود می‌یابند تا قابلیت‌ها، قابلیت‌اطمینان و قابلیت‌نصب بیشتر را در هنگام دسترسی به هر کسی، در هر مکانی، در هر دستگاهی با یک پایگاه کد، فراهم کنند. برای کمک به شما در ایجاد بهترین تجربه ممکن، ‌می‌توان از چک‌لیست‌های زیر که مولفه‌های یک برنامه وب پیشرو خوب را شرح می‌دهند، استفاده کرد:

چک‌لیست اصلی مولفه‌های یک برنامه وب پیشرو خوب (PWA)

این فهرست آنچه برنامه را قابل‌نصب و قابل‌استفاده برای همه کاربران می‌کند، صرف‌نظر از اندازه یا نوع ورودی، توصیف می‌کند.

سریع آغاز شود و سریع ادامه بدهد

عملکرد، نقش بسزایی در موفقیت هر تجربه آنلاین دارد، زیرا سایت‌های با عملکرد بالا کاربران را بهتر از سایت‌های ضعیف جذب می‌کنند. سایت‌ها باید روی بهینه‌سازی برای معیارهای عملکرد کاربر محور متمرکز شوند.

چرا؟

سرعت برای استفاده کاربران از برنامه شما بسیار مهم است. در حقیقت، با افزایش زمان بارگیری صفحه از یک ثانیه به ده ثانیه، احتمال پرش کاربر 123٪ افزایش می‌یابد. عملکرد با بارگزاری متوقف نمی‌شود. کاربران هرگز نباید منتظر باشند که آیا تعامل آنها – مثلاً با کلیک روی یک دکمه – ثبت شده است یا خیر. اسکرول و انیمیشن باید روان باشد. عملکرد بر کل تجربه شما تأثیر می‌گذارد، از نحوه درک کاربران از برنامه شما تا نحوه عملکرد واقعی آن.

در هر مرورگری کار کند

کاربران باید بتوانند از هر مرورگری که برای دسترسی به برنامه وب شما انتخاب می‌کنند، استفاده کنند.

چرا؟

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

به گفته جرمی کیت در Resilient Web Design، یک روش موثر برای انجام این کار، شناسایی عملکرد اصلی، در دسترس قرار دادن این قابلیت با استفاده از ساده‌ترین فناوری ممکن و سپس افزایش تجربه در صورت امکان است. در بسیاری از موارد، این به معنای شروع فقط با HTML برای ایجاد عملکرد اصلی و افزایش تجربه کاربر با CSS و JavaScript برای ایجاد تجربه جذاب‌تر است.

ارسال فرم را به عنوان مثال در نظر بگیرید. ساده‌ترین راه برای پیاده‌سازی آن، فرم HTML است که درخواست POST را ارسال می‌کند. پس از ایجاد این فرم، می‌توانید با استفاده از JavaScript تجربه اعتبار سنجی فرم را افزایش داده و فرم را از طریق AJAX ارسال کنید و تجربه کاربرانی را که می‌خواهند از آن استفاده کنند را بهبود بخشید.

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

رسپانسیو بودن در هر سایزی

کاربران باید بتوانند از PWA شما در هر اندازه صفحه استفاده کنند و تمام مطالب با هر اندازه‌ای می‌بایست در دسترس باشند.

چرا؟

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

وظایفی که کاربران می‌خواهند تکمیل کنند و محتوایی که می‌خواهند به آن دسترسی پیدا کنند با اندازه نمای نمایش تغییر نمی‌کند. محتوا را می‌توان در اندازه‌های مختلف ویوپورت مرتب کرد. در واقع، همانطور که لوک وروبلوسکی در کتاب خود Mobile First بیان کرده است، شروع از سایز کوچک به بزرگ به جای عکس آن می‌تواند در واقع طراحی سایت را بهبود بخشد:

«دستگاه‌های تلفن همراه به تیم‌های توسعه‌دهنده نرم‌افزار نیاز دارند تا فقط روی مهمترین داده‌ها و اقدامات موجود در برنامه تمرکز کنند. در یک صفحه نمایش 320 در 480 پیکسل جایی برای عناصر اضافی و غیرضروری وجود ندارد. شما باید اولویت‌بندی کنید.»

یک صفحه آفلاین آماده کنید

وقتی کاربران آفلاین هستند، نگه داشتن آنها در PWA شما تجربه یکپارچه‌تری نسبت به بازگشت به صفحه آفلاین پیش فرض مرورگر را فراهم می‌کند.

چرا؟

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

برنامه شما قابل‌نصب است

کاربرانی که برنامه‌هایی را به دستگاه خود نصب یا اضافه می‌کنند بیشتر تمایل دارند با آن برنامه‌ها ارتباط برقرار کنند.

چرا؟

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

چرا می‌خواهید یک کاربر PWA شما را نصب کند؟ به همان دلیلی که می‌خواهید کاربر برنامه شما را از فروشگاه برنامه نصب کند. کاربرانی که برنامه‌های شما را نصب می‌کنند مخاطبینی هستند که جذب سایت شما شده‌اند و معیارهای تعامل بهتری نسبت به بازدیدکنندگان معمولی دارند. این معیارها شامل بازدیدهای مکرر بیشتر، زمان طولانی‌تر در سایت شما و نرخ تبدیل بالاتر است.

چک لیست برنامه وب پیشرفته بهینه

برای ایجاد یک برنامه وب پیشرفته واقعاً عالی، برنامه‌ای که احساس شود در کلاس خود بهترین است، به موارد دیگری بیش از چک لیست‌اصلی برای مولفه‌های یک برنامه وب پیشرو خوب نیاز دارید. بهترین چک لیست برنامه Progressive Web App این است که کاربر شما احساس کند برنامه بخشی از دستگاهی است که در حال کار با آن است در حالی که از آنچه قدرت وب ایجاد می‌کند نیز بهره می‌برد.

تجربه آفلاین ارائه دهد

در مواقعی که نیاز اساسی به اتصال به اینترنت وجود ندارد، برنامه شما در حالت آفلاین چنان باید کار کند که در صورت آنلاین کار می‌کند.

چرا؟

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

کاملاً قابل دسترسی است

همه تعاملات کاربر شرایط دسترسی WCAG 2.0 را پاس می‌کنند.

چرا؟

بیشتر افراد در برهه‌ای از زندگی خود می‌خواهند از PWA شما به طریقی استفاده کنند که تحت شرایط دسترسی WCAG 2.0 باشد. توانایی انسان در تعامل و درک PWA شما در طیفی گسترده است و نیازها می‌توانند موقتی یا دائمی باشند. با در دسترس قرار دادن PWA خود، از قابل‌استفاده بودن آن برای همه اطمینان حاصل می‌کنید.

از طریق جستجو قابل یافتن است

برنامه شما می‌بایست به راحتی از طریق جستجو قابل یافتن باشد.

چرا؟

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

با هر نوع ورودی کار می‌کند

PWA شما باید با ماوس، صفحه کلید، قلم یا لمس به یک اندازه قابل استفاده باشد.

چرا؟

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

برای کسب مجوز از کاربر زمینه منطقی لازم را ایجاد می‌کند

هنگام درخواست اجازه استفاده از API های قدرتمند، زمینه ایجاد کنید و دلایل منطقی ارائه دهید و فقط در صورت نیاز به API از کاربر درخواست کنید.

چرا؟

API هایی که باعث اعلان مجوز می‌شوند، مانند اعلان‌ها، موقعیت جغرافیایی و اطلاعات کاربری، برای کاربر ایجاد مزاحمت می‌کنند، زیرا به عملکرد قدرتمندی که نیاز به انتخاب دارد مربوط می‌شوند. راه‌اندازی این درخواست‌ها بدون ایجاد زمینه باعث می‌شود کاربران کمتر مجوزهای مورد نظر را بپذیرند و در آینده به آنها بی‌اعتماد شوند. درعوض، فقط پس از ارائه دلایل منطقی مناسب به کاربر برای اینکه چرا به آن مجوز احتیاج دارید، آن دستورات را فعال کنید.

بهترین روش‌ها را برای کد سالم انتخاب می‌کند

سالم نگه داشتن پایگاه کد، دستیابی به اهداف و ارائه ویژگی‌های جدید را آسان می‌کند.

چرا؟

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

منبع:

https://web.dev/pwa-checklist/

ادامه مطلب

03مرداد

موفقیت تجاری با اپلیکیشن‌ وب پیشرو(PWA)

مرداد 3, 1400 نویسنده آوین آویسا

برنامه‌های وب پیشرو در نقشه راه بسیاری از شرکت‌ها قرار دارند تا وب سایت خود را مدرن کنند و با انتظارات جدید کاربران سازگار شوند. مانند همه مفاهیم جدید و قابلیت‌های فنی، آنها سوالاتی را هم به وجود می‌آورند: مشتریان من چه انتظاراتی دارند، این برنامه‌ها چقدر باعث رشد تجارت من می‌شوند و چقدر از نظر فنی امکان‌پذیر هستند؟

success-by-pwa-1 برای شکل دادن به استراتژی دیجیتال شما، بسیاری از ذینفعان اغلب درگیر هستند: مدیر محصول و CMO که صاحبین برنامه هستند، CTO که امکان‌سنجی و قابلیت‌اطمینان یک فناوری را ارزیابی می‌کند، محققان UX که تأیید می‌کنند آیا یک ویژگی، مسأله واقعی مشتری را حل می‌کند.
هدف این مقاله کمک به شما در پاسخ به این سه سوال و شکل دادن به پروژه PWA شما است. از نیاز مشتری خود شروع می‌کنیم، این را به ویژگی های PWA ترجمه خواهیم کرد و در نهایت بر اندازه‌گیری تأثیر تجاری هر ویژگی تمرکز خواهیم کرد.

PWA نیازهای مشتری را برطرف می‌کند

یک قانون که ما دوست داریم و هنگام ساخت محصولات در Google از آن پیروی کنیم این است: “بر روی کاربر تمرکز کن و همه موارد دیگر درست خواهند شد” ابتدا به کاربر فکر کنید: نیازهای مشتری من چیست و PWA چگونه آنها را تأمین می‌کند؟

success-by-pwa-2 زمانی که در مورد کاربر تحقیق می‌کنیم، الگوهای زیر را می‌توان پیاده‌سازی کرد:

کاربران از تأخیر و عدم اطمینان در تلفن همراه متنفر هستند: میزان استرس ناشی از تاخیر تلفن همراه با تماشای یک فیلم ترسناک قابل‌مقایسه است.
پنجاه درصد از کاربران تلفن‌های هوشمند به دلیل اینکه نمی‌خواهند یک برنامه را بارگیری کنند، بیشتر از سایت تلفن همراه یک شرکت در هنگام مرور یا خرید استفاده می‌کنند.
یکی از مهمترین دلایل حذف نصب برنامه، فضای ذخیره‌سازی محدود است (در حالی که PWA نصب شده معمولاً کمتر از 1 مگابایت حجم آشغال می‌کند).
کاربران تلفن‌های هوشمند به احتمال زیاد از سایت‌های تلفن همراه که توصیه‌های مربوط به محصولات را ارائه می‌دهند خرید می‌کنند و 85٪ از کاربران تلفن‌های هوشمند می‌گویند اعلان‌های تلفن همراه مفید هستند.

با توجه به این مشاهدات، ما دریافتیم که مشتریان تجربیات سریع، قابل‌نصب، قابل اعتماد و جذاب را ترجیح می‌دهند!

PWA از قابلیت های وب مدرن استفاده می‌کند

PWAها مجموعه‌ای از بهترین شیوه‌ها و APIهای وب مدرن را ارائه می‌دهند که نیازهای مشتریان شما که ایجاد یک سایت سریع، قابل‌نصب، قابل اعتماد و جذاب می‌باشد را برآورده می‌کنند.
به عنوان مثال، استفاده از یک سرویس‌دهنده برای ذخیره منابع شما و دریافت زودتر از موعد داده باعث سریع‌تر و قابل‌اعتمادتر شدن سایت شما می‌شود. نصب سایت شما راهی آسان برای دسترسی مستقیم مشتریان از صفحه اصلی یا راه انداز برنامه به مشتریان می‌دهد. APIهای جدید مانند Web Push Notifications باعث سهولت در جذب مجدد کاربران با محتوای شخصی شده برای ایجاد وفاداری می‌شوند.

درک تأثیرات تجاری

تعریف موفقیت شغلی با توجه به فعالیت شما، می‌تواند موارد زیادی باشد:

کاربران زمان بیشتری را در سایت شما سپری کنند.
کاهش نرخ پرش (bounce rate) سایت شما.
بهبود نرخ تبدیل (conversion rates).
بازدیدکنندگان مجدد بیشتر.

بیشتر پروژه‌های PWA منجر به نرخ تبدیل بیشتر موبایل می‌شوند و شما می‌توانید از مطالعات موردی PWA اطلاعات بیشتری کسب نمایید. بسته به اهداف خود، ممکن است بخواهید برخی از جنبه‌های PWA را که برای کسب و کار شما منطقی‌ترند، در اولویت قرار دهید و این استراتژی کاملاً درست است. ویژگی‌های PWA را می‌توان بصورت جداگانه راه‌اندازی کرد. بیایید تأثیر تجاری هر یک از این ویژگی‌های عالی بیان‌شده را بسنجیم.

تأثیر تجاری یک وب سایت سریع

مطالعه اخیر Deloitte Digital نشان می‌دهد که سرعت بارگزاری صفحه، تأثیر بسزایی در معیارهای تجاری دارد.
کارهای زیادی وجود دارد که می‌توانید برای بهینه‌سازی سرعت سایت خود انجام دهید تا گشت‌وگذار همه کاربران خود را بهینه کنید. اگر نمی‌دانید از کجا شروع کنید، به بخش Fast نگاهی بیندازید و از Lighthouse برای اولویت‌بندی مهمترین موارد برای رفع مشکل استفاده کنید.
هنگام کار بر روی بهینه‌سازی سرعت، شروع به اندازه‌گیری مداوم سرعت سایت خود با ابزارها و معیارهای مناسب برای نظارت بر پیشرفت خود کنید. به عنوان مثال، معیارهای خود را با Lighthouse اندازه‌گیری کنید، اهداف واضحی مانند داشتن امتیازات “خوب” Core Web Vital را برای خود تعریف کنید. به لطف اندازه‌گیری‌های روزانه می‌توانید تأثیر تغییرات بر عمل‌کرد را بررسی کنید.

success-by-pwa-4 Ebay سرعت را به عنوان یک هدف برای سال 2019 در نظر گرفت. آنها از تکنیک‌هایی مانند بودجه عملکرد، بهینه‌سازی مسیر حیاتی و گرفتن داده زودهنگام استفاده کردند. آنها نتیجه گرفتند که به ازای هر 100 میلی‌ثانیه بهبود زمان بارگذاری صفحه جستجو، تعداد افزودنی به سبد خرید 0.5٪ افزایش می‌یابد.

تأثیر تجاری یک وب سایت قابل نصب

چرا می‌خواهید یک کاربر PWA شما را نصب کند؟ پاسخ این سؤال تسهیل بازگشت کاربر به سایت است. در مواردی که با نصب برنامه اندروید حداقل سه مرحله اضافه می‌شود (تغییر مسیر به Play Store، بارگیری، راه اندازی مجدد برنامه Android)، نصب PWA با یک کلیک به صورت یکپارچه انجام می‌شود و کاربر از محتوای فعلی دور نمی‌شود.

پس از نصب، کاربران می‌توانند آن را با یک کلیک از روی صفحه اصلی خود راه‌اندازی کنند، هنگام جابجایی بین برنامه‌ها، آن را در لیست برنامه‌های خود مشاهده کنند یا از طریق نتیجه جستجوی برنامه آن را پیدا کنند. ما این برنامه را Discover-Launch-Switch می‌نامیم، و نصب PWA کلید دسترسی بدون مرز است.
PWA علاوه بر اینکه از روی صفحات دستگاه کاربران قابل دسترسی است، دقیقاً مانند یک برنامه نیتیو راه‌اندازی می‌شود: در یک تجربه مستقل، جدا از مرورگر. علاوه‌براین، از خدمات دستگاه در سطح سیستم‌عامل مانند تغییر برنامه و تنظیمات بهره‌مند است.
برای اینکه PWA شما قابل نصب باشد، باید معیارهای اساسی را داشته باشد. وقتی این معیارها را برآورده کردید، می‌توانید نصب را در تجربه کاربری خود روی دسکتاپ و موبایل، تبلیغ کنید.

success-by-pwa-7 هنگامی که شروع به قابل‌نصب کردن PWA خود کردید، باید تعداد کاربران در حال نصب PWA و نحوه استفاده آنها از PWA را اندازه‌گیری کنید.
برای به حداکثر رساندن تعداد کاربرانی که سایت شما را نصب می‌کنند، ممکن است بخواهید پیام‌های تبلیغاتی مختلف (“نصب در یک ثانیه” یا “افزودن میانبر ما برای دنبال کردن سفارش خود” را آزمایش کنید) در مکان‌های مختلف (بنر هدر) را امتحان کنید.
برای درک اینکه کاربران شما چگونه رفتار می‌کنند و بهبود وضعیت برنامه می‌توان چهار معیار زیر را در نظر گرفت:

تعداد کاربران واجد شرایط نصب.
تعداد کاربرانی که روی درخواست نصب UI کلیک کردند.
تعداد کاربرانی که نصب را پذیرفتند و تعداد کاربرانی که از نصب آن خودداری کردند.
تعداد کاربرانی که با موفقیت برنامه را نصب کردند.

شما می‌توانید هم پروسه نصب اپلیکیشن را روی همه کاربران آغاز کنید و هم می‌توانید رویکرد محافظه‌گر داشته باشید و روی گروه کوچکی از کاربران کار کنید.
بعد از چند روز یا چند هفته باید داده‌هایی داشته باشید تا بتوانید تأثیر آن را بر کسب و کار خود بسنجید. رفتار افرادی که از میانبر نصب شده وارد می‌شوند چه تعدادی است؟ آیا آنها بیشتر جذب می‌شوند؟
برای تقسیم‌بندی کاربرانی که PWA شما را نصب کرده‌اند، رویداد appinstalled را پیگیری کنید و از JavaScript برای بررسی اینکه آیا کاربران در حالت مستقل هستند استفاده کنید (نشانگر استفاده از PWA نصب شده). سپس از این موارد به عنوان متغیر یا ابعاد برای تجزیه و تحلیل خود استفاده کنید.

success-by-pwa-8 مطالعه موردی Weekendesk نکات جالبی را در بر دارد: آنها پیشنهاد می‌کنند برای بالا بردن تعداد نصب، لینک نصب در صفحه دوم بازدید کاربر قرار داده بشود. و آنها مشاهده کردند که مشتریانی که از طریق اپ نصب‌شده روی صفحه اصلی به سایت برمی‌گردند بیش از دو برابر دیگر مشتریان است.

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

تأثیر تجاری یک وب سایت قابل‌اطمینان

بازی Chrome Dino که در صورت آفلاین بودن کاربر ارائه می‌شود، بیش از 270 میلیون بار در ماه انجام می‌شود. این تعداد قابل‌توجه نشان می‌دهد که قابلیت‌اطمینان شبکه، خصوصاً در بازارهایی با داده‌های تلفن همراه غیرقابل‌اعتماد یا گران مانند هند، برزیل، مکزیک یا اندونزی، یک فرصت قابل‌توجه است. وقتی برنامه نصب‌شده از فروشگاه برنامه راه‌اندازی می‌شود، بدون توجه به اتصال به اینترنت، کاربران انتظار دارند که آن اپلیکیشن باز شود. برنامه‌های وب پیشرو نباید تفاوتی در این مساله داشته باشند.
حداقل باید یک صفحه آفلاین ساده که به کاربر می‌گوید برنامه بدون اتصال شبکه در دسترس نیست، ارائه شود. سپس، با ارائه برخی از قابلیت‌ها که در حالت آفلاین منطقی است، یک گام به پیش بردارید. به عنوان مثال، می‌توانید دسترسی به بلیط‌ها یا کارت‌های پرواز، اطلاعات مرکز تماس، مقالات یا دستورالعمل‌هایی که کاربر اخیراً مشاهده کرده است و غیره را فراهم کنید.

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

success-by-pwa-12 مطالعه موردی Trivago نشان می‌دهد که چگونه این مساله می‌تواند بر اهداف کسب و کار شما تأثیر بگذارد: برای کاربرانی که جلسات آنها با یک دوره آفلاین قطع شده است (حدود سه درصد از کاربران)، 67 درصد از کسانی که به اینترنت باز می‌گردند به کار با سایت ادامه می‌دهند.

تأثیر تجاری یک وب‌سایت جذاب

پوش نوتیفیکیشن‌های وب به کاربران اجازه می‌دهد تا از به روزرسانی‌های سایت‌های موردعلاقه خود مطلع شوند و به شما امکان می دهد تا آنها را به طور موثر با محتوای مرتبط و سفارشی سایت خود درگیر کنید.
البته باید مراقب باشید. درخواست از کاربران برای ثبت‌نام در اعلان‌های وب در بدو ورود و بدون توضیح مزایا می‌تواند به عنوان اسپم و ناخوشایند تلقی شود و بر تجربه کاربران تأثیر منفی بگذارد. اطمینان حاصل کنید که بهترین شیوه‌ها را در هنگام اعلان دنبال کنید و از طریق ویژگی‌های مرتبط مانند تأخیر قطار، ردیابی قیمت، محصولات موجود در انبار و غیره، پذیرش این ویژگی را تبلیغ کنید.
از نظر فنی، پوش نوتیفیکیشن‌های وب به لطف یک سرویس ورکر در پس‌زمینه اجرا می‌شوند و اغلب توسط سیستم ساخته شده برای مدیریت فعالیت‌ها (به عنوان مثال Firebase) ارسال می‌شوند. این ویژگی برای کاربران موبایل (Android) و دسکتاپ ارزش کسب و کاری قابل‌توجهی دارد: بازدیدهای تکرارشونده و در نتیجه فروش و تبدیل را افزایش می‌دهد.
برای اندازه‌گیری اثربخشی پوش نوتیفیکیشن‌ها می‌توان معیارهای زیر را در نظر گرفت:

تعداد کاربران واجد شرایط پوش نوتیفیکیشن‌ها.
تعداد کاربرانی که روی اعلان پوش نوتیفیکیشن‌ها UI کلیک می‌کنند.
تعداد کاربرانی که اجازه پوش نوتیفیکیشن‌ها را می‌دهند.
تعداد کاربرانی که پوش نوتیفیکیشن‌ها دریافت می‌کنند.
تعداد کاربرانی که جذب نوتیفیکیشن‌ها می‌شوند.
تبدیل و تعامل کاربران ناشی از نوتیفیکیشن‌ها.

P در PWA: راه‌اندازی پیشرو، ویژگی به ویژگی

PWAها، وب‌سایت‌های مدرنی هستند که همراه با تمام ویژگی‌های کاربرپسند که کاربران در برنامه‌های Android / iOS / دسکتاپ دوست دارند، از ویژگی‌های گسترده وب بهره‌مند می‌شوند. آنها از مجموعه‌ای از بهترین روش‌ها و APIهای مدرن وب استفاده می‌کنند که بسته به مشخصات و اولویت‌های کاری شما می‌توانند به طور مستقل اجرا شوند.

success-by-pwa-14 برای تسریع در نوسازی وب‌سایت خود و تبدیل آن به یک PWA واقعی، شما را به چابکی تشویق می‌کنیم: ویژگی به ویژگی را راه‌اندازی کنید. ابتدا در مورد کاربران خود تحقیق کنید که چه ویژگی‌هایی بیشترین ارزش را برای آنها به ارمغان می‌آورد، سپس آنها را در اختیار طراحان و توسعه‌دهندگان خود قرار دهید و در آخر فراموش نکنید که مقدار درآمد بیشتری که PWA به ارمغان می‌آورد را اندازه‌گیری کنید.

منبع:

https://web.dev/drive-business-success/

ادامه مطلب

28تیر

اپلیکیشن‌های پیشرو در وب (PWA) چیستند؟

تیر 28, 1400 نویسنده آوین آویسا

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

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

مقایسه اپ‌ها اگر از نظر قابلیت‌ها و امکان‌دسترسی اپلیکیشن‌های مخصوص پلتفرم‌ها و اپلیکیشن‌های وب را بررسی کنید، اپلیکیشن‌های مخصوص پلتفرم‌ها، بهترین قابلیت‌ها را نشان می‌دهند در حالی که اپلیکیشن‌های وب بهترین امکانات را نشان می‌دهند. بنابراین برنامه‌های وب پیشرو در کجا قرار می‌گیرند؟

اپلیکیشن‌های پیشرو در وب (PWA) با استفاده از APIهای مدرن ساخته شده و بهینه می‌شوند تا قابلیت‌ها، قابلیت‌اطمینان و قابلیت‌نصب بیشتر را در هنگام دسترسی به هر کسی، هر مکان، در هر دستگاهی با یک پایگاه کد، فراهم کنند.

سه ستون اپلیکیشن

اپلیکیشن‌های پیشرو در وب (PWA) برنامه‌های تحت وب هستند که به گونه‌ای طراحی شده اند که قابلیت، قابلیت‌اطمینان و نصب دارند. این سه ستون آن‌ها را به تجربه‌ای تبدیل می‌کنند که احساس یک اپلیکیشن نیتیو به کاربر منتقل می‌شود.

قابلیت

وب امروزه کاملاً قادر به انجام هر کاری است. به عنوان مثال، می‌توانید با استفاده از WebRTC، موقعیت جغرافیایی، اعلان‌های فشرده و یک برنامه گفتگوی ویدیویی فرامحلی ایجاد کنید. می‌توانید آن برنامه را قابل نصب کنید و آن مکالمه‌ها را با WebGL و WebVR به صورت مجازی انجام دهید. با معرفی WebAssemble، توسعه‌دهندگان می‌توانند از اکوسیستم‌های دیگر مانند C ، C ++ و Rust استفاده کنند و دهه‌ها کار و قابلیت را به وب اضافه کنند. به عنوان مثال، Squoosh.app برای فشرده‌سازی تصویر پیشرفته از این قابلیت استفاده می‌کند.

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

بین APIهای مدرن، WebAssemble و API های جدید، اپلیکیشن‌های وب از هر زمان دیگری توانایی بیشتری دارند و این قابلیت‌ها در حال رشد هستند.

قابل اعتماد

یک اپلیکیشن‌ پیشرو در وب (PWA) قابل اعتماد بدون در نظر گرفتن شبکه، سریع و قابل اعتماد است.

سرعت برای کسب تجربه کاربری مناسب، بسیار مهم است. در حقیقت، با افزایش زمان بارگیری صفحه از 1 ثانیه به ده ثانیه، احتمال پرش کاربر 123٪ افزایش می‌یابد. عملکرد پس از رویداد بارگیری متوقف نمی‌شود. کاربران هرگز نباید دغدغه این را داشته باشند که آیا تعامل آنها – مثلاً با کلیک روی یک دکمه –اجرا شده است یا خیر. اسکرول و انیمیشن باید روان باشد. عملکرد بر کل تجربه کاربر تأثیر می‌گذارد، از نحوه درک کاربران از برنامه شما تا نحوه عملکرد واقعی آن.

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

کاربران عاشق برنامه‌هایی هستند که در یک چشم به هم زدن به تعامل پاسخ می‌دهند و تجربه‌ای هستند که می توان به آن اعتماد کرد.

قابلیت نصب

یک اپلیکیشن‌ پیشرو در وب (PWA) نصب‌شده به جای برگه مرورگر، در یک پنجره مستقل اجرا می‌شود. این اپلیکیشن‌ها از صفحه اصلی و نوار وظیفه قابل راه‌اندازی هستند. امکان جستجوی آنها در دستگاه و جابجایی بین آن‌ها با اپلیکیشن‌های نیتیو با برنامه سوئیچر وجود دارد. این مسائل باعث می‌شوند که کاربراحساس کند که این این اولیکیشن‌ها بخشی از دستگاهی هستند که روی آن نصب شده‌اند.

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

وقتی یک اپلیکیشن‌ پیشرو در وب (PWA) از یک برگه خارج می‌شود و به یک پنجره برنامه مستقل تبدیل می‌شود، نحوه تفکر و تعامل کاربران با آن را تغییر می‌دهد.

بهترین در هر دو عالم!

از نظر ذاتی، اپلیکیشن‌ پیشرو در وب (PWA) فقط برنامه‌های وب هستند. با استفاده از پیشرفت تدریجی، قابلیت‌های جدید در مرورگرهای مدرن فعال می‌شوند. با استفاده از سرویس‌دهنده ها و یک مانیفست برنامه وب، برنامه وب شما قابل اعتماد و قابل نصب می‌شود. اگر قابلیت‌های جدید در دسترس نباشد، کاربران همچنان تجربه اصلی را کسب می‌کنند.

اعداد دروغ نمی گویند! شرکت‌هایی که اپلیکیشن‌‌های پیشرو در وب (PWA) را راه‌اندازی کرده‌اند، نتایج چشمگیری را به دست آورده‌اند. به عنوان مثال، توییتر شاهد افزایش 65 درصدی صفحات در هر جلسه، 75 درصد توییت‌های بیشتر و 20 درصد کاهش نرخ پرش بود، در حالی که حجم برنامه آنها بیش از 97 درصد کاهش یافته است. پس از استفاده، Nikkei شاهد 2.3 برابر ترافیک ارگانیک، 58٪ اشتراک بیشتر و 49٪ بیشتر کاربران فعال روزانه بود. Hulu تجربه دسکتاپ مخصوص پلتفرم خود را با یک اپلیکیشن‌ پیشرو در وب (PWA) جایگزین کرد و در آمار بازدیدهای برگشتی به 27٪ افزایش دست یافت.

برنامه پیشرو در وب (PWA) فرصتی منحصر به فرد برای ارائه تجربه‌ای تحت وب که کاربران شما آن را دوست دارند فراهم می‌کند. با استفاده از جدیدترین ویژگی‌های وب برای به وجود آوردن قابلیت‌ها و قابلیت اطمینان بیشتر، برنامه پیشرو در وب اجازه می‌دهند آنچه را که می‌سازید توسط هر کسی، در هر مکان، بر روی هر دستگاهی با یک پایگاه کد نصب شود.

ادامه مطلب

07تیر

معیار بزرگترین عنصر (LCP) چیست؟

تیر 7, 1400 نویسنده آوین آویسا

از نظر تاریخی، اندازه‌گیری سرعت بارگیری و مشاهده محتوای اصلی یک صفحه وب برای کاربران یک چالش مهم برای توسعه‌دهندگان بوده است. معیار بزرگترین عنصر (LCP) کلید ماجراست!

معیارهای قدیمی مانند load یا DOMContentLoaded خوب نیستند، زیرا لزوماً با آنچه کاربر در صفحه خود می‌بیند مطابقت ندارند. معیارهای جدیدتر عملکرد کاربر محور مانند First Contentful Paint (FCP) نیز فقط ابتدای تجربه بارگیری را اندازه‌گیری می‌کنند. اگر صفحه‌ای نشانگر بارگیری را نشان می‌دهد‌، این لحظه برای کاربر چندان مناسب نیست.

معیارهای عملکردی مانند First Meaningful Paint (FMP) و Speed Speed (SI) (هر دو موجود در Lighthouse) نیز موجود هستند، اما توضیح این معیارها پیچیده است، و اغلب اشتباه است – به این معنی که آن‌ها هنوز هم بارگذاری محتوای اصلی صفحه را تشخیص نمی‌دهند.

بعضی اوقات نگاه ساده‌تر، بهتر است. بر اساس بحث در کارگروه عملکرد وب W3C و تحقیقاتی که در Google انجام شده است، متوجه شده‌ایم که یک روش دقیق‌تر برای اندازه‌گیری زمان بارگیری محتوای اصلی یک صفحه، بررسی زمان ارائه بزرگترین عنصر است.

معیار بزرگترین عنصر (LCP) چیست؟

معیار Largest Contentful Paint (LCP) زمان رندر بزرگترین تصویر یا بلوک متنی را که در قسمت viewport قابل مشاهده است، نسبت به زمان بارگیری صفحه برای اولین بار، را گزارش می‌کند.

امتیاز خوب برای معیار بزرگترین عنصر (LCP) چیست؟

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

چه عناصری در این معیار در نظر گرفته می‌شوند؟

انواع عناصر در نظر گرفته شده برای بزرگترین محتوا عبارتند از:

عناصر <img>.
عناصر <image> داخل عنصر <svg>.
عناصر <video> (از تصویر پوستر استفاده می‌شود).
عنصری با تصویر پس‌زمینه که از طریق تابع url () بارگیری می‌شود (در مقابل گرادیان CSS).
عناصر سطح بلوک حاوی گره‌های متنی یا سایر عناصر متن درون خطی فرزندان(children).

توجه داشته باشید، محدود کردن عناصر به این مجموعه محدود به منظور ساده نگه داشتن موارد در ابتدا بوده است. با انجام تحقیقات بیشتر ممکن است در آینده عناصر اضافی (به عنوان مثال <svg> و <video>) اضافه شوند.

اندازه یک عنصر چگونه تعیین می‌شود؟

اندازه عنصر گزارش شده برای بزرگترین محتوا معمولاً اندازه‌ای است که برای کاربر در داخل ویوپورت قابل‌مشاهده است. اگر عنصر خارج از ویوپورت گسترش یابد، یا اگر هر یک از عناصر قطع شده یا دارای سرریز غیرقابل مشاهده(non-visible overflow) باشد‌، آن قسمت‌ها در اندازه عنصر محاسبه نمی‌شوند.

برای عناصر تصویری که اندازه واقعی آن‌ها تغییر کرده است، اندازه‌ای محاسبه خواهد شد که کوچک‌تر باشد، خواه اندازه قابل مشاهده خواه اندازه واقعی. به عنوان مثال، تصاویری که به مقدار بسیار کوچک‌تر از اندازه واقعی خود کوچک شده‌اند، فقط‌ اندازه‌ای را که در آن نمایش داده می‌شوند محاسبه می‌شود، در حالی که تصاویری که در اندازه بزرگتر کشیده شده‌اند، فقط اندازه‌های واقعی آن‌ها گزارش می‌شود.

برای عناصر متن، فقط اندازه گره‌های متنی آن‌ها در نظر گرفته شده است (کوچکترین مستطیلی که همه گره‌های متنی را در بر می‌گیرد).

برای همه عناصر، هیچ حاشیه، padding یا حاشیه اعمال شده از طریق CSS در نظر گرفته نشده است.

چه زمانی بزرگترین محتوا گزارش می‌شود؟

صفحات وب معمولاً به صورت مرحله‌ای بارگیری می‌شوند و در نتیجه ممکن است بزرگترین عنصر صفحه تغییر کند.

برای مقابله با این مساله، مرورگر به محض اینکه اولین کادر را ارائه کرد، یک PerformanceEntry از بزرگترین محتوا را شناسایی می‌کند که بزرگترین عنصر محتوایی را مشخص می‌کند. اما سپس، پس از ارائه فریم‌های بعدی، هر زمان که بزرگترین عنصر محتوا تغییر کرد، PerformanceEntry دیگری ارسال می‌شود.

به عنوان مثال، در صفحه‌ای با متن و یک تصویر، مرورگر ممکن است در ابتدا متن را رندر کند – در آن زمان مرورگر یک ورودی با بزرگترین محتوا را ارسال می‌کند که ویژگی عنصر آن احتمالاً به یک <p> یا <h1> اشاره دارد. بعداً، پس از اتمام بارگذاری تصویر، دومین ورودی با محتوای بزرگ‌تر ارسال می‌شود و ویژگی عنصر آن به <img> اشاره می‌کند.

توجه به این نکته مهم است که فقط می‌توان یک عنصر را بزرگترین عنصر محتوایی در نظر گرفت که برای کاربر قابل‌مشاهده است. تصاویری که هنوز بارگیری نشده‌اند “ارائه” محسوب نمی‌شوند. در چنین مواردی ممکن است عنصر کوچکتر به عنوان بزرگترین عنصر محتوا گزارش شود، اما به محض اتمام رندر، عنصر بزرگتر از طریق یک شی دیگر PerformanceEntry گزارش می‌شود.

علاوه بر تصاویر و قلم‌هایی که دیرهنگام بارگذاری می‌شوند، یک صفحه ممکن است با دسترسی به محتوای جدید عناصر جدیدی را به DOM اضافه کند. اگر هر یک از این عناصر جدید از بزرگترین عنصر محتوای قبلی بزرگتر باشند، عملکرد جدیدی نیز گزارش می‌شود.

اگر عنصری که در حال حاضر بزرگترین عنصر محتوایی است از قسمت view حذف شود (یا حتی از DOM حذف شود)، همچنان بزرگترین عنصر محتوایی در نظر گرفته خواهد شد مگر این‌که یک عنصر بزرگ‌تر ارائه شود.

به محض تعامل کاربر با صفحه (از طریق ضربه زدن، اسکرول یا فشار دادن کلید)، مرورگر گزارش ورودی‌های جدید را متوقف می‌کند، زیرا تعامل کاربر اغلب، موارد قابل‌مشاهده برای کاربر را تغییر می‌دهد (به خصوص در مورد اسکرول این مطلب درست است).

برای تجزیه و تحلیل، شما فقط باید آخرین PerformanceEntry ارسال‌شده شده را به سرویس تجزیه و تحلیل خود گزارش دهید.

زمان بارگذاری در مقابل زمان ارائه

به دلایل امنیتی، مهر زمانی تصاویر cross-origin که فاقد هدر Timing-Allow-Origin هستند، قرار نمی‌گیرد. در عوض، فقط زمان بارگذاری آن‌ها در معرض دید قرار دارد (زیرا این مورد از قبل از طریق بسیاری از API‌های وب دیگر نشان داده شده است).

نحوه تغییر عناصر و چیدمان عناصر چگونه انجام می شود؟

برای پایین نگه داشتن عملکرد در محاسبه و ارسال عملکردهای جدید، تغییرات در اندازه یا موقعیت یک عنصر باعث ایجاد نامزدهای جدید LCP نمی‌شود. فقط اندازه و موقعیت اولیه عنصر در ویوپورت در نظر گرفته می‌شود. یعنی، ممکن است تصاویری که در ابتدا خارج از صفحه ارائه می‌شوند و سپس به داخل صفحه انتقال داده می‌شوند، گزارش نمی‌شوند. همان‌طور که قبلاً اشاره شد، عناصری است که ابتدا در ویوپورت ارائه شده‌اند و سپس به پایین رانده می‌شوند، در گزارش به همان اندازه در ویوپورت گزارش خواهند شد.

مثال‌ها

در اینجا چند نمونه در چند وب سایت معروف مرور شده ا‌ند:

در هر دو جدول زمانی بالا، بزرگترین عنصر با بارگذاری محتوا تغییر می‌کند. در مثال اول، محتوای جدید به DOM اضافه می‌شود و این بزرگترین عنصر را تغییر می‌دهد. در مثال دوم، چیدمان تغییر می‌کند و محتوایی که قبلاً بیشترین مقدار را داشت، از ویوپورت حذف می‌شود.

گرچه غالباً چنین اتفاقی می‌افتد که محتوای بارگذاری دیررس نسبت به محتوای موجود در صفحه بزرگتر است، اما لزوماً اینگونه نیست. دو مثال بعدی بزرگترین محتوا را قبل از بارگیری کامل صفحه نشان می‌دهد.

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

بزرگترین عنصر (LCP) چگونه اندازه‌گیری می‌شود؟

LCP را می‌توان در آزمایشگاه یا به طور عملیاتی اندازه‌گیری کرد. ابزارهای زیر در دسترس هستند:

ابزار عملیاتی:

ابزار آزمایشگاهی:

اندازه‌گیری LCP در جاوااسکریپت

برای اندازه‌گیری LCP در JavaScript، می‌توانید از Largest Contentful Paint APIAPI استفاده کنید. مثال زیر نحوه ایجاد PerformanceObserver را نشان می‌دهد که ورودی‌های largest-contentful-paint را زیر نظر می‌گیرد و آن‌ها را به کنسول وارد می‌کند.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

new PerformanceObserver((entryList) => {

for (const entry of entryList.getEntries()) {

console.log('LCP candidate:', entry.startTime, entry);

}

}).observe({type: 'largest-contentful-paint', buffered: true});

در مثال بالا، هر ورودی largest-contentful-paintنشان‌دهنده کاندیدای فعلی LCP است. به طور کلی، مقدار startTime آخرین ورودی منتشر شده مقدار LCP است – با این حال، همیشه اینطور نیست. همه ورودی های largest-contentful-paint برای اندازه گیری LCP معتبر نیستند.

تفاوت‌های بین معیار و API

API بزرگترین محتوا را برای صفحات بارگیری شده در یک برگه پس زمینه ارسال می کند، اما هنگام محاسبه LCP این صفحات باید نادیده گرفته شوند.
API پس از ایجاد پس زمینه در یک صفحه، به largest-contentful-paint بیشتر ادامه می‌دهد، اما هنگام محاسبه LCP، باید این ورودی‌ها را نادیده گرفت (فقط در صورتی که صفحه در تمام زمان در پیش‌زمینه باشد، عناصر در نظر گرفته می‌شوند).
هنگام بازگرداندن صفحه از کش بک/ فرانت، API، ورودی‌های largest-contentful-paint را گزارش نمی‌کند، اما LCP باید در این موارد اندازه‌گیری شود زیرا کاربران آنها را به عنوان بازدیدهای صفحه تجربه می‌کنند.
API، ورودی‌هایی را که درون iframes رخ می‌دهند گزارش نمی‌کند، اما برای اندازه‌گیری صحیح LCP باید آنها را در نظر بگیرید. فریم‌های فرعی می‌توانند با استفاده از API ورودی‌های largest-contentful-paint خود را برای تجمیع در فریم والد گزارش دهند.

توسعه‌دهندگان به جای اینکه همه این تفاوت‌های ظریف را بخاطر بسپارند، می‌توانند برای اندازه‌گیری LCP از کتابخانه جاوا اسکریپت web-vitals استفاده کنند که این اختلافات را برای شما کنترل می‌کند (در صورت امکان).

import {getLCP} from 'web-vitals';
// Measure and log LCP as soon as it's available.
getLCP(console.log);

import {getLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.

getLCP(console.log);

اگر بزرگترین عنصر مهمترین عنصر نباشد چه می‌شود؟

در بعضی موارد مهمترین عنصر (یا عناصر) صفحه با بزرگترین عنصر یکی نیست و توسعه‌دهندگان ممکن است به جای آن علاقه بیشتری به اندازه‌گیری زمان رندر این عناصر دیگر را داشته باشند. همان‌طور که در مقاله معیارهای سفارشی شرح داده شده است، این مساله با استفاده از Element Timing API امکان‌پذیر است.

نحوه بهینه‌سازی معیار بزرگترین عنصر محتوا (LCP)

درمقاله جداگانه با جزییات تمام نحوه بهینه‌سازی LCP شرح داده شده است.

منبع:

https://web.dev/lcp/

ادامه مطلب

24خرداد

معیار تأخیر ورودی اول (FID) چیست؟

خرداد 24, 1400 نویسنده آوین آویسا

همه ما می‌دانیم که ایجاد یک احساس خوب در برخورد اول چقدر مهم است. همان‌طور که این مساله هنگام ملاقات با افراد جدید بسیار مهم است، در مورد تجربیات در وب نیز اهمیت بالایی دارد. معیار تأخیر ورودی اول (FID) نشان‌دهنده همین تجربه در وب است.

در وب، اولین برداشت خوب می‌تواند تفاوتی را بین تبدیل شدن شخصی به کاربر وفادار یا خروج و عدم بازگشت ایجاد کند. سوال این است که چه چیزی باعث ایجاد تأثیر خوب می‌شود و چگونه می توان نوع برداشتی کاربران را اندازه گیری کرد؟

در وب، اولین برداشت‌ها می‌توانند اشکال مختلف داشته باشند – مانند اولین برداشت از طراحی سایت و جذابیت بصری و همچنین اولین برداشت از سرعت و پاسخگویی.

در حالی که اندازه گیری اینکه کاربران چقدر طراحی سایت را دوست دارند سخت است، اما اندازه‌گیری سرعت و پاسخگویی آن چنین نیست!

اولین برداشت کاربران از اینکه سرعت بارگذاری سایت شما با First Contentful Paint (FCP) چقدر سریع است قابل اندازه‌گیری است. اما اینکه سایت شما با چه سرعتی می‌تواند پیکسل‌های صفحه را پر کند، تنها بخشی از داستان است. به همان اندازه میزان توانایی تعامل و پاسخگویی سایت شما با کاربرانی که سعی در استفاده از عناصر صفحه را دارند هم مهم است.

معیار تأخیر ورودی اول (FID) به اندازه‌گیری اولین برداشت کاربر از تعامل و پاسخگویی سایت شما کمک می‌کند.

معیار تأخیر ورودی اول (FID) چیست؟

FID از زمانی که کاربر برای اولین بار با یک صفحه ارتباط برقرار می‌کند (به عنوان مثال هنگامی که روی لینک کلیک می‌کند، روی دکمه‌ای ضربه می‌زند یا از کنترل سفارشی با استفاده از JavaScript استفاده می‌کند) تا زمانی که مرورگر در واقع در پاسخ به آن تعامل قادر به پردازش کنترل کننده‌های رویداد است، اندازه گیری می‌کند.

چه امتیازی برای معیار تأخیر ورودی اول (FID) خوب محسوب می‌شود؟

برای ایجاد یک تجربه کاربری خوب، سایت‌ها باید تلاش کنند تا تأخیر ورودی اول 100 میلی‌ثانیه یا کمتر داشته باشند. برای اطمینان از رسیدن به این هدف برای بیشتر کاربران، یک آستانه خوب برای اندازه‌گیری، رسیدن به این آستانه در ۷۵ درصد بار بارگیری صفحه است که در دستگاه‌های تلفن همراه و دسکتاپ اتفاق می‌افتد.

جزییات معیار تأخیر ورودی اول (FID)

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

به طور کلی، تأخیر ورودی به این دلیل اتفاق می‌افتد که ترد (thread) اصلی مرورگر مشغول انجام کار دیگری است، بنابراین (در آن لحظه) نمی‌تواند به کاربر پاسخ دهد. یک دلیل رایج ممکن است این اتفاق باشد، مرورگر مشغول تجزیه و اجرای یک فایل جاوا اسکریپت بزرگ است که توسط برنامه شما بارگذاری شده است. در حالی که این کار را انجام می‌دهد، نمی‌تواند شنوندگان(listeners) رویداد را اجرا کند زیرا JavaScript که بارگیری می‌کند ممکن است به او بگوید کار دیگری انجام دهد.

جدول زمانی زیر را برای بارگذاری معمول صفحه وب در نظر بگیرید:

تصویر فوق صفحه‌ای را نشان می‌دهد که چندین درخواست شبکه برای منابع (به احتمال زیاد فایل‌های CSS و JS) ایجاد می‌کند و – پس از اتمام بارگیری این منابع – در ترد اصلی پردازش می‌شوند.

این نتیجه در دوره‌هایی است که ترد اصلی لحظه‌ای مشغول است، که توسط بلوک‌های کار بژ رنگ نشان داده می‌شوند.

تأخیرهای ورودی اول طولانی معمولاً بین First Contentful Paint (FCP) و Time to Interactive (TTI) رخ می‌دهد زیرا این صفحه برخی از محتوای خود را ارائه داده است اما هنوز به طور کامل تعاملی نیست. برای نشان دادن چگونگی این اتفاق ، FCP و TTI به جدول زمانی اضافه شده‌اند:

ممکن است متوجه شده باشید که بین FCP و TTI زمان نسبتاً کمی (از جمله سه تسک طولانی) وجود دارد، اگر کاربر در آن مدت سعی کند با صفحه ارتباط برقرار کند (به عنوان مثال روی لینک کلیک کند)، بین زمانی کلیک و هنگامی که ترد اصلی قادر به پاسخگویی است، تاخیری به وجود خواهد آمد.

در نظر بگیرید که اگر یک کاربر سعی کند با صفحه، نزدیک به ابتدای طولانی ترین کار تعامل کند چه اتفاقی می‌افتد:

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

اگر یک تعامل شنونده رویداد (event listener) نداشته باشد، چه اتفاقی می‌افتد؟

FID، تفاوت زمانی که یک رویداد ورودی دریافت می‌کند و زمانی که ترد اصلی بیکار است را اندازه می‌گیرد. این بدان معناست که FID حتی در مواردی که شنونده رویداد ثبت نشده است، اندازه‌گیری می‌شود. دلیل این امر این است که بسیاری از تعاملات کاربر به یک شنونده رویداد احتیاج ندارند اما برای اجرای آن نیاز به بیکار شدن ترد اصلی است.

به عنوان مثال، همه عناصر HTML زیر قبل از پاسخ به تعاملات کاربر باید منتظر بمانند تا کارهای در حال انجام روی ترد اصلی تکمیل شود:

زمینه‌های نوشتاری، چک‌باکس‌ها و دکمه‌های رادیویی (<input> ، <textarea>).
گزینه‌های کشویی انتخاب (<select>).
لینک‌ها (<a>).

چرا فقط ورودی اول را در نظر می‌گیریم؟

در حالی که تأخیر از هر ورودی می‌تواند منجر به تجربه کاربری بدی شود، به چند دلیل توصیه می‌کنیم اولین تاخیر ورودی را اندازه‌گیری کنید:

اولین تأخیر ورودی اولین برداشت کاربر از پاسخگویی سایت شما خواهد بود و اولین برداشت‌ها در شکل‌گیری تأثیر کلی ما درباره کیفیت و قابلیت اطمینان سایت بسیار مهم است.
بیشترین مشکلات تعاملی که امروزه در وب مشاهده می‌کنیم در هنگام بارگذاری صفحه رخ می‌دهد. بنابراین، ما اعتقاد داریم که در ابتدا تمرکز بر بهبود اولین تعامل کاربر سایت بیشترین تأثیر را در بهبود تعامل کل وب خواهد داشت.
راه‌حل‌های پیشنهادی برای اینکه چگونه سایت‌ها تأخیرهای ورودی اول بالا را برطرف کنند (تقسیم کد، بارگیری کمتر جاوا اسکریپت از قبل و غیره) لزوماً راه‌حل‌های یکسانی برای رفع تأخیر ورودی آهسته پس از بارگذاری صفحه نیستند. با تفکیک این معیارها، می‌توانیم دستورالعمل‌های عملکرد ویژه‌تری را به توسعه‌دهندگان وب ارائه دهیم.

چه‌چیزی به عنوان ورودی اول در نظر گرفته می‌شود؟

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

فعل و انفعالات دیگر، مانند اسکرول و بزرگنمایی، اقدامات مستمری هستند و محدودیت‌های عملکرد کاملاً متفاوتی دارند (همچنین، مرورگرها اغلب می‌توانند تاخیر خود را با اجرای آنها در یک موضوع جداگانه پنهان کنند).

به عبارت دیگر، FID بر روی R (پاسخگویی) در مدل عملکرد RAIL تمرکز دارد، در حالی که اسکرول و بزرگنمایی بیشتر مربوط به A (انیمیشن) است و کیفیت عملکرد آنها باید جداگانه ارزیابی شود.

اگر کاربری تعاملی با سایت شما نداشت چه اتفاقی می‌افتد؟

همه کاربران در هر بار بازدید با سایت شما ارتباط برقرار نخواهند کرد، و همه تعاملات مربوط به FID نیستند (همانطور که در بخش قبلی ذکر شد). بعلاوه، اولین تعاملات برخی از کاربران در مواقع بد (زمانی که ترد اصلی برای مدت زمان طولانی مشغول است) انجام خواهند شد و اولین تعاملات برخی دیگر از کاربران در اوقات خوب (زمانی که ترد اصلی کاملاً بیکار است) خواهند بود.

این بدان معناست که برخی از کاربران هیچ مقدار FID ندارند، برخی از کاربران دارای مقادیر FID کم و برخی از کاربران احتمالاً مقادیر FID بالایی دارند.

نحوه ردیابی، گزارش و تجزیه و تحلیل FID احتمالاً کاملاً متفاوت از سایر معیارهایی است که شما تا حالا استفاده کرده‌اید. بخش بعدی چگونگی انجام این کار را توضیح می‌دهد.

چرا فقط تأخیر ورودی را در نظر می‌گیریم؟

همانطور که در بالا ذکر شد، FID فقط “تأخیر” در پردازش رویداد را اندازه‌گیری می‌کند. این معیار نه زمان پردازش رویداد را اندازه می‌گیرد و نه زمانی را که مرورگر برای به روزرسانی UI پس از اجرای برنامه‌های کنترل رویداد نیاز دارد.

اگرچه این زمان برای کاربر مهم است و تجربه را تحت تأثیر قرار می‌دهد، اما در این معیار گنجانده نشده است، زیرا انجام این کار می‌تواند باعث ایجاد انگیزه در برنامه‌نویسان برای افزودن راهکارهایی شود که در واقع باعث بدتر شدن تجربه می‌شوند. یعنی آنها می‌توانند برای جدا کردن از وظیفه مرتبط با رویداد، منطق کنترل‌کننده رویداد خود را در یک کال‌بک ناهمگام قرار دهند (از طریق setTimeout () یا requestAnimationFrame ()). نتیجه می‌تواند بهبود در نمره معیار باشد در حالی که پاسخ کندتری توسط کاربر درک می‌شود.

با این حال، در حالی که FID فقط میزان “تأخیر” تأخیر رویداد را اندازه‌گیری می‌کند، توسعه‌دهندگانی که می‌خواهند بیشتر چرخه عمر رویداد را ردیابی کنند، می‌توانند با استفاده از API زمانبندی رویداد این کار را انجام دهند.

اندازه‌گیری معیار تأخیر ورودی اول (FID)

FID معیاری است که فقط در حالت عملیاتی قابل اندازه‌گیری است، زیرا برای تعامل با صفحه شما به یک کاربر واقعی نیاز دارد. می توانید FID را با ابزار زیر اندازه‌گیری کنید.

اندازه‌گیری معیار تأخیر ورودی اول (FID) در جاوااسکریپت

برای اندازه‌گیری FID در JavaScript، می‌توانید از Event Timing API استفاده کنید. مثال زیر نحوه ایجاد PerformanceObserver را نشان می‌دهد که ورودی‌های ورودی اول را گوش می‌کند و آنها را در کنسول ثبت می‌کند:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

new PerformanceObserver((entryList) => {

for (const entry of entryList.getEntries()) {

const delay = entry.processingStart - entry.startTime;

console.log('FID candidate:', delay, entry);

}

}).observe({type: 'first-input', buffered: true});

در مثال فوق، مقدار تأخیر ورودی اول ورودی با در نظر گرفتن دلتا بین زمان شروع ورود و پردازش زمان شروع می‌شود. در اکثر مواقع، این مقدار FID خواهد بود. با این حال، همه ورودی‌های ورودی اول برای اندازه‌گیری FID معتبر نیستند.

در بخش زیر تفاوت بین گزارش‌های API و نحوه محاسبه FID ذکر شده است:

API، ورودی‌های ورودی اول را برای صفحات بارگیری شده در یک برگه پس زمینه ارسال می‌کند اما هنگام محاسبه FID نباید از این صفحات چشم پوشی کرد.
اگر صفحه قبل از اولین ورودی صفحه پس زمینه داشته باشد، API، ورودی‌های ورودی اول را نیز ارسال می‌کند، اما هنگام محاسبه FID، این صفحات نیز باید نادیده گرفته شوند (ورودی‌ها فقط درصورتی که صفحه در کل زمان در پیش زمینه باشد در نظر گرفته می‌شوند).
هنگام بازگرداندن صفحه از کش بک/ فرانت، API، ورودی‌های ورودی اول را گزارش نمی‌کند، اما FID باید در این موارد اندازه‌گیری شود زیرا کاربران آنها را به عنوان بازدیدهای صفحه تجربه می‌کنند.
API، ورودی‌هایی را که درون iframes رخ می‌دهند گزارش نمی‌کند، اما برای اندازه‌گیری صحیح FID باید آنها را در نظر بگیرید. فریم‌های فرعی می‌توانند با استفاده از API ورودی‌های ورودی اول خود را برای تجمیع در فریم والد گزارش دهند.

توسعه‌دهندگان به جای اینکه همه این تفاوت‌های ظریف را بخاطر بسپارند، می‌توانند برای اندازه‌گیری FID از کتابخانه جاوا اسکریپت web-vitals استفاده کنند که این اختلافات را برای شما کنترل می‌کند (در صورت امکان).

import {getFID} from 'web-vitals';
// Measure and log FID as soon as it's available.
getFID(console.log);

import {getFID} from 'web-vitals';

// Measure and log FID as soon as it's available.

getFID(console.log);

تحلیل و گزارش FID

با توجه به واریانس مورد انتظار در مقادیر FID، بسیار مهم است که هنگام گزارش دادن در FID به توزیع مقادیر توجه کرده و روی درصدهای بالاتر تمرکز کنید.

در حالی که انتخاب درصد برای همه آستانه های (Core Web Vital) ۷۵ درصد است، اما در مورد FID اکیداً توصیه می‌کنیم که درصدهای ۹۵ تا ۹۹ را بخاطر داشته باشید، زیرا این موارد مربوط به اولین برداشت کاربران از سایت شما خواهد بود.

حتی بهتر است گزارشات خود را بر اساس دسته یا نوع دستگاه تقسیم کنید. به عنوان مثال، اگر گزارشات جداگانه‌ای برای دسکتاپ و موبایل اجرا می‌کنید، مقدار FID مورد توجه شما در دسکتاپ باید ۹۵–۹۹ درصد کاربران دسکتاپ باشد و مقدار FID مورد توجه شما در تلفن همراه باید ۹۵–۹۹ کاربران موبایل باشد.

بهبود امتیاز FID

در مقاله‌ای جداگانه به طور کامل در مورد راه‌های بهبود FID صحبت کرده‌ایم که برای مشاهده آن مقاله می‌توانید به آن مراجعه کنید. (لینک)

منبع:

https://web.dev/fid/

ادامه مطلب

17خرداد

معیار تغییر تجمعی چیدمان (CLS) چیست؟

خرداد 17, 1400 نویسنده آوین آویسا

آیا تا به حال مقاله‌ای را به صورت آنلاین خوانده‌اید که ناگهان چیزی در صفحه تغییر کند؟ بدون هشدار، متن حرکت می‌کند و مکان مطلبی که در حال مطالعه بودید، تغییر می‌کند. یا حتی بدتر: شما در حال ضربه زدن روی یک پیوند یا یک دکمه هستید، اما بلافاصله قبل از فرود آمدن انگشت خود – BOOM – پیوند حرکت می‌کند، و در آخر بر روی چیز دیگری کلیک می‌کنید! معیار تغییر تجمعی چیدمان (CLS) به ما کمک می‌کند تا این مشکل را بررسی و حل نماییم.

بیشتر اوقات این نوع تجربه ها فقط آزاردهنده هستند، اما در بعضی موارد می‌توانند آسیب واقعی ایجاد کنند.

جابجایی غیرمنتظره محتوای صفحه معمولاً به این دلیل اتفاق می‌افتد که منابع به صورت ناهمزمان بارگیری می‌شوند یا عناصر DOM به صورت پویا به صفحه بالاتر از محتوای موجود اضافه می‌شوند. دلیل این اتفاق ممکن است یک تصویر یا ویدئو با ابعاد نامشخص، قلم بزرگتر یا کوچکتر از نسخه پشتیبان خود، یا یک تبلیغ یا ویجت شخص ثالث که به صورت پویا اندازه خود را تغییر ‌می‌دهد، باشد.

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

معیار تغییر تجمعی چیدمان (CLS) به شما کمک می‌کند تا با اندازه‌گیری میزان بروز آن برای کاربران واقعی این مشکل را برطرف کنید.

معیار تغییر تجمعی چیدمان (CLS) چیست؟

CLS معیاری برای بزرگترین تغییرات طرح برای هر تغییر طرح غیر منتظره است که در کل طول عمر یک صفحه رخ می‌دهد.

هر زمان که عنصر قابل رویت موقعیت خود را از یک قاب ارائه شده به قاب دیگر تغییر می‌دهد، تغییر طرح‌بندی رخ می‌دهد.

شیفت‌های طرح‌بندی، که به عنوان پنجره جلسه (session window) شناخته می‌شود، زمانی است که یک یا چند تغییر چیدمان منفرد به صورت پی در پی و با کمتر از 1 ثانیه در هر شیفت و حداکثر 5 ثانیه برای کل مدت پنجره اتفاق می‌افتد.

بزرگترین شیفت پنجره جلسه‌ای با حداکثر نمره تجمعی از همه تغییرات طرح‌بندی در آن پنجره است.

امتیاز مناسب برای معیار تغییر تجمعی چیدمان (CLS) چیست؟

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

جزییات تغییرات چیدمان

شیفت‌های چیدمان توسط Layout Instability API تعریف می‌شوند، که گزارشات ورودی layout-shift را گزارش می‌دهد، هرگاه عنصری که در ویوپورت قابل مشاهده است، موقعیت آغازین خود را تغییر دهد. چنین عناصری، عناصر ناپایدار محسوب می‌شوند.

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

امتیاز تغییر چیدمان

برای محاسبه نمره تغییر طرح، مرورگر به اندازه Viewport و حرکت عناصر ناپایدار در Viewport بین دو فریم ارائه شده نگاه می‌کند. نمره تغییر طرح نتیجه ضرب دو اندازه‌گیری از آن حرکت است: نسبت تأثیر و نسبت فاصله (هر دو در زیر تعریف شده اند).

<span style="font-family: Liberation Mono, serif; color: #000000;"><span lang="en-US"><code class="western"><span lang="fa-IR">layout shift score = impact fraction * distance fraction</span></code></span></span>

1	<span style="font-family: Liberation Mono, serif; color: #000000;"><span lang="en-US"><code class="western"><span lang="fa-IR">layout shift score = impact fraction * distance fraction</span></code></span></span>

نسبت تاثیر

نسبت تاثیر چگونگی تأثیر عناصر ناپایدار بر فضای نمای بین دو قاب را اندازه می‌گیرد.

اجتماع مناطق قابل مشاهده برای همه عناصر ناپایدار برای قاب قبلی و قاب فعلی – به عنوان کسری از کل مساحت viewport – نسبت ضربه برای قاب فعلی است.

در تصویر بالا عنصری وجود دارد که نیمی از نمای در یک قاب را اشغال می‌کند. سپس، در فریم بعدی، عنصر 25٪ از ارتفاع viewport به سمت پایین حرکت می‌کند. مستطیل قرمز نشانگر اجتماع ناحیه قابل مشاهده عنصر در هر دو قاب است که در این حالت 75٪ کل viewport است، بنابراین نسبت تأثیر آن 0.75 است.

نسبت فاصله

قسمت دیگر معادله نمره تغییر طرح، فاصله‌ای را که عناصر ناپایدار نسبت به viewport حرکت کرده‌اند را اندازه‌گیری می‌کند. نسبت فاصله بزرگترین مسیری است که هر عنصر ناپایداری در قاب حرکت کرده است (به صورت افقی یا عمودی) تقسیم بر بزرگترین بعد viewport (عرض یا ارتفاع، هر کدام که بیشتر باشد).

مثال ۱:

در مثال بالا، بزرگترین بعد viewport ارتفاع است و عنصر ناپایدار ۲۵٪ از ارتفاع viewport حرکت کرده است که نسبت فاصله را ۰.۲۵ می‌کند. بنابراین، در این مثال نسبت ضربه ۰.۷۵ و نسبت فاصله ۰.۲۵ است، بنابراین نمره تغییر طرح ۰.۷۵ * ۰.۲۵ = ۰.۱۸۷۵ است.

مثال ۲:

مثال بعدی نشان می‌دهد که چگونه افزودن محتوا به یک عنصر موجود روی امتیاز تغییر طرح تأثیر می‌گذارد:

دکمه “Click Me!” در انتهای جعبه خاکستری با متن سیاه اضافه شده است، که جعبه سبز با متن سفید را به پایین (و تا حدی خارج از نمای نمایشگر) حرکت می‌دهد.

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

دکمه “Click Me!” قبلا در DOM نبود، بنابراین موقعیت آغازین آن نیز تغییر نمی‌کند.

موقعیت آغازین جعبه سبز تغییر می‌کند، اما از آنجایی که قسمتی از قسمت دید خارج شده است، هنگام محاسبه نسبت ضربه، منطقه پنهان‌شده در نظر گرفته نمی‌شود. اجتماع نواحی قابل‌مشاهده برای جعبه سبز در هر دو قاب (با مستطیل قرمز نشان داده شده است) همان مساحت جعبه سبز در قاب اول است – ۵۰٪ viewport. نسبت ضربه ۰.۵ است.

نسبت فاصله با فلش بنفش نشان داده شده است. جعبه سبز حدود ۱۴٪ از viewport به سمت پایین حرکت کرده بنابراین کسر فاصله ۰.۱۴ است.

نمره تغییر طرح ۰.۱۴ *۰.۵ = ۰.۰۷ است.

مثال ۳:

مثال بعدی چندین عنصر ناپایدار را نشان می‌دهد:

در اولین قاب بالا، چهار نتیجه درخواست API برای حیوانات وجود دارد که به ترتیب حروف الفبا مرتب شده‌اند. در فریم دوم، نتایج بیشتری به لیست مرتب‌شده اضافه می‌شوند.

اولین مورد در لیست (“Cat“) موقعیت آغازین خود را بین قاب‌ها تغییر نمی‌دهد، بنابراین پایدار است. به همین ترتیب، موارد جدید اضافه شده به لیست قبلاً در DOM نبودند، بنابراین موقعیت‌های آغازین آن‌ها نیز تغییر نمی‌کند. اما مواردی با برچسب “Dog” ،“Horse” و “Zebra” همه موقعیت‌های آغازین خود را تغییر می‌دهند و آن‌ها را به عناصر ناپایدار تبدیل می‌‌شوند.

مجدداً، مستطیل‌های قرمز نشان‌دهنده اجتماع این سه عنصر ناپایدار در مناطق قبل و بعد از آن است که در این حالت حدود ۳۸٪ viewport (نسبت تأثیر ۰.۳۸) است.

پیکان‌ها فاصله‌هایی را نشان می‌دهند که عناصر ناپایدار از موقعیت آغازین خود حرکت کرده‌اند. عنصر “Zebra” ، که با پیکان آبی نشان داده شده است، با حدود ۳۰٪ حرکت در ارتفاع viewport، بیشترین حرکت را داشته است. در نتیجه، نسبت فاصله در این مثال ۰.۳ است.

نمره تغییر طرح ۰.۳ * ۰.۳۸ = ۰.۱۱۷۲ است.

تغییرات چیدمان قابل‌پیش‌بینی در مقابل غیرقابل‌ پیش‌‌بینی

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

چیدمانی که توسط کاربر تغییر می‌کند

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

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

شیفت‌های چیدمانی که در فاصله 500 میلی ثانیه از ورودی کاربر رخ می‌دهد، دارای پرچم hadRecentInput می‌باشد، بنابراین می‌توان آن‌ها را از محاسبات خارج کرد.

انیمیشن و انتقال

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

ویژگی transform در CSS به شما امکان می‌دهد تا عناصر را جابجا کنید بدون اینکه تغییراتی در طرح ایجاد کنید:

به جای تغییر خصوصیات ارتفاع و عرض، از transform: scale () استفاده کنید.
برای جابجایی عناصر به اطراف، از تغییر خصوصیات بالا، راست، پایین یا چپ خودداری کنید و به جای آن از transform: translate () استفاده کنید.

تغییر تجمعی چیدمان (CLS) چگونه اندازه‌گیری می‌شود؟

CLS را می‌توان در آزمایشگاه یا به طور عملیاتی اندازه‌گیری کرد. ابزارهای زیر در دسترس هستند:

ابزار عملیاتی:

ابزار آزمایشگاهی:

اندازه‌گیری CLS در جاوااسکریپت

برای اندازه‌گیری CLS در JavaScript، می توانید از Layout Instability API استفاده کنید. مثال زیر نحوه ایجاد یک PerformanceObserver را نشان می‌دهد که ورودی‌های غیر منتظره layout-shift را گوش می‌دهد، آن‌ها را در جلسات گروه‌بندی می‌کند و هر زمان تغییر کند حداکثر مقدار جلسه را ثبت می‌کند.

let clsValue = 0;
let clsEntries = [];
let sessionValue = 0;
let sessionEntries = [];
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // Only count layout shifts without recent user input.
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
      // If the entry occurred less than 1 second after the previous entry and
      // less than 5 seconds after the first entry in the session, include the
      // entry in the current session. Otherwise, start a new session.
      if (sessionValue &&
          entry.startTime - lastSessionEntry.startTime < 1000 &&
          entry.startTime - firstSessionEntry.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }
      // If the current session value is larger than the current CLS value,
      // update CLS and the entries contributing to it.
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = sessionEntries;
        // Log the updated value (and its entries) to the console.
        console.log('CLS:', clsValue, clsEntries)
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});

let clsValue = 0;

let clsEntries = [];

let sessionValue = 0;

let sessionEntries = [];

new PerformanceObserver((entryList) => {

for (const entry of entryList.getEntries()) {

// Only count layout shifts without recent user input.

if (!entry.hadRecentInput) {

const firstSessionEntry = sessionEntries[0];

const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

// If the entry occurred less than 1 second after the previous entry and

// less than 5 seconds after the first entry in the session, include the

// entry in the current session. Otherwise, start a new session.

if (sessionValue &&

entry.startTime - lastSessionEntry.startTime < 1000 &&

entry.startTime - firstSessionEntry.startTime < 5000) {

sessionValue += entry.value;

sessionEntries.push(entry);

} else {

sessionValue = entry.value;

sessionEntries = [entry];

}

// If the current session value is larger than the current CLS value,

// update CLS and the entries contributing to it.

if (sessionValue > clsValue) {

clsValue = sessionValue;

clsEntries = sessionEntries;

// Log the updated value (and its entries) to the console.

console.log('CLS:', clsValue, clsEntries)

}

}).observe({type: 'layout-shift', buffered: true});

در بیشتر موارد، مقدار فعلی CLS در زمان بارگیری صفحه، مقدار نهایی CLS برای آن صفحه است، اما چند استثنا مهم وجود دارد:

در بخش زیر تفاوت بین گزارش های API و نحوه محاسبه معیار ذکر شده است.

تفاوت‌های بین معیار و API

اگر صفحه‌ای در پس‌زمینه بارگیری می شود یا قبل از اینکه مرورگر هر محتوایی را ارائه کند، پس‌زمینه دارد، نباید هیچ مقدار CLS را گزارش کند.
هنگام بازگرداندن صفحه از کش بک/ فرانت، مقدار CLS آن باید به صفر برسد زیرا کاربران این کار را به عنوان یک بازدید متمایز از صفحه تجربه می‌کنند.
API، ورودی‌هایی را که درون iframes رخ می‌دهند گزارش نمی‌کند، اما برای اندازه‌گیری صحیح CLS باید آنها را در نظر بگیرید. فریم‌های فرعی می‌توانند با استفاده از API ورودی‌های layout-shift خود را برای تجمیع در فریم والد گزارش دهند.

علاوه بر این موارد استثنایی، CLS به دلیل اینکه کل طول عمر یک صفحه را اندازه‌گیری می‌کند دارای پیچیدگی‌های بیشتری است:

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

برای رسیدگی به چنین مواردی، CLS باید هر زمان که یک صفحه پس‌زمینه است هم گزارش شود – علاوه بر هر زمان بارگیری آن (رویداد visibilitychange هر دو سناریو را پوشش می‌دهد). سپس سیستم‌های تحلیلی دریافت‌کننده این داده‌ها باید مقدار CLS نهایی را در قسمت بک‌اند محاسبه کنند.

توسعه‌دهندگان به جای اینکه همه این تفاوت‌های ظریف را بخاطر بسپارند، می‌توانند برای اندازه‌گیری CLS از کتابخانه جاوا اسکریپت web-vitals استفاده کنند که این اختلافات را برای شما کنترل می‌کند (در صورت امکان).

import {getCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
getCLS(console.log);

import {getCLS} from 'web-vitals';

// Measure and log CLS in all situations

// where it needs to be reported.

getCLS(console.log);

نحوه بهینه‌سازی CLS

درمقاله جداگانه با جزییات تمام نحوه بهینه‌سازی CLS شرح داده شده است.

منبع:

https://web.dev/cls/

ادامه مطلب

سئو

ترند شماره 4: Web Vitals و بهینه سازی تجربه کاربری صفحه

ترند شماره 5: همه سئوها سئوی موبایل هستند

ترند شماره 6: ارزیابی، پذیرش و اجرا

روند شماره 7: اتوماسیون بیشتر

روند شماره 8: تغییرات چیدمان و عملکرد SERP

ترند شماره 9: محتوای طولانی

ترند شماره 10: مقیاسه پذیری SEO

​ترند ۱: تمرکز بر کاربر + هدف جستجو

​ترند شماره ۲: تجزیه و تحلیل مشتری، حفظ و ارزش مادام العمر

​ترند شماره ۳: بهینه سازی SERP برند، گراف‌های دانش و موجودیت‌ها

قابلیت اجرای آفلاین

محتوای آفلاین در دسترس و مدیای قابل پخش

بارگیری فعال در پس‌زمینه

اشتراک‌گذاری و تعامل با سایر برنامه‌ها

برنامه در پس زمینه داده‌های جدید را بارگیری می‌کند

حالت همگام بر روی ابر

کنترل‌های کلید سخت‌افزاری مدیا

مولتی‌تسک و میانبر برنامه

اقدامات سریع در منو

ادغام فایل سیستم

ظاهر و احساس یک اپ مخصوص پلتفرم

نوار عنوان سفارشی

انیمیشن‌های روان

نمایش محتوا خارج از برنامه

ویجت کنترل قفل صفحه

پوش نوتیفیکیشن

نشان آیکون برنامه

پخش رسانه بر تنظیمات صرفه‌جویی در مصرف انرژی اولویت دارد

مشاهده برنامه از طریق فروشگاه برنامه

چرا اپلیکیشن را قابل‌نصب کنیم؟

تبلیغ نصب PWA خود از طریق مرورگر

PWA به عنوان تجربه قابل‌نصب اولیه

مانع از این شوید که PWA میزان نصب برنامه ویژه پلتفرم شما را بکاهد

تبلیغ نصب PWA خود از طریق فروشگاه برنامه

تبلیغ برنامه‌های سبک

ارائه یک تجربه وب سبک

استفاده از API های JavaScript

نتیجه‌گیری

چک‌لیست اصلی مولفه‌های یک برنامه وب پیشرو خوب (PWA)

سریع آغاز شود و سریع ادامه بدهد

چرا؟

در هر مرورگری کار کند

چرا؟

رسپانسیو بودن در هر سایزی

چرا؟

یک صفحه آفلاین آماده کنید

چرا؟

برنامه شما قابل‌نصب است

چرا؟

چک لیست برنامه وب پیشرفته بهینه

تجربه آفلاین ارائه دهد

چرا؟

کاملاً قابل دسترسی است

چرا؟

از طریق جستجو قابل یافتن است

چرا؟

با هر نوع ورودی کار می‌کند

چرا؟

برای کسب مجوز از کاربر زمینه منطقی لازم را ایجاد می‌کند

چرا؟

بهترین روش‌ها را برای کد سالم انتخاب می‌کند

چرا؟

PWA نیازهای مشتری را برطرف می‌کند

PWA از قابلیت های وب مدرن استفاده می‌کند

درک تأثیرات تجاری

تأثیر تجاری یک وب سایت سریع

تأثیر تجاری یک وب سایت قابل نصب

تأثیر تجاری یک وب سایت قابل‌اطمینان

تأثیر تجاری یک وب‌سایت جذاب

P در PWA: راه‌اندازی پیشرو، ویژگی به ویژگی

سه ستون اپلیکیشن

قابلیت

قابل اعتماد

قابلیت نصب

بهترین در هر دو عالم!

معیار بزرگترین عنصر (LCP) چیست؟

امتیاز خوب برای معیار بزرگترین عنصر (LCP) چیست؟

چه عناصری در این معیار در نظر گرفته می‌شوند؟

اندازه یک عنصر چگونه تعیین می‌شود؟

ترند ۱: تمرکز بر کاربر + هدف جستجو

ترند شماره ۲: تجزیه و تحلیل مشتری، حفظ و ارزش مادام العمر

ترند شماره ۳: بهینه سازی SERP برند، گراف‌های دانش و موجودیت‌ها