تاثیر پاپ آپ بر سئو فنی سایت

[vc_row][vc_column][vc_column_text]تاثیر پاپ آپ بر سئو سایت

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

 

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

 

ناامید کننده به نظر می رسد ، اینطور نیست؟

 

و با این حال ، این اتفاق اغلب می افتد

 

تغییر چیدمان غیرمنتظره به تجربه کاربر آسیب می رساند ، در نتیجه نرخ جستجوی بالاتر و تبدیل کمتر است. گوگل از این موضوع آگاه است ، بنابراین تمام تلاش خود را می کند تا به آن بپردازد.

 

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

 

در پاراگراف های زیر ، خواهید آموخت:

 

تغییر چیدمان تجمعی در مورد چیست

چگونه متریک محاسبه می شود

نحوه اندازه گیری تغییر آرایش در صفحات وب سایت شما

و مهمتر از همه ، چگونه نمرات خود را برای این معیار بهبود دهیم

این اطلاعات به شما کمک می کند تا مشکلات تغییر چیدمان را برطرف کنید و اطمینان حاصل کنید که صفحات شما تجربه کاربری خوبی را ارائه می دهند.

 

 

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

 

 

 

تغییر چیدمان تجمعی در مورد چیست

نمره CLS

Cumulative Layout Shift (CLS) یک معیار اصلی هسته وب است که پایداری طرح بندی یک صفحه را اندازه گیری می کند. نمره CLS ضعیف نشان می دهد که یک صفحه معین دارای تغییراتی غیر منتظره در طرح است که باعث می شود کاربران از محتوای آن لذت نبرند.

 

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

 

 

 

آیا این تغییر طرح تجربه کاربر را خراب کرده است؟ نه ، برعکس ، انتظار می رفت.

 

اما هنوز یک تغییر است ، بنابراین باید روی نمره CLS تأثیر بگذارد ، درست است؟

 

قطعا نه. اگر بعد از ورود کاربر ، تغییر طرح در طی 500 میلی ثانیه اتفاق بیفتد ، Google هنگام محاسبه نمره تغییر آرایش تجمعی آن را در نظر نمی گیرد.

 

لطفا توجه داشته باشید اگر وب سایت شما کند است و نمی تواند UI خود را پس از ورود کاربر در عرض 500 میلی ثانیه به روز کند ، منجر به پایین آمدن امتیاز CLS می شود. به همین دلیل است که همیشه ایده خوبی برای سرعت بخشیدن به سایت خود است. همچنین ، استفاده از متغیرهایی را که تا زمان بارگیری محتوا جایگزین کنید ، در نظر بگیرید.

 

آنچه که همچنین قابل ذکر است این است که شیفت های چیدمان خارج از ویوپور مهم نیستند وقتی نوبت به محاسبه تغییر چیدمان تجمعی می رسد ، Google فقط شیفت های چیدمانی را که برای کاربران قابل مشاهده است ، محاسبه می کند. بنابراین ، اگر یک تغییر طرح بندی در خارج از قسمت viewport اتفاق بیفتد و کاربران آن را نبینند ، چنین تغییری بر نمره CLS شما تأثیر نمی گذارد.

 

اگر واضح است ، بیایید یاد بگیریم که چگونه تجمع چیدمان تجمعی محاسبه می شود.

 

چگونه Google تغییر چیدمان تجمعی را محاسبه می کند

اخیراً ، Google فرمول را دوباره ارزیابی کرده و اکنون نمرات CLS را به طور متفاوتی محاسبه می کند. در پاراگراف های بعدی ، دلیل آن را خواهید آموخت.

 

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

 

چندی پیش ، گوگل نمره CLS را با گرفتن نمرات تغییر طرح برای همه فریم های انیمیشن در یک صفحه و اضافه کردن آنها به هم محاسبه می کرد:

 

نمره تغییر چیدمان # 1 + نمره تغییر چیدمان # 2 + نمره تغییر چیدمان # 3 = نمره تغییر چیدمان تجمعی.

 

نمره تغییر طرح با ضرب کسر فاصله در کسر ضربه محاسبه می شود.

 

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

 

کسر ضربه

 

کسر فاصله مسافتی است که یک عنصر ناپایدار نسبت به دریچه دید حرکت می کند.

 

کسر فاصله

 

درباره نحوه محاسبه کسر مسافت و کسر ضربه در این پست وب می توانید اطلاعات بیشتری کسب کنید.

 

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

 

با این حال ، این روش یک اشکال عمده داشت.

 

معلوم شد که چنین محاسباتی نسبت به صفحات طولانی تر ناعادلانه بوده است.

 

بیایید برای مثال یک صفحه رسانه اجتماعی با پیمایش بی نهایت بگیریم.

 

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

 

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

 

نحوه تغییر چیدمان تجمعی اکنون چگونه محاسبه می شود

 

Google اکنون شیفت های چیدمان را در پنجره های جلسه گروه بندی می کند.

 

پنجره های جلسه

 

پنجره های جلسه f

راه توخالی:

 

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

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

سپس گوگل یک پنجره جلسه می گیرد که دارای بیشترین تغییر چیدمان است.

پس از آن ، موتور جستجو تمام شیفت های چیدمان موجود در آن پنجره جلسه واحد را جمع می کند. شیفت های چیدمان در سایر پنجره های جلسه نادیده گرفته می شوند.

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

 

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

 

نحوه اندازه گیری تغییر آرایش تجمعی با ابزار RankActive

برای اندازه گیری سریع و بدون هیچ زحمتی نمرات CLS خود ، می توانید از جعبه ابزار RankActive’s SEO استفاده کنید. پاپ آپ ویژگی فانوس دریایی سایت حسابرس به شما امکان می دهد نمره تغییر آرایش تجمعی هر صفحه را بررسی کنید.

 

به سادگی وب سایت خود را به پروژه اضافه کنید و از بخش Lighthouse دیدن کنید.

 

Lighthouse RankActive

 

می توانید نمره خود را برای دستگاه های همراه و دسک تاپ بررسی کنید. برای جابجایی بین گزینه های موجود ، روی دکمه های مربوطه کلیک کنید.

 

فانوس دریایی موبایل و دسک تاپ

 

به طور پیش فرض ، ابزار ما نمره CLS صفحه اصلی شما را نشان می دهد. با این حال ، می توانید کلید Lighthouse API را در تنظیمات اضافه کنید تا بتوانید تغییر چیدمان تجمعی را برای هر صفحه محاسبه کنید.

 

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

 

چگونه می توان تغییر چیدمان تجمعی را بهبود بخشید

به گفته گوگل ، نمرات CLS ضعیف ممکن است به دلیل موارد زیر ایجاد شود:

 

مشکلات بارگیری قلم

محتوای تزریق پویا

تصاویر بدون ابعاد

تبلیغات و پست های جاسازی شده در شبکه های اجتماعی بدون ابعاد

بنابراین ، می توانید تغییر چیدمان تجمعی را با پرداختن به موارد ذکر شده در بالا بهبود ببخشید.

 

شماره 1 بارگذاری قلم را بهینه کنید

 

فونت های بارگذاری دیررس یکی از مهمترین دلایل تغییر چیدمان است. اگر از قلمهایی استفاده می کنید که بصورت آنلاین ذخیره شده اند (به عنوان مثال Google Fonts یا Adobe Fonts) ، واکشی و ارائه این قلم ها ممکن است منجر به مشکلات FOIT (Flashes Of The Invisible Text) یا FOUT (Flashes Of The Unstyled Text) شود:

 

FOIT زمانی است که مرورگر فونتها را از سرور بارگیری می کند و هنگام بارگیری فونت سفارشی ، متن نامرئی را به طور موقت نشان می دهد. متن نامرئی ممکن است فضای متفاوتی از قلم سفارشی را اشغال کند. بنابراین ، هنگامی که فونت سفارشی بارگیری شد ، ممکن است یک تغییر طرح رخ دهد ، که منجر به یک امتیاز CLS ضعیف شود.FOUT زمانی است که مرورگر یکی از فونت های سیستم را نمایش می دهد تا زمانی که سفارشی بارگیری شود. با توجه به اینکه اندازه قلم سفارشی ممکن است با قلم سیستم متفاوت باشد ، ممکن است فضای مختلفی را نیز اشغال کند. در نتیجه ، هنگام بارگیری فونت سفارشی ، ممکن است محتوای شما به طور قابل توجهی جابجا شود.

 

مشکل بارگذاری قلم باعث تغییر طرح می شودبرای حل چنین مواردی ، با استفاده از <link rel = “preload”> فونت ها را از قبل بارگذاری کنید. به این ترتیب ، یک مرورگر با قلم ها به عنوان یکی از منابع دارای اولویت بالا برخورد کرده و در هنگام ارائه صفحه ، آنها را در اسرع وقت بارگیری می کند. با توجه به اینکه قلم ها قبل از سایر عناصر بارگیری می شوند ، تغییرات چیدمان به میزان قابل توجهی کاهش می یابد.

 

توجه داشته باشید که باید فقط فونت های بالاتر از قبل را بارگیری کنید زیرا در غیر این صورت ، ممکن است سرعت صفحه خود را کم کنید. با این حال ، اگر کاربری که از صفحه شما بازدید می کند سرعت اینترنت پایین دارد ، حتی ممکن است فونت های بالاتر از حد بار نیز بارگیری شود.برای به حداقل رساندن تأثیر اتصال اینترنت ضعیف ، <link rel = “preload”> را با “font-display: optional” ترکیب کنید. “Font-display: optional” به یک مرورگر می گوید که قلم سفارشی را فقط درصورتی که پس از فرود کاربر در پاپ آپ یک صفحه در عرض 100 میلی ثانیه باشد ، ارائه دهد. اگر اینگونه نباشد ، مرورگر فونت جایگزین را انتخاب می کند اما همچنان سعی می کند مورد سفارشی را بارگیری و ذخیره کند تا در بارگذاری صفحه بعدی نمایش داده شود.

 

با این حال ، هنگامی که از “font-display: optional” بدون <link rel = “preload”> استفاده می شود ، Chrome صفحه را دو بار بازنویسی می کند ، چه قلم جایگزین یا قلم سفارشی انتخاب شود. که باعث تغییر جزئی طرح می شود.

 

در پاپ آپ ، توسعه دهندگان اولین چرخه رندر را برای قلم های سفارشی که از قبل با <link rel = “preload”> بارگیری شده حذف کردند. در عوض ، آنها رندر را مسدود کردند تا زمانی که قلم سفارشی بارگیری شود یا 100 میلی ثانیه سپری شود. به این ترتیب ، هنگامی که پیوند rel = “preload” را با “font-display: optional” ترکیب می کنید ، اطمینان حاصل می کنید که هیچ تغییری در طرح رخ نخواهد داد.

 

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

 

شماره 2 محتوای تزریق شده را به صورت پویا مدیریت کنید

 

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

 

تغییر طرح ناشی از عنصر محتوای پویا

 

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

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

 

شماره 3 ابعاد تصویر را تنظیم کنید

 

ابعاد تصویر

 

هنگامی که ویژگی های عرض و ارتفاع تصاویر را تعیین می کنید ، هنگام ارائه یک صفحه ، مرورگر فضای کافی برای این عناصر اختصاص می دهد. بنابراین ، وقتی بارگیری آنها تمام شد ، آنها محتوا را به پایین منتقل نمی کنند.

 

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

 

برای حل این مشکل ، تعیین عرض و ارتفاع هر تصویری که به سایت خود اضافه می کنید ، در نظر بگیرید.

 

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

 

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

 

شماره 4 فضای کافی برای تبلیغات و پست های جاسازی شده در شبکه های اجتماعی رزرو کنید

 

دقیقاً مانند تصاویر ، تبلیغات و پست های جاسازی شده در شبکه های اجتماعی (جاسازی شده) نیز در تغییر چیدمان غیر منتظره نقش دارند.

 

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

 

هیچ جایی برای تبلیغ رزرو نشده است؟ یک تغییر طرح بگیرید!

 

متناوباً ، اگر فضای کافی برای تبلیغات در کد وب سایت خود بگذارید ، هیچ تغییری در طرح رخ نخواهد داد.

 

مکان برای تبلیغات رزرو شده ، بدون تغییر طرح

 

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

 

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

 

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

 

نتیجه

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

 

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

 

همین امروز وب سایت خود را به مکان بهتری تبدیل کنید و طولی نخواهد کشید که بازدید از آن انجام می شود. همین حالا حساب خود را ایجاد کنید و جعبه ابزار ما را به مدت 14 روز به صورت رایگان تست کنید.[/vc_column_text][/vc_column][/vc_row]

0