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

• تاریخچه تضاد رنگ
•  چرا تضاد رنگ مهم است؟
• تضاد رنگ چگونه محاسبه می شود؟
• تضاد رنگ با استاندارد AA/AAA
  • بررسی تضاد رنگ با استاندارد AA/AAA توسط گوگل کروم
  • ابزار بررسی تضاد رنگ در صفحه طبق استاندارد AA/AAA
• تضاد رنگ با استاندارد APCA
  • بررسی تضاد رنگ با استاندارد APCA توسط گوگل کروم
• شناسایی متن های با تضاد رنگ کم
  • بررسی تضاد رنگ با CSS Overview گوگل کروم
  • گزارش automatic contrast issue گوگل کروم
  • بررسی تضاد رنگ با ابزار لایت هاوس
• شبیه سازی کور رنگی در DevTools گوگل کروم
• پرسش های متداول در مورد contrast ratio
• جمع بندی

تاریخچه تضاد رنگ

جالب است بدانید برای اولین بار، آقای اسحاق نیوتن در سال 1704 تضاد بین 7 رنگ را محاسبه کرد و برای آن یک color circle طراحی کرد. دایره رنگ نیوتن به این صورت بود که رنگ هایی که دقیقا روبروی هم قرار داشتند، بیشترین تضاد رنگ را نسبت به یکدیگر داشتند.

بعدها در سال 1708 نیز آقای یوهان گوته (نویسنده نامی آلمانی) نیز دایره رنگ را عرضه کرد که 6 رنگ را تحت پوشش قرار می داد ولی مانند دایره نیوتن، از ریاضی و محاسبات در آن استفاده نکرده بود.

 چرا تضاد رنگ مهم است؟

حدود 320 میلیون نفر در سراسر جهان، شامل 1 نفر از هر 20 مرد و 1 نفر از هر 200 زن که در مجموع برابر با 5% درصد از جمعیت جهان را شامل می شود، دارای مشکل دیدن رنگ و کوررنگی هستند. به همین دلیل لازم است که در صفحات سایت و حتی در چاپ نیز به contrast ratio رنگ متن و رنگ پس زمینه دقت کرد که همه کاربران بتوانند به راحتی متن ها را مطالعه کنند. در همین راستا، گوگل نیز توصیه می کند که به استاندارد WCAG در مورد دسترسی پذیری که شامل راهنمای تضاد رنگ نیز هست،‌ توجه شود تا تجربه کاربری خوبی برای همه کاربران سایت فراهم شود.

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

همان طور که گفته شد، یکی از معتبر ترین استاندارد های تضاد رنگ، توسط World Wide Web Consortium (W3C) تحت راهنماهای WCAG عرضه شده است. محاسبه تضاد رنگ بر اساس نسبت میزان درخشندگی رنگ های پس زمینه و پیش زمینه انجام می شود. به عنوان نمونه، رنگ سفید دارای میزان درخشندگی 100% و رنگ مشکی دارای میزان درخشندگی 0% است.

contrast ratio = (L1 + 0.05) / (L2 + 0.05)
# L1 = Luminance 1 = میزان درخشندگی نسبی رنگ روشن
# L2 = Luminance 2 = میزان درخشندگی نسبی رنگ تیره

میزان contrast ratio می تواند عددی بین 1 و 21 باشد که به عنوان 1:1 و 1:21 (یا 21:1 با توجه به تیره و روشن بودن پس زمینه و پیش زمینه) نیز نمایش داده می شوند.

تضاد رنگ با استاندارد AA/AAA

طبق استاندارد WCAG، کانترست ریشیو دست کم باید عدد 4.5 باشد که به AA شناخته می شود و اگر بتواند به عدد 7 برسد، ایده آل خواهد بود و با AAA شناخته می شود. البته در صورتی که اندازه فونت به میزان 120% تا 150% درصد بزرگتر از اندازه فونت پیش فرض متن باشد، میزان تضاد رنگ AA به 3 و میزان تضاد رنگ AAA به 4.5 کاهش پیدا می کند.

میزان تضاد رنگ 4.5:1 برای افراد دارای محدودیت در تشخیص رنگ و همچنین افراد 80 ساله مناسب است. در صورتی که یک فرد دچار کوررنگی باشد، تضاد رنگ دست کم 7:1 توصیه می شود.

بررسی تضاد رنگ با استاندارد AA/AAA توسط گوگل کروم

در DevTools مرورگر گوگل کروم، امکان بررسی تضاد رنگ و مشخص کردن متن هایی که دارای مشکل تضاد رنگ هستند وجود دارد. در تب Elements در DevTools، در بخش Styles روی یک رنگ کلیک کرده تا color picker باز شود.

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

ابزار بررسی تضاد رنگ در صفحه طبق استاندارد AA/AAA

ابزارهای آنلاین و آفلاین متعددی برای بررسی contrast ratio وجود دارد. ابزار زیر توسط آقای Alvaro Montoro تهیه شده و با کمی ویرایش در اختیار شما قرار گرفته است. با تغییر رنگ پس زمینه و رنگ پیش زمینه می توانید از پاس شدن یا مردود شدن تست تضاد رنگ برای فونت های با اندازه 24 پیکسل یا معادل آن به بالا و فونت های کوچک تر از 24 پیکسل مطلع شوید. در صورت پاس شدن تست، خانمی که در بالای ابزار وجود دارد، لبخند می زند و در غیر اینصورت، کم کم لبخند آن محو خواهد شد 🙂

تضاد رنگ با استاندارد APCA

به غیر از استاندارد AA/AAA، استاندارد دیگری به نام APCA که مخفف Accessible Perceptual Contrast Algorithm است نیز وجود دارد. استاندارد APCA از AA/AAA دقیق تر است و علاوه بر font-size و font-weight، کاربرد متن در صفحه را نیز مد نظر قرار می دهد.

⊘ به معنای این است که نباید متنی با این مشخصات در صفحه باشد مگر اینکه متن decorative باشد.

©§™ به معنی این است که متن با ابعاد/وزن مذکور نباید در محتوا استفاده شود ولی می تواند در موارد غیر محتوایی مانند کپی رایت استفاده شود.

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

>20 بهتر است متن با ابعاد/وزن مذکور در محتوا استفاده نشود

بررسی تضاد رنگ با استاندارد APCA توسط گوگل کروم

استاندارد APCA به صورت experimental در DevTools گوگل کروم وجود دارد. برای تغییر استاندارد تضاد رنگ AA/AAA به APCA در DevTools به روش زیر عمل کنید:

1. با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس​ و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید.
2. روی آیکن چرخ دنده در سمت راست DevTools کلیک کرده و وارد تنظیمات DevTools شوید
3. در سایدبار سمت چپ، روی Experimnets کلیک کنید.
4. گزینه APCA که در تصویر زیر نمایش داده شده را فعال کنید.

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

حال می توانید در تب Elements در DevTools گوگل کروم، در بخش Styles روی یک رنگ کلیک کرده تا color picker باز شود.

در صورتی که مرورگر توانسته باشد با توجه به CSS موجود در صفحه، رنگ پس زمینه متن مورد نظرتان را متوجه شده باشد، میزان کانترست ریشیو را بر اساس استاندارد APCA به شما نمایش می دهد و با استفاده از منحنی که روی color picker وجود دارد می توانید نسبت به انتخاب رنگ مناسب اقدام کنید.

شناسایی متن های با تضاد رنگ کم

همان طور که در بالا گفته شد، جهت شناسایی متن های با تضاد رنگ کمتر از AA و AAA یا متن هایی که استاندارد APCA را پاس نکرده باشند، می توان از ابزارهای گوناگون مانند گوگل کروم و ابزار لایت هاوس گوگل استفاده کرد.

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

بررسی تضاد رنگ با CSS Overview گوگل کروم

DevTools گوگل کروم یک امکان به نام CSS Overview دارد که اگر در مرورگر شما فعال نیست، می توانید به صورت زیر آن را فعال نمایید:

1. با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس​ و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید.
2. با فشردن Control+Shift+P در سیستم عامل ویندوز و اوبنتو و Command+Shift+P در سیستم عامل مک، Command Pallete را باز کنید.
3. کلمه CSS را تایپ کرده و روی گزینه Show CSS Overview کلیک کنید.
4. روی تب CSS Overview به DevTools اضافه شده کلیک کنید.
5. روی دکمه Capture overview کلیک کنید. با توجه به نوع استاندارد AA/AAA یا APCA که در تنظیمات DevTools انتخاب کرده اید، نتیجه بررسی به صورت زیر خواهد بود.

گزارش automatic contrast issue در DevTools گوگل کروم

DevTools گوگل کروم این امکان را دارد که علاوه بر گزارش CSS Overview که در قسمت قبل در مورد آن توضیح داده شد، به صورت خودکار، گزارش مشکلات تضاد رنگ را در کنسول DevTools نمایش دهد. برای فعال کردن این امکان، ابتدا وارد تنظیمات DevTools شوید و با توجه به تصویر زیر، پس از کلیک بر روی Experiments در ساید بار، گزینه Enable automatic contrast ratio reporting via the Issues panel را فعال کنید.

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

بررسی تضاد رنگ با ابزار لایت هاوس

گوگل ابزار لایت هاوس را به صورت متن باز جهت بررسی صفحات از دیدگاه های پرفورمنس، دسترسی پذیری، best practices (بهترین روش)، سئو و PWA ارائه کرده است. مشکلات contrast ratio احتمالی، در گزارش دسترسی پذیری یا همان Accessibility لایت هاوس، نمایش داده می شوند. با توجه به تصویر زیر، نام المنت هایی که دارای مشکل تضاد رنگ هستند،‌ در قسمت Failing Elements نمایش داده می شوند.

مقاله آموزش نحوه نصب و استفاده از Lighthouse CLI می تواند برای شما مفید باشد.

شبیه سازی کور رنگی در DevTools گوگل کروم

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

1. با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس​ و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید.
2. با فشردن Control+Shift+P در سیستم عامل ویندوز و اوبنتو و Command+Shift+P در سیستم عامل مک، Command Pallete را باز کنید.
3. کلمه render را تایپ کرده و روی گزینه Show Rendering کلیک کنید.
4. روی تب Rendering کلیک کنید.
5. در قسمت Emulate vision deficiencies گزینه مورد نظرتان را انتخاب کنید.

جمع بندی

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

خواندن راهنمای Material 3 color roles و Material 2 Color system گوگل می تواند برای شما مفید باشد.

پرسش های متداول در مورد contrast ratio

🔗 منبع: web.dev

The post تضاد رنگ چه اثری در سئو دارد؟ آشنایی با استاندارد AA/AAA و APCA appeared first on وب یوز.

ابزار لایت هاوس در دو نسخه GUI و نسخه CLI (خط فرمان) عرضه شده است. در این مقاله در مورد Lighthouse CLI توضیح داده شده که شامل بخش های زیر است:

• Lighthouse چیست؟
• Lighthouse CLI چیست؟
  • تفاوت Lighthouse CLI و Lighthouse CI در چیست؟
• روش نصب npm
• روش نصب Lighthouse CLI
• روش استفاده از Lighthouse CLI
  • بررسی یک صفحه با لایت هاوس CLI
  • رویت گزارش لایت هاوس پس از اتمام بررسی
  • تعیین فرمت خروجی گزارش
  • تعیین مسیر خروجی گزارش
  • تعیین نوع دستگاه و ابعاد viewport
  • محدود کردن بررسی لایت هاوس به کتگوری (های) مشخص
  • مشاهده آیتم های قابل بررسی در کتگوری های مختلف
  • بررسی با audit (های) مشخص
  • جلوگیری از بررسی audit (های) مشخص
  • بررسی صفحه با مرورگر گوگل کروم headless
  • اعمال تغییر در HTTP request header
  • ارسال درخواست با یک یوزر ایجنت مشخص
  • بررسی دسته ای آدرس ها با Lighthouse CLI
• پرسش های متداول در مورد Lighthouse CLI

Lighthouse چیست؟

Google Lighthouse یک ابزار رایگان و منبع باز است که برای ارزیابی عملکرد وب سایت ها در زمینه هایی مانند سرعت، دسترسی پذیری، قابلیت استفاده و SEO استفاده می شود. این ابزار می تواند به توسعه دهندگان و مالکان وب سایت ها کمک کند تا سایت های خود را بهبود بخشند و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم کنند.

نتیجه گزارش لایت هاوس در پنج کتگوری زیر ارائه می شود که هر کدام از کتگوری ها شامل معیار های مختلفی هستند:

• Performance: ارزیابی های متعددی از دیدگاه پرفورمنس توسط لایت هاوس انجام می شود که تمرکز آنها به صورت کلی بر روی سرعت بارگذاری صفحه وب سایت است. برخی از مواردی که مورد ارزیابی قرار می گیرند عبارتند از First Contentful Paint، First Meaningful Paint، Speed Index، First CPU Idle و Time to Interactive.
• Accessibility: لایت هاوس صفحه را از نظر میزان دسترسی پذیری که شامل موارد متعدد مرتبط با رنگ، اندازه فونت، موارد مرتبط با دستگاه های screen reader مانند لیبل ها، دکمه ها، alt تصاویر و آیتم های مشابه است می شود.
• Best practices: لایت هاوس صفحه را از دیدگاه best practices (بهترین روش) شامل موارد مرتبط با جاوا اسکریپت،‌ HTTPS، ارورهای احتمالی در کنسول مرورگر و aspect ratio تصاویر و موارد متعدد دیگر بررسی می کند.
• SEO: لایت هاوس صفحه را از دیدگاه سئو نیز بررسی می کند. این بررسی شامل مواردی مانند لینک ها، متاها، canonical، robots.txt، عکس ها و موارد متعدد دیگر می شود.
• PWA: لایت هاوس صفحات را از نظر استانداردهای Progressive Web App بررسی می کند.

Lighthouse CLI چیست؟

Lighthouse را می‌توان به صورت دستی از طریق DevTools مرورگر گوگل کروم، از طریق سرویس های آنلاین مانند PageSpeed Insights و یا با استفاده از Command Line یا خط فرمان اجرا کرد. به لایت هاوسی که توسط خط فرمان اجرا می شود، Lighthouse CLI که مخفف Lighthouse Command Line Interface است گفته می شود.

تفاوت Lighthouse CLI و Lighthouse CI در چیست؟

همان طور که از نام Lighthouse CLI مشخص است، از آن برای استفاده از لایت هاوس توسط خط فرمان استفاده می شود ولی از Lighthouse CI که مخفف Lighthouse Continuous Integration است برای اتوماسیون و خودکارسازی تست پروژه ها توسط ابزار لایت هاوس استفاده می شود.

می توانید اطلاعات بیشتر در مورد Lighthouse CI را در ریپازیتوری آن در گیت هاب بیابید.

روش نصب npm

جهت استفاده از Lighthouse CLI به Node.js 18 یا نسخه های جدید تر نیاز است.

جهت نصب Node.js بر روی سیستم عامل مایکروسافت ویندوز، ابتدا فایل Windows Installer (.msi) آن را از سایت اصلی Node.js دانلود کرده و نصب نمایید.

جهت نصب Node.js بر روی سیستم عامل مک، ابتدا فایل macOS Installer (.pkg) آن را از سایت اصلی Node.js دانلود کرده و نصب نمایید.

جهت نصب Node.js بر روی سیستم عامل Ubuntu، به روش زیر عمل کنید:

1- دانلود و ایمپورت Nodesource GPG key

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

2- ایجاد ریپازیتوری deb

NODE_MAJOR=21
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

جهت استفاده از لایت هاوس CLI، مقدار NODE_MAJOR باید دست کم 18 باشد. مقادیر 20 و 21 نیز نسخه های جدید تر Node.js هستند.

3- اجرای آپدیت و نصب Node.js

sudo apt-get update
sudo apt-get install nodejs -y

4- مشاهده نسخه Node.js نصب شده

node --version

پس از نصب Node.js، نوبت به نصب Lighthouse CLI از طریق npm می رسد.

روش نصب Lighthouse CLI

پس از نصب npm که به همراه Node.js نصب می شود، با وارد کردن کامند زیر در ترمینال مک یا Ubuntu و یا در Command Prompt سیستم عامل ویندوز، نسبت به نصب لایت هاوس CLI اقدام کنید.

کلیه کامندهایی که در ادامه توضیح داده شده اند، قابل استفاده در ترمینال لینوکس و مک، و همچنین command prompt ویندوز هستند.

برخی از کامند ها مانند npm install در لینوکس به دسترسی super user نیاز دارند.

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

اگر از آپشن g برای نصب global لایت هاوس استفاده کنید، کامندهای لایت هاوس را می توانید در هر دایرکتوری که مد نظرتان بود اجرا کنید.

برای اطمینان از موفقیت آمیز بودن نصب Lighthouse و مشاهده نسخه نصب شده، کامند زیر را در ترمینال وارد کنید.

lighthouse --version

روش استفاده از Lighthouse CLI

برای استفاده از Lighthouse CLI باید مرورگر گوگل کروم روی سیستم نصب شده باشد.

Lighthouse CLI دارای امکانات و قابلیت های زیادی است. برای آشنایی با آپشن های آن،‌ کامند زیر را اجرا کنید.

lighthouse --help

به صورت کلی، کامند lighthouse به صورت زیر قابل استفاده است. در ادامه، تعدادی از کامند هایی که برای متخصصین SEO کاربردی است را مشاهده می کنید.

lighthouse <url> <options>

بررسی یک صفحه با لایت هاوس CLI

در ادامه با کامند lighthouse به همراه تعدادی از آپشن های پرکاربرد آشنا می شوید. جهت بررسی یک صفحه بدون هیچ آپشن خاصی، از کامندهای زیر استفاده کنید. سپس نتیجه آن در آدرسی که در انتهای خط فرمان به شما نمایش داده خواهد شد، با فرمت HTML ذخیره می شود.

lighthouse https://www.webyooz.com/

lighthouse https://www.webyooz.com/gsc-training/

رویت گزارش لایت هاوس پس از اتمام بررسی

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

lighthouse <url> --view

نمونه:

lighthouse https://www.webyooz.com/ --view

تعیین فرمت خروجی گزارش لایت هاوس

با استفاده از کامند زیر می توانید خروجی نتیجه لایت هاوس را با سه فرمت html، json و csv ذخیره کنید.

lighthouse <url> --output
lighthouse https://www.webyooz.com/ --output=json
lighthouse https://www.webyooz.com/ --output=html --output=json --output=csv

خروجی نتیجه لایت هاوس به صورت پیشفرض با فرمت HTML است.

امکان گرفتن خروجی نتیجه با بیش از یک فرمت به صورت همزمان وجود دارد.

برای مشاهده گزارش با فرمت json از Lighthouse Viewer استفاده کنید.

تعیین مسیر خروجی گزارش لایت هاوس

ٰهمان طور که در توضیح نصب lighthouse CLI گفته شد، با توجه به استفاده از آپشن g در حین نصب لایت هاوس، کامندهای لایت هاوس را در هر مسیری که اجرا کنید، خروجی نتیجه بررسی در همان مسیر ذخیره خواهد شد. اما اگر قصد داشتید که خروجی نتیجه را در مسیر مشخصی ذخیره کند، می توانید از کامند زیر استفاده نمایید.

lighthouse <url> --output-path
lighthouse https://www.webyooz.com/ --output=html --output-path=/home/admin/Downloads/result.html
lighthouse https://www.webyooz.com/ --output=json --output-path=/home/admin/Downloads/result.json

تعیین نوع دستگاه و ابعاد viewport

بررسی لایت هاوس به صورت پیشفرض با preset موبایل انجام می شود.

lighthouse <url> --preset
lighthouse https://www.webyooz.com/ --preset=desktop
lighthouse https://www.webyooz.com/ --preset=mobile
lighthouse https://www.webyooz.com/ --chrome-flags="--window-size=800,600"

محدود کردن بررسی لایت هاوس به کتگوری (های) مشخص

بررسی لایت هاوس در 5 کتگوری accessibility, best-practices, performance, seo, pwa انجام می شود. این امکان وجود دارد که audit را به کتگوری یا کتگوری های خاصی محدود کرد.

lighthouse <url> --categories [array]
lighthouse https://www.webyooz.com/ --only-categories accessibility 
lighthouse https://www.webyooz.com/ --only-categories best-practices,seo

مشاهده آیتم های قابل بررسی در کتگوری های مختلف

lighthouse --list-all-audits

نتیجه کامند بالا به این صورت خواهد بود:

{
  "audits": [
    "accessibility/accesskeys",
    "accessibility/aria-allowed-attr",
    "accessibility/aria-allowed-role",
    "accessibility/aria-command-name",
    "accessibility/aria-dialog-name",
    "accessibility/aria-hidden-body",
    "accessibility/aria-hidden-focus",
    "accessibility/aria-input-field-name",
    "accessibility/aria-meter-name",
    "accessibility/aria-progressbar-name",
    "accessibility/aria-required-attr",
    "accessibility/aria-required-children",
    "accessibility/aria-required-parent",
    "accessibility/aria-roles",
    "accessibility/aria-text",
    "accessibility/aria-toggle-field-name",
    "accessibility/aria-tooltip-name",
    "accessibility/aria-treeitem-name",
    "accessibility/aria-valid-attr-value",
    "accessibility/aria-valid-attr",
    "accessibility/button-name",
    "accessibility/bypass",
    "accessibility/color-contrast",
    "accessibility/definition-list",
    "accessibility/dlitem",
    "accessibility/document-title",
    "accessibility/duplicate-id-active",
    "accessibility/duplicate-id-aria",
    "accessibility/empty-heading",
    "accessibility/form-field-multiple-labels",
    "accessibility/frame-title",
    "accessibility/heading-order",
    "accessibility/html-has-lang",
    "accessibility/html-lang-valid",
    "accessibility/html-xml-lang-mismatch",
    "accessibility/identical-links-same-purpose",
    "accessibility/image-alt",
    "accessibility/image-redundant-alt",
    "accessibility/input-button-name",
    "accessibility/input-image-alt",
    "accessibility/label-content-name-mismatch",
    "accessibility/label",
    "accessibility/landmark-one-main",
    "accessibility/link-in-text-block",
    "accessibility/link-name",
    "accessibility/list",
    "accessibility/listitem",
    "accessibility/manual/custom-controls-labels",
    "accessibility/manual/custom-controls-roles",
    "accessibility/manual/focus-traps",
    "accessibility/manual/focusable-controls",
    "accessibility/manual/interactive-element-affordance",
    "accessibility/manual/logical-tab-order",
    "accessibility/manual/managed-focus",
    "accessibility/manual/offscreen-content-hidden",
    "accessibility/manual/use-landmarks",
    "accessibility/manual/visual-order-follows-dom",
    "accessibility/meta-refresh",
    "accessibility/meta-viewport",
    "accessibility/object-alt",
    "accessibility/select-name",
    "accessibility/skip-link",
    "accessibility/tabindex",
    "accessibility/table-duplicate-name",
    "accessibility/table-fake-caption",
    "accessibility/target-size",
    "accessibility/td-has-header",
    "accessibility/td-headers-attr",
    "accessibility/th-has-data-cells",
    "accessibility/valid-lang",
    "accessibility/video-caption",
    "autocomplete",
    "bf-cache",
    "bootup-time",
    "byte-efficiency/duplicated-javascript",
    "byte-efficiency/efficient-animated-content",
    "byte-efficiency/legacy-javascript",
    "byte-efficiency/modern-image-formats",
    "byte-efficiency/offscreen-images",
    "byte-efficiency/render-blocking-resources",
    "byte-efficiency/total-byte-weight",
    "byte-efficiency/unminified-css",
    "byte-efficiency/unminified-javascript",
    "byte-efficiency/unused-css-rules",
    "byte-efficiency/unused-javascript",
    "byte-efficiency/uses-long-cache-ttl",
    "byte-efficiency/uses-optimized-images",
    "byte-efficiency/uses-responsive-images-snapshot",
    "byte-efficiency/uses-responsive-images",
    "byte-efficiency/uses-text-compression",
    "content-width",
    "critical-request-chains",
    "csp-xss",
    "deprecations",
    "diagnostics",
    "dobetterweb/charset",
    "dobetterweb/doctype",
    "dobetterweb/dom-size",
    "dobetterweb/geolocation-on-start",
    "dobetterweb/inspector-issues",
    "dobetterweb/js-libraries",
    "dobetterweb/no-document-write",
    "dobetterweb/notification-on-start",
    "dobetterweb/paste-preventing-inputs",
    "dobetterweb/uses-http2",
    "dobetterweb/uses-passive-event-listeners",
    "errors-in-console",
    "final-screenshot",
    "font-display",
    "image-aspect-ratio",
    "image-size-responsive",
    "installable-manifest",
    "is-on-https",
    "largest-contentful-paint-element",
    "layout-shift-elements",
    "lcp-lazy-loaded",
    "long-tasks",
    "main-thread-tasks",
    "mainthread-work-breakdown",
    "manual/pwa-cross-browser",
    "manual/pwa-each-page-has-url",
    "manual/pwa-page-transitions",
    "maskable-icon",
    "metrics",
    "metrics/cumulative-layout-shift",
    "metrics/first-contentful-paint",
    "metrics/first-meaningful-paint",
    "metrics/interaction-to-next-paint",
    "metrics/interactive",
    "metrics/largest-contentful-paint",
    "metrics/max-potential-fid",
    "metrics/speed-index",
    "metrics/total-blocking-time",
    "network-requests",
    "network-rtt",
    "network-server-latency",
    "no-unload-listeners",
    "non-composited-animations",
    "oopif-iframe-test-audit",
    "performance-budget",
    "predictive-perf",
    "preload-fonts",
    "prioritize-lcp-image",
    "redirects",
    "resource-summary",
    "screenshot-thumbnails",
    "script-elements-test-audit",
    "script-treemap-data",
    "seo/canonical",
    "seo/crawlable-anchors",
    "seo/font-size",
    "seo/hreflang",
    "seo/http-status-code",
    "seo/is-crawlable",
    "seo/link-text",
    "seo/manual/structured-data",
    "seo/meta-description",
    "seo/plugins",
    "seo/robots-txt",
    "seo/tap-targets",
    "server-response-time",
    "splash-screen",
    "themed-omnibox",
    "third-party-cookies",
    "third-party-facades",
    "third-party-summary",
    "timing-budget",
    "unsized-images",
    "user-timings",
    "uses-rel-preconnect",
    "uses-rel-preload",
    "valid-source-maps",
    "viewport",
    "work-during-interaction"
  ]
}

بررسی با audit (های) مشخص

lighthouse <url> --only-audits [array]
lighthouse https://www.webyooz.com/ --only-audits image-aspect-ratio
lighthouse https://www.webyooz.com/ --only-audits canonical,font-display

جلوگیری از بررسی audit (های) مشخص

lighthouse <url> --skip-audits [array]
lighthouse https://www.webyooz.com/ --skip-audits duplicate-id-aria
lighthouse https://www.webyooz.com/ --skip-audits canonical,font-display

بررسی صفحه با مرورگر گوگل کروم headless

در حین تست یک آدرس با Lighthouse CLI، این ابزار از مرورگر گوگل کروم استفاده می کند و به صورت خودکار آن را باز کرده و پس از بررسی صفحه، مرورگر را خواهد بست. اگر قصد داشتید که از گوگل کروم headless برای بررسی صفحات با لایت هاوس استفاده کنید، از کامند زیر استفاده کنید.

مروگر headless بدون GUI است و در رم اجرا می شود.

lighthouse <url> --chrome-flags="--headless" 
lighthouse https://www.webyooz.com/ --chrome-flags="--headless"

اعمال تغییر در HTTP request header

این امکان در Lighthouse CLI وجود دارد که هدرهای دلخواه را در HTTP request header ارسال کنید.

lighthouse <url> --extra-headers
lighthouse https://www.webyooz.com/ --extra-headers "{\"Cookie\":\"name1=value1\", \"name2\":\"value2\"}"

ارسال درخواست با یک یوزر ایجنت مشخص

این امکان در lighthouse CLI وجود دارد که یوزر ایجنت را در HTTP request header تغییر داد.

جهت آشنایی با یوزرایجنت، مطالعه راهنمای جامع User-Agent مفید خواهد بود.

lighthouse <url> --emulatedUserAgent [string]
lighthouse https://www.webyooz.com/ --emulatedUserAgent YOUR_CUSTOM_UA

بررسی دسته ای آدرس ها با Lighthouse CLI

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

برای بررسی دسته ای تعدادی آدرس، ابتدا یک فایل با فرمت متنی ایجاد کنید که حاوی آدرس های مد نظر باشد. در نمونه زیر، فایل تکست با نام page-list.txt ذخیره شده است.

بررسی دسته ای آدرس ها با لایت هاوس در ویندوز

اگر از سیستم عامل ویندوز استفاده می کنید، با استفاده از یک ادیتور متنی مانند Notepad ++، اطلاعات زیر را با فرمت bat با نامی مانند lighthouse.bat ذخیره کنید.

در صورتی که از Notepad ویندوز برای این کار استفاده کنید، ممکن است فایل bat به درستی کار نکند.

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

@Echo Off
FOR /F "delims=" %%a in (C:\Users\YOUR_CUSTOM_PATH\page-list.txt) DO (
	ECHO Line is: %%a
	lighthouse --quiet --chrome-flags="--headless" %%a
)

در نمونه بالا از FOR و DO جهت ایجاد یک لوپ استفاده شده است.

حال می توانید با باز کردن command prompt در سیستم عامل ویندوز و اجرای فایل lighthouse.bat با استفاده از کامند زیر، همه آدرس هایی که در فایل page-list.txt هستند را با یک کامند و پشت سر هم بررسی کنید.

lighthouse.bat

بررسی دسته ای آدرس ها با لایت هاوس در macOS و Ubuntu

اگر از سیستم عامل macOS یا Ubuntu استفاده می کنید، با استفاده از یک ادیتور متنی، اطلاعات زیر را با فرمت sh با نامی مانند lighthouse.sh ذخیره کنید.

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

#!/bin/bash
while IFS='' read -r l || [ -n "$l" ]; do
	echo 'Working on report for the site… ' $l
	lighthouse --quiet --output=html --chrome-flags="--headless" $l
done < "page-list.txt"

سپس با استفاده از کامند chmod زیر، دسترسی اجرا را به فایل lighthouse.sh بدهید.

chmod +x lighthouse.sh

اکنون می توانید با باز کردن ترمینال در سیستم عامل های مک و اوبنتو و اجرای فایل lighthouse.sh با استفاده از کامند زیر، همه آدرس هایی که در فایل page-list.txt هستند را با یک کامند و پشت سر هم بررسی کنید.

./lighthouse.sh

پرسش های متداول در مورد Lighthouse CLI

🔗 منبع: Google Chrome GitHub

The post روش نصب و استفاده از Lighthouse CLI appeared first on وب یوز.

در این مقاله در مورد مطالب زیر صحبت شده است:

• CLS چیست؟
  • Impact fraction چیست؟
  • Distance fraction چیست؟
• چگونه امتیاز CLS صفحه را اندازه گیری کنیم؟
  • شناسایی layout shift توسط گزارش performance در DevTools گوگل کروم
• چگونه CLS را بهینه کنیم؟
  • عکس ها یا ویدیوهایی که ابعاد آنها مشخص نباشد
  • تبلیغات، embed ها و هر گونه محتوایی که با تاخیر بارگزاری شوند
  • انیمیشن هایی که باعث re-layout می شوند
• پرسش های متداول در مورد CLS

برای اینکه در خصوص بهینه کردن صفحات در راستای کاهش layout shift اقدام کنیم، لازم است که ابتدا درک بهتری از CLS و نحوه محاسبه آن داشته باشیم.

CLS چیست؟

CLS مخفف عبارت Cumulative Layout Shift است و برای اندازه گیری Visual Stability استفاده می شود. پارامتر CLS در حقیقت صفحه را از نظر جابجایی layout بررسی می کند و امتیاز آن بیانگر میزان جابجایی و ابعاد المان هایی است که در viewport جابجا می شوند. طبق استاندارد کنونی Core Web Vitals گوگل، امتیاز CLS کوچکتر مساوی 0.1، در محدوده سبز و امتیاز بین 0.1 تا 0.25 در محدوده زرد و امتیاز بزرگتر از 0.25 در محدوه قرمز خواهد بود.

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

25٪ از امتیاز پرفورمنس در لایت هاوس متعلق به CLS است. 75 درصد باقیمانده بین Time To First Byte، LCP، Speed Index و First Contentful Paint تقسیم می شود.

در گذشته CLS به جمع کل layout shift ها اطلاق می شد ولی اکنون امتیاز CLS بر اساس بزرگترین layout shift محاسبه می شود.

جهت کسب اطلاعات بیشتر در مورد Core Web Vitals، نوشته LCP و FID و CLS در Web Vitals را مطالعه بفرمایید.

محاسبه امتیاز layout shift بر اساس ابعاد viewport و میزان حرکت المنت ها بین دو فریم رندر شده انجام می شود. در نهایت، امتیاز layout shift بر اساس دو معیار impact fraction و distance fraction محاسبه خواهد شد. در خصوص این دو معیار در ادامه توضیح داده شده است.

Layout shift score = impact fraction * distance fraction

Impact fraction چیست؟

معیار impact fraction به مجموع مساحت قابل مشاهده صفحه در viewport که جابجایی داشتند، در قبل و بعد از جابجایی گفته می شود.

در تصویر زیر، المانی که layout shift داشته، مساحتی معادل 50٪ از صفحه را شامل می شود و پس اینکه معادل 25٪ از ارتفاع صفحه به پایین شیفت می شود، در نهایت 75٪ از صفحه تحت تاثیر layout shift قرار می گیرد. بنابراین impact fraction معادل 0.75 خواهد بود.

Distance fraction چیست؟

معیار distance fraction به میزان جابجایی المان در viewport نسبت به خود viewport اطلاق می شود. به عبارت دیگر، distance fraction بزرگترین جابجایی المان (افقی یا عمودی) تقسیم بر بزرگترین ضلع viewport (عرض یا ارتفاع) گفته می شود.

در نمونه تصویر زیر، بزرگترین ضلع viewport، ارتفاع بوده و المان به میزان 25٪ از ارتفاع جابجا شده است که به معنی این است که distance fraction معادل 0.25 است.

در نمونه بالا، impact fraction برابر با 0.75 و distance fraction برابر با 0.25 بود. بنابراین امتیاز layout shift معادل با 0.1875 خواهد بود.

Layout shift score = 0.75 * 0.25 = 0.1875

نمونه دوم برای درک بهتر روش محاسبه layout shift

جهت درک بیشتر نحوه محاسبه layout shift، یک نمونه دیگر در تصویر زیر نمایش داده شده است. در این نمونه، دکمه Click me به رنگ نارنجی بعد از گذشت 500 میلی ثانیه به صفحه اضافه شده و محتوای با پس زمینه سبز را به پایین حرکت داده، به نحوی که مقداری از المان سبز رنگ به خارج از viewport رانده شده است.

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

قسمت به رنگ سبز نیز که مساحت معادل 50٪ از viewport را تشکیل داده است، به میزان 14٪ از ارتفاع viewport به پایین حرکت کرده است. بنابراین محاسبه layout shift نمونه بالا به این صورت خواهد بود:

Layout shift score = 0.50 * 0.14 = 0.07

نمونه سوم برای درک بهتر روش محاسبه layout shift

در نمونه سوم، پس از اینکه نام تعدادی حیوان از سرور خوانده شد، در بین محتوای کنونی صفحه وارد شده که باعث سه layout shift در صفحه شده است.

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

در این نمونه، سه المان صفحه به میزان 60% از ارتفاع viewport به سمت پایین حرکت کرده اند و بنابراین impact fraction برابر با 0.6 خواهد بود. همان طور که گفته شد، در محاسبه layout shift، بزرگترین جابجایی در نظر گرفته می شود و در نمونه بالا، فلش آبی رنگ از دو فلش قرمز و بنفش بزرگتر بوده و معادل 30% از صفحه است. بنابراین distance fraction برابر با 0.3 خواهد بود. در نتیجه امتیاز layout shift به صورت زیر محاسبه می شود:

Layout shift score = 0.60 * 0.30 = 0.18

همه layout shift ها بد نیستند. layout shift هایی برای کاربر آزاردهنده هستند که کاربر انتظار آنها را نداشته باشد و یا اینکه بیش از 500 میلی ثانیه پس از تعامل کاربر با صفحه ادامه داشته باشند.

تعاملاتی مانند اسکرول کردن، drag، زوم کردن و pinch در محاسبه CLS در نظر گرفته نمی شوند.

چگونه امتیاز CLS صفحه را اندازه گیری کنیم؟

روش های گوناگونی برای اندازه گیری امتیاز CLS به صورت Lab data (اندازه گیری به کمک ابزار) و به صورت Field data (نمایش میانگین امتیاز CLS در مرورگر کاربران) وجود دارد. در گزارش Core Web Vitals گوگل سرچ کنسول اطلاعات LCP و CLS و INP نمایش داده می شود و اطلاعات آن از سرور Chrome User Experience (CrUX) گوگل فراخوانی می شود. مبنای محاسبات اطلاعات این گزارش، میانگین اطلاعاتی است که از مرورگر گوگل کروم کاربران به دست آمده است و بنابراین، این نوع اطلاعات به عنوان field data شناخته می شود.

ابزار PageSpeed Insights امتیاز CLS را هم به صورت field data نمایش می دهد و هم توسط لایت هاوس در همان لحظه CLS را اندازه گیری می کند و امتیاز lab data آن را نیز به شما نمایش می دهد.

شناسایی layout shift توسط گزارش performance در DevTools گوگل کروم

ابتدا با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس​ و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید و روی ​تب Performance کلیک کنید.​ سپس با کلیک بر روی آیکون رفرش در تب performance و یا از طریق میانبر Ctrl+Shift+E صفحه را رفرش کنید. پس از پایان فرایند بروزرسانی صفحه می‌توانید میزان Layout shift ایجاد شده در viewport را مشاهده و آن را بررسی نمایید.

با توجه به تصویر زیر، گزارش Performance در DevTools مرورگر گوگل کروم اطلاعات layout shift هایی که در صفحه اتفاق افتاده است را نمایش می دهد.

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

چگونه CLS را بهینه کنیم؟

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

عکس ها یا ویدیوهایی که ابعاد آنها مشخص نباشد

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

تلاش کنید همیشه از اتریبیوت های width و height برای نمایش عکس یا ویدیو در صفحه استفاده کنید.

همان طور که در نمونه زیر مشاهده می کنید، ابعادی که در تگ <img> استفاده شده اند، بدون واحد هستند. در واقع ابعاد یاد شده توسط مرورگر به صورت پیشفرض با واحد پیکسل در نظر گرفته می شوند.

<img src="seo-book.jpg" width="640" height="360" alt="An SEO book on the shelf">

بسیاری از برنامه نویسان در طراحی responsive از CSS برای ریسایز تصاویر استفاده می کنند که از نظر CLS کار صحیحی نیست.

اگر مانند نمونه زیر از width و height در تگ <img> استفاده نشود و به جای آن از CSS استفاده شود، مرورگر تا زمانی که شروع به دانلود عکس یا ویدیو نکرده باشد و از ابعاد عکس مطلع نشده باشد، نمی تواند layout را محاسبه کند و هر زمان که ابعاد المان را متوجه شد، مجدد باید layout را تغییر دهد تا عکس یا ویدیو را در صفحه رندر کند.

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

هنگامی که مرورگر از عرض و ارتفاع عکس مطلع باشد، aspect ratio آنها را محاسبه کرده و بر اساس آن می تواند layout صفحه را محاسبه کند. به عنوان نمونه، عکس زیر دارای aspect ratio برابر با 640:360 و یا 16:9 است

<!-- aspect ratio 640:360 or 16:9 -->
<img src="seo-book.jpg" width="640" height="360" alt="An SEO book on the shelf">

مرورگرهای مطرح مانند همه مرورگرهای بر پایه Chromium و مرورگر سافاری (به جز مرورگر فایرفاکس) صرف نظر از تعریف aspect ratio توسط کاربر، به صورت مستقل aspect ratio تصاویر را محاسبه می کنند.

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

هر گونه محتوایی مانند تبلیغات و embed ها (مانند iframe) که با کمی تاخیر در صفحه بارگزاری می شوند، می توانند باعث layout shift شده و روی امتیاز CLS تاثیر منفی بگذارند. برای جلوگیری از این مسئله، یکی از راهکارهای موثر این است که ارتفاع و فضای کافی جهت نمایش المانی که قرار است با تاخیر بارگزاری شود را در صفحه بگذاریم تا هر زمان المان مربوطه دانلود شد، در فضای اختصاص یافته به خودش نمایش داده شود و منجر به layout shift نشود.

تلاش کنید محتواهایی که با تاخیر نمایش داده می شوند را در above the fold صفحه نمایش ندهید و یا در صورت نیاز به نمایش آنها (مانند پیغام نصب اپلیکیشن)، تا جای ممکن آن را در پایین viewport نمایش دهید که تاثیر کمتری در امتیاز CLS داشته باشد.

انیمیشن هایی که باعث re-layout می شوند

اگر قصد داشتن انیمیشن در صفحه را دارید، مطمئن باشید که در هنگام انیمیت شدن یک المان در صفحه، layout shift یا re-layout اتفاق نیفتد. به عنوان نمونه box-shadow و box-sizing می تواند باعث re-layout شود ولی CSS property هایی مانند transform می تواند جهت translate، rotate، scale و skew استفاده شوند و باعث re-layout و layout shift نیز نشوند.

پرسش های متداول در مورد CLS

🔗 منبع: Google Developers

The post CLS چیست و چگونه آن را اپتیمایز کنیم؟ appeared first on وب یوز.

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

Bookmarklet چیست؟

بوکمارکلت های شبیه افزونه های مرورگر و البته ساده تر هستند و نیازی به نصب ندارند. بوکمارکلت ها معمولا با یکی از کاربردهای زیر مورد استفاده قرار می گیرند:

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

نحوه ایجاد و استفاده از بوکمارکلت در مرورگر

برای ایجاد یک bookmarklet در مرورگر گوگل کروم یا دیگر مرورگر های بر پایه کرومیوم، سه مرحله زیر را انجام دهید:

1. فانکشن جاوا اسکریپت مد نظرتان را بنویسید.
2. یک صفحه وب را بوکمارک کنید.‌ (همچنین می توانید از Bookmark manager مرورگر جهت ایجاد بوکمارک استفاده کنید)
3. آدرس بوکمارک را ادیت کرده و آدرس URL آن را با فانکشن جاوا اسکرپت مد نظر جایگزین کنید.
4. نام مناسبی برای بوکمارک انتخاب کنید.

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

بوکمارکلت های کاربردی جهت بررسی صفحه از دیدگاه سئو

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

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

تک تک فانکشن هایی که در ادامه معرفی شده اند را می توانید قبل از ذخیره کردن به عنوان بوکمارکلت، در کنسول مرورگر گوگل کروم کپی و پیست کنید و پس از enter کردن از عملکرد آنها آگاه شوید.

1. Bookmarklet برای فیلتر کردن صفحه در سرچ کنسول

در صورت کلیک بر روی این بوکمارکلت، صفحه ای که در آن هستید در گزارش Performance سرچ کنسول با فیلتر URLs containing فیلتر می شود.

javascript: (function() {
    window.open(`https://search.google.com/search-console/performance/search-analytics?resource_id=${encodeURIComponent(window.location.origin)}&page=*${encodeURIComponent(window.location.href)}`)
})();

برای استفاده از این بوکمارکلت باید به پراپرتی از نوع URL Prefix دامین مورد نظر در گوگل سرچ کنسول دسترسی داشته باشید.

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

اما اگر قصد فیلتر کردن صفحه با فیلتر Exact URL در گزارش پرفورمنس سرچ کنسول را داشتید، از بوکمارکلت زیر استفاده کنید.

javascript: (function() {
    window.open(`https://search.google.com/search-console/performance/search-analytics?resource_id=${encodeURIComponent(window.location.origin)}&page=!${encodeURIComponent(window.location.href)}`)
})();

با توجه به دو نمونه بالا، در صورت استفاده از page=*$ در آدرس، فیلتر URLs containing و در صورت استفاده از page=!$ در آدرس، فیلتر Exact URL در گزارش پرفورمنس سرچ کنسول استفاده خواهد شد.

2. Bookmarklet برای ارسال صفحه به ابزار تست Rich Result گوگل

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

javascript: (function() {
    window.open(`https://search.google.com/test/rich-results?url=${encodeURIComponent(window.location.href)}`)
})();

3. Bookmarklet برای ارسال صفحه به ابزار تست AMP گوگل

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

javascript: (function() {
    window.open(`https://search.google.com/test/amp?url=${encodeURIComponent(window.location.href)}`)
})();

4. Bookmarklet برای ارسال صفحه به ابزار PageSpeed Insights گوگل

javascript: (function() {
    window.open(`https://pagespeed.web.dev/analysis?url=${encodeURIComponent(window.location.href)}`)
})();

5. Bookmarklet برای هایلایت کردن تگ های <a> صفحه

javascript: (function() {
    var anchorElements = document.querySelectorAll('a');
    anchorElements.forEach(function(anchor) {
        anchor.style.background = 'yellow';
        anchor.style.border = '2px solid blue';
        anchor.style.padding = '2px';
    });
    if (anchorElements.length > 0) {
        alert('Links highlighted on the page.');
    } else {
        alert('No anchor elements found on this page.');
    }
})();

6. Bookmarklet برای نمایش تعداد تگ های <a> و هایلایت کردن آنها

javascript: (function() {
    var anchorElements = document.querySelectorAll('a');
    anchorElements.forEach(function(anchor, index) {
        var backgroundColor = getRandomColor();
        anchor.style.background = backgroundColor;
        anchor.style.border = '2px solid #000';
        anchor.style.padding = '2px';
        anchor.setAttribute('data-link-index', index + 1);
    });
    var totalLinks = anchorElements.length;
    if (totalLinks > 0) {
        alert('Total links on the page: ' + totalLinks);
    } else {
        alert('No anchor elements found on this page.');
    }
    function getRandomColor() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
})();

7. Bookmarklet برای نمایش Alt عکس روی آن

javascript: (function() {
    var images = document.querySelectorAll('img');
    images.forEach(function(img) {
        var altText = img.alt || 'N/A';
        var altOverlay = document.createElement('div');
        altOverlay.style.position = 'absolute';
        altOverlay.style.top = '0';
        altOverlay.style.left = '0';
        altOverlay.style.background = 'rgba(255, 255, 255, 0.9)';
        altOverlay.style.padding = '5px';
        altOverlay.style.border = '1px solid #ccc';
        altOverlay.style.zIndex = '9999';
        altOverlay.textContent = 'Alt Text: ' + altText;
        img.style.position = 'relative';
        img.parentNode.insertBefore(altOverlay, img);
    });
})();

8. Bookmarklet برای نمایش نوع هدینگ در کنار هر تگ <h>

javascript:(function() {
  var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  headings.forEach(function(heading) {
    var headingTypeContainer = document.createElement('div');
    headingTypeContainer.style = 'position: relative; display: inline-block; margin-left: 10px;';
    var headingTypeLabel = document.createElement('div');
    headingTypeLabel.style = 'position: absolute; top: -20px; right: 0; background-color: #000; color: #fff; padding: 5px;border-radius:5px;';
    headingTypeLabel.textContent = heading.tagName.toLowerCase();
    headingTypeContainer.appendChild(headingTypeLabel);
    heading.appendChild(headingTypeContainer);
  });
})();

9. Bookmarklet برای نمایش آدرس canonical و meta robots صفحه

javascript:(function() {
    function getMetaContentByName(name) {
        var metaTag = document.querySelector('meta[name="' + name + '"]');
        return metaTag ? metaTag.getAttribute('content') : null;
    }
    var canonicalUrl = getMetaContentByName('canonical');
    var canonicalMessage = canonicalUrl ? 'Canonical URL:' + '\n' + canonicalUrl : 'Canonical URL does not exist! 🤔';
    var metaRobots = getMetaContentByName('robots');
    var robotsMessage = metaRobots ? 'Meta Robots:' + '\n' + metaRobots : 'Meta Robots does not exist! 🤔';
    alert(canonicalMessage + '\n' + '\n' + robotsMessage);
})();

10. Bookmarklet برای نمایش تعداد و آدرس preconnect، dns-prefetch، preload و prefetch صفحه

javascript:(function() {
  function getLinkInfo(linkType) {
    var linkElements = document.querySelectorAll('link[rel="' + linkType + '"]');
    var linkCount = linkElements.length; 
    if (linkCount > 0) {
      var linkInfo = Array.from(linkElements).map(function(link) {
        return link.href;
      }).join('\n');
      alert(linkType + ' links (' + linkCount + '):\n' + linkInfo);
    } else {
      alert('No ' + linkType + ' links found on this page! 🤔');
    }
  }
  getLinkInfo('preconnect');
  getLinkInfo('dns-prefetch');
  getLinkInfo('preload');
  getLinkInfo('prefetch');
})();

11. Bookmarklet برای نمایش تعداد کل المنت های صفحه به همراه تعداد برخی از المنت ها

در فانکشن زیر می توانید به راحتی المنت های مورد نظر را حذف و یا المنت های دیگر را به لیست اضافه کنید.

javascript: (function() {
    var elementsCount = document.querySelectorAll('*').length;
    var resourcesCount = window.performance.getEntries().length;
    var totalSize = 0;
    window.performance.getEntries().forEach(function(entry) {
        totalSize += entry.encodedBodySize || 0;
    });
    var totalSizeFormatted = (totalSize / (1024 * 1024)).toFixed(2) + ' MB';
    var metaTagsCount = document.querySelectorAll('meta').length;
    var headingsCount = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
    var h1Count = document.querySelectorAll('h1').length;
    var h2Count = document.querySelectorAll('h2').length;
    var h3Count = document.querySelectorAll('h3').length;
    var h4Count = document.querySelectorAll('h4').length;
    var h5Count = document.querySelectorAll('h5').length;
    var h6Count = document.querySelectorAll('h6').length;
    var anchorTagsCount = document.querySelectorAll('a').length;
    var cssTagsCount = document.querySelectorAll('link[rel="stylesheet"]').length;
    var jsTagsCount = document.querySelectorAll('script[src]').length;
    var canonicalTagsCount = document.querySelectorAll('link[rel="canonical"]').length;
    var imgCount = document.querySelectorAll('img').length;
    var pictureCount = document.querySelectorAll('picture').length;
    var videoCount = document.querySelectorAll('video').length;
    var breakCount = document.querySelectorAll('br').length;
  
    alert('Elements: ' + elementsCount + ' | ' + 'Resources: ' + resourcesCount + ' | ' + 'Size: ' + totalSizeFormatted + '\n' + 'Meta: ' + metaTagsCount + '\n' + 'Headings: ' + headingsCount + ' | ' + 'H1: ' + h1Count + ' | ' + 'H2: ' + h2Count + ' | ' + 'H3: ' + h3Count + ' | ' + 'H4: ' + h4Count + ' | ' + 'H5: ' + h5Count + ' | ' + 'H6: ' + h6Count + '\n' + 'Anchor: ' + anchorTagsCount+ '\n' + 'CSS: ' + cssTagsCount + '\n' + 'JS: ' + jsTagsCount + '\n' + 'Canonical: ' + canonicalTagsCount + '\n' + 'img: ' + imgCount + ' | ' + 'picture: ' + pictureCount + ' | ' + 'video: ' + videoCount + '\n' + '<br>: ' + breakCount);
  })();

12. Bookmarklet برای استخراج و نمایش اسکیماهای صفحه در یک تب دیگر

javascript:(function() {
  function extractJsonLd() {
    const jsonLdScripts = document.querySelectorAll('script[type="application/ld+json"]');
    const extractedData = [];
    jsonLdScripts.forEach(script => {
      try {
        const json = JSON.parse(script.textContent);
        extractedData.push(json);
      } catch (error) {
        console.error('Error parsing JSON-LD:', error);
      }
    });
    if (extractedData.length > 0) {
      const jsonString = JSON.stringify(extractedData, null, 2);
      const highlightedJsonString = jsonString.replace(/(".*schema\.org.*")/g, '<span style="background-color: lightgreen;">$1</span>');
      const blob = new Blob([highlightedJsonString], { type: 'text/html' });
      const objectURL = URL.createObjectURL(blob);
      const newTab = window.open();
      newTab.document.write('<pre>' + highlightedJsonString + '</pre>');
      newTab.document.close();
    } else {
      console.log('No JSON-LD Schema Markup found on this page.');
    }
  }
  extractJsonLd();
})();

13. Bookmarklet برای نمایش cookie های صفحه در یک modal

javascript:(function() {
  function createCookieModal() {
    var modalContainer = document.createElement('div');
    modalContainer.style.position = 'fixed';
    modalContainer.style.top = '50%';
    modalContainer.style.left = '50%';
    modalContainer.style.transform = 'translate(-50%, -50%)';
    modalContainer.style.backgroundColor = 'white';
    modalContainer.style.padding = '20px';
    modalContainer.style.border = '1px solid #222';
    modalContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
    modalContainer.style.zIndex = '9999';
    modalContainer.style.width = '1000px';
    modalContainer.style.direction = 'ltr';
    modalContainer.style.textAlign = 'left';
    modalContainer.style.wordWrap = 'break-word';
    var closeButton = document.createElement('button');
    closeButton.textContent = 'Close';
    closeButton.style.padding = '5px 10px';
    closeButton.style.marginTop = '10px';
    closeButton.style.cursor = 'pointer';
    closeButton.style.right = '10px';
    closeButton.style.top = '10px';
    closeButton.style.position = 'fixed';
    closeButton.addEventListener('click', function() {
      modalContainer.style.display = 'none';
    });
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookieLine = document.createElement('div');
      cookieLine.textContent = cookies[i].trim();
      modalContainer.appendChild(cookieLine);
    }
    modalContainer.appendChild(closeButton);
    document.body.appendChild(modalContainer);
  }
  createCookieModal();
})();

در صورتی که طبق نمونه زیر، به جای alert در انتهای فانکشن از console.log استفاده کنید، نتیجه در کنسول مرورگر نمایش داده خواهد شد.

    alert('Cookies:\n' + cookieInfo);  // نمایش ریزالت به صورت آلرت

    console.log('Cookies:\n' + cookieInfo);  // نمایش ریزالت در کنسول مرورگر

    const newTab = window.open();
    newTab.document.write('<pre>' + 'Cookies:\n' + cookieInfo + '</pre>');  // نمایش ریزالت در تب جدید

14. Bookmarklet برای ارسال دامین صفحه به archive.org

javascript:(function() {
  var currentDomain = window.location.origin;
  var waybackURL = 'https://web.archive.org/web/*/' + decodeURIComponent(currentDomain);
  window.open(waybackURL, '_blank');
})();

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

15. Bookmarklet برای نمایش اموجی 🏃 و 🏃‍♀️ در حال دویدن در پایین صفحه

javascript:(function() {
    function createRunningEmoji(emoji) {
      var runningElement = document.createElement('div');
      runningElement.innerHTML = emoji;
      runningElement.style.cssText = 'position: fixed; bottom: 0px; font-size: 60px; animation: run-animation 10s linear infinite;';
      document.body.appendChild(runningElement);
    }
    function animateRunningWoman() {
      setTimeout(function() {
        createRunningEmoji('🏃');
      }, 2000);
    }
    createRunningEmoji('🏃‍♀️');
    animateRunningWoman();
    var style = document.createElement('style');
    style.textContent = `
      @keyframes run-animation {
        0% { right: 0; }
        100% { right: calc(100vw - 20px); }
      }
    `;
    document.head.appendChild(style);
  })();
 

16. Bookmarklet برای نمایش اموجی های رندوم که از بالا به پایین صفحه می افتند

javascript: (function() {
    var emojis = ['😂', '😜', '🤔', '😎', '🚀', '🎉', '👾', '🤣', '🥳', '😺', '❤️'];
    var emojiContainer = document.createElement('div');
    emojiContainer.style.cssText = 'position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1000;';
    function createEmoji() {
        var emojiElement = document.createElement('div');
        var randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
        emojiElement.innerHTML = randomEmoji;
        emojiElement.style.cssText = 'position: absolute; font-size: 40px; opacity: 0.8;';
        emojiElement.style.left = Math.random() * window.innerWidth + 'px';
        emojiElement.style.animation = 'falling-emoji 5s linear infinite';
        emojiContainer.appendChild(emojiElement);
    }
    function animateEmojis() {
        setInterval(function() {
            createEmoji();
        }, 3000);
    }
    document.body.appendChild(emojiContainer);
    var style = document.createElement('style');
    style.textContent = `    @keyframes falling-emoji {      0% { transform: translateY(0) rotate(0deg); }      100% { transform: translateY(calc(100vh - 20px)) rotate(360deg); }    }  `;
    document.head.appendChild(style);
    createEmoji();
    animateEmojis();
})();

روش دیباگ کردن بوکمارکلت

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

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

پرسش های متداول در مورد بوکمارکلت

🔗 منبع: GitHub

The post بوکمارکلت ها و کاربرد آنها در بررسی صفحات appeared first on وب یوز.

Syntax یوزر ایجنت به طور کلی به صورت زیر است:

User-Agent: <product> / <product-version> <comment>

یوزر ایجنت مرورگر شما که الان در حال رویت این صفحه با آن هستید به صورت زیر است:

در این مقاله در مورد یوزر ایجنت مرورگرها، سیستم عامل ها و ربات های موتورهای جستجو مطرح صحبت شده و شامل موارد زیر است:

• یوزر ایجنت در مرورگرها
  • یوزر ایجنت مرورگر Google Chrome
  • یوزر ایجنت مرورگر Mozilla Firefox
  • یوزر ایجنت مرورگر Safari
  • یوزر ایجنت مرورگر مایکروسافت Edge Chromium
• یوزر ایجنت در سیستم عامل های مختلف
• یوزر ایجنت در ربات های موتور جستجو
  • یوزر ایجنت Googlebot
  • یوزر ایجنت Bingbot
  • یوزر ایجنت Yandex
• User-agent client hint چیست؟
• چه استفاده ای از User agent بکنم؟
• پرسش های متداول در مورد User-agent

یوزر ایجنت در مرورگرها

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

User-Agent: Mozilla/5.0 (<system-information>) <platform> (<platform-details>) <extensions>

• Mozilla/5.0 در یوزر ایجنت به معنی سازگار بودن مرورگر با موزیلا است و بیشتر مرورگرها از آن استفاده می کنند.
• rv:geckoversion بیانگر نسخه Gecko (موتور استفاده شده در موزیلا) است.
• ساختار یوزر ایجنت مرورگر های مختلف در سیستم عامل های گوناگون ممکن است با هم تفاوت هایی داشته باشد.

در ادامه، User agent های مرورگرهای گوگل کروم، فایرفاکس، سافاری و Edge کرومیوم را مشاهده می کنید.

یوزر ایجنت مرورگر Google Chrome

در یوزر ایجنت گوگل کروم، در همه سیستم عامل ها به جز سیستم عامل های دستگاه های اپل مانند iOS، iPadOS و Macintosh صرفا نسخه اصلی مرورگر وجود دارد و همچنین نسخه سیستم عامل نیز به صورت مختصر وجود دارد که به آن Reduced user-agent گفته می شود. به عنوان نمونه، اگر از گوگل کروم نسخه 119.0.5884.36 در سیستم عامل اندروید ۱۴ استفاده شود، صرفا نسخه مرورگر 119.0.0.0 و سیستم عامل Android 10; K در یوزر ایجنت ارسال می شود. در ادامه، فرمت یوزر ایجنت گوگل کروم و چند نمونه واقعی با سیستم عامل های مختلف نمایش داده شده است.

فرمت (سینتکس) User-agent string در مرورگر گوگل کروم

Mozilla/5.0 (platform; rv:geckoversion) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/chromeversion

یوزر ایجنت مرورگر گوگل کروم نسخه 120.0.5993.88 در سیستم عامل ویندوز 11

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

یوزر ایجنت مرورگر گوگل کروم نسخه 120.0.5993.88 در سیستم عامل Ubuntu 22

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

یوزر ایجنت مرورگر گوگل کروم نسخه 120.0.5993.88 در سیستم عامل macOS 10.15.7

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

یوزر ایجنت مرورگر گوگل کروم نسخه 120.0.5993.88 در سیستم عامل iOS 17.0.3 گوشی آیفون (در اینجا، نسخه کامل مرورگر وجود دارد)

Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.5993.88 Mobile/15E148 Safari/604.1

در یوزر ایجنت گوشی های آیفون، بعد از کلمه Mobile، عبارتی مانند 15E148 مربوط به OS firmware build number است.

یوزر ایجنت مرورگر گوگل کروم نسخه 120.0.5993.88 در سیستم عامل iPadOS 17.1 آیپد ۱۰ (در اینجا، نسخه کامل مرورگر وجود دارد)

Mozilla/5.0 (iPad; CPU OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.5993.88 Mobile/15E148 Safari/604.1

یوزر ایجنت مرورگر گوگل کروم نسخه 120.0.5993.88 در سیستم عامل Android 14 (سیستم عامل Android 10; K در یوزر ایجنت نمایش داده شده)

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

یوزر ایجنت مرورگر Mozilla Firefox

در یوزر ایجنت Mozilla Firefox، مانند گوگل کروم، صرفا نسخه اصلی مرورگر وجود دارد. به عنوان نمونه، اگر از فایرفاکس نسخه 120.0.2 استفاده شود، صرفا نسخه 120.0 در یوزر ایجنت ارسال می شود. در ادامه، فرمت یوزر ایجنت فایرفاکس و چند نمونه دیگر با سیستم عامل های مختلف نمایش داده شده اند.

فرمت (سینتکس) User-agent string در مرورگر موزیلا فایرفاکس

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion

یوزر ایجنت مرورگر فایرفاکس نسخه 119.0.1 در سیستم عامل ویندوز 11

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0

یوزر ایجنت مرورگر فایرفاکس نسخه 119.0.1 در سیستم عامل Ubuntu 22

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0

یوزر ایجنت مرورگر فایرفاکس نسخه 119.0.1 در سیستم عامل macOS 10.15.7

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0

یوزر ایجنت مرورگر Safari اپل

مرورگر Safari اپل برای سیستم عامل های macOS و iOS در دسترس است. در یوزر ایجنت مرورگر سافاری، نسخه مرورگر بعد از کلمه Version نمایش داده می شود و بر خلاف مرورگرهای گوگل کروم و فایرفاکس، عدد نسخه به صورت دقیق وجود دارد.

فرمت (سینتکس) User-agent string در مرورگر سافاری اپل

Mozilla/5.0 (platform; rv:geckoversion) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/safariversion

یوزر ایجنت مرورگر سافاری نسخه 17.0 در سیستم عامل macOS 10.15.7

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

یوزر ایجنت مرورگر سافاری نسخه 17.0.1 در سیستم عامل iOS 17.0.3 گوشی آیفون

Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0.1 Mobile/15E148 Safari/604.1

یوزر ایجنت مرورگر سافاری نسخه 17.1 در سیستم عامل iOS 17.1 آیپد 10

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

در یوزر ایجنت تبلت های iPad، عبارت Mobile/BuildNumber در مرورگر سافاری وجود ندارد و سیستم عامل نیز به جای iPad، سیستم عامل Macintosh است. این مورد در مرورگر گوگل کروم در آیپد، به این صورت نیست و سیستم عامل iPad به همراه Mobile/BuildNumber نمایش داده می شود.

یوزر ایجنت مرورگر مایکروسافت Edge Chromium

مرورگر Microsoft Edge Chromium به همراه ویندوز ۱۰ و ۱۱ عرضه می شود و امکان نصب آن روی سیستم عامل های مختلف نیز وجود دارد. همان طور که از نام آن مشخص است، این مرورگر از پروژه Chromium گوگل استفاده می کند و به همین دلیل در یوزر ایجنت آن، نام و نسخه Chrome نیز وجود دارد.

یوزر ایجنت مرورگر مایکروسافت Edge Chromium نسخه 118.0.2088.76 در سیستم عامل ویندوز 11

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.2088.76

یوزر ایجنت در سیستم عامل های مختلف

همان طور که در نمونه های بالا مشاهده کردید، یوزر ایجنت مرورگرها حاوی اطلاعات (<system-information>) است که نشان دهنده سیستم عامل و در برخی موارد حاوی نسخه سیستم عامل است.

نسخه سیستم عامل در یوزر ایجنت برخی از مرورگرها در برخی از سیستم عامل ها وجود ندارد. در برخی موارد نیز مانند مرورگر گوگل کروم در اندروید ۱۰ تا ۱۴ (در لحظه نگارش این متن)، سیستم عامل Android 10 در یوزر ایجنت نمایش داده می شود. به عنوان یک نمونه دیگر، در iPad اپل، مرورگرهای گوگل کروم و سافاری، به ترتیب سیستم عامل های iPad و Macintosh را نمایش می دهند.

چند نمونه از (<system-information>) در یوزر ایجنت سیستم عامل های مختلف در ادامه نمایش داده شده اند:

(Windows NT 10.0; Win64; x64) #Windows 11 64bit
(Windows NT 10.0; Win64; x64) #Windows 10 64bit
(Windows NT 6.3; Win64; x64)  #Windows 8.1 64bit
(Windows NT 6.2; Win64; x64)  #Windows 8 64bit
(Windows NT 6.1; Win64; x64)  #Windows 7 64bit
(Windows NT 6.0; Win64; x64)  #Windows Vista 64bit
(Windows NT 5.1; Win64; x64)  #Windows XP 64bit

(X11; Ubuntu; Linux x86_64; rv:109.0) #Ubuntu 22.3

(Macintosh; Intel Mac OS X 10_15_7) #macOS Sonama 10.15.7, Intel/M2 CPU
(iPhone; CPU iPhone OS 16_7_1 like Mac OS X) #iOS 16.7.1, iPhone 13
(iPad; CPU OS 17_1 like Mac OS X)   #iPadOS 17.1, Google Chrome
(Macintosh; Intel Mac OS X 10_15_7) #iPadOS 17.1, Safari (Shows Macintosh instead of iPad)

(Linux; Android 10; K) #Android 10~14, Google Chrome (Shows Android 10)
(Android 14; Mobile; rv:109.0) #Android 14, Pixel 7, Firefox
(Android 11; Mobile; rv:109.0) #Android 11, Xiaomi Note 8 Pro
(Linux; Android 6.0.1; Nexus 5X Build/MMB29P) #Android 6.0.1, Nexus 5

(X11; CrOS x86_64 15183.44.0) #Chromium OS

یوزر ایجنت در ربات های موتور جستجو

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

گوگل بات برای Crawl سایت ها از آخرین نسخه Stable مرورگر گوگل کروم استفاده می کند که به آن evergreen Googlebot گفته می شود.

برای آشنایی با ربات های دیگر گوگل، مقاله گوگل بات چیست را مطالعه بفرمایید.

فرمت (سینتکس) یوزر ایجنت Googlebot موبایل و دسکتاپ

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html) #Googlebot Smartphone

Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/W.X.Y.Z Safari/537.36 #Googlebot Desktop

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html) #Googlebot Desktop (Rarely)

Googlebot/2.1 (+http://www.google.com/bot.html) #Googlebot Desktop (Rarely)

فرمت (سینتکس) یوزر ایجنت Bingbot موبایل و دسکتاپ

بینگ بات برای Crawl سایت ها از آخرین نسخه Stable مرورگر Microsoft Edge استفاده می کند و به آن evergreen Bingbot گفته می شود.

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36  (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) #Bingbot Smartphone

Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)
Chrome/W.X.Y.Z Safari/537.36 #Bingbot Desktop

فرمت (سینتکس) یوزر ایجنت Yandex موبایل و دسکتاپ

ربات موتور جستجوی یاندکس، از یوزر ایجنت گوشی iPhone و سیستم عامل iOS 8.1 و مرورگر سافاری ۸ که قدیمی است برای کراول صفحات با موبایل و از مرورگر گوگل کروم برای کراول دسکتاپ استفاده می کند.

Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 (compatible; YandexMobileBot/3.0; +http://yandex.com/bots) #Yandexbot Mobile

Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z #Yandexbot Desktop

User-Agent client hint چیست؟

User-agent client hint اطلاعاتی است که مانند یوزر ایجنت توسط درخواست دهنده (مانند مرورگر) در HTTP request header به سرور ارسال می شود و ممکن است سرور با توجه به آن اطلاعات، پاسخ متفاوتی بدهد.

برای اینکه متوجه شوید که یک سرور به User-agent client hint اهمیت می دهد یا خیر، HTTP response header صفحه را در چک کنید. اگر مانند نمونه زیر، حاوی Accept-CH بود، به معنی اهمیت داشتن User-agent client hint برای سرور است.

Accept-CH: Width, Downlink, Sec-CH-UA

نمونه User-agent client hint در HTTP request header

Sec-Ch-Ua: "Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"
Sec-Ch-Ua-Mobile: ?1
Sec-Ch-Ua-Platform: "Android"

• Sec-Ch-Ua: برند و نسخه درخواست دهنده را مشخص می کند. به عنوان نمونه می تواند برند مرورگر و نسخه مرورگر را مشخص کند.
• Sec-Ch-Ua-Mobile: موبایل بودن یا نبودن دستگاه را مشخص می کند. Sec-CH-UA-Mobile می تواند ?1 به معنی موبایل و ?0 به معنی دسکتاپ باشد.
• Sec-CH-UA-Platform: بیانگر سیستم عامل دستگاه است و می تواند یکی از مقادیر “Android”، “Chromium OS”، “Chrome OS”، “iOS”، “Linux”، “macOS”، “Windows” و “Unknown” باشد.

چه استفاده ای از user-agent بکنم؟

دانستن User agent می تواند کاربرد های مختلف داشته باشد.

• طراحی سایت موبایل فرندلی: در طراحی سایت موبایل فرندلی، به عنوان نمونه، اگر از تکنیک dynamic serving یا seperate URLs برای موبایل فرندلی بودن سایت استفاده می کنید، ممکن است مانند سایت torob.com، با توجه به یوزر ایجنت دستگاه موبایل یا غیر موبایل، صفحه متفاوتی به کاربر ارائه شود.
• کاربرد امنیت: با شناسایی یوزر ایجنت های ربات های اسپم، می شود policy برای بلاک کردن یا محدود کردن دسترسی آنها به سایت تبیین کرد.
• مطالعه لاگ وب سرور: می شود با بررسی یوزر ایجنت هایی که در لاگ وب سرور وجود دارند، و مطالعه آنها بر اساس کارهایی که روی سایت و سرور انجام می شود، به این نتیجه رسید که تاثیر کارهای انجام شده بر روند کراول شدن سایت توسط ربات ها چه بوده است و برای بودجه کراول برنامه ریزی بهتری کرد.

لطفا اگر تجربه دیگری در استفاده از یوزر ایجنت دارید که برای کاربران مفید است، به اشتراک بگذارید.

پرسش های متداول در مورد user-agent

🔗 منابع: Google Developers, Microsoft Bing Help, Yandex Support, MDN Web Docs1, MDN Web Docs2

The post راهنمای جامع User-Agent appeared first on وب یوز.

نکات ایجاد و آپلود robots.txt

برای ایجاد فایل robots.txt استانداردهای مختلفی وجود دارد. موتور جستجوی گوگل از استاندارد Robots Exclusion Protocol RFC 9309 که در سال ۱۹۹۴ منتشر شد پشتیبانی می کند. در ادامه در مورد نکاتی که لازم است برای ایجاد robots.txt مورد توجه قرار گیرد توضیح داده شده است:

1. فایل robots.txt باید به صورت UTF-8 ذخیره شده باشد.
2. فایل robots.txt فقط می تواند در روت سایت و با آدرسی مانند https://www.example.com/robots.txt در دسترس باشد. در صورتی که robots.txt در آدرسی مانند https://www.example.com/directory/robots.txt وجود داشته باشد، توسط موتورهای جستجو خوانده نخواهد شد.
3. نام فایل robots.txt باید به حروف کوچک نوشته شود.
4. اگر دو rule در مورد یک مسیر یا یک فایل وجود داشته باشد، آن قانونی که دقیق تر است مد نظر گرفته خواهد شد.
5. قوانینی که در robots.txt نوشته می شود به صورت <field>:<value> است.
6. <field> به حروف کوچک و بزرگ حساس نیست. بنابراین Allow و allow و ALLOW و AlloW یکسان هستند.
7. <value> به حروف کوچک و بزرگ حساس است.
8. بعد از کاراکتر دو نقطه : می تواند یک کاراکتر space وجود داشته باشد.
9. سایز فایل robots.txt نباید از 500KB بیشتر باشد. اگر سایز فایل بیشتر از 500KB باشد، گوگل فقط 500KB ابتدای فایل را مد نظر می گیرد.
10. ترتیب نوشتن قوانین اهمیت ندارد. به عبارت دیگر، قانونی که در خط اول نوشته شده است، اولویتی نسبت به قوانین خطوط بعدی ندارد و در صورت داشتن وجه مشترک ، آن قانونی در نظر گرفته می شود که دقیق تر باشد.
11. robots.txt نمی تواند مانع از ورود خزنده موتور جستجو از سایت دیگری که به سایت شما لینک داده بشود.
12. صرف نظر از وجود یا عدم وجود کامنت، خط اول robots.txt با user-agent شروع می شود.
13. گوگل معمولا محتوای robots.txt را به مدت ۲۴ ساعت کش می کند. در صورتی که فایل robots.txt شما آپدیت شده و قصد دارید که گوگل سریع تر آن را بخواند، از ابزار robots.txt Tester در سرچ کنسول استفاده کنید.
14. robots.txt روی پروتکل، دامین یا سابدامین و پورتی که در دسترس است اعمال می شود. به عنوان نمونه، در robots.txt با آدرس https://example.com/robots.txt نمی شود قوانینی برای آدرس هایی که در سابدامین https://m.example.com هستند نوشت.
15. بیشتر موتورهای جستجو فایل robots.txt را با یکی از پروتکل های HTTP یا HTTPS می توانند بخوانند ولی گوگل از پروتکل FTP نیز پشتیبانی می کند. بنابراین برای یک صفحه با پروتکل FTP نیز امکان داشتن فایل robots.txt وجود دارد به شرطی که برای دسترسی به آن به نام کاربری و کلمه عبور FTP نیازی نباشد.
16. کاراکتر $ به معنی ختم شدن آدرس به عبارتیست که در rule نوشته شده است. به عنوان نمونه *.js$ به معنی همه آدرس هایی است که به .js ختم شوند.
17. برای نوشتن کامنت در robots.txt از کاراکتر # استفاده کنید.

User-agent: *
Disallow: /wp-admin/ # This is a comment
Allow: /*.css$
# This is another comment

robots.txt چه محدودیت هایی می تواند داشته باشد؟

جهت استفاده از robots.txt برای اعمال محدودیت در ترافیک crawl سایت، نکات زیر را مد نظر داشته باشید:

• robots.txt ممکن است توسط همه موتورهای جستجو پشتیبانی نشود. همچنین ممکن است برخی قوانین robots.txt نیز توسط همه موتورهای جستجو پشتیبانی نشود.
• robots.txt نمی تواند برای موتورهای جستجو یک قانون اجباری را تعریف کند و تبعیت کردن یا نکردن به قانون نوشته شده در robots.txt بستگی به موتور جستجو دارد.
• در صورتیکه یک صفحه یا دایرکتوری را از طریق robots.txt بر روی خزنده موتور جستجو مسدود کرده باشید، ممکن است خزنده موتور جستجو از روش های دیگر مانند یک لینک خارجی به آن صفحه دسترسی پیدا کرده و آن را ایندکس کند. در صورتیکه قصد دارید مانع از ایندکس شدن یک صفحه شوید، از روشی مانند متا تگ ربات noindex یا X-Robots-Tag در HTTP response header استفاده کنید و یا دسترسی به آن صفحه را توسط نام کاربری و کلمه عبور محدود کنید.

از چه قوانینی در robots.txt می شود استفاده کرد؟

در فایل robots.txt می شود از فیلدهای user-agent، allow، disallow و sitemap استفاده کرد که در ادامه در مورد آنها توضیح داده شده است.

user-agent

هر قانونی که در robots.txt وجود داشته باشد، باید با user-agent شروع شود. مقدار user-agent برابر با نام (استرینگ) ربات های موتور جستجو یا هر رباتی که از robots.txt پشتیبانی می کند است. به عنوان نمونه گوگل برای crawl صفحات و جستجوی متنی از یوزر ایجنت Googlebot و برای crawl عکس صفحات از یوزر ایجنت Googlebot-Image استفاده می کند.

در صورت استفاده از مقدار * به عنوان یوزر ایجنت، قوانینی که در ادامه آن نوشته شده، خطاب به همه ربات هایی است که از robots.txt پشتیبانی می کنند.

User-agent: *
Disallow: /foo/ 
User-agent: Googlebot
User-agent: Adsbot-Google
Disallow: /bar/ 
User-agent: Googlebot-Image
Disallow: /uplaodes/*.jpg$
Allow: /uplaodes/*.png$
User-agent: Twitterbot
User-agent: facebookexternalhit
Allow: /uplaodes/*.png$

برای آشنایی بیشتر با ربات های مختلف گوگل، نوشته انواع گوگل بات را مطالعه نمایید.

disallow

با استفاده از Disallow می توانید صفحه یا مسیر، صفحه یا منبعی را که می خواهید بر روی ربات موتور جستجو مسدود کنید را مشخص نمایید.

User-agent: *
# Disallow: [فایل یا مسیر مورد نظر]
Disallow: /articles/
Disallow: /products/product1.html
Disallow: /*.pdf$

allow

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

User-agent: *
# Allow: [فایل یا مسیر مورد نظر]
Allow: /articles/seo/
Allow: /products/product2.html
Allow: /*.css$

sitemap

با استفاده از sitemap می توانید مسیر نقشه(های) سایت را برای موتور جستجو مشخص نمایید. همه موتورهای جستجو از sitemap در فایل robots.txt پشتیبانی نمی کنند. البته علاوه بر گوگل، موتورهای جستجوی بزرگ مانند Bing نیز از sitemap در فایل robots.txt پشتیبانی می کنند.

User-agent: *
# Sitemap: [آدرس سایت مپ]
Sitemap: https://www.example.com/sitemap1.xml
Sitemap: https://www.example.com/sitemap2.xml

آدرس سایت مپ هایی که در robots.txt قرار دارند باید به صورت absolute باشد. گوگل سایت مپ های با آدرس های relative را نادیده می گیرد. بنابراین آدرس https://www.example.com/sitemap1.xml صحیح است و آدرس /sitemap1.xml اشتباه است.

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

چند نمونه استفاده از robots.txt

جهت نوشتن robots.txt از دستورات متعددی می توان استفاده نمود که در جدول زیر تعدادی از آنها به عنوان نمونه نمایش داده شده است.

تست robots.txt

جهت بررسی بلاک بودن یا نبودن یک آدرس، یک منبع یا مسیر بر روی گوگل بات، ابتدا صفحه ابزار robots.txt Tester سرچ کنسول را باز کرده و سپس آدرس مورد نظرتان را مانند تصویر زیر در فیلد مربوطه نوشته و پس انتخاب user-agent از منوی آبشاری، روی دکمه TEST کلیک کنید. اطلاعات بیشتر در صفحه ابزار robots.txt Tester در سرچ کنسول وجود دارد.

پرسش های متداول در مورد robots.txt

🔗 منبع: Google Developers

🔗 کتابخانه robots.txt parser گوگل در گیت هاب

The post راهنمای جامع robots.txt appeared first on وب یوز.

• Navigational intent: کاربر قصد یافتن صفحه یا سایت مشخص را دارد.
• Informational intent: کاربر قصد کسب اطلاعات در مورد یک موضوع را دارد.
• Commercial intent: کاربر قصد بررسی یک محصول، خدمت یا برند را دارد.
• Transactional intent: کاربر قصد انجام یک کار مانند خرید یک کالا را دارد.
• Mixed intent: امکان وجود بیش از یک هدف برای یک سرچ ترم یا کوئری.

قبل از اینکه در مورد انواع search intent توضیح داده شود، بهتر است که Sales Funnel یا قیف فروش را نیز بشناسید.

قیف فروش چیست؟

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

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

• Awareness: کاربران معمولا با جستجوهای informational وارد مرحله آگاهی می شوند.
• Consideration: کاربران معمولا با جستجوهای commercial وارد مرحله توجه می شوند.
• Conversion: کاربران معمولا با جستجوهای navigational و transactional وارد مرحله تبدیل می شوند.
• Loyalty: در این مرحله باید برای وفادار نگاه داشتن کاربران برنامه ریزی کرد و با روش های گوناگون آنها را مجدد به سایت آورد.

جستجوهای با هدف Navigational

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

به عنوان نمونه، سرچ ترم های زیر که معمولا از کلمه برند در آنها استفاده شده از نوع Navigational intent هستند:

• آدرس فروشگاه ایکس
• مشاوره سئو وب یوز
• سایت وزارت ارتباطات
• یوتیوب

برای داشتن جایگاه مناسب در گوگل در جستجوهای Navigational intent، مطمئن باشید که برند، نام بیزینس و نام خدمات به صورت واضح در سایت مشخص باشد و ساختار سایت به نحوی باشد که کاربران بتواند به راحتی در بین صفحات حرکت کنند.

جستجوهای با هدف Informational

کاربر در جستجوهای Informational intent به دنبال کسب اطلاعات یا آموزش است. جستجوهای Informational intent معمولا به صورت پرسشی و یا با مفهوم پرسش هستند. سرچ ترم ها در این نوع جستجو در بسیاری مواقع حاوی کلماتی مانند چرا، چگونه، چطور، چیست، آیا، چند، کیست و کجا و در زبان انگلیسی حاوی کلماتی مانند why، what، where، who و how است.

به عنوان نمونه، سرچ ترم های زیر از نوع Informational intent هستند:

• Search intent چیست؟
• ساعت تورنتو
• چگونه سرعت لود LCP را بالا ببرم؟
• ارتفاع برج میلاد
• فیلم های مایکل جردن
• کالری موز
• آیا کالری دوغ از نوشابه بیشتر است؟
• سریع ترین روش مهاجرت به کانادا

با توجه به تصاویر زیر، گوگل در بسیاری موارد، پاسخ مورد نیاز کاربری که جستجوی Informational intent انجام داده است را در Featured Snippet می دهد.

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

برای داشتن جایگاه مناسب در گوگل در جستجوهای Informational intent، محتوای با کیفیت بالا تولید کنید و مطمئن باشید که اصول E-E-A-T گوگل که بیانگر تخصص، تجربه، اعتبار و قابل اعتماد بودن است را در نظر داشته باشید.

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

بیشتر صفحاتی که در گوگل دیسکاور نمایش داده می شوند از نوع Informational intent هستند. بنابراین داشتن استراتژی تولید محتوای informational برای حضور در گوگل دیسکاور توصیه می شود.

روش فیلتر کردن سرچ ترم های Informational در سرچ کنسول

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

نمونه رجکس سرچ ترم های Informational فارسی در سرچ کنسول

توسط regex زیر می توانید کوئری های Informational فارسی را در گزارش پرفورمنس سرچ کنسول فیلتر کنید. اگر کوئری های دیگری در این حوزه می شناسید، لطفا در کامنت قید کنید تا به این لیست اضافه شود.

 چرا|چطور|چگونه|چیست|آیا|کجا|کیست|چند|کدام|مثال|نمونه|آموزش|راهنما|روش|منابع|دیباگ|عیب یابی

نمونه رجکس سرچ ترم های Informational انگلیسی در سرچ کنسول

توسط regex زیر می توانید کوئری های Informational انگلیسی را در گزارش پرفورمنس سرچ کنسول فیلتر کنید.

how|why|who|when|which|guide|tutorial|train|learn|example|resource|idea|tips|troubleshoot|does

جستجوهای با هدف Commercial

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

به عنوان نمونه، سرچ ترم های زیر از نوع Commercial intent هستند:

• مقایسه آیفون ۱۴ و ۱۴ پلاس
• بهترین گل آپارتمانی بدون نیاز به نور
• بررسی گوشی پیکسل ۸ گوگل
• خرید رپورتاژ یا تبلیغ در گوگل
• نرم افزارهای جایگزین فوتوشاپ در مک
• مک بوک
• آخرین مدل اپل واچ

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

نمونه رجکس سرچ ترم های Commercial فارسی در سرچ کنسول

توسط regex زیر می توانید کوئری های Commercial فارسی را در گزارش پرفورمنس سرچ کنسول فیلتر کنید. کیوردهای زیر به عنوان نمونه هستند و شما می توانید کیوردهای مد نظرتان را به لیست اضافه کرده یا آن را ویرایش کنید.

 مقایسه|بهترین|بررسی|جایگزین|جدیدترین|آخرین

نمونه رجکس سرچ ترم های Commercial انگلیسی در سرچ کنسول

توسط regex زیر می توانید کوئری های Commercial انگلیسی را در گزارش پرفورمنس سرچ کنسول فیلتر کنید.

compare|comparison|vs|best|top|alternative|review|latest

جستجوهای با هدف Transactional

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

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

به عنوان نمونه، سرچ ترم های زیر از نوع Transactional intent هستند:

• قیمت آیفون ۱۴ پلاس
• خرید گل قاشقی
• دانلود نرم افزار ایکس
• عضویت در سایت ایکس
• هزینه آموزش سئو پیشرفته وب یوز
• ثبت نام دوره سئو در مجتمع فنی تهران
• نزدیک ترین کارواش اتوماتیک
• خرید مک بوک Air M2 2023

سرچ ترم هایی که در دسته بندی جستجوهای با هدف Transactional قرار می گیرند، معمولا حاوی کلماتی مانند خرید، قیمت، دانلود، سفارش آنلاین، ثبت نام و عضویت هستند.

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

نمونه رجکس سرچ ترم های Transactional فارسی برای سرچ کنسول

توسط regex زیر می توانید کوئری های Transactional فارسی را در گزارش پرفورمنس سرچ کنسول فیلتر کنید. کیوردهای زیر به عنوان نمونه هستند و شما می توانید کیوردهای مد نظرتان را به لیست اضافه کرده یا آن را ویرایش کنید.

 خرید|قیمت|سفارش|دانلود|عضویت|ثبت نام|ارزان|تخفیف

نمونه رجکس سرچ ترم های Transactional انگلیسی برای سرچ کنسول

توسط regex زیر می توانید کوئری های Transactional انگلیسی را در گزارش پرفورمنس سرچ کنسول فیلتر کنید.

buy|price|order|cheap|sale|near me|register|subscribe|download|rent|recommended

جستجوهای با اهداف Mixed

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

سرچ ترم های زیر از نوع Mixed intent هستند:

• دوره سئو مجتمع فنی (ممکن است کاربر قصد ثبت نام یا کسب اطلاعات در مورد سیلابس های دوره سئو مجتمع فنی تهران را داشته باشد)
• گل اگزالیس (ممکن است کاربر قصد خرید گل اگزالیس یا کسب اطلاعات در مورد آن را داشته باشد)

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

تولید محتوا با توجه به Search Intent

همان طور که گوگل در search quality rater guidelines به اهمیت user intent اشاره می کند، درک هدف کاربر از جستجو از اهمیت بالایی برخوردار است. بنابراین با توجه به هدف جستجوهای انجام شده توسط کاربران که به چهار دسته کلی navigational و informational و commercial و transactional تقسیم می شوند، لازم است که سایت ها نیز در استراتژی تولید محتوای خود، تحقیقات کلمات کلیدی را در این چهار حوزه انجام دهند و برای کسب جایگاه مناسب در گوگل برنامه ریزی داشته باشند.

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

همان طور که گفته شد، محتوای بسیاری از صفحاتی که در Google Discover نمایش داده می شوند از نوع informational هستند، بنابراین در صورتیکه حضور در گوگل دیسکاور یکی از اهداف سایت شما است، لازم است که ضمن در نظر گرفتن اصول E-E-A-T، برای تولید محتوای informational برنامه ریزی داشته باشید.

با چه ابزارهایی در مورد keyword intent تحقیق کنیم؟

ابزارهای گوناگونی در حوزه تحقیق کلمات کلیدی وجود دارد که برخی از آنها مانند Ahrefs و Semrush نوع intent عبارات را نیز مشخص می کنند. البته به این نکته توجه داشته باشید که ابزارهای مذکور با کیفیتی که در زبان انگلیسی کیوردها را دسته بندی می کنند، در زبان فارسی کارایی ندارند.

همان طور که گفته شد، در صورتیکه قصد داشته باشید که از دیتای موجود در سرچ کنسول سایتتان جهت بررسی search intentها استفاده کنید، می توانید با استفاده از regex نسبت به تعریف فیلتر برخی از کلمات مورد نظرتان در گزارش پرفورمنس سرچ کنسول استفاده کنید.

The post Search intent چیست؟ appeared first on وب یوز.

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

prefers-reduced-data یک تکنولوژی experimental یا آزمایشی است که هنوز به صورت گسترده مورد استفاده قرار نگرفته است و می تواند به کاربرانی که با کندی لود صفحات مواجه هستند کمک می کند که تجربه کاربری بهتری از نظر سرعت لود داشته باشند. برای اینکه prefers-reduced-data را بهتر درک کند، لازم است که save-data request header را بشناسید.

save-data request header چیست؟

save-data یک HTTP request header است که بیانگر این است که تنظیمات مرورگر کاربر در حالت استفاده از دیتای کمتر برای لود صفحات یا همان  است. مرورگر می تواند save-data: on را در HTTP request header به سرور ارسال کند و دلیل آن می تواند کانکشن با سرعت کم، کندی ناشی از رم و پردازنده ضعیف و یا هر دلیل دیگری که منجر به کندی سرعت لود صفحه شود، باشد.

در نمونه زیر می توانید save-data: on را در request header مشاهده کنید:

Host: webyooz.com
accept-encoding: gzip, deflate, br
save-data: on

کدام مرورگرها از Save-data پشیبانی می کنند؟

طبق مستندات موزیلا، بیشتر مرورگرهای معروف از save-data request header پشتیبانی می کنند. مرورگر گوگل کروم از ورژن 49 از save data پشتیبانی می کند و در حال حاضر تنها مرورگر معروفی که از save-data پشتیبانی نمی کند، مرورگر Safari شرکت اپل است.

مدیا کوئری چیست؟

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

نمونه های زیر، دو نمونه کاربرد مدیا کوئری در CSS است که نمونه اول دارای شرط ماکزیمم عرض 768 پیکسل و نمونه دوم دارای شرط افقی بودن دستگاه است.

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

@media only screen and (max-width: 768px) {
 body {
  background-color: green;
 }
}

@media only screen and (orientation: landscape) {
 body {
  background-color: green;
 }
}

@media print {
 body {
  background-color: white;
 }
}

مدیا کوئری prefers-reduced-data

آقای اندی عثمانی در همایش گوگل دولوپر سال 2019، مدیا کوئری prefers-reduced-data را معرفی کرد. ایشان توضیح داد که مدیا کوئری prefers-reduced-data به شما این امکان را می دهد که بتوانید یک ورژن با حجم کمتر یا data-reduced از سایت خود را برای کاربرانی که مشکل سرعت لود دارند را طراحی کنید.

prefers-reduced-data می تواند “reduce” یا “no-preference” باشد. reduce به معنی آن است که کاربر، data saver را روشن کرده است و یا به عبارت دیگر، درخواست های کاربر با save-data: on به سرور فرستاده می شود. No-preference بیانگر این است که درخواست های کاربر به وب سرور بدون save-data: on است.

کدام مرورگر ها از prefers-reduced-data پشتیبانی می کنند؟

prefers-reduced-data یک تکنولوژی experimental یا آزمایشی است. مرورگرها گوگل کروم 86+ و گوگل کروم اندروید 85+ و مایکروسافت Edge کرومیوم 85+ از این تکنولوژی پشتیبانی می کنند. بنابراین از prefers-reduced-data به صورت هوشمندانه استفاده کنید.

از prefers-reduced-data می توان مانند مدیاکوئری های دیگر استفاده کرد. به عنوان نمونه شما می توانید از prefers-reduced-data در CSS یا در HTML استفاده کنید.

چگونه از مدیا کوئری prefers-reduced-data در HTML استفاده کنیم؟

همان طور که گفتیم، prefers-reduced-data می تواند در HTML نیز به کار برده شود. به عنوان نمونه امکان استفاده از آن در تگ <picture> و <link> و هر جای دیگری که امکان استفاده از مدیا کوئری وجود داشته باشد هست.

در نمونه زیر، فایل font.woff2 تنها زمانی preload می شود که data-saver روشن نباشد یا به عبارت دیگر save-data: on در HTTP request header نباشد.

<head>
<link rel="preload" href="font.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>
</head>

در نمونه زیر، کاربران با سرعت لود صفحه پایین یا سرعت اینترنت کم یا در حالت روشن بودن data saver مرورگر، عکس data-sever-on.png را خواهند دید و دیگر کاربران نیز عکس data-sever-off.png را مشاهده خواهند کرد.

<source media="(prefers-reduced-data: reduce)" srcset="/data-sever-on.png" type="image/png" >
<source media="(prefers-reduced-data: no-preference)" srcset="/data-sever-off.png" type="image/png">
<img src="/data-sever-off.png" alt="prefers data savar test image" width="618" height="314">
</picture>

چگونه از مدیا کوئری prefers-reduced-data در CSS استفاده کنیم؟

در نمونه زیر، از آنجایی که مدیا کوئری prefers-reduced-data: no-preference به معنی این است که save-data: on در request header وجود نداشته باشد، می توانیم از نوشتن این مدیا کوئری صرف نظر کنیم و فقط از مدیا کوئری prefers-reduced-data: reduce برای لود عکس small-image.jpg برای درخواست هایی که با save-data: on ارسال می شود استفاده کنیم.

@media (prefers-reduced-data: reduce) {
 /* Save-Data: On */
 .body {
  background-image: url("small-image.jpg");
 }
}

@media (prefers-reduced-data: no-preference) {
 /* Save-Data: Off */
 .body {
  background-image: url("large-image.jpg");
 }
}

چگونه prefers-reduced-data را در گوگل کروم شبیه سازی کنیم؟

جهت فعال کردن شبیه سازی prefers-reduced-data در گوگل کروم نسخه 86 به بعد، طبق راهنمای زیر عمل نمایید:

1- قابلیت experimental web platform features گوگل کروم 86+ را فعال کنید.

به آدرس chrome://flags/#enable-experimental-web-platform-features بروید و Experimental Web Platform features را در حالت Enabled قرار داده و بروزر خود را ببندید و مجدد باز کنید.

2- command menu را در DevTools گوگل کروم باز کنید.

ابتدا با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس یا کروم OS، یا با فشار دادن دکمه های Command+Option+C محیط DevTools گوگل کروم را باز کنید. سپس با فشردن دکمه های Control+Shift+P منوی command را باز کنید و کلمه render را تایپ کنید و روی گزینه Show Rendering کلیک نمایید.

3- روی تب Rendering کلیک کنید.

4- گزینه prefers-reduced-data: reduce را در Emulate CSS media feature انتخاب کنید

در قسمت Emulate CSS media feature prefers-reduced-data، گزینه No emulation را به “prefers-reduced-data: reduce

Change “No emulation” to “prefers-reduced-data: reduce” from the “Emulate CSS media feature prefers-reduced-data” drop down.

نکته: با توجه به اینکه تعداد 5 عدد Emulate CSS media محتلف در تب Rendering وجود دارد، دقت کنید که تغییر لازم را در گزینه Emulate CSS media feature prefers-reduced-data انجام دهید.

نمونه عملی برای prefers-reduced-data

اگر طبق راهنمای بالا، شبیه ساز prefers-reduced-data را در حالت reduce یا در حالت No emulation بگذارید، با هر بار سوییچ کردن گزینه های مذکور، بدون ریلود شدن صفحه، عکس زیر تغییر خواهد کرد. فقط دقت داشته باشید که این امکان در گوگل کروم نسخه 86 به بعد وجود دارد.nt images.

جمع بندی

prefers-reduced-data یک تکنولوژی آزمایشی است که امکان داشتن تجربه کاربری یا UX بهتر را برای کاربرانی که به هر دلیل با مشکل کندی لود صفحه مواجه هستند می دهد. صفحاتی که با prefers-reduced-data لود می شوند، در حقیقت با استفاده از دیتای کمتر نسبت به حالتی که مشکل کندی سرعت وجود ندارد، صفحه را در اختیار کاربر قرار می دهند. از آنجایی که prefers-reduced-data یک مدیا کوئری است، شما می توانید از آن در هر المانی که از مدیا کوئری پشتیبانی می کند استفاده کنید. به عنوان نمونه می توانیم به تگ های picture و video و link اشاره کرد.

پرسش های متداول در مورد prefers-reduced-data

The post بهینه سازی بیشتر با استفاده از prefers-reduced-data appeared first on وب یوز.

LCP چیست؟

پارامتر LCP بیانگر مدت زمانی است که مهمترین المان صفحه در viewport دستگاه کاربر، رندر شود. مهمترین المنت می تواند یک عکس، یک ویدیو و یا یک متن باشد که در حقیقت مهمترین قسمت صفحه از دید کاربر است و در نتیجه هر چقدر سریعتر لود و رندر شود، تاثیر مثبتی در تجربه کاربری یا UX دارد.

LCP بهینه چند ثانیه است؟

با توجه به استانداردی که گوگل در حال حاضر مشخص کرده است و بر اساس آن نیز گزارش Core Web Vitals در گوگل سرچ کنسول را ارائه می کند، در صورتیکه محتوای اصلی صفحه در کمتر از 2.5 ثانیه لود و رندر شود، امتیاز LCP را به صورت کامل دریافت می کنید و اگر این مدت زمان بین 2.5 تا 4 ثانیه باشد، نیاز است که نسبت به بهبود LCP اقدام شود و در صورت بیشتر از 4 ثانیه بودن زمان LCP، وضعیت صفحه از نظر LCP ضعیف است و بهتر است که برای بهبود آن برنامه ریزی جدی داشته باشید.

از کجا بدانیم که کدام المان صفحه در LCP تاثیرگذار است؟

یکی از راه های اینکه متوجه شوید که از نظر Core Web Vitals گوگل، کدام المان صفحه به عنوان مهمترین المان صفحه در نظر گرفته می شود، استفاه از Lighthouse نسخه 6 به بعد است. به عنوان مثال می توانید از سایت WebPageTest برای آنالیز صفحه با Lighthouse استفاده کنید. در نتیجه گزارش Performance لایت هاوس، با توجه به عکس زیر، یک قسمت به نام Largest Contentful Paint element وجود دارد که با کلیک بر روی آن می توانید متوجه شوید که Lighthouse از کدام المان صفحه در محاسبه LCP استفاده کرده است.

ضمنا در DevTools گوگل کروم نیز با توجه به ویدیو زیر در قسمت Performance می توانید با کلیک بر روی LCP، المانی که در viewport به عنوان LCP مد نظر بوده را مشاهده کنید.

مهمترین عوامل تاثیر گذار در LCP

عوامل زیادی در LCP تاثیر گذار هستند که در ادامه در مورد مهترین آنها توضیح داده شده است:

1. کند بودن زمان پاسخ گویی سرور

زمان پاسخ گویی سرور یا همان Slow server response times یکی از عوامل تاثیرگذار در LCP است. هر چقدر مرورگر بتواند محتوا را سریعتر از سرور دریافت کند، صفحه سریعتر رندر خواهد شد و هر چقدر صفحه سریعتر رندر شود، پارامترهایی که برای اندازه گیری سرعت لود صفحه هستند، بهبود می یابند و یکی از آن پارامترها، Largest Contentful Paint است.

یکی از مواردی که برای بهبود سرعت پاسخ گویی سرور باید در نظر داشت، پارامتر TTFB یا Time To First Byte است که برای بهبود آن نیاز است که موارد زیر را مد نظر داشته باشید:

• اپتیمایز کردن سرور از نظر سخت افزاری
• بهینه کردن دیتابیس و کوئری ها
• بهینه کردن کدهای سمت سرور با هدف ارتقا سرعت لود صفحات
• کش کردن صفحات و asset ها به صورت HTML بر روی سرور
• ایجاد کانکشن زودهنگام با third-party ها (به عنوان نمونه با قرار دادن <link> های زیر در <head>)

<link rel="preconnect"  href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">

با توجه به تصویر زیر، می توانید متوجه شوید که در صورت استفاده از preconnect، به میزان زمانی که لازم است که به سرور خارجی connect شوید، در سرعت لود صفحه صرفه جویی خواهد شد.

2. وجود جاوااسکریپت و CSS های که رندر را بلاک می کنند

در صورتیکه فایل های JavaScript یا CSS وجود داشته باشند که Render blocker تلقی شوند، باعث به تعویق افتادن رندر صفحه خواهند شد و در نتیجه امتیاز LCP را کاهش می دهند. برای بهبود این موضوع از تکنیک های زیر استفاده کنید:

• فایل های CSS را minify کنید
• فایل های js را minify کنید
• CSS هایی که برای رندر above-the-fold صفحه استفاده می شوند (Critical CSS) را inline کنید.
• لود شدن CSS های non-critical را به تعویق بیندازید (defer کنید)
• لود شدن JavaScript های non-critical را به تعویق بیندازید (defer کنید)
• CSS هایی که در صفحات استفاده نمی شوند را حذف کنید.

3. کند بودن سرعت لود منابع

سرعت لود المان های <img> و <video> به همراه عکس پوستر ویدیو، <image> در <svg>، المان های با بکگراند که از url() استفاده کرده باشند و همچنین المان های Block-level در LCP تاثیرگذار هستند. بنابراین توصیه می کنم که از موارد زیر برای بهینه کردن سرعت بارگذاری موارد ذکر شده استفاده کنید:

• اپتیمایز کردن عکس ها
• استفاده از فرمت های مدرن عکس مانند JPEG 2000 یا JPEG XR یا WebP
• استفاده از عکس های رسپانسیو
• در صورت امکان، استفاه نکردن از یک عکس به عنوان اولین المان مهم صفحه
• کمپرس کردن متن ها با استفاده از تکنیک هایی مانند Gzip یا Brotli
• preload منابع مهم صفحه مانند نمونه های زیر:

<link rel="preload" as="script" href="important-script.js">
<link rel="preload" as="style" href="important-style.css">
<link rel="preload" as="image" href="important-image.png">
<link rel="preload" as="video" href="video.webm" type="video/webm">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

🔗 منبع Web.dev

The post چگونه LCP را اپتیمایز کنیم؟ appeared first on وب یوز.

نکته: LCP و FID و CLS به صورت جداگانه برای موبایل و دسکتاپ محاسبه می شوند.

LCP چیست؟

همیشه سرعت لود صفحه برای سئوکارها و دولوپرها از اهمیت بالایی برخوردار است.‎ یکی از پارامترهای مهمی که برای بررسی سرعت بارگذاری صفحه از آن استفاده می شود، LCP است که در Core Web Vitals بیشتر به آن پرداخته شده است. LCP مخفف Largest Contentful Paint است و به معنای مدت زمانی است که صرف می شود تا بزرگترین المان محتوا در صفحه، لود و رندر و در viewport به کاربر نمایش داده شود.

پارامترهای قدیمی تر مانند Load یا DOMContentLoaded الزاما به معنی اینکه یوزر در چه زمانی می تواند محتوای اصلی را به صورت رندر شده ببیند نبود و حتی FCP یا همان First Contentful Paint که قبلا توسط گوگل معرفی شده بود نیز به دلیل اینکه بیانگر اولین محتوایی بود که در صفحه لود می شد، مانند LCP نمی تواند اطلاعات ارزشمندی در مورد UX کاربر به ما بدهد.

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

طبق استانداردی که گوگل در Core Web Vitals تعریف کرده است، برای اینکه کاربر از تجربه کاربری خوبی در سایت بهره ببرد، باید Largest Contentful Paint یا همان بزرگترین المان محتوا در کمتر از 2.5 ثانیه از زمان شروع لود صفحه، در صفحه نمایش کاربر رندر شده باشد.

بنابراین در صورتیکه LCP کمتر از 2.5 ثانیه باشد، صفحه مد نظر شما از نظر LCP دارای وضعیت مطلوبی است و اگر بین 2.5 تا 4 ثانیه باشد، نیاز به اصلاحات وجود دارد و اگر LCP بیش از 4 ثانیه بود، صفحه در وضعیت نامطلوبی قرار گرفته و بهتر است که هر چه سریعتر، بررسی های لازم در خصوص Largest Contentful Paint انجام شود.

کدام المان ها در LCP مد نظر گرفته می شود؟

در حال حاضر المان های زیر توسط LCP در نظر گرفته می شوند:

• المان <img>
• المان <image> درون یک المان <svg>
• المان <video> (عکس پوستر ویدیو نیز در نظر گرفته می شود)
• المانی که بکگراند عکس آن از طریق فانکشن url() بارگذاری شده باشد. مانند
  url(https://www.webyooz.com/wp-content/uploads/2020/05/largest-contentful-paint.jpg)
• المان های Block Level در HTML که دارای متن هستند.

FID چیست؟

FID مخفف First Input Delay است و پارامتری است که برای اندازه گیری Load responsiveness است. از Load responsiveness برای اندازه گیری سرعت لود صفحه و اجرای جاوااسکریپت های لازم برای پاسخ گویی به تعامل کاربر استفاده می شود. هر چه کاربر بتواند سریعتر با صفحه تعامل داشته باشد، تجربه کاربری بهتری خواهد داشت.

به عبارت دیگر FID فاصله زمانی بین تعامل کاربر با صفحه (مانند کلیک روی یک لینک یا دکمه و یا tap کردن روی یک المان تعاملی) و زمانی است که مرورگر به تعامل کاربر پاسخ می دهد.

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

همان طور که در تصویر بالا نیز مشاهده می کنید، در صورتی که FID صفحه کمتر از 100 میلی ثانیه باشد، صفحه از نظر First Input Delay در وضعیت مطلوبی است و اگر بین 100 تا 300 میلی ثانیه باشد، نیاز به انجام اصلاحات وجود دارد و در نهایت اگر FID بیشتر از 300 میلی ثانیه باشد، صفحه در وضعیت نامطلوبی قرار دارد و بهتر است که هر چه زودتر بررسی و اصلاح گردد.

CLS چیست؟

CLS مخفف عبارت Cumulative Layout Shift است و برای اندازه گیری Visual Stability استفاده می شود. برای درک بهتر، یک مثال می زنم. حتما برای شما پیش آمده که در حال خواندن یک صفحه هستید و قصد دارید روی یک لینک یا دکمه کلیک یا tap کنید و درست همان لحظه، متن یا یک لینک حرکت می کند و جابجا می شود و شما به اشتباه روی یک لینک دیگر کلیک می کنید. این جابجایی layout برای کاربر آزاردهنده است.

پارامتر CLS در حقیقت صفحه را از نظر جابجایی layout محتوای visible در viewport بررسی می کند که 500 میلی ثانیه پس از بارگذاری صفحه اتفاق بیفتد و امتیاز آن با توجه به میزان جابجایی layout و حجم محتوای جابجا شده محاسبه می شود. در حقیقت هر چقدر میزان جابجایی بیشتر باشد و هر چقدر اندازه محتوایی که جابجا می شود بزرگتر باشد، امتیاز CLS بزرگتر خواهد شد که معنی مثبتی ندارد.

ویدیو بالا یک نمونه از حرکت ناگهانی layout است که برای کاربر ناخوشایند است.

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

با توجه به تصویر بالا، در صورتی که امتیاز CLS کمتر از 0.1 باشد، وضعیت صفحه از نظر Cumulative Layout Shift مطلوب است و اگر بین 0.1 تا 0.25 بود، نیاز به اصلاح دارد و در صورتی که CLS بیشتر از 0.25 بود، وضعیت نامطلوب است و بهتر است که تلاش کنید که این امتیاز را کاهش دهید.

ابزارهای اندازه گیری LCP و FID و CLS در Web Vitals

هر سه پارامتر LCP و FID و CLS در Web vitals که در مورد آنها صحبت شد، توسط ابزار Lighthouse که به عنوان مثال در PageSpeed Insights وجود دارد قابل اندازه گیری هستند. اطلاعات LCP و FID و CLS توسط CrUX که مخفف Chrome UX Report است جمع آوری می شود. همچنین می توانید این پارامتر ها را در گزارش Core Web Vitals سرچ کنسول مشاهده کنید.

همچنین می توانید از اکستنشن گوگل کروم Web Vitals نیز برای اندازه گیری سه پارامتر مذکور استفاده کنید.

جمع بندی در مورد Core Web Vitals

سه پارامتری که در Core Web Vitals اندازه گیری می شوند در راستای بهبود تجربه کاربری هستند و دولوپرها و سئوکاران نیاز است که در جهت سئوی حرفه ای نگاه ویژه ای به آنها داشته باشند و تلاش کنند که دست کم 75 درصد از بازدیدهایی که دارند از نظر LCP و FID و CLS در وضعیت مطلوب باشند.

پرسش های متداول در مورد LCP و FID و CLS در Web Vitals

🔗 منبع: Web Vitals essential metrics for a healthy site 

The post LCP و FID و CLS در Web Vitals appeared first on وب یوز.