اتوماسیون اداری, طراحی سایت

Google Lighthouse چیست؟ راهنمای کامل از صفر تا ۱۰۰

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

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

این مقاله یک راهنمای کامل برای تست وب‌سایت به کمک Google Lighthouse است؛ پس اگر مدیر سایتی هستید، همین حالا بازش کنید تا قدم به قدم آن را بررسی کنیم. البته این ابزار هر وب‌سایتی را می‌تواند مورد بررسی قرار دهد، پس برای یادگیری هم می‌توانید یک وب‌سایت به دلخواه باز کنید و آن را امتحان کنید.

توصیه‌های Lighthouse آنقدر ریزبینانه است که شاید از اهمیت داشتن آنها تعجب کنید. این توصیه‌ها برای ارتقا و بهینه‌سازی سایت از نظر تجربه یا رابط کاربری (UX/UI)، سئو، عملکرد، امنیت، کارایی و کاهش هزینه‌های نگهداری سایت بسیار مفید هستند. البته گرفتن امتیاز ۱۰۰ از لایت هاوس کار آسانی نیست ولی غیرممکن هم نیست.

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

اول مختصر و مفید ببینیم فانوس دریایی گوگل یا Google Lighthouse چیست بعد هر بخش از آزمون و گزارش آن را باز کرده و توضیح می‌دهیم.

Google Lighthouse چیست؟

تصور کنید به رستوران رفته‌اید و غذا سفارش داده‌اید؛ اما آوردن غذا روی میز را بیشتر از زمانی که انتظار داشتید طول می‌دهند. وقتی هم که غذا را آوردند سالاد کنارش نیست و نمکدان روی میز نمک ندارد. درخواست می‌کنید نمکدان پر بیاورند و ۱۰ دقیقه طول می‌کشد.

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

این رستوران انتخاب چندم شما در روزهای بعد خواهد بود؟ حاضرید رئیس یا بهترین دوست خود را به این رستوران دعوت کنید؟

مثال تجربه کاربری بد در رستوران

رستوران خیلی خوب رستورانی است که به جز غذای خوشمزه به همه جزئیات در خدمات و مشتری‌مداری توجه کرده باشد.

فانوس دریایی گوگل Google Lighthouse هم با همین هدف ایجاد شد؛ سایت‌هایی بیشتر مورد توجه قرار می‌گیرند که کیفیت آن‌ها خیلی خوب شود (نه خوب و معمولی!). این کیفیت می‌تواند سرعت، عملکرد، امنیت، سئو، دسترسی‌پذیری و خیلی نکات پشت پرده و جزئی دیگر باشد.

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

Google Lighthouse در کل روی 5 موضوع تمرکز دارد:

  • اجرا (Performance)
  • تجربه برتر (Best Practices)
  • دسترسی‌پذیری (Accessibility)
  • سئو (SEO)
  • وب اپلیکیشن پیش‌رونده (PWA)

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

حالا می‌خواهیم این تست را اجرا کنیم.

چگونه از Google Lighthouse استفاده کنیم؟

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

  1.  DevTools مرورگر کروم (همان کلیک راست و انتخاب Inspect یا زدن دکمه F12)
  2. نصب افزونه Lighthouse روی مرورگر کروم
  3. ابزارهای واسطه
  4. استفاده از طریق خط فرمان یا اتصال به ماژول‌های برنامه‌نویسی شده

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

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

Digikala چگونه توانست دیجی‌کالا بشود؟حتما بخوانید: Digikala چگونه توانست دیجی‌کالا بشود؟

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

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

روش اول: اجرای Google Lighthouse از Devtools مرورگر کروم

صفحه مورد نظر خود را در مرورگر کروم باز کنید. سپس کلید F12 را بزنید (یا Fn+ F12 در اکثر لپ‌تاپ‌ها) یا کلید‌های ترکیبی در ویندوز (Control+Shift+I) و مک (Command+Option+I) تا developer tools باز شود.

در بالای داک باز شده به تب Audits بروید.

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

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

افزونه lighthouse

نکته: Google Lighthouse یک برنامه متن باز است. تغییرات و به‌روزرسانی‌های اعمال شده در آن به مرور و شاید غیرهمزمان در ابزار Devtools مرورگر کروم (روش اول) و افزونه آن (روش دوم) اعمال شود. پس به همین دلیل امکان دارد گزارش این دو روش کمی متفاوت باشد. در زمان نوشتن این مقاله، نسخه لایت هاوس 5.2.0 است.

نکات مهم درباره اجرای آزمون Lighthouse و گزینه‌های قابل انتخاب

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

1) اگر روی مرورگر کروم افزونه‌های دیگری مثل حذف کننده‌های تبلیغات، آنالیز کننده‌های صفحه و … نصب کرده‌اید، بهتر است قبل از انجام تست Lighthouse همه افزونه‌ها را موقتی غیرفعال کنید.

2) بهتر است در هنگام انجام تست سایر نرم‌افزارهایی که از پهنای باند اینترنت استفاده می‌کنند یا منابع سخت‌افزاری (رم  و سی‌پی‌یو) زیادی استفاده می‌کنند ببندید.

3) آزمون لايت هاوس گوگل در حالت عادی بسیار سختگیرانه طراحی شده، اما با این حال گزینه‌‌ای به نام شرایط سخت شبیه‌سازی شده (Simulated throttling) در آن گنجانده شده تا این آزمون سخت‌تر شود. یعنی سرعت اینترنت و پردازشگر (CPU) تا حدی کاهش داده می‌شود. هدف از این کار شبیه‌سازی یک دستگاه با سخت‌افزار و سرعت اینترنت ضعیف است. این گزینه قبل از تست قابل انتخاب است.

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

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

در روش اول (Devtools) حالت موبایل از دسکتاپ جدا شده است. با توجه به اینکه نسخۀ موبایل و دسکتاپ بسیاری از سایت‌ها متفاوت هستند، می‌توانید تست را برای حالت دلخواه اجرا کنید.

اجرای Lighthouse

  • برای انجام تست صفحه مورد نظر را باز کنید. روی افزونه لایت هاوس کلیک کنید یا Devtools را باز کنید.

  • در قسمت option افزونه یا منوی تنظیمات Devtools می‌توانید تست‌های مورد نیاز را انتخاب کنید.
  • گزینه‌های قابل انتخاب همان بخش‌های آزمون هستند. شامل Performance، Accessibility، Best Practices، SEO و PWA که هر کدام را به دلخواه می‌توانید غیرفعال کنید. در Devtools بین موبایل یا دسکتاپ یکی را انتخاب کنید.
  • Generate Report در افزونه یا Run Audit را در Devtools بزنید و برای دریافت گزارش کمی صبر کنید. گزارش در یک پنجره جدید باز می‌شود.

  • می‌توانید گزارش را در قالب‌های PDF، HTML و … با انتخاب از منوی بالا سمت راست (سه نقطه) ذخیره کنید.

گزارش lighthouse

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

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

آزمون سرعت بارگذاری و عملکرد صفحه (Performance)

این آزمون در کل بررسی می‌کند که صفحه مورد نظر تا چه اندازه برای مشاهده و تعامل بهینه‌سازی شده است. سرعت بارگذاری و روند بارگذاری دو فاکتور مهم در عملکرد هستند.

کلمات کلیدی و اهمیت آن در سئو سایتحتما بخوانید: کلمات کلیدی و اهمیت آن در سئو سایت

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

حالا این شاخص‌ها را معرفی می‌کنیم.

شاخص‌ها (Metrics)

امتیاز نهایی بخش Performance از شاخص‌هایی به دست می‌آید که در ادامه معرفی می‌شوند. سهم تاثیرگذاری هر کدام از شاخص‌ها هم متفاوت است. اگر کمی مبهم بود صبر کنید چون در ادامه واضح‌تر می‌شود.

اولین ترسیم محتوا First Contentful Paint یا FCP

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

واحد این شاخص برچسب ثانیه است. این زمان که ثانیه است به واحد ۰ تا ۱۰۰ تبدیل می‌شود تا در شاخص نهایی قابل اعمال باشد.

لایت هاوس چطور FCP را محاسبه می‌کند؟

برای تبدیل واحد ثانیه به امتیاز ۰ تا ۱۰۰، لایت هاوس زمانی که در آزمون به دست آمد را با میانگین سرعت بارگذاری سایت‌های دیگر مقایسه می‌کند.

برای مثال: اگر ۹۹ درصد سایت‌ها FCP  در حد ۱/۵ ثانیه داشته باشند و سایت شما هم در آزمون اولین ترسیم معنادار، در ۱/۵ ثانیه بارگذاری شود، پس امتیاز آن  ۹۹ از ۱۰۰ می‌شود. میانگین سرعت بارگذاری FCP سایت‌ها در سایت HTTParchive قابل مشاهده است. در بقیه شاخص‌های زمانی هم نحوۀ محاسبه و تبدیل به امتیاز عددی به همین شکل است.

جدول زیر امتیاز حدودی به دست آمده از سرعت بارگذاری را نمایش می‌دهد. با توجه به این جدول، اگر FCP صفحه‌ای بین ۰ تا ۲ ثانیه باشد امتیاز ۷۵ تا ۱۰۰ می‌گیرد که در مقایسه با سایر سایت‌ها امتیاز خوبی است.

ضریب تاثیر FCP در امتیاز کل عملکرد ۳ از ۵ است. ضریب بالاتر به معنی تاثیر بیشتر در امتیاز کل است.

نکته: ضریب تاثیر مثل همان ضریب تاثیر نمرات دروس دانشگاه و مدرسه در معدل نهایی است.

اولین ترسیم معنادار  First Meaningful Paint

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

جدول زیر حالت ایده‌آل را زیر ۲ ثانیه نشان می‌دهد. ضریب تاثیر FMP عدد ۱ از ۵ است که کمترین در میان بقیه شاخص‌های عملکرد است.

اولین استراحت پردازنده First CPU Idle

این شاخص زمان تعامل حداقلی را حساب می‌کند. FCI تعامل حداقلی را در نظر دارد برای مثال لحظه‌ای که کاربر بتواند روی یک لیست بازشونده کلیک کند یعنی صفحه تعامل حداقلی را دارد. این لحظه در بیشتر وبسایت‌ها قبل از بارگذاری کامل اتفاق می‌افتد؛ اما به معنی کاملاً قابل تعامل بودن نیست. (در بخش بعدی شاخصی معرفی می‌شود که مدت زمانی که طول می‌کشد تا صفحه کاملاً قابل تعامل شود را حساب می‌کند.)

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

ضریب تاثیر First CPU Idle عدد ۲ از ۵ است. جدول زیر نشان می‌دهد در بهترین حالت باید بین ۰ تا ۴/۷ ثانیه صفحه قابلیت تعامل حداقلی را داشته باشد.

زمان تعامل Time to Interactive

شاخص TTF مدت زمانی که صفحه کاملاً قابل تعامل باشد را اندازه می‌گیرد. یعنی همه دکمه‌ها، نوارهای ورودی، منوها و … برای استفادۀ آماده باشند. این زمان اگر بین ۰ تا ۵/۲ ثانیه باشد امتیاز خوب یا سریع محسوب می‌شود.

ضریب تاثیر TTF ۵ است که بالاترین ضریب در بین بقیه شاخص‌های بخش عملکرد حساب می‌شود.

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

زمان ورودی تخمینی Estimated Input Latency

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

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

ایندکس سرعت Speed Index

به زبان ساده Speed Index سرعت نمایش محتوا در طول بارگذاری را اندازه می‌گیرد. مثل این که از لحظۀ اینتر زدن برای باز شدن یک وبسایت تا بارگذاری شدن کامل صفحه فیلم بگیریم و فریم‌های هر مرحله از بارگذاری محتوای صفحه را جدا کنیم. زمانی که در هر فریم ثابت یا هر مرحله طول می‌کشد تا به فریم یا مرحله بعدی برسد حساب می‌شود و سپس از این زمان‌ها میانگین می‌گیرند. این میانگین برحسب ثانیه به عنوان Speed Index بیان می‌شود.

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

جدول زیر نشان می‌دهد این شاخص در بهترین حالت باید بین ۰ تا ۴/۳ ثانیه باشد. ضریب تاثیر Speed Index عدد ۴ از ۵ است.

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

متریک های سرعت بارگذاری سایت

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

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

بهینه‌سازی عملکرد که شامل ۶ شاخص سرعت بارگذاری بر حسب ثانیه است کمی پیچیده و وابسته به عوامل مختلف است. یک تغییر درست می‌تواند در هر ۶ شاخص تاثیر بگذارد و امتیاز نهایی را افزایش دهد. کدنویسی و طراحی سایت (back end and front end) بیشترین تاثیر در بخش عملکرد دارند.

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

بخشی از راهکارها هم ساده هستند و هر فرد عادی می‌تواند تغییرات مورد نیاز را اعمال کند.

گزارش Lighthouse به سه بخش فرصت‌ها (Opportunities)، تشخیص‌ها (Diagnostics) و موفقیت‌ها (Passed audits) تقسیم می‌شود. بخش موفقیت‌ها تست‌هایی را که در آن مشکلی وجود نداشت را فهرست می‌کند. در دو بخش دیگر هر مشکل به علاوه منبع اصلی آن و راهکار پیشنهادی ارائه می‌شود.

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

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

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

تاخیر نمایش تصاویر بیرون از نمایش اولیه Defer offscreen images

Offscreen به بخشی از وب‌سایت می‌گویند که کاربر برای نمایش آن باید عملی مثل اسکرول به پایین یا زدن دکمه‌ای را انجام دهد. بارگذاری تصاویری که در این بخش هستند در مرحله اول نیاز نیست. برای تصاویر این بخش‌ها می‌توان از روش بارگذاری تاخیردار (Lazy loading) استفاده کرد. یعنی هر وقت به پایین صفحه اسکرول کنید تصویر بارگذاری شود.

در سایت‌های وردپرسی می‌توانید از افزونه‌های Smush Image Optimization ،Autoptimize یا Lazy Load by WP Rocket استفاده کنید.

تنظیم اندازه تصاویر Properly size images

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

همیشه توصیه می‌شود تصاویر آپلود شده در اندازه موردنیاز باشند. در اکثر سیستم‌های مدیریت وب‌سایت مثل وردپرس و قالب‌های واکنش‌گرا (Responsive) تصویر آپلود شده از بخش مدیریت به چند فایل با اندازه‌های مورد نیاز تبدیل می‌شود.

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

از افزونۀ معرفی شده در بخش قبل (Smush Image Optimization) هم می‌توانید استفاده کنید. در تنظیمات همین افزونه گزینه‌ای برای ریسایز خودکار تصاویر هنگام آپلود وجود دارد.

کاهش حجم تصاویر Efficiently encode images

تصاویر استفاده شده در وب باید حجم کمی داشته باشند. با انواع روش‌های کاهش حجم تصاویر مثل Save for web در فتوشاپ یا ابزارهای آنلاین مثل tinypng می‌توانید حجم تصاویر را تا کمترین حد ممکن کم کنید.

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

کاهش حجم تصاویر

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

ذخیره تصاویر با فرمت‌های جدید Serve images in next-gen formats

از نظر Lighthouse فرمت‌های تصویری JPEG 2000، JPEG XR و WebP بهتر از فرمت‌های JPEG و PNG هستند. این فرمت‌ها نسبت به قدیمی‌ها تصویر را بهتر فشرده می‌کنند و بارگذاری سریع‌تری هم دارند.

حتما بخوانید: چگونه بک‌لینک‌های سایت را بررسی کنیم؟ (معرفی 3 ابزار مهم)

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

فرمت‌های جدید تصویر

ابزارهای ویرایش تصویر مثل فتوشاپ همۀ این فرمت‌ها را پشتیبانی می‌کنند.  افزونه Autoptimiz یا Smush Image که برای وردپرس معرفی شد تغییر فرمت به WebP را هم می‌تواند انجام دهد.

کش کردن عناصر ثابت صفحه Serve static assets with an efficient cache policy

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

بخش‌هایی که ثابت یا استاتیک هستند را به عنوان محتوای قابل کش شدن به مرورگر معرفی کنید و زمان انقضای کش را هم به اندازه کافی طولانی در نظر بگیرید. انجام این کار در سایت‌های مبتنی بر وردپرس با نصب افزونه‌‌ای مثل W3 Total Cache یا WP Super Cache آسان است.

کوچک‌سازی فایل‌های سی اس اس Minify CSS

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

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

در سایت‌های وردپرسی می‌توانید یکی از افزونه‌های Hummingbird، W3 Total Cache یا Autoptimize را نصب و تنظیمات لازم را انجام دهید.

کوچک‌سازی فایل‌های جاوااسکریپت Minify JavaScript

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

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

استفاده از ویدیو به جای تصویر گیف‌ پرحجم Use video formats for animated content

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

در چنین حالتی، بهتر است از فرمت‌های ویدیو مثل mp4 یا WebM استفاده کنیم.

اطمینان از قابل مشاهده بودن نوشته‌ها هنگام بارگذاری فونت Ensure text remains visible during webfont loads

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

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

افزایش محبوبیت و تعداد بک‌لینک‌هاحتما بخوانید: افزایش محبوبیت و تعداد بک‌لینک‌ها

برای انجام این کار کافی است در فایل مربوط به استایل یا فونت‌های سایت از دستور font-display: swap استفاده کنید.

کد زیر یک مثال است:

توصیه‌های تخصصی برای بهبود عملکرد وبسایت

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

حذف منابع جلوگیری کننده از رندر  Eliminate render-blocking resources

اگر در بخش شاخص‌ها دقت کرده باشید حتماً متوجه این مساله شده‌اید که استانداردهای بارگذاری Lighthouse اصرار دارند روند بارگذاری سایت طوری باشد که بارگذاری مرحله به مرحله در صفحه دیده شود؛ نه این که کاربر ۱۵ ثانیه منتظر بماند و صفحه کامل شده به صورت ناگهانی ظاهر شود.

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

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

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

کدهای CSS و جاوا اسکریپت (JS) بخش مهمی از این فایل‌ها هستند.

در طراحی به کمک CSS و جاوا اسکریپت (JS) سه رویکرد کلی وجود دارد:

  • external style sheet
  • internal style sheet
  • inline style

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

  • استایل‌شیت خارجی (external style sheet) یعنی یک یا چند فایل مستقل وجود دارد که در آن همۀ مشخصه‌های ظاهری مورد نیاز نوشته شده است.
  • استایل‌شیت داخلی (internal style sheet) یعنی در کدهای هر صفحه بخشی را به قواعد مورد نیاز اختصاص داده‌اند.
  • استایل‌شیت درون‌خطی (Inline styles) یعنی در کدهای صفحه هر جا که نیاز بود یک تگ style می‌گذارند و قواعد مورد نیاز را اعمال می‌کنند.

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

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

گوگل پیشنهاد می‌دهد در موارد ضروری استایل‌شیت درون‌خطی استفاده کنید و موارد غیرضروری را به تاخیر بیندازید.

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

حذف استایل‌های بی‌استفاده Remove unused CSS

به هر دلیلی امکان دارد بخش‌هایی از کد CSS بی‌استفاده باشند. یعنی کدها توسط مرورگر دریافت و پردازش می‌شوند، اما عملاً هیچ استفاده‌ای از آنها نمی‌شود. برای شناسایی کدها و حجمی که از بارگذاری اشغال می‌کنند در Developer tools مرورگر کروم به تب Coverage مراجعه کنید. در این ابزار به راحتی می‌توانید کدهای بی‌استفاده را مشاهده کنید. اگر این کدهای بی‌استفاده در هیچ یک از بخش‌های دیگر هم استفاده نمی‌شود پس آنها را حذف کنید.

هرآنچه که باید در مورد الگوریتم گوگل پاندا بدانیمحتما بخوانید: هرآنچه که باید در مورد الگوریتم گوگل پاندا بدانیم

فعال کردن فشرده‌سازی نوشتار Enable text compression

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

اتصال زودهنگام Preconnect to required origins

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

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

از دستورهای Preconnect برای چند نوع منبع یا اتصال‌های زودهنگام می‌توان استفاده کرد.

کاهش زمان پاسخ سرور Reduce server response times

این قسمت از فرصت‌های بهینه‌سازی گزارش Lighthouse درباره کاهش زمان پاسخگویی سرور به درخواست‌ها است. زمانی که سرور دستور یا آدرس را از سمت کاربر دریافت می‌کند تا اولین داده از سمت سرور دریافت شود باید زیر ۶۰۰ میلی‌ثانیه باشد.

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

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

راحت‌ترین کار این است که در انتخاب سرویس میزبانی دقت کرده و از سرویس‌های CDN استفاده کنید.

استفاده نکردن از ریدایرکت‌های متعدد Avoid multiple page redirects

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

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

تا حد ممکن باید از تعداد ریدایرکت‌ها کم کنید و لینک‌ به سایر منابع منتقل شده را به‌روزرسانی کنید.

کاهش کدهای شخص ثالث Reduce the impact of third-party code

کد third-party به کدهایی گفته می‌شود که متعلق به یک برنامه یا سایت دیگر هستند و برای انجام یک کار خاص به سایت شما اضافه می‌شوند. مثلاً فرض کنید که می‌خواهید کد گوگل آنالیتیکس، تست A/B، سرچ کنسول و … را در سایتتان قرار دهید و کاربران را رصد کنید، یا یک سری دیتا جمع کنید؛ تمامی این کدها، شخص ثالث یا همان third-party محسوب می‌شوند. چرا؟ چون متعلق به یک نفر سوم، یا بهتر بگویم، متعلق به یک برنامۀ خارج از سایت هستند و قرار است دیتاهای جمع شده را به آن برنامه انتقال دهند.

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

اهمیت سئو چیست؟ چرا انجام سئو ضروری است؟حتما بخوانید: اهمیت سئو چیست؟ چرا انجام سئو ضروری است؟

حالا چطور می‌شود حجم این کدها را کاهش داد؟

بهترین کاری که می‌توانید بکنید، استفاده از نرم‌افزارهای third-party مانند گوگل تگ منیجر است. گوگل تگ منیجر نقش یک واسط را بازی می‌کند. با این ابزار، شما فقط یک کد را وارد سایتتان می‌کند (که آن هم کد خود تگ منیجر است) و دیگر نیازی نیست که باقی کدها (مثل گوگل آنالیتیکس) را در سایتتان وارد کنید. فقط کافیست به تنظیمات تگ منیجر رفته و از آنجا تمام کدهای third-party را مدیریت کنید.

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

یک دوره جامع آموزش تگ منیجر هم تهیه کردیم که همه چیز را از صفر تا ۱۰۰ توضیح دادیم.

دوره کامل آموزش گوگل تگ منیجر

 

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

ما در این دوره ویدیویی به طور کامل همه چیز را به صورت مفهومی و از صفر تا کاربردهای پیچیده توضیح دادیم.

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

از بارگذاری بیش از حد اطلاعات جلوگیری کنید Avoid enormous network payloads

حجم کل داده‌هایی که در بارگذاری اولیه دریافت می‌شود نباید بیشتر از ۱۶۰۰ کیلوبایت باشد. این حجم ایده‌آلی است که با توجه به شاخص TTI (یا همان Time To Interactive) زیر ۱۰ ثانیه و اتصال به اینترنت از نوع 3G در نظر گرفته شده است. این رقم ایده‌آل همیشه قابل دستیابی نیست.

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

جلوگیری از انباشت بیش از حد اشیاء در صفحه Avoid an excessive DOM size

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

درخت DOMین مدل که به آن دام DOM یا Document Object Model می‌گویند، یک ساختار درختی از اشیاء موجود در صفحه می‌سازد.

در آزمون لایت هاوس تعداد کل عناصر DOM محاسبه می‌شود. توصیه می‌شود تعداد عناصر کمتر از حدود ۱۵۰۰ باشد؛ چون هرچه تعداد بیشتر شود مموری بیشتری در سرور درگیر بارگذاری صفحه خواهد شد.

حتما بخوانید: سئو کلاه سیاه؛ مناسب برای کلاهبرداران!

تعداد درخواست‌های ضروری را کم کنید Minimize critical requests depth

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

کاهش زمان اجرای جاوااسکریپت Reduce JavaScript execution time

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

راهکارها:

  • با تکنیک code-split فقط کد‌هایی را که کاربر نیاز دارد اجرا کنید.
  • کدهای اضافی را حذف کنید
  • فشرده‌سازی کدها فراموش نشود
  • کدها را کش کنید

کاهش رشته کارهای اصلی Minimize main-thread work

این توصیه به زبان ساده یعنی زمان پردازش و اجرای رشتۀ اصلی (main thread) را کوتاه کنید.

کم کردن تعداد درخواست‌های ارسالی از سمت کاربر و کاهش حجم قابل انتقال Keep request counts low and transfer sizes small

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

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

دنبال یه کار پر درآمد از اینترنتی؟

تو دوره فرصت‌های اینترنتی بهترین راه رو بهت نشون میدیم!
برای مشاوره رایگان، همین الان با ما تماس بگیرید.

شروع می‌کنم

021-58438داخلی 1

گزارش سئو در Lighthouse

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

صفحه عنوان ندارد – Document doesn’t have a element</h3> <p>عنوان هر صفحه باید مشخص باشد. این عنوان در <strong>تگ <title></strong> قرار می‌گیرد. داشتن عنوان متناسب با محتوا یکی از اصول اولیه و مهم در تولید و انتشار محتوا است.</p> <h3>توضیحات متا مشخص نشده است Document does not have a meta description</h3> <p>توضیحات متا یا متا دسکریپشن نوشتۀ کوتاهی است که در زیر عنوان در نتایج جستجوی گوگل یا دیگر موتورهای جستجو دیده می‌شود. اگر توضیحات متا توسط کاربر مشخص نشود، موتورهای جستجو به طور خودکار بخشی از متن را به عنوان توضیحات متا در نظر می‌گیرند که بیشتر وقت‌ها <strong>ناقص</strong> است!</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-52885" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20437'%3E%3C/svg%3E" alt="توضیحات متا" width="830" height="437" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/meta-description.jpg"></p> <p>توضیحات متا در <strong>تگ <meta name=description></strong> صفحه قرار می‌گیرد.</p> <h3>لینک‌ها توضیح متنی ندارند Links do not have descriptive text</h3> <p>متن لینک که به آن انکر تکست هم می‌گویند نوشته‌‌ای کوتاه است که به کاربر و موتورهای جستجو کمک می‌کند محتوای لینک مقصد را متوجه شوند. انتخاب انکرتکست خیلی مهم است و اگر متن آن توضیح خوبی برای مقصد لینک نباشد در گزارش Lighthouse به عنوان لینک‌های بدون توضیح مشخص می‌شود.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-13162" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20162'%3E%3C/svg%3E" alt="" width="600" height="162" data-lazy-src="https://www.novin.com/wp-content/uploads/2016/11/what-is-anchor-text-and-why-it-is-important-for-seo-01.jpg"></p> <p>در واقع<strong> لایت هاوس</strong> لینک‌هایی را که دارای انکرتکست زیر باشند بدون توضیح در نظر می‌گیرد:</p> <ul> <li>click here</li> <li>click this</li> <li>go</li> <li>here</li> <li>this</li> <li>start</li> <li>right here</li> <li>more</li> <li>learn more</li> </ul> <p>انکرتکست‌هایی مثل <strong>اینجا، ادامه، کلیک کنید، اطلاعات بیشتر</strong> و سایر موارد مشابه به هیچ وجه مناسب نیستند. با رعایت چند نکته زیر می‌توانید انکر تکست‌های بهتری بنویسید:</p> <ul> <li>انکرتکست باید با موضوع محتوای لینک ارتباط داشته باشد. ترکیب کلید‌واژه با نام برند یک روش متداول است.</li> <li>از آدرس صفحه به عنوان انکرتکست استفاده نکنید مگر این که دلیل محکمی داشته باشید. برای مثال می‌خواهید آدرس جدید یک وب‌سایت را به کاربر نشان دهید.</li> <li>متن لینک نباید خیلی طولانی باشد. چند کلمه و در نهایت یک جمله کافی است.</li> </ul> <p>برای اطلاعات بیشتر درباره انکرتکست مقالۀ<strong> <a href="https://www.novin.com/blog/what-is-anchor-text-and-why-it-is-important-for-seo/" target="_blank" rel="noopener noreferrer">آموزش انکرتکست</a></strong> را در وبلاگ سایت ما بخوانید.</p> <h3>صفحه دارای تگ زبان مشخص نیست Document doesn’t have a valid hreflang</h3> <p>بسیاری از وب‌سایت‌های چندزبانه هستند و محتوایی یکسان را را با توجه به زبان کاربر منتشر می‌کنند. یعنی یک نوشته به چند زبان منتشر می‌شود. برای این که موتورهای جستجو متوجه یکسان بودن محتوا شوند و محتوای مناسب را به کاربر نشان دهند باید از لینک‌های <strong>hreflang</strong> استفاده کرد.</p> <p><a class="inline-related-post" href="https://www.novin.com/blog/what-is-pigeon-algorithm/"><img loading="lazy" decoding="async" width="80" height="80" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2080'%3E%3C/svg%3E" alt="الگوریتم کبوتر گوگل چیست و چه تاثیری روی رتبه سایت شما دارد؟" data-lazy-src="https://www.novin.com/wp-content/uploads/2018/07/pigeon-google-Algorithm-80x80.png"><span><strong>حتما بخوانید: </strong>الگوریتم کبوتر گوگل چیست و چه تاثیری روی رتبه سایت شما دارد؟</span></a></p> <p>لینک hreflang ساختارش به شکل زیر است. زبان صفحه با حروف اختصاری مثل en درج می‌شود و بعد از آن لینک صفحه‌ای که به همان زبان است به صورت لینک افزوده می‌شود.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-52890" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20180'%3E%3C/svg%3E" alt="" width="830" height="180" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/hreflang.jpg"></p> <p>به زبان ساده با لینک hreflang به موتورهای جستجو می‌گوییم این صفحه به این زبان است و صفحه دیگر با زبان متفاوت در این آدرس است.</p> <p>توجه کنید که این نوع لینک در کدهای HTML است و در صفحه دیده نمی‌شود. نکته مهم دیگر این است که استفاده از hreflang با زبان تعیین شده در حالتی مفید است که وب‌سایت کاربر را با توجه به زبان سیستم یا آی پی به زبان مورد نظر هدایت می‌کند. این انتقال معمولاً با ریدایرکت به صفحه اتفاق می‌افتد و نسخه‌های چندزبانه از هر صفحه در موتورهای جستجو ایندکس شده است.</p> <p><strong>در حالتی که کاربر خودش زبان دلخواه را انتخاب می‌کند به جای تعیین زبان از متغیر x-default استفاده می‌شود.</strong></p> <p>اگر به دلایلی مثل زبان‌های مشابه در مناطق مختلف یا هدف‌گیری مخاطبان سایر کشورها، محتوای منتشر شده در هر زبان مخصوص یک منطقه است، می‌توان از حروف اختصاری مشخص کردن منطقه یا کشور هم استفاده کرد.</p> <p>برای مثال، برای زبان اسپانیایی در مکزیک es-mx و اسپانیایی در شیلی از es-cl استفاده می‌شود. مشخص کردن منطقه در سئو محلی تاثیرگذار است.</p> <h3>Document does not have a valid rel=canonical</h3> <p>امکان دارد چندین صفحه در یک وب‌سایت محتوای یکسان یا مشابه داشته باشند. برای مثال، نسخه دسکتاپ و نسخه موبایل بعضی وبسایت‌ها دو صفحه با آدرس‌های مجزا هستند. در این موارد موتورهای جستجو صفحات را با محتوای تکراری تشخیص می‌دهند. موتورهای جستجو به صورت خودکار یکی از دو نسخۀ مشابه را اصلی (canonical) در نظر می‌گیرند و آن را بیشتر زیر نظر می‌گیرند یا ربات‌های خزنده بیشتر به آن سر می‌زنند.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-52892" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20420'%3E%3C/svg%3E" alt="" width="800" height="420" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/canonical.jpg"></p> <p>با لینک canonical در هد کدهای HTML می‌توان به موتورهای جستجو اعلام کرد کدام نسخه را اصلی در نظر بگیرند و به کاربران معرفی کنند.</p> <p>ساختار لینک canonical به شکل زیر است:</p> <p><code><link rel="canonical" href="https://example.com"/></code></p> <p>اگر لینک canonical ساختار درستی نداشته باشد یا مشکلات دیگری مثل مواردی زیر دیده شود در گزارش مشخص خواهد شد.</p> <ul> <li>بیش از یک لینک canonical پیدا شود.</li> <li>آدرس مشخص شده معتبر نباشد.</li> <li>لینک مشخص شده مربوط به زبان یا منطقه دیگری باشد</li> <li>به دامنه (domain) دیگری اشاره کند.</li> </ul> <p>برای اطلاعات بیشتر مقاله <a href="https://www.novin.com/blog/what-is-rel-canonical/" target="_blank" rel="noopener noreferrer">تگ Rel=Canonical</a> را در وبلاگ سایت ما بخوانید.</p> <h3>صفحه دارای کد HTTP نامنعتبر است Page has unsuccessful HTTP status code</h3> <p>هر درخواستی که از سمت کاربر به سرور ارسال می‌شود در ابتدا با یک کد سه رقمی پاسخ داده می‌شود. به این اعداد کد وضعیت HTTP می‌گویند. کدهای سری ۴۰۰ و ۵۰۰ اعلام کننده خطا هستند. کد ۴۰۴ یکی از موارد مشهور است که نشانگر موجود نبودن صفحه یا هر نوع منبع دیگر است.</p> <p>اگر ربات موتورهای جستجو در هنگام بررسی صفحه‌های یک وبسایت با این ارورها مواجه شود به احتمال زیاد آن صفحه را ایندکس نمی‌کند و در نتایج جستجو هم دیده نمی‌شود.</p> <p>سرور باید برای یک صفحۀ عادی و سالم کدهای سری ۲۰۰ یا در مواقعی که صفحه منتقل شده است کدهای سری ۳۰۰ را اعلام کند.</p> <h3>از ایندکس شدن صفحه جلوگیری شده است Page is blocked from indexing</h3> <p>اگر نمی‌خواهید صفحه یا هر بخش دیگری از وبسایت توسط موتورهای جستجو ایندکس شوند و در جستجوهای کاربران قابل مشاهده باشند پس با کدهای <strong>noindex</strong> این موضوع را به گوگل اعلام کنید.</p> <p>در آزمون Lighthouse بخش هدر، پاسخ HTTP و بخش متا در هر صفحه چک می‌شود و اگر از تگ <strong>noindex</strong> استفاده شود آن را به عنوان یک هشدار نشان می‌دهد. در مواردی که این کار عمدی است هیچ مشکلی نیست و تاثیری هم در سئو کل سایت نخواهد داشت.</p> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-52898 size-full" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20533'%3E%3C/svg%3E" alt="" width="800" height="533" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/Noindex.jpg"></p> <h3>فایل robots.txt ساختار درستی ندارد – robots.txt is not valid</h3> <p>در همۀ سایت‌ها فایلی به نام<strong> robots.txt</strong> وجود دارد که وظیفه آن اعلام بخش‌های قابل دستیابی به ربات موتورهای جستجو است. ربات‌هایی که می‌خواهند وبسایت را بررسی کنند اول این فایل را بررسی می‌کنند که بدانند کدام بخش‌ها را نباید وارد شوند.</p> <p>اگر فایل robots.txt درست تنظیم نشده باشد مشکلات جدی به دنبال خواهد داشت. برای اطلاعات بیشتر درباره این فایل مهم به مقاله <a href="https://www.novin.com/blog/what-is-robots-txt-and-how-to-create-one/" target="_blank" rel="noopener noreferrer">فایل Robots.txt چیست</a> در وبلاگ سایت ما مراجعه کنید.</p> <h3>استفاده از محتواهای غیراستاندارد و مبتنی بر افزونه – Document uses plugins</h3> <p>استفاده از محتواهای مبتنی بر فلش، جاوا یا هر نوع فایل دیگری که برای موتورهای جستجو قابل ایندکس شدن نیست توصیه نمی‌شود. این نوع محتواهای مبتنی بر افزونه‌ها در مرورگرهای جدید پشتیبانی نمی‌شوند و در نتیجه کاربران نمی‌توانند آنها را ببینند.</p> <p>عناصر این نوع محتواها در آزمون لایت هاوس شناسایی و اعلام می‌شوند. بهتر است آنها را از وبسایت خود حذف کنید.</p> <h3>Does not have a <meta name="viewport"> tag with width or initial-scale</h3> <p>یکی از فاکتورهای مهم در بهبود سئوی سایت‌ها، سازگاری با موبایل یا موبایل فرندلی بودن است. یکی از اصول اولیه موبایل فرندلی بودن صفحات این است که پهنای صفحه برای مرورگرهای موبایل مشخص شود. البته این مشکل در <strong>قالب‌های ریسپانسیو</strong> رفع شده است.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-52902" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20382'%3E%3C/svg%3E" alt="" width="830" height="382" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/mobilefriendly.jpg"></p> <p>در هدر سایت باید کد <meta name="viewport"> موجود باشد. این کد به مرورگر موبایل اعلام می‌کند پهنای محتوای قابل نمایش چه اندازه باشد و چقدر بزرگنمایی کند.</p> <p>یک مثال از کد <meta name="viewport"> را می‌بینید:</p> <p><code><!doctype html></code><br /> <code><html lang="en"></code><br /> <code><head></code><br /> <code>…</code><br /> <code><meta name="viewport" content="width=device-width, initial-scale=1"></code><br /> <code>…</code><br /> <code></head></code><br /> <code><body data-rsssl=1></code><br /> <code>…</code><br /> <code></body></code><br /> <code></html></code></p> <h3>ساز فونت صفحه کوچک یا نامناسب است – Document doesn’t use legible font sizes</h3> <p>اگر بیش از ۶۰ درصد نوشته‌های یک صفحه فونت کوچکتر از 12 پیکسل داشته باشند در گزارش لایت هاوس به عنوان فونت نامناسب مشخص می‌‌شود. فونت کوچک باعث می‌شود صفحه ناخوانا باشد یا کاربر مجبور شود که صفحه را بزرگنمایی کند.</p> <h3>دکمه‌های قابل لمس فاصله و اندازه مناسب ندارند – Tap targets are not sized appropriately</h3> <p>در ادامۀ فاکتورهای تاثیر گذار در موبایل فرندلی بودن سایت، فاصلۀ مناسب دکمه‌ها، لینک‌ها، و سایر عناصر به اندازه‌ای باشد که کاربر به راحتی هر کدام را کلیک یا لمس کند. عناصری که اندازۀ کوچکتر از ۴۸ در ۴۸ پیکسل داشته باشند یا فاصلۀ آنها کمتر از ۸ پیکسل باشد در این آزمون رد می‌شوند.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-52904" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20473'%3E%3C/svg%3E" alt="" width="830" height="473" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/image3.jpg"></p> <p>اصلاح این مشکل نیازمند بازبینی در طراحی عناصری است که در گزارش مشخص می‌شوند.</p> <h2>گزارش تجربه برتر (Best Practices)</h2> <p>منظور از تجربه برتر در این بخش از گزارش Lighthouse یعنی نکات جزئی است که رعایت آنها تاثیر چندوجهی دارند. یعنی برای امنیت کاربران، بهبود عملکرد وبسایت، سئو و … موثر هستند و به علاوه مشکلات احتمالی که شاید کاربران عادی متوجه آن نشوند را کاهش می‌دهد.</p> <p>در ادامه نتایج این بخش از گزارش را مرور می‌کنیم. رعایت این نکات باعث می‌شود کاربر تجربه بهتر و آسان‌تری از کار با وبسایت یا اپلیکیشن داشته باشد.</p> <h3>داده‌های ساختاریافته معتبر نیستند – Structured data is valid</h3> <p>داده‌های ساختار یافته مجموعه‌ای از کدها هستند که به موتورهای جستجو کمک می‌کنند نوع محتوا را راحت‌تر تشخیص دهند. توجه کنید که این ساختارها کمک‌کننده هستند اما الزامی به استفاده نیست. این ساختارها با توجه به نوع محتوا انواع مختلفی دارند. برای اطلاعات بیشتر درباره داده‌های ساختار یافته مقاله «<a href="https://www.novin.com/blog/schema-markup/" target="_blank" rel="noopener noreferrer">اسکیما چیست؟</a>» را از دست ندهید. بسیاری از کسب و کارها با کمک داده‌های ساختار یافته می‌توانند در نتایج جستجو بهتر دیده شوند و اطلاعات بیشتری به کاربران ارائه کنند.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-53121" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20540%20564'%3E%3C/svg%3E" alt="" width="540" height="564" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/pythonmarkup.png"></p> <p>اگر <strong>Structured data</strong> در صفحات سایت درست تعیین و تنظیم نشوند در آزمون lighthouse مشخص خواهند شد.</p> <h3>مشخص نبودن ساختار صفحه – Page lacks the HTML doctype, thus triggering quirks mode</h3> <p>در روزهایی که اینترنت هنوز فراگیر نشده بود، استانداردهای مشخصی برای توسعه وب نبود و چندین راهکار مختلف برای توسعه وب وجود داشت. مرورگرهای آن دوره که معروف‌ترینش اینترنت اکسپلورر بود باید از همۀ ساختارها پشتیبانی می‌کرد. اما بعدها که استفاده از HTML و CSS گسترش یافت، روش‌های دیگر کم‌کم از بین رفتند و امروزه به ندرت دیده می‌شوند.</p> <p>به هرحال یکی از راه‌های جداسازی روش استاندارد جدید از روش‌های قدیمی، این بود که در ابتدای کدهای صفحه، به مرورگر اعلام شود این یک صفحۀ HTML است. تگ<strong> <!DOCTYPE html></strong> امروزه در اکثر سایت‌ها دیده می‌شود. در صورتی این تگ در صفحه نباشد، بارگذاری آن شاید درست انجام نشود. البته در HTML5 این مشکل برطرف شده است.</p> <h3>نمایش تصاویر با نسبت ابعادی نادرست – Displays images with incorrect aspect ratio</h3> <p>اگر نسبت ابعاد تصویری که در صفحه دیده می‌شود با نسبت ابعادی تصویر اصلی اختلاف زیادی داشته باشد،  باعث می‌شود تصویر غیرواضح دیده شود. در آزمون Lighthouse اگر اختلاف از ۵ درصد بیشتر باشد در گزارش تصویر با نسبت نادرست مشخص می‌شود.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-53132" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20221'%3E%3C/svg%3E" alt="" width="830" height="221" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/incorrect-aspect-ratio.jpg"></p> <p>بهتر است نسبت تصویری که نمایش داده می‌شود باید در فایل استایل (CSS) مشخص شود.</p> <h3>Does not use HTTP/2 for all of its resources</h3> <p>سرورهایی که از پروتوکل HTTP2 پیروی می‌کنند سریع‌تر هستند. اگر بخشی از منابع سرور با پروتکل قدیمی منتقل شود در آزمون لایت هاوس مشخص خواهد شد. پروتکل پشتیبانی شده بخشی از تنظیمات سرور است. سرورهای جدید از پروتکل‌های قدیمی استفاده نمی‌کنند.</p> <h3>Uses document.write</h3> <p>بعد از کروم نسخه ۵۵ از دستور Uses document.write پشتیبانی نمی‌شود. از این دستور برای اجرای اسکریپت‌های خارجی استفاده می‌شد. در صورت استفاده از این دستور امکان دارد چندین ثانیه طول بکشد تا بارگذاری کامل شود.</p> <h3>Does not use passive listeners to improve scrolling performance</h3> <p>کلیک‌ها،  لمس صفحه و اسکرول کردن شاخص‌های خوبی برای اندازه‌گیری تاثیرگذاری و واکنش کاربران به محتوا است. روش‌های مختلفی برای ثبت این داده‌ها وجود دارد که بعضی از آنها امکان دارد جلوی تعامل کاربر را تا بارگذاری کامل بگیرند. یعنی کاربر نمی‌تواند اسکرول کند یا روی صفحه کلیک کند تا زمانی که بخش ثبت‌کننده تعامل فعال شود.</p> <p>گوگل پیشنهاد می‌دهد از روش‌های <strong>passive</strong> که جلوی تعامل را تا قبل از بارگذاری نمی‌گیرند استفاده کنید. این تغییر نیازمند افزودن دستور <strong>passive: true</strong> در اجراکننده‌ها است.</p> <h3>از ارتباط رمزگذاری شده استفاده کنید – Uses HTTPS</h3> <p>همۀ وب‌سایت‌ها باید از <strong>پروتکل امن HTTPS</strong> استفاده کنند. روش HTTPS از دزدیده شدن یا تغییر داده‌ها در مسیر بین کاربر و سرور جلوگیری می‌کند. فعال‌سازی <strong>HTTPS</strong> در تنظیمات سرور و از طریق صدور گواهینامه‌های رمزنگاری امکان‌پذیر است.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-53134" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20369'%3E%3C/svg%3E" alt="" width="800" height="369" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/https.jpg"></p> <h3>از روش‌های امن لنیک دادن استفاده کنید – Links to cross-origin destinations are unsafe</h3> <p>وقتی روی لینکی کلیک می‌کنید امکان دارد صفحه جدید در همان تب باز شده، تب جدید یا پنجره جدید باز شود. همۀ حالت‌های باز شدن لینک با کمک صفت‌های زیر قابل تنظیم هستند:</p> <ul> <li>_blank</li> <li>_self</li> <li>_parent</li> <li>_top</li> </ul> <p>به دلیل مشکلات امنیتی که صفت _blank دارد، گوگل پیشنهاد می‌دهد از صفت‌های rel=”noopener” یا rel=”noreferrer” استفاده کنید. این دو صفت از اجرای کدهای جاوااسکریپت مخرب یا انتقال اطلاعات به صورت ناخواسته به صفحۀ باز شده جلوگیری می‌کنند.</p> <p>این روش لینک‌دهی در وردپرس به صورت خودکار اجرا می‌شود.</p> <h3>Includes front-end JavaScript libraries with known security vulnerabilities</h3> <p>هکرها به کمک نرم‌افزارهای خزنده در وبسایت‌ها می‌توانند رخنه‌های امنیتی را شناسایی و از آنها سوءاستفاده کنند. تعدادی زیادی از این رخنه‌های امنیتی در کتابخانه‌ها یا ماژول‌های جاوااسکریپت (JavaScript libraries) وجود دارد.</p> <p>رخنه‌های امنیتی توسط Lighthouse شناسایی می‌شوند. بعضی از این مشکلات با یک به‌روزرسانی ساده برطرف می‌شوند و بعضی دیگر نیازمند بررسی دقیقتر است.</p> <h3>درخواست موقعیت کاربر در هنگام بارگذاری صفحه – Requests the geolocation permission on page load</h3> <p>بعضی وبسایت‌ها برای ارائه خدمات نیاز به دریافت اطلاعاتی درباره موقعیت کاربر هستند. در صورتی که این درخواست موقعیت جغرافیایی در هنگام بارگذاری صفحه و به صورت خودکار اجرا شود، در گزارش مشخص خواهد شد.</p> <p>توصیه می‌شود درخواست‌های موقعیت بعد از یک عمل کاربر مثل کلیک روی دکمه‌ای اجرا شوند نه در هنگام بارگذاری صفحه به صورت خودکار.</p> <h3>Requests the notification permission on page load</h3> <p>درخواست ارسال اعلان (notification) باید در زمان درست ارسال شود نه لحظۀ بارگذاری صفحه. هر درخواستی که برای ارسال اعلان به مرورگر کاربر با دستور notification.requestPermission ارسال شود در گزارش Lighthouse مشخص خواهد شد.</p> <p>بهتر است این درخواست‌ها با تاخیر و بعد از بارگذاری کامل اجرا شوند.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-53138" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20311'%3E%3C/svg%3E" alt="" width="830" height="311" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/geolocation-permission.jpg"></p> <h3>جلوگیری از کپی پیست کردن رمز – Prevents users from pasting into password fields</h3> <p>در بعضی وبسایت‌ها به کاربر اجازه داده نمی‌شود رمز خود را از جای دیگری کپی و در نوار ورود رمز وارد کند. درباره این ایده هنوز نظر قطعی وجود ندارد چون برخی افراد معتقدند این کار باعث مشکلات امنیتی می‌شود اما در طرف دیگر برخی افراد با گوگل هم‌نظر هستند و می‌گویند این اجازه به کاربران کمک می‌کند تا از نرم‌افزارها یا افزونه‌های ذخیره کننده رمز استفاده کنند و مجبور نباشند برای ورود هر رمزی آن را حفظ کنند. در نتیجه کاربران ترجیح می‌دهند رمزهای آسان‌تری انتخاب کنند که توصیه نمی‌شود.</p> <p>اگر فیلدهای ورود رمز امکان پیست کردن نداشته باشند در گزارش لایت هاوس مشخص می‌شود. هرگونه کدی که از پیست کردن در نوار رمز جلوگیری می‌کند باید حذف شود.</p> <h3>Uses Application Cache</h3> <p>استفاده از Application Cache در وبسایت‌ها منسوخ شده است و به جای آن باید از Cache API استفاده شود. از این روش کش کردن بیشتر برای وب‌اپ‌های پیشرونده استفاده می‌شود تا در زمان آفلاین بودن هم صفحه اپلیکیشن قابل مشاهده باشد.</p> <h3>Uses deprecated APIs</h3> <p>از انواع API منسوخ شده نباید در طراحی وبسایت‌ها استفاده کرد. لیستی از این API در <a href="https://www.chromestatus.com/features#deprecated" target="_blank" rel="noopener noreferrer">این صفحه</a> قابل مشاهده است.اگر در گزارش لایت هاوس اخطاری داده شد می‌توانید دلیل آن را در فهرست معرفی شده پیدا کنید.</p> <h3>Detected JavaScript libraries</h3> <p>این بخش از گزارش مشکلی را اعلام نمی‌کند، در واقع فقط فهرستی از لایبرری‌های استفاده شده مبتنی بر جاوااسکریپت را نشان می‌دهد. در بخش‌های قبلی هم گفته شد که این لایبرری‌ها نباید قدیمی یا دارای مشکلات امنیتی باشند.</p> <h2>آزمون اپلیکیشن‌های وب پیشرونده (PWA)</h2> <p>اپلیکیشن‌های وب پیشرونده در اصل وبسایت‌هایی هستند که مثل اپلکیشن‌های نصبی قابل استفاده هستند. استفاده از این اپلیکیشن‌ها محدود به موبایل نیست و در هر دستگاهی که مرورگر اینترنت داشته باشد قابل استفاده هستند.</p> <p>گفته می‌شود که این نوع اپلیکیشن‌ها در آینده رونق بیشتری خواهند داشت. اپلیکیشن‌های وب پیشرونده استانداردهایی هم دارند که رعایت کردن آنها به بهبود تجربه کاربران کمک می‌کند.</p> <p>در گزارش Lighthouse موارد زیر به صورت کلی بررسی می‌شوند:</p> <ul> <li>سرعت و کارایی</li> <li>قابلیت نصب</li> <li>بهینه‌سازی</li> </ul> <p>در ادامه هر یک از موارد گزارش را مرور می‌کنیم.</p> <h3>بازگذاری سریع در موبایل (Page load is fast enough on mobile)</h3> <p>سرعت بارگذاری در اپلیکیشن‌های وب پیشرونده اهمیت بیشتری دارد. در بخش‌های مربوط به سرعت وبسایت، چندین نکته گفته شد که در سرعت سایت تاثیر دارند اما با توجه به این که بعضی وبسایت‌ها نسخه وب‌اپ هم دارند، زمان بارگذاری نباید خیلی بیشتر شود.</p> <p><img loading="lazy" decoding="async" class="size-full wp-image-56685 alignleft" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%3E%3C/svg%3E" alt="" width="128" height="128" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/phone.png">تست لایت هاوس دو شرط برای وب اپ سریع دارد:</p> <p>۱. صفحه از نظر ظاهری کامل بارگذاری شود.</p> <p>۲. صفحه قابل تعامل باشد.</p> <p>اگر زمان قابل تعامل بودن وب اپ بیش از ۱۰ ثانیه باشد در این آزمون رد می‌شود. توصیه‌های گوگل برای بهبود سرعت وب‌اپ همان توصیه‌های مربوط به سرعت سایت است.</p> <p>برای بهبود سرعت بارگذاری ظاهری (visual) توصیه می‌شود فقط منابع موردنیاز دریافت و منابع ضروری اولویت‌‌بندی شوند.</p> <p>برای بهبود سرعت تعامل‌پذیری هم توصیه می‌شود اول دستوران جاوااسکریپت موردنیاز برای نمایش صفحه اجرا شوند و بقیه را به تاخیر بیندازید.</p> <h3>Current page responds with a 200 when offline</h3> <p>وقتی که کاربر اتصال به اینترنت ندارد، وب‌اپ باید کد ۲۰۰ را اعلام کند. مساله فقط اعلام کد HTTP نیست. در واقع این کد نشان می‌دهد وب‌اپ قابلیت کاربری در حالت آفلاین را دارد یا نه.</p> <p>برای این منظور باید ۳ کار انجام شود:</p> <ol> <li>از سرویس‌ورکرها استفاده شود.</li> <li>از سرویس‌ورکر برای کش کردن فایل به صورت لوکال استفاده شود.</li> <li>در هنگام آفلاین بودن از سرویس‌ورکر به عنوان پروکشی برای بازگردانی نسخه کش شده فایل‌ها استفاده شود.</li> </ol> <h3>استفاده از ارتباط رمزنگاری شده – Uses HTTPS</h3> <p>در بخش تجربه برتر هم در استفاده از HTTPS تاکید شده بود. اکثر شرکت‌های خدمات میزبانی این امکان را فراهم کرده‌اند و فقط کافی است در هنگام راه‌اندازی درخواست کنید که برای وب‌سایت شما گواهی HTTPS نصب کنند. سرویس‌هایی مثل Let’s Encrypt ارزان هستند.</p> <h3>استفاده از یک سرویس‌ورکر (Registers a service worke)</h3> <p>سرویس‌ورکرها واسطه‌ای بین مرورگر کاربر و سرورهای میزبانی هستند. کاربردهای سرویس ورکر بنا به نیازها می‌تواند گسترده یا محدود باشد. در وب‌اپ‌های پیشرونده از سرویس‌ورکرها برای آفلاین کردن وبسایت، ارسال اعلان به کاربر و امکان اضافه شدن آیکون نصبی به صفحه دستگاه کاربر استفاده می‌شود.</p> <h3>User can be prompted to install the web app</h3> <p>وب اپ باید قابلیت نصب داشته باشد. اپلیکیشن تحت وب که قابلیت نصب دارد با یک اعلان به کاربر نشان می‌دهد که این یک وب‌اپ است و می‌تواند آن را نصب کند. برای اطلاعات بیشتر به از <a href="https://developers.google.com/web/tools/lighthouse/audits/install-prompt">صفحه توسعه‌دهندگان</a> مطالعه کنید.</p> <h3>Does not provide a valid apple-touch-icon</h3> <p>کاربران سیستم عامل iOS می‌توانند وب‌ اپلیکیشن‌های پیشرونده را به صفحه خانگی خود اضافه یا به اصطلاح نصب کنند. آیکونی که در صفحه خانگی دیده می‌شود، باید در قسمت هد صفحه تعیین شده باشد. اگر آیکون تعیین نشود یک تصویر از محتوای صفحه به جای آن به صفحه اضافه می‌شود.</p> <p>آدرس تصویر آیکون باید به شکل زیر در هد قرار داشته باشد:</p> <p><code><link rel="apple-touch-icon" href="/example.png"></code></p> <h3>Avoid multiple page redirects</h3> <p>ریدایرکت‌ها سرعت بارگذاری صفحه را به شدت پایین می‌آورند. اگر در هنگام بارگذاری صفحه، ۲ یا تعداد بیشتری ریدایرکت اتفاق بیافتد، در گزارش lighthouse این هشدا اعلام می‌شود.</p> <h3>Configured for a custom splash screen</h3> <p>وقتی وب‌اپی اجرا می‌شود، برای چند میلی‌ثانیه یا حتی چند ثانیه تا قبل از بارگذاری کامل، صفحه‌ای سفید دیده می‌شود. در اپلیکیشن‌های نصبی معمولاً این صفحه رنگی و دارای یک تصویر یا یک انیمیشن است. توصیه می‌شود برای وب‌اپ یک صفحه اسپلش (مثل همان لوگوی Loading خودمان) تنظیم شود تا کاربر صفحه‌ای سفید را نبیند.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-53161" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20830%20337'%3E%3C/svg%3E" alt="" width="830" height="337" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/splash-screen.jpg"></p> <h3>Sets an address-bar theme color</h3> <p>اگر بعضی از وبسایت‌ها یا وب‌اپ‌ها را در مرورگر موبایل باز کنید، رنگ نوار بالایی مرورگر به رنگ تنظیم شده‌ای تغییر می‌کند. شاید از نظر ما  رنگ تم وب‌اپ تاثیر زیادی نداشته باشد اما در آزمون Lighthouse اهمیت دارد.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-53162" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20467'%3E%3C/svg%3E" alt="" width="800" height="467" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/Address-Bar-Color-Change-Browser.jpg"></p> <h3>Content is not sized correctly for the viewport</h3> <p>اندازۀ محتوایی که دیده می‌شود باید با صفحه‌ای که کاربر استفاده می‌کند مطابقت داشته باشد. پهنای صفحه باید با پهنای <strong>viewport</strong> یکسان باشد.</p> <p>علاوه بر این باید تگ‌های viewport به درستی تنظیم شوند تا نسخۀ موبایل در مرورگرهای موبایلی نمایش داده شود؛ در غیر اینصورت مرورگر نسخه دسکتاپ را باز می‌کند که محتوای آن قابل خواندن و پیمایش نیست.</p> <h3>Contains some content when JavaScript is not available</h3> <p>بخشی از استراتژی‌ توسعه وب اپلیکیشن‌های پیشرونده این است که توسعه‌دهنگان مطمئن شوند که سرویس یا محتوای آنها در دسترس همه افراد باشد. یک مشکل بزرگ در این راه طراحی‌های سنگین و پیچیده مبتنی بر جاوااسکریپت و CSSاست. این نوع طراحی باعث می‌شود وب‌سایت یا اپلیکیشن در شرایط نامتعارف مثل سرعت پایین اینترنت یا ضعف سخت‌افزاری دستگاه‌ها به راحتی قابل استفاده نباشد.</p> <p>در آزمون لاست هاوس جاوااسکریپت غیرفعال می‌شود تا صفحه با HTML بارگذاری شود. اگر صفحه بدون محتوا باشد این هشدار در گزارش اعلام می‌شود. در واقع بخشی از محتوا باید بدون جاوااسکریپت قابل مشاهده باشد.</p> <h3>Site works cross-browser</h3> <p>وبسایت‌ها باید در انواع مرورگرها قابل مشاهده و تعامل باشند. هر وب‌سایت یا اپلیکیشنی را که توسعه می‌دهید در مرورگرهای کروم، فایرفاکس و سافاری که تست کنید.</p> <h3>Page transitions don’t feel like they block on the network</h3> <p>جابجایی در صفحه‌ها و تعامل با اپلیکیشن باید ملموس باشد. یعنی حتی در سرعت‌های پایین اینترنت وقتی کاربر روی دکمه‌ای کلیک کرد یا صفحه‌ای را باز کرد نشانگری وجود داشته باشد که کاربر متوجه شود. اگر بارگذاری صفحه‌ها به اندازه کافی سریع نیست، یک نشانگر بارگذاری برای این که کاربر متوجه شود سایت شما به تعامل واکنش نشان داد کافی است.</p> <h3>Each page has a URL</h3> <p>هر صفحه باید یک آدرس (URL) منحصر به فرد داشته باشد. لینک منحصر به فرد به کاربران کمک می‌کند بتوانند دوباره به طور مستقیم به محتوای مورد نظر دسترسی داشته باشند یا بتوانند آن را در شبکه‌های اجتماعی به اشتراک بگذارند.</p> <h2>آزمون دسترسی‌پذیری (Accessibility) در Lighthouse</h2> <p>آیا همۀ کاربران می‌توانند خیلی راحت به محتوای سایت شما دسترسی داشته باشند؟ آیا استانداردهای لازم برای کاربران کم‌بینا، نابینا، ناشنوا و کم‌توان رعایت شده است؟ همه این موارد در آزمون <strong>دسترسی‌پذیری (Accessibility)</strong> بررسی می‌شود.</p> <p>اگر شما هم مثل اکثریت جامعه جزو انسان‌های سالم و توانمندی کامل هستید شاید این سوال را مطرح کنید که افراد کم‌توان چطور از اینترنت استفاده می‌کنند؟</p> <p>این افراد با کمک ابزارهای موجود و در موارد خاص با چند وسیله که همیشه همراهشان هست از رایانه و اینترنت استفاده کنند. برای مثال، افزونه‌ها و نرم افزاهای صفحه‌خوان (screen reader) متن‌ها را برای افراد نابینا تبدیل به صوت می‌کنند و درباره عناصر موجود در هر صفحه توضیح می‌دهند. یا افراد کم‌بینا می‌توانند با تغییر کنتراست، رنگ و اندازۀ نوشته‌ها راحت‌تر از اینترنت استفاده کنند.</p> <p>با این که در چند سال گذشته تغییرات خوبی در فراهم کردن امکانات لازم انجام شده است اما هنوز هم این افراد مشکلات زیادی دارند. طراحان وبسایت‌ها باید استانداردهایی را رعایت کنند تا همه با هر سطحی از توانمندی بتوانند از آن استفاده کنند.</p> <p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-56664" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20482%20358'%3E%3C/svg%3E" alt="دسترسی پذیری سایت" width="482" height="358" data-lazy-src="https://www.novin.com/wp-content/uploads/2019/10/web-accessibility.jpg">یک مثال ساده این مشکلات احتمالی را روشن می‌کند. فرض کنید فردی دچار معلولیت حرکت دست است و استفاده از موس برای او امکان‌پذیر نیست اما می‌تواند از صفحه‌کلید استفاد کند.</p> <p>اگر وب‌سایتی استانداردها و نکات دسترسی‌پذیری از طریق صفحه‌کلید را رعایت نکرده باشد، یک کار خیلی ساده از نظر افراد سالم مثل پر کردن فرم یا رفتن به صفحۀ بعدی با موس برای فرد کم‌توان غیرممکن می‌شود.</p> <h2>نکاتی که باید در طراحی وبسایت برای افراد کم‌توان رعایت شود</h2> <p>به صورت کلی انجام این چند کار می‌تواند تا حد زیادی دسترسی‌پذیری سایتتان را بهتر کند:</p> <ul> <li>بهینه‌سازی صفحه و عناصر مختلف برای تشخیص آسان توسط ابزارهای صفحه‌خوان</li> <li>افزودن توضیحات نوشتاری برای عناصر صوتی و توضیحات نوشتاری برای عناصر تصویری</li> <li>بهینه‌سازی یا حذف کردن موانع کاربری آسان</li> <li>تصحیح رنگ‌ها</li> <li>قرار دادن کدهایی در طراحی صفحه که به دسترسی‌پذیری کمک می‌کنند</li> </ul> <p>اعمال همۀ این نکات توسط طراحان وب‌سایت انجام می‌شود و با توجه به تعداد زیاد نکات و تخصصی بودن هرکدام، فقط منابع آموزشی و راهنماهای موردنیاز را معرفی می‌کنیم. در این منابع که معرفی شده، درباره همۀ نکات دسترسی‌پذیری در آزمون Lighthouse توضیح داده شده است. با نتایج گزارش دسترسی‌پذیری می‌توانید همه مشکلات احتمالی را پیدا کنید و تغییرات موردنیاز را اعمال کنید.</p> <p><a href="https://web.dev/lighthouse-accessibility" target="_blank" rel="noopener noreferrer">راهنمای تشریحی درباره گزارش دسترسی‌پذیری</a></p> <p><a href="https://developers.google.com/web/fundamentals/accessibility/" target="_blank" rel="noopener noreferrer">مبانی و راهنمای نوشتاری توسعه برای افراد کم‌توان</a></p> <p><a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g" target="_blank" rel="noopener noreferrer">کانال A11ycasts برای آموزش طراحی دسترسی‌پذیر</a></p> <p><a href="https://www.udacity.com/course/web-accessibility--ud891" target="_blank" rel="noopener noreferrer">دورۀ رایگان یوداسیتی با موضوع طراحی دسترسی‌پذیر</a></p> <h2>رسیدیم به آخر …</h2> <p>لایت هاوس یا فانوس دریایی گوگل یک ابزار در حال توسعه است و هر چند وقت یکبار تست‌ها و گزارش‌های جدیدی به آن اضافه می‌شود. هر چند بسیاری از موارد این گزارش تخصصی و پیچیده هستند، اما درک حداقل‌ها برای هر کسی که به نوعی با وبسایت‌ها و وب‌اپلیکیشن‌ها سروکار دارد، مفید خواهد بود.</p> <p>صاحب یک وب‌سایت که پیش از این فکر می‌کرد وب‌سایتش خیلی خوب کار می‌کند، با یک تست لایت هاوس متوجه خواهد شد چه مشکلاتی دارد؛ پس از طراح سایتش می‌خواهد که آنها را رفع کند و اگر هم یک طراح حرفه‌ای هستید پس بهتر است در هر پروژه‌ای به این نکات ریز و درست دقت کنید تا نتیجه کار مطابق برترین استانداردهای روز باشد.</p> <p>اگر سوالی درباره هر کدام از بخش‌ها داشتید حتماً برای ما بنویسید تا در اولین فرصت پاسخ دهیم.</p> </p></div> </div><!-- .entry-content --> </div> </div> </article><!-- #post --> <div class="wd-single-footer"></div> <div class="wd-page-nav"> <div class="wd-page-nav-btn prev-btn"> <a href="https://u90.ir/2023/08/01/%d8%b1%d9%be%d9%88%d8%b1%d8%aa%d8%a7%da%98-%d8%a2%da%af%d9%87%db%8c-%d8%b1%d8%a7%db%8c%da%af%d8%a7%d9%86-%d9%85%da%af%d9%87-%d8%af%d8%a7%d8%b1%db%8c%d9%85%d8%9f/"> <span class="wd-label">بعدی</span> <span class="wd-entities-title">رپورتاژ آگهی رایگان! مگه داریم؟</span> <span class="wd-page-nav-icon"></span> </a> </div> <a href="https://u90.ir/%d9%85%d8%ac%d9%84%d9%87/" class="back-to-archive wd-tooltip">Back to list</a> <div class="wd-page-nav-btn next-btn"> <a href="https://u90.ir/2023/08/01/%d9%85%d8%aa%d8%a7-%d8%aa%da%af-%d9%87%d8%a7-%da%86%d9%87-%d9%87%d8%b3%d8%aa%d9%86%d8%af-%d9%88-%da%86%d9%87-%d8%a7%d9%87%d9%85%db%8c%d8%aa%db%8c-%d8%af%d8%b1-%d8%b3%d8%a6%d9%88-%d8%af%d8%a7%d8%b1/"> <span class="wd-label">قبلی</span> <span class="wd-entities-title">متا تگ ها چه هستند و چه اهمیتی در سئو دارند؟</span> <span class="wd-page-nav-icon"></span> </a> </div> </div> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">دیدگاهتان را بنویسید <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2023/08/01/google-lighthouse-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D9%85%D9%84-%D8%A7%D8%B2-%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%DB%B1%DB%B0%DB%B0/#respond" style="display:none;">لغو پاسخ</a></small></h3><form action="https://u90.ir/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">نشانی ایمیل شما منتشر نخواهد شد.</span> <span class="required-field-message">بخش‌های موردنیاز علامت‌گذاری شده‌اند <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">دیدگاه <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">نام <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">ایمیل <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">وب‌ سایت</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی می‌نویسم.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="فرستادن دیدگاه" /> <input type='hidden' name='comment_post_ID' value='16666' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </div><!-- .site-content --> </div><!-- .main-page-wrapper --> </div> <!-- end row --> </div> <!-- end container --> <footer class="footer-container color-scheme-light"> <div class="container main-footer"> <link rel="stylesheet" id="elementor-post-26276-css" href="https://u90.ir/wp-content/uploads/elementor/css/post-26276.css?ver=1702366907" type="text/css" media="all"> <div data-elementor-type="wp-post" data-elementor-id="26276" class="elementor elementor-26276"> <section class="elementor-section elementor-top-section elementor-element elementor-element-f41b1f6 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default wd-section-disabled" data-id="f41b1f6" data-element_type="section" data-settings="{"stretch_section":"section-stretched"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-16 elementor-top-column elementor-element elementor-element-dc59592" data-id="dc59592" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-6b29568 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor" data-id="6b29568" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.16.0 - 17-10-2023 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:right;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p style="text-align: right;"><a href="https://u90.ir/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%88-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c/">طراحی سایت فروشگاهی</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesigntemplate/">طراحی سایت شرکتی</a></p><p style="text-align: right;"><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b4%d8%b1%da%a9%d8%aa%db%8c-%d9%88-%d8%ae%d8%af%d9%85%d8%a7%d8%aa%db%8c/">طراحی سایت خدماتی</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c/">طراحی سایت آموزشی</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesign/?Type=%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C%20%D8%B3%D8%A7%DB%8C%D8%AA%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C%20%D9%88%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86">طراحی سایت آموزش آنلاین</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%ae%d8%a8%d8%b1%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b3%d8%a7%db%8c%d8%aa-%d8%ae%d8%a8%d8%b1%db%8c/">طراحی سایت خبری</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/03/%d9%87%d9%85%d9%87-%da%86%db%8c%d8%b2-%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88%d8%b1%d8%b2%d8%b4%db%8c/">طراحی سایت خبر ورزشی</a></p><p style="text-align: right;"><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d9%85%d9%84%d8%a7%da%a9/">طراحی سایت املاک</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesign/?Type=%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C%20%D8%B3%D8%A7%DB%8C%D8%AA%20%D8%B1%D8%B2%D8%B1%D9%88%D8%A7%D8%B3%DB%8C%D9%88%D9%86%20%D9%88%20%D9%86%D9%88%D8%A8%D8%AA%20%D8%AF%D9%87%DB%8C&ReserveType=%D8%B3%D8%A7%DB%8C%D8%AA%20%D9%86%D9%88%D8%A8%D8%AA%20%D8%AF%D9%87%DB%8C%20%D9%BE%D8%B2%D8%B4%DA%A9%D8%A7%D9%86">طراحی سایت پزشکی</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/15/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86%db%8c-%d9%85%d8%b9%d9%85%d8%a7%d8%b1%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/">طراحی سایت معماری</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/15/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b2%db%8c%d8%a8%d8%a7%db%8c%db%8c%d8%b3%d8%a7%db%8c%d8%aa-%d8%b2%db%8c%d8%a8%d8%a7%db%8c%db%8c/">طراحی سایت سالن زیبایی</a></p> </div> </div> </div> </div> <div class="elementor-column elementor-col-16 elementor-top-column elementor-element elementor-element-852cca6" data-id="852cca6" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-cbc0d84 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor" data-id="cbc0d84" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p style="text-align: right;"><a href="https://u90.ir/webdesigntemplate/">قیمت طراحی سایت</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87/">طراحی سایت ارزان</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesign/">محاسبه آنلاین هزینه طراحی سایت اختصاصی</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesigntemplate/">طراحی وب سایت های قالب آماده</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/15/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%d9%85%d8%a7%d9%86%d9%87-%d9%be%db%8c%d8%a7%d9%85%da%a9%db%8c/">طراحی سایت پنل اس ام اس (پیامک)</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/08/crm-%d8%b9%d9%85%d9%84%db%8c%d8%a7%d8%aa%db%8c-%da%86%db%8c%d8%b3%d8%aa%d8%9f-%d8%a8%d8%a7-%d8%a7%db%8c%d9%86-%d8%a8%d8%ae%d8%b4-%d8%a7%d8%b2-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%a7%d8%b1%d8%aa/">طراحی سایت همراه خدمات CRM</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesigntemplate/">تعرفه ساخت سایت</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/17/%d9%87%d9%85%d9%87-%da%86%db%8c%d8%b2-%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88%da%a9%d8%a7%d9%84%d8%aa/">طراحی سایت وکالت</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%aa%d8%ac%d9%87%db%8c%d8%b2%d8%a7%d8%aa-%d9%be%d8%b2%d8%b4%da%a9%db%8c-%d9%88-%d9%84%d9%88%d8%a7%d8%b2%d9%85-%d9%be%d8%b2%d8%b4%da%a9%db%8c/">طراحی سایت داروخانه</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesigntemplate/">سایت ساز</a></p><p style="text-align: right;"><a href="https://u90.ir/%d9%85%d8%ac%d9%84%d9%87/">آموزش طراحی سایت</a></p> </div> </div> </div> </div> <div class="elementor-column elementor-col-16 elementor-top-column elementor-element elementor-element-f641597" data-id="f641597" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-70de9a9 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor" data-id="70de9a9" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p style="text-align: right;"><a href="https://u90.ir/2023/08/08/erp-%da%86%db%8c%d8%b3%d8%aa-%d9%88-%da%86%d9%87-%d8%aa%d9%81%d8%a7%d9%88%d8%aa%db%8c-%d8%a8%d8%a7-bpms-%d8%af%d8%a7%d8%b1%d8%af%d8%9f/">طراحی سایت همراه خدمات ERP</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/02/%d8%a8%d8%a7%d8%b2%d8%a7%d8%b1%db%8c%d8%a7%d8%a8%db%8c-%d8%b4%d8%a8%da%a9%d9%87-%d9%87%d8%a7%db%8c-%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%db%8c-smm-%da%86%db%8c%d8%b3%d8%aa%d8%9f-%d8%aa%da%a9%d9%86/">طراحی سایت بازاریابی شبکه ای</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b3%d8%a7%db%8c%d8%aa-%d8%aa%d8%ae%d8%b5%d8%b5%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%da%a9%d9%88%d8%af%da%a9%d8%a7%d9%86/">طراحی سایت کودکان</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesigntemplate/">طراحی سایت نمایشگاهی</a></p><p style="text-align: right;"><a href="https://u90.ir/%d9%85%d8%ac%d9%84%d9%87/">طراحی سایت داینامیک</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/17/%d9%81%d8%a7%da%a9%d8%aa%d9%88%d8%b1%d9%87%d8%a7%db%8c-%d8%b1%d8%aa%d8%a8%d9%87-%d8%a8%d9%86%d8%af%db%8c-%da%af%d9%88%da%af%d9%84/">افزایش رتبه سایت</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d9%85%d8%b4%d8%a7%d9%88%d8%b1-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%b3%d8%a6%d9%88-%d8%ae%d8%af%d9%85%d8%a7%d8%aa-%d9%85%d8%b4%d8%a7%d9%88%d8%b1%d9%87-%d8%b3%d8%a6%d9%88/">خدمات سئو</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/17/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%da%af%d8%b1%d8%af%d8%b4%da%af%d8%b1%db%8c/">طراحی سایت گردشگری و بوم گردی</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/08/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%da%86%db%8c%d8%b3%d8%aa-%d9%88-%da%86%d8%b1%d8%a7-%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%af%d8%a7%d8%b1%d8%af%d8%9f/">طراحی سایت ریسپانسیو (واکنش گرا)</a></p><p style="text-align: right;"><a href="https://u90.ir/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%88-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c/">فروشگاه ساز</a></p><p style="text-align: right;"><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%86%d9%88%d8%a8%d8%aa-%d8%af%d9%87%db%8c-%d9%88-%d8%b1%d8%b2%d8%b1%d9%88/">طراحی سایت رزرواسیون و نوبت دهی</a></p> </div> </div> </div> </div> <div class="elementor-column elementor-col-16 elementor-top-column elementor-element elementor-element-d281d4a" data-id="d281d4a" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-ef2d7e9 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor" data-id="ef2d7e9" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p style="text-align: right;"><a href="https://u90.ir/webdesign/?Type=%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C%20%D8%B3%D8%A7%DB%8C%D8%AA%20%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87%DB%8C&ShopType=%D8%A8%D9%87%D8%AF%D8%A7%D8%B4%D8%AA%DB%8C%20%D9%88%20%D8%A2%D8%B1%D8%A7%DB%8C%D8%B4%DB%8C">طراحی سایت آرایشی و بهداشتی</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%a8%d8%a7-%d9%81%d8%b1%d9%88%d8%b4-%d8%a2%d9%86%d9%84%d8%a7%db%8c%d9%86-%d9%85%d8%a8%d9%84%d9%85%d8%a7%d9%86-%d9%88-%d8%af%da%a9%d9%88%d8%b1%d8%a7%d8%b3%db%8c%d9%88%d9%86%d8%8c-%d8%af%d8%b1%d8%a2/">طراحی سایت دکوراسیون داخلی</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b1%d8%b2%d8%b1%d9%88%d8%a7%d8%b3%db%8c%d9%88%d9%86-%d9%87%d8%aa%d9%84/">طراحی سایت هتلی</a></p><p style="text-align: right;"><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%86%d9%88%d8%a8%d8%aa-%d8%af%d9%87%db%8c-%d9%88-%d8%b1%d8%b2%d8%b1%d9%88/">طراحی سایت بلیط فروشی و آژانس هواپیمایی</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b1%d8%b3%d8%aa%d9%88%d8%b1%d8%a7%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%81%d8%b3%d8%aa-%d9%81%d9%88%d8%af/">طراحی سایت کافه و رستوران</a></p><p style="text-align: right;"><a href="https://u90.ir/webdesign/?Type=%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C%20%D8%B3%D8%A7%DB%8C%D8%AA%20%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87%DB%8C&ShopType=%DA%A9%D8%A7%D9%84%D8%A7%DB%8C%20%D8%AF%DB%8C%D8%AC%DB%8C%D8%AA%D8%A7%D9%84">طراحی سایت فروشگاه دیجیتال</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/01/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%da%a9%d8%a7%d8%aa%d8%a7%d9%84%d9%88%da%af-%d9%88-%d8%a8%d8%b1%d9%88%d8%b4%d9%88%d8%b1%d8%9b-%db%b2%db%b5-%d9%86%da%a9%d8%aa%d9%87-%da%a9%d9%87-%da%a9%d8%a7%d8%aa%d8%a7/">طراحی سایت کاتالوگ</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/01/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ac%d8%a7%d9%85%d8%b9-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa-2/">طراحی سایت فروشگاه پوشاک</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/16/%d8%b1%d8%a7%d9%87%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c-%d9%84%d9%88%d8%a7%d8%b2%d9%85-%d8%ae%d8%a7/">طراحی سایت فروشگاه لوازم خانه و آشپزخانه</a></p><p style="text-align: right;"><a href="https://u90.ir/2023/08/02/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%da%86%d9%86%d8%af-%d9%81%d8%b1%d9%88%d8%b4%d9%86%d8%af%da%af%db%8c/">طراحی سایت چند فروشندگی</a></p> </div> </div> </div> </div> <div class="elementor-column elementor-col-16 elementor-top-column elementor-element elementor-element-833e197" data-id="833e197" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-c0dfad5 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html" data-id="c0dfad5" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=373326&Code=ZgN4LUsiPvtEe0TqqnCZ"><img referrerpolicy="origin" src="https://u90.ir/wp-content/uploads/2023/08/enamad-logo-150x150.png" alt="" style="cursor:pointer" id="ZgN4LUsiPvtEe0TqqnCZ"></a> </div> </div> <div class="elementor-element elementor-element-76c6086 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html" data-id="76c6086" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <img referrerpolicy='origin' id = 'rgvjfukzesgtrgvjrgvjjxlz' style = 'cursor:pointer' onclick = 'window.open("https://logo.samandehi.ir/Verify.aspx?id=360331&p=xlaogvkaobpdxlaoxlaorfth", "Popup","toolbar=no, scrollbars=no, location=no, statusbar=no, menubar=no, resizable=0, width=450, height=630, top=30")' alt = 'logo-samandehi' src = 'https://u90.ir/wp-content/uploads/2023/08/logo-neshanmeli.png' /> </div> </div> </div> </div> <div class="elementor-column elementor-col-16 elementor-top-column elementor-element elementor-element-fe63d69" data-id="fe63d69" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-c9b6708 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor" data-id="c9b6708" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <h4 style="text-align: center;"><span style="color: #993366;">آدرس</span></h4><p style="text-align: center;">دفتر مرکزی : مازندران سرخرود برج سفید طبقه 18</p><p style="text-align: center;">دفتر پشتیبانی : مازندران آمل بلوار ولایت دریای 43</p><p style="text-align: center;">دفتر امارات : شارجه المریجا بلوک 7 واحد 31</p><h4 style="text-align: center;"><span style="color: #993366;">تلفن</span></h4><p style="text-align: center;">پشتیبانی ایران : 44889187 011</p><p style="text-align: center;">پشتیبانی امارات : 971555050290+</p><p style="text-align: center;">مدیریت :   <a href="tel:09114969813">09114969813</a></p> </div> </div> </div> </div> </div> </section> </div> </div> <div class="copyrights-wrapper copyrights-centered"> <div class="container"> <div class="min-footer"> <div class="col-left set-cont-mb-s reset-last-child"> کلیه حقوق <a href="http://U90.ir"><strong>سیتی سایت</strong></a> متعلق به <a href="http://U90.ir"><strong>داده گستران عصر آریا </strong></a> می باشد. </div> </div> </div> </div> </footer> </div> <!-- end wrapper --> <div class="wd-close-side wd-fill"></div> <a href="#" class="scrollToTop" aria-label="Scroll to top button"></a> <div class="mobile-nav wd-side-hidden wd-left color-scheme-light"><ul id="menu-menu-1" class="mobile-pages-menu wd-nav wd-nav-mobile wd-active"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24201 item-level-0" ><a href="https://u90.ir/webdesign/" class="woodmart-nav-link"><span class="nav-link-text">طراحی سایت اختصاصی</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23648 item-level-0" ><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b4%d8%b1%da%a9%d8%aa%db%8c-%d9%88-%d8%ae%d8%af%d9%85%d8%a7%d8%aa%db%8c/" class="woodmart-nav-link"><span class="nav-link-text">سایت شرکتی و خدماتی</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20332 item-level-0" ><a href="https://u90.ir/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%88-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c/" class="woodmart-nav-link"><span class="nav-link-text">سایت فروشگاهی</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20394 item-level-0" ><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%86%d9%88%d8%a8%d8%aa-%d8%af%d9%87%db%8c-%d9%88-%d8%b1%d8%b2%d8%b1%d9%88/" class="woodmart-nav-link"><span class="nav-link-text">سایت نوبت دهی و رزرواسیون</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21982 item-level-0" ><a href="https://u90.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d9%85%d9%84%d8%a7%da%a9/" class="woodmart-nav-link"><span class="nav-link-text">سایت املاک</span></a></li> </ul> </div><!--END MOBILE-NAV--> <div class="wd-toolbar wd-toolbar-label-show"> <div class="wd-toolbar-link wd-tools-element wd-toolbar-item wd-tools-custom-icon"> <a href="https://u90.ir/webdesigntemplate/"> <span class="wd-toolbar-icon wd-tools-icon wd-icon wd-custom-icon"> <img width="100" height="100" src="https://u90.ir/wp-content/uploads/2023/08/icons8-website-100-1.png" class="attachment-thumbnail size-thumbnail" alt="انتخاب قالب طراحی سایت" decoding="async" loading="lazy" /> </span> <span class="wd-toolbar-label"> انتخاب سایت </span> </a> </div> <div class="wd-toolbar-link wd-tools-element wd-toolbar-item wd-tools-custom-icon"> <a href="https://u90.ir/webdesign/"> <span class="wd-toolbar-icon wd-tools-icon wd-icon wd-custom-icon"> <img width="100" height="100" src="https://u90.ir/wp-content/uploads/2023/08/icons8-windows-10-personalization-100.png" class="attachment-thumbnail size-thumbnail" alt="طراحی سایت اختصاصی" decoding="async" loading="lazy" /> </span> <span class="wd-toolbar-label"> سایت اختصاصی </span> </a> </div> </div> <style id='woodmart-inline-css-inline-css' type='text/css'> #wd-67582739d0dab a {background-color:rgba(101, 255, 0,0.74);}#wd-67582739d0dab a:hover {background-color:;} #wd-67582739d2a33 a {background-color:rgba(101, 255, 0,0.7);}#wd-67582739d2a33 a:hover {background-color:;} </style> <script type="text/javascript" id="chaty-js-extra"> /* <![CDATA[ */ var chaty_settings = {"chaty_widgets":[{"id":0,"identifier":0,"settings":{"cta_type":"simple-view","cta_body":"","cta_head":"","cta_head_bg_color":"","cta_head_text_color":"","show_close_button":"yes","position":"right","custom_position":1,"bottom_spacing":"50","side_spacing":"25","icon_view":"vertical","default_state":"click","cta_text":"","cta_text_color":"#333333","cta_bg_color":"#ffffff","show_cta":"first_click","is_pending_mesg_enabled":"off","pending_mesg_count":"1","pending_mesg_count_color":"#ffffff","pending_mesg_count_bgcolor":"#dd0000","widget_icon":"chat-db","widget_icon_url":"","widget_fa_icon":"","font_family":"","widget_size":"54","custom_widget_size":"54","is_google_analytics_enabled":"off","close_text":"","widget_color":"#49e670","widget_icon_color":"#ffffff","widget_rgb_color":"73,230,112","has_custom_css":0,"custom_css":"","widget_token":"8dd14f5a01","widget_index":"","attention_effect":""},"triggers":{"has_time_delay":1,"time_delay":0,"exit_intent":0,"has_display_after_page_scroll":0,"display_after_page_scroll":0,"auto_hide_widget":0,"hide_after":0,"show_on_pages_rules":[],"time_diff":0,"has_date_scheduling_rules":0,"date_scheduling_rules":{"start_date_time":"","end_date_time":""},"date_scheduling_rules_timezone":0,"day_hours_scheduling_rules_timezone":0,"has_day_hours_scheduling_rules":0,"day_hours_scheduling_rules":[],"day_time_diff":"","show_on_direct_visit":0,"show_on_referrer_social_network":0,"show_on_referrer_search_engines":0,"show_on_referrer_google_ads":0,"show_on_referrer_urls":[],"has_show_on_specific_referrer_urls":0,"has_traffic_source":0,"has_countries":0,"countries":[],"has_target_rules":0},"channels":[{"channel":"Phone","value":"+989114969813","hover_text":"\u062a\u0645\u0627\u0633","svg_icon":"<svg width=\"39\" height=\"39\" viewBox=\"0 0 39 39\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle class=\"color-element\" cx=\"19.4395\" cy=\"19.4395\" r=\"19.4395\" fill=\"#03E78B\"\/><path d=\"M19.3929 14.9176C17.752 14.7684 16.2602 14.3209 14.7684 13.7242C14.0226 13.4259 13.1275 13.7242 12.8292 14.4701L11.7849 16.2602C8.65222 14.6193 6.11623 11.9341 4.47529 8.95057L6.41458 7.90634C7.16046 7.60799 7.45881 6.71293 7.16046 5.96705C6.56375 4.47529 6.11623 2.83435 5.96705 1.34259C5.96705 0.596704 5.22117 0 4.47529 0H0.745882C0.298353 0 5.69062e-07 0.298352 5.69062e-07 0.745881C5.69062e-07 3.72941 0.596704 6.71293 1.93929 9.3981C3.87858 13.575 7.30964 16.8569 11.3374 18.7962C14.0226 20.1388 17.0061 20.7355 19.9896 20.7355C20.4371 20.7355 20.7355 20.4371 20.7355 19.9896V16.4094C20.7355 15.5143 20.1388 14.9176 19.3929 14.9176Z\" transform=\"translate(9.07179 9.07178)\" fill=\"white\"\/><\/svg>","is_desktop":1,"is_mobile":1,"icon_color":"#03E78B","icon_rgb_color":"3,231,139","channel_type":"Phone","custom_image_url":"","order":"","pre_set_message":"","is_use_web_version":"1","is_open_new_tab":"1","is_default_open":"0","has_welcome_message":"0","chat_welcome_message":"","qr_code_image_url":"","mail_subject":"","channel_account_type":"personal","contact_form_settings":[],"contact_fields":[],"url":"tel:+989114969813","mobile_target":"","desktop_target":"","target":"","is_agent":"0","agent_data":[],"header_text":"","header_sub_text":"","header_bg_color":"","header_text_color":"","widget_token":"8dd14f5a01","widget_index":"","click_event":"","is_agent_desktop":"0","is_agent_mobile":"0","v2_site_key":"","v3_site_key":"","enable_recaptcha":"0","hide_recaptcha_badge":"no"},{"channel":"SMS","value":"+989114969813","hover_text":"\u067e\u06cc\u0627\u0645","svg_icon":"<svg width=\"39\" height=\"39\" viewBox=\"0 0 39 39\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle class=\"color-element\" cx=\"19.4395\" cy=\"19.4395\" r=\"19.4395\" fill=\"#FF549C\"\/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.60298 0H16.9194C18.351 0 19.5224 1.19321 19.5224 2.65158V14.5838C19.5224 16.0421 18.351 17.2354 16.9194 17.2354H7.4185L3.64418 20.4173C3.51402 20.5499 3.38388 20.5499 3.25372 20.5499H2.99344C2.73314 20.4173 2.60298 20.1521 2.60298 19.887V17.2354C1.17134 17.2354 0 16.0421 0 14.5838V2.65158C0 1.19321 1.17134 0 2.60298 0ZM2.60316 11.2696C2.60316 11.6673 2.86346 11.9325 3.25391 11.9325H4.5554C5.5966 11.9325 6.50764 11.0044 6.50764 9.94376C6.50764 8.88312 5.5966 7.95505 4.5554 7.95505C4.16496 7.95505 3.90465 7.68991 3.90465 7.29218C3.90465 6.89441 4.16496 6.62927 4.5554 6.62927H5.85689C6.24733 6.62927 6.50764 6.36411 6.50764 5.96637C6.50764 5.56863 6.24733 5.30347 5.85689 5.30347H4.5554C3.51421 5.30347 2.60316 6.23154 2.60316 7.29218C2.60316 8.35281 3.51421 9.28085 4.5554 9.28085C4.94585 9.28085 5.20613 9.54602 5.20613 9.94376C5.20613 10.3415 4.94585 10.6067 4.5554 10.6067H3.25391C2.86346 10.6067 2.60316 10.8718 2.60316 11.2696ZM14.9678 11.9325H13.6664C13.2759 11.9325 13.0156 11.6673 13.0156 11.2696C13.0156 10.8718 13.2759 10.6067 13.6664 10.6067H14.9678C15.3583 10.6067 15.6186 10.3415 15.6186 9.94376C15.6186 9.54602 15.3583 9.28085 14.9678 9.28085C13.9267 9.28085 13.0156 8.35281 13.0156 7.29218C13.0156 6.23154 13.9267 5.30347 14.9678 5.30347H16.2693C16.6598 5.30347 16.9201 5.56863 16.9201 5.96637C16.9201 6.36411 16.6598 6.62927 16.2693 6.62927H14.9678C14.5774 6.62927 14.3171 6.89441 14.3171 7.29218C14.3171 7.68991 14.5774 7.95505 14.9678 7.95505C16.009 7.95505 16.9201 8.88312 16.9201 9.94376C16.9201 11.0044 16.009 11.9325 14.9678 11.9325ZM10.4126 11.2697C10.4126 11.6674 10.6729 11.9326 11.0633 11.9326C11.4538 11.9326 11.7141 11.6674 11.8442 11.2697V5.96649C11.8442 5.70135 11.5839 5.43619 11.3236 5.30362C10.9332 5.30362 10.6729 5.43619 10.5427 5.70135L9.76186 7.15973L8.98094 5.70135C8.85081 5.43619 8.46034 5.17102 8.20006 5.30362C7.93977 5.43619 7.67946 5.70135 7.67946 5.96649V11.2697C7.67946 11.6674 7.93977 11.9326 8.33022 11.9326C8.72066 11.9326 8.98094 11.6674 8.98094 11.2697V8.75067L9.1111 8.88327C9.37138 9.28101 10.0221 9.28101 10.2825 8.88327L10.4126 8.75067V11.2697Z\" transform=\"translate(9.67801 10.4601)\" fill=\"white\"\/><\/svg>","is_desktop":1,"is_mobile":1,"icon_color":"#FF549C","icon_rgb_color":"255,84,156","channel_type":"SMS","custom_image_url":"","order":"","pre_set_message":"","is_use_web_version":"1","is_open_new_tab":"1","is_default_open":"0","has_welcome_message":"0","chat_welcome_message":"","qr_code_image_url":"","mail_subject":"","channel_account_type":"personal","contact_form_settings":[],"contact_fields":[],"url":"sms:+989114969813","mobile_target":"","desktop_target":"","target":"","is_agent":"0","agent_data":[],"header_text":"","header_sub_text":"","header_bg_color":"","header_text_color":"","widget_token":"8dd14f5a01","widget_index":"","click_event":"","is_agent_desktop":"0","is_agent_mobile":"0","v2_site_key":"","v3_site_key":"","enable_recaptcha":"0","hide_recaptcha_badge":"no"},{"channel":"Whatsapp","value":"+989114969813","hover_text":"\u0648\u0627\u062a\u0633\u0627\u067e","svg_icon":"<svg width=\"39\" height=\"39\" viewBox=\"0 0 39 39\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle class=\"color-element\" cx=\"19.4395\" cy=\"19.4395\" r=\"19.4395\" fill=\"#49E670\"\/><path d=\"M12.9821 10.1115C12.7029 10.7767 11.5862 11.442 10.7486 11.575C10.1902 11.7081 9.35269 11.8411 6.84003 10.7767C3.48981 9.44628 1.39593 6.25317 1.25634 6.12012C1.11674 5.85403 2.13001e-06 4.39053 2.13001e-06 2.92702C2.13001e-06 1.46351 0.83755 0.665231 1.11673 0.399139C1.39592 0.133046 1.8147 1.01506e-06 2.23348 1.01506e-06C2.37307 1.01506e-06 2.51267 1.01506e-06 2.65226 1.01506e-06C2.93144 1.01506e-06 3.21063 -2.02219e-06 3.35022 0.532183C3.62941 1.19741 4.32736 2.66092 4.32736 2.79397C4.46696 2.92702 4.46696 3.19311 4.32736 3.32616C4.18777 3.59225 4.18777 3.59224 3.90858 3.85834C3.76899 3.99138 3.6294 4.12443 3.48981 4.39052C3.35022 4.52357 3.21063 4.78966 3.35022 5.05576C3.48981 5.32185 4.18777 6.38622 5.16491 7.18449C6.42125 8.24886 7.39839 8.51496 7.81717 8.78105C8.09636 8.91409 8.37554 8.9141 8.65472 8.648C8.93391 8.38191 9.21309 7.98277 9.49228 7.58363C9.77146 7.31754 10.0507 7.1845 10.3298 7.31754C10.609 7.45059 12.2841 8.11582 12.5633 8.38191C12.8425 8.51496 13.1217 8.648 13.1217 8.78105C13.1217 8.78105 13.1217 9.44628 12.9821 10.1115Z\" transform=\"translate(12.9597 12.9597)\" fill=\"#FAFAFA\"\/><path d=\"M0.196998 23.295L0.131434 23.4862L0.323216 23.4223L5.52771 21.6875C7.4273 22.8471 9.47325 23.4274 11.6637 23.4274C18.134 23.4274 23.4274 18.134 23.4274 11.6637C23.4274 5.19344 18.134 -0.1 11.6637 -0.1C5.19344 -0.1 -0.1 5.19344 -0.1 11.6637C-0.1 13.9996 0.624492 16.3352 1.93021 18.2398L0.196998 23.295ZM5.87658 19.8847L5.84025 19.8665L5.80154 19.8788L2.78138 20.8398L3.73978 17.9646L3.75932 17.906L3.71562 17.8623L3.43104 17.5777C2.27704 15.8437 1.55796 13.8245 1.55796 11.6637C1.55796 6.03288 6.03288 1.55796 11.6637 1.55796C17.2945 1.55796 21.7695 6.03288 21.7695 11.6637C21.7695 17.2945 17.2945 21.7695 11.6637 21.7695C9.64222 21.7695 7.76778 21.1921 6.18227 20.039L6.17557 20.0342L6.16817 20.0305L5.87658 19.8847Z\" transform=\"translate(7.7758 7.77582)\" fill=\"white\" stroke=\"white\" stroke-width=\"0.2\"\/><\/svg>","is_desktop":1,"is_mobile":1,"icon_color":"#49E670","icon_rgb_color":"73,230,112","channel_type":"Whatsapp","custom_image_url":"","order":"","pre_set_message":"","is_use_web_version":"0","is_open_new_tab":"1","is_default_open":"0","has_welcome_message":"0","chat_welcome_message":"<p>How can I help you? :)<\/p>","qr_code_image_url":"","mail_subject":"","channel_account_type":"personal","contact_form_settings":[],"contact_fields":[],"url":"https:\/\/wa.me\/+989114969813","mobile_target":"","desktop_target":"_blank","target":"_blank","is_agent":"0","agent_data":[],"header_text":"","header_sub_text":"","header_bg_color":"","header_text_color":"","widget_token":"8dd14f5a01","widget_index":"","click_event":"","is_agent_desktop":"0","is_agent_mobile":"0","v2_site_key":"","v3_site_key":"","enable_recaptcha":"0","hide_recaptcha_badge":"no"}]}],"ajax_url":"https:\/\/u90.ir\/wp-admin\/admin-ajax.php","data_analytics_settings":"on"}; /* ]]> */ </script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/chaty-pro/js/cht-front-script.min.js?ver=3.0.81694070085" id="chaty-js"></script> <script type="text/javascript" id="rtrar.appLocal-js-extra"> /* <![CDATA[ */ var rtafr = {"rules":""}; /* ]]> */ </script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/real-time-auto-find-and-replace/assets/js/rtafar.local.js?ver=1.5.5" id="rtrar.appLocal-js"></script> <script type="text/javascript" src="https://u90.ir/wp-includes/js/comment-reply.min.js?ver=6.7.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.16.6" id="elementor-webpack-runtime-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.16.6" id="elementor-frontend-modules-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2" id="elementor-waypoints-js"></script> <script type="text/javascript" src="https://u90.ir/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script type="text/javascript" id="elementor-frontend-js-before"> /* <![CDATA[ */ var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Facebook","shareOnTwitter":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Twitter","pinIt":"\u067e\u06cc\u0646 \u06a9\u0646\u06cc\u062f","download":"\u062f\u0627\u0646\u0644\u0648\u062f","downloadImage":"\u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631","fullscreen":"\u062a\u0645\u0627\u0645\u200c\u0635\u0641\u062d\u0647","zoom":"\u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc","share":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc","playVideo":"\u067e\u062e\u0634 \u0648\u06cc\u062f\u06cc\u0648","previous":"\u0642\u0628\u0644\u06cc","next":"\u0628\u0639\u062f\u06cc","close":"\u0628\u0633\u062a\u0646","a11yCarouselWrapperAriaLabel":"\u0686\u0631\u062e \u0641\u0644\u06a9 | \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0627\u0641\u0642\u06cc: \u0641\u0644\u0634 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a","a11yCarouselPrevSlideMessage":"\u0627\u0633\u0644\u0627\u06cc\u062f \u0642\u0628\u0644\u06cc","a11yCarouselNextSlideMessage":"\u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc","a11yCarouselFirstSlideMessage":"\u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0633\u062a","a11yCarouselLastSlideMessage":"\u0627\u06cc\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0633\u062a","a11yCarouselPaginationBulletMessage":"\u0631\u0641\u062a\u0646 \u0628\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f"},"is_rtl":true,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"\u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"\u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"\u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u062a\u0628\u0644\u062a","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"\u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u062a\u0628\u0644\u062a","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"\u0644\u067e \u062a\u0627\u067e","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"\u0635\u0641\u062d\u0647 \u0639\u0631\u06cc\u0636 (Widescreen)","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.16.6","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"additional_custom_breakpoints":true,"e_swiper_latest":true,"landing-pages":true,"e_global_styleguide":true},"urls":{"assets":"https:\/\/u90.ir\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"stretched_section_container":"#Wrapper","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":16666,"title":"Google%20Lighthouse%20%DA%86%DB%8C%D8%B3%D8%AA%D8%9F%20%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%DA%A9%D8%A7%D9%85%D9%84%20%D8%A7%D8%B2%20%D8%B5%D9%81%D8%B1%20%D8%AA%D8%A7%20%DB%B1%DB%B0%DB%B0%20%E2%80%93%20%D8%B3%DB%8C%D8%AA%DB%8C%20%D8%B3%D8%A7%DB%8C%D8%AA","excerpt":"\u06af\u0648\u06af\u0644 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0645\u06c0 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u060c \u062e\u062f\u0645\u0627\u062a \u06cc\u0627 \u0645\u062d\u0635\u0648\u0644 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f\u061f","featuredImage":"https:\/\/u90.ir\/wp-content\/uploads\/2023\/08\/google-lighthouse-da86db8cd8b3d8aad89f-d8b1d8a7d987d986d985d8a7db8c-daa9d8a7d985d984-d8a7d8b2-d8b5d981d8b1-d8aad8a7-dbb1dbb0dbb0_64c9018fd81c3.jpeg"}}; var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Facebook","shareOnTwitter":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Twitter","pinIt":"\u067e\u06cc\u0646 \u06a9\u0646\u06cc\u062f","download":"\u062f\u0627\u0646\u0644\u0648\u062f","downloadImage":"\u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631","fullscreen":"\u062a\u0645\u0627\u0645\u200c\u0635\u0641\u062d\u0647","zoom":"\u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc","share":"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc","playVideo":"\u067e\u062e\u0634 \u0648\u06cc\u062f\u06cc\u0648","previous":"\u0642\u0628\u0644\u06cc","next":"\u0628\u0639\u062f\u06cc","close":"\u0628\u0633\u062a\u0646","a11yCarouselWrapperAriaLabel":"\u0686\u0631\u062e \u0641\u0644\u06a9 | \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0627\u0641\u0642\u06cc: \u0641\u0644\u0634 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a","a11yCarouselPrevSlideMessage":"\u0627\u0633\u0644\u0627\u06cc\u062f \u0642\u0628\u0644\u06cc","a11yCarouselNextSlideMessage":"\u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc","a11yCarouselFirstSlideMessage":"\u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0633\u062a","a11yCarouselLastSlideMessage":"\u0627\u06cc\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0633\u062a","a11yCarouselPaginationBulletMessage":"\u0631\u0641\u062a\u0646 \u0628\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f"},"is_rtl":true,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"\u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"\u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"\u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u062a\u0628\u0644\u062a","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"\u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u062a\u0628\u0644\u062a","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"\u0644\u067e \u062a\u0627\u067e","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"\u0635\u0641\u062d\u0647 \u0639\u0631\u06cc\u0636 (Widescreen)","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.16.6","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"additional_custom_breakpoints":true,"e_swiper_latest":true,"landing-pages":true,"e_global_styleguide":true},"urls":{"assets":"https:\/\/u90.ir\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"stretched_section_container":"#Wrapper","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":16666,"title":"Google%20Lighthouse%20%DA%86%DB%8C%D8%B3%D8%AA%D8%9F%20%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%DA%A9%D8%A7%D9%85%D9%84%20%D8%A7%D8%B2%20%D8%B5%D9%81%D8%B1%20%D8%AA%D8%A7%20%DB%B1%DB%B0%DB%B0%20%E2%80%93%20%D8%B3%DB%8C%D8%AA%DB%8C%20%D8%B3%D8%A7%DB%8C%D8%AA","excerpt":"\u06af\u0648\u06af\u0644 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0645\u06c0 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u060c \u062e\u062f\u0645\u0627\u062a \u06cc\u0627 \u0645\u062d\u0635\u0648\u0644 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f\u061f","featuredImage":"https:\/\/u90.ir\/wp-content\/uploads\/2023\/08\/google-lighthouse-da86db8cd8b3d8aad89f-d8b1d8a7d987d986d985d8a7db8c-daa9d8a7d985d984-d8a7d8b2-d8b5d981d8b1-d8aad8a7-dbb1dbb0dbb0_64c9018fd81c3.jpeg"}}; /* ]]> */ </script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.16.6" id="elementor-frontend-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/libs/cookie.min.js?ver=7.2.5" id="wd-cookie-library-js"></script> <script type="text/javascript" id="woodmart-theme-js-extra"> /* <![CDATA[ */ var woodmart_settings = {"menu_storage_key":"woodmart_0c440dc7abc2df88837d177dbf82aeef","ajax_dropdowns_save":"1","photoswipe_close_on_scroll":"1","woocommerce_ajax_add_to_cart":"yes","variation_gallery_storage_method":"new","elementor_no_gap":"enabled","adding_to_cart":"Processing","added_to_cart":"Product was successfully added to your cart.","continue_shopping":"Continue shopping","view_cart":"View Cart","go_to_checkout":"Checkout","loading":"Loading...","countdown_days":"days","countdown_hours":"hr","countdown_mins":"min","countdown_sec":"sc","cart_url":"","ajaxurl":"https:\/\/u90.ir\/wp-admin\/admin-ajax.php","add_to_cart_action":"widget","added_popup":"no","categories_toggle":"yes","enable_popup":"no","popup_delay":"2000","popup_event":"time","popup_scroll":"1000","popup_pages":"0","promo_popup_hide_mobile":"yes","product_images_captions":"no","ajax_add_to_cart":"1","all_results":"View all results","zoom_enable":"yes","ajax_scroll":"yes","ajax_scroll_class":".main-page-wrapper","ajax_scroll_offset":"100","infinit_scroll_offset":"300","product_slider_auto_height":"no","product_slider_dots":"no","price_filter_action":"click","product_slider_autoplay":"","close":"Close (Esc)","share_fb":"Share on Facebook","pin_it":"Pin it","tweet":"Tweet","download_image":"Download image","off_canvas_column_close_btn_text":"Close","cookies_version":"1","header_banner_version":"1","promo_version":"1","header_banner_close_btn":"yes","header_banner_enabled":"no","whb_header_clone":"\n <div class=\"whb-sticky-header whb-clone whb-main-header <%wrapperClasses%>\">\n <div class=\"<%cloneClass%>\">\n <div class=\"container\">\n <div class=\"whb-flex-row whb-general-header-inner\">\n <div class=\"whb-column whb-col-left whb-visible-lg\">\n <%.site-logo%>\n <\/div>\n <div class=\"whb-column whb-col-center whb-visible-lg\">\n <%.wd-header-main-nav%>\n <\/div>\n <div class=\"whb-column whb-col-right whb-visible-lg\">\n <%.wd-header-my-account%>\n <%.wd-header-search:not(.wd-header-search-mobile)%>\n\t\t\t\t\t\t<%.wd-header-wishlist%>\n <%.wd-header-compare%>\n <%.wd-header-cart%>\n <%.wd-header-fs-nav%>\n <\/div>\n <%.whb-mobile-left%>\n <%.whb-mobile-center%>\n <%.whb-mobile-right%>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n","pjax_timeout":"5000","split_nav_fix":"","shop_filters_close":"no","woo_installed":"","base_hover_mobile_click":"no","centered_gallery_start":"1","quickview_in_popup_fix":"","one_page_menu_offset":"150","hover_width_small":"1","is_multisite":"","current_blog_id":"1","swatches_scroll_top_desktop":"no","swatches_scroll_top_mobile":"no","lazy_loading_offset":"0","add_to_cart_action_timeout":"no","add_to_cart_action_timeout_number":"3","single_product_variations_price":"no","google_map_style_text":"Custom style","quick_shop":"yes","sticky_product_details_offset":"150","preloader_delay":"300","comment_images_upload_size_text":"Some files are too large. Allowed file size is 1 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a.","comment_images_count_text":"You can upload up to 3 images to your review.","single_product_comment_images_required":"no","comment_required_images_error_text":"Image is required.","comment_images_upload_mimes_text":"You are allowed to upload images only in png, jpeg formats.","comment_images_added_count_text":"Added %s image(s)","comment_images_upload_size":"1048576","comment_images_count":"3","search_input_padding":"no","comment_images_upload_mimes":{"jpg|jpeg|jpe":"image\/jpeg","png":"image\/png"},"home_url":"https:\/\/u90.ir\/","shop_url":"","age_verify":"no","banner_version_cookie_expires":"60","promo_version_cookie_expires":"7","age_verify_expires":"30","cart_redirect_after_add":"no","swatches_labels_name":"no","product_categories_placeholder":"\u06cc\u06a9 \u062f\u0633\u062a\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u0645\u0627\u06cc\u06cc\u062f","product_categories_no_results":"No matches found","cart_hash_key":"wc_cart_hash_9168a486a0f64050a41a275623602076","fragment_name":"wc_fragments_9168a486a0f64050a41a275623602076","photoswipe_template":"<div class=\"pswp\" aria-hidden=\"true\" role=\"dialog\" tabindex=\"-1\"><div class=\"pswp__bg\"><\/div><div class=\"pswp__scroll-wrap\"><div class=\"pswp__container\"><div class=\"pswp__item\"><\/div><div class=\"pswp__item\"><\/div><div class=\"pswp__item\"><\/div><\/div><div class=\"pswp__ui pswp__ui--hidden\"><div class=\"pswp__top-bar\"><div class=\"pswp__counter\"><\/div><button class=\"pswp__button pswp__button--close\" title=\"\u0628\u0633\u062a\u0646 (Esc)\"><\/button> <button class=\"pswp__button pswp__button--share\" title=\"\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc\"><\/button> <button class=\"pswp__button pswp__button--fs\" title=\"\u062a\u063a\u06cc\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0647 \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647\"><\/button> <button class=\"pswp__button pswp__button--zoom\" title=\"\u0628\u0632\u0631\u06af\u200e\u0646\u0645\u0627\u06cc\u06cc\/\u06a9\u0648\u0686\u06a9\u200e\u0646\u0645\u0627\u06cc\u06cc\"><\/button><div class=\"pswp__preloader\"><div class=\"pswp__preloader__icn\"><div class=\"pswp__preloader__cut\"><div class=\"pswp__preloader__donut\"><\/div><\/div><\/div><\/div><\/div><div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\"><div class=\"pswp__share-tooltip\"><\/div><\/div><button class=\"pswp__button pswp__button--arrow--left\" title=\"\u0642\u0628\u0644\u06cc (arrow left)\"><\/button> <button class=\"pswp__button pswp__button--arrow--right\" title=\"\u0628\u0639\u062f\u06cc (arrow right)>\"><\/button><div class=\"pswp__caption\"><div class=\"pswp__caption__center\"><\/div><\/div><\/div><\/div><\/div>","load_more_button_page_url":"yes","load_more_button_page_url_opt":"yes","menu_item_hover_to_click_on_responsive":"no","clear_menu_offsets_on_resize":"yes","three_sixty_framerate":"60","three_sixty_prev_next_frames":"5","ajax_search_delay":"300","animated_counter_speed":"3000","site_width":"1222","cookie_secure_param":"1","slider_distortion_effect":"sliderWithNoise","current_page_builder":"elementor","collapse_footer_widgets":"no","ajax_fullscreen_content":"no","grid_gallery_control":"hover","grid_gallery_enable_arrows":"none","add_to_cart_text":"Add to cart","ajax_links":".wd-nav-product-cat a, .website-wrapper .widget_product_categories a, .widget_layered_nav_filters a, .woocommerce-widget-layered-nav a, .filters-area:not(.custom-content) a, body.post-type-archive-product:not(.woocommerce-account) .woocommerce-pagination a, body.tax-product_cat:not(.woocommerce-account) .woocommerce-pagination a, .wd-shop-tools a:not(.breadcrumb-link), .woodmart-woocommerce-layered-nav a, .woodmart-price-filter a, .wd-clear-filters a, .woodmart-woocommerce-sort-by a, .woocommerce-widget-layered-nav-list a, .wd-widget-stock-status a, .widget_nav_mega_menu a, .wd-products-shop-view a, .wd-products-per-page a, .category-grid-item a, .wd-cat a, body[class*=\"tax-pa_\"] .woocommerce-pagination a","frequently_bought":"d206a9486b","is_criteria_enabled":"","summary_criteria_ids":"","myaccount_page":"","vimeo_library_url":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/js\/libs\/vimeo-player.min.js","reviews_criteria_rating_required":"no","is_rating_summary_filter_enabled":""}; var woodmart_page_css = {"wd-widget-recent-post-comments-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/widget-recent-post-comments-rtl.min.css","wd-widget-nav-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/widget-nav.min.css","wd-blog-single-base-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/blog-single-base-rtl.min.css","wd-lazy-loading-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/opt-lazy-load.min.css","wd-blog-base-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/blog-base-rtl.min.css","wd-wp-gutenberg-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/wp-gutenberg-rtl.min.css","wd-elementor-base-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/int-elem-base-rtl.min.css","wd-header-base-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/header-base-rtl.min.css","wd-mod-tools-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/mod-tools.min.css","wd-header-elements-base-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/header-el-base-rtl.min.css","wd-page-navigation-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/mod-page-navigation.min.css","wd-blog-loop-base-old-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/blog-loop-base-old-rtl.min.css","wd-blog-loop-design-masonry-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/blog-loop-design-masonry-rtl.min.css","wd-owl-carousel-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/lib-owl-carousel-rtl.min.css","wd-mod-comments-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/mod-comments-rtl.min.css","wd-footer-base-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/footer-base-rtl.min.css","wd-scroll-top-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/opt-scrolltotop-rtl.min.css","wd-bottom-toolbar-css":"https:\/\/u90.ir\/wp-content\/themes\/woodmart\/css\/parts\/opt-bottom-toolbar-rtl.min.css"}; /* ]]> */ </script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/global/helpers.min.js?ver=7.2.5" id="woodmart-theme-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/wc/woocommerceNotices.min.js?ver=7.2.5" id="wd-woocommerce-notices-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/global/scrollBar.min.js?ver=7.2.5" id="wd-scrollbar-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/plugins/real-time-auto-find-and-replace/assets/js/rtafar.app.min.js?ver=1.5.5" id="rtrar.app-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/header/headerBuilder.min.js?ver=7.2.5" id="wd-header-builder-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/menu/menuOffsets.min.js?ver=7.2.5" id="wd-menu-offsets-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/menu/menuSetUp.min.js?ver=7.2.5" id="wd-menu-setup-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/global/lazyLoading.min.js?ver=7.2.5" id="wd-lazy-loading-js"></script> <script type="text/javascript" src="https://u90.ir/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/libs/owl.carousel.min.js?ver=7.2.5" id="wd-owl-library-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/global/owlCarouselInit.min.js?ver=7.2.5" id="wd-owl-carousel-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/global/btnsToolTips.min.js?ver=7.2.5" id="wd-btns-tooltips-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/libs/tooltips.min.js?ver=7.2.5" id="wd-tooltips-library-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/global/scrollTop.min.js?ver=7.2.5" id="wd-scroll-top-js"></script> <script type="text/javascript" src="https://u90.ir/wp-content/themes/woodmart/js/scripts/menu/mobileNavigation.min.js?ver=7.2.5" id="wd-mobile-navigation-js"></script> </body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->