با اینکه المنتور مسلماً سریع‌ترین سازنده سایت وردپرس است، برخی از وب‌سایت‌ها هنوز هم ممکن است خیلی کند بارگذاری شوند، که در این صورت عامل رفتاری سئو را کاهش داده و سایت را از مصرف‌کنندگان محروم می‌کند. در این مقاله متوجه خواهیم شد که چرا این اتفاق می‌افتد و چه کاری می‌توانید برای افزایش سرعت وبسایت المنتور خود انجام دهید.
Web Vitals یا معیار سنجش سرعت سایت
گوگل همیشه نمایش را کنترل می‌کند و دستورالعمل‌های آن برای همه صاحبان وب سایت لازم الاجرا است. در سال جاری، گوگل سرانجام راهنمای جدیدی را منتشر کرد که به وضوح «وب سایت سریع» را تعریف می‌کند. این ابتکار Web Vitals نامیده می‌شود. مجموعه‌ای از شاخص‌ها برای سیگنال‌های با کیفیت مورد نیاز برای ارائه یک تجربه کاربری عالی در وب. این شرکت ادعا می‌کند که این ابتکار برای ارائه به صاحبان سایت‌هایی مورد نیاز است که در قالب معیارهای خاصی به نام Core Web Vitals، درکی از «کیفیت سایت» دارند. آن‌ها همچنین بیان کردند که رعایت این معیارها برای رتبه‌بندی سایت بسیار مهم است.
گوگل تشخیص داد که مهمترین عوامل موثر بر رضایت کاربران از یک وب سایت، سرعت بارگذاری، تعامل و ثبات دیداری است.
شاخص‌های اصلی Core Web Vitals
بزرگترین رنگ محتوایی (LCP)، با نام عملکرد بارگیری: LCP نشان می‌دهد که چقدر زمان لازم است تا بزرگترین تصویر یا بلوک متن قابل مشاهده در پنجره دیده شود. تجربه کاربری یا “UX” خوب به این معنی است که LCP در عرض 2.5 ثانیه از زمانی که صفحه برای اولین بار بارگذاری می‌شود، رخ می‌دهد.
تأخیر ورودی اول (FID)، با نام تعاملی: FID، زمان را، از اولین تعامل کاربر با یک صفحه (مانند ضربه زدن روی یک لینک) اندازه‌گیری می‌کند، موقعی که مرورگر شروع به پردازش در پاسخ به آن تعامل می‌کند. FID باید کمتر از 100 میلی‌ثانیه باشد.
تغییر چیدمان تجمعی (CLS)، با نام ثبات دیداری: CLS تعداد تغییرات طرح‌بندی غیرمنتظره را در تمام طول عمر صفحه وب نشان می‌دهد. به عبارت ساده، تمام موقعیت‌هایی را زمانی محاسبه می‌کند که ناگهان، بدون تلاش یا هشدار، چیزی در صفحه تغییر می‌کند. همچنین شرایطی را که می‌خواهید روی دکمه کلیک کنید، محاسبه می‌کند، اما ناگهان حرکت می‌کند و شما روی چیز دیگری کلیک می‌کنید.
صفحات باید CLS کمتر از 0.1 داشته باشند.
برای اطمینان از رسیدن به هدف برای هر معیار، یک آستانه مناسب برای اندازه‌گیری صدک 75 بارگذاری صفحه است که در دستگاه‌های تلفن همراه و دسکتاپ تقسیم‌بندی شده است. علاوه بر این، گوگل یک افزونه مرورگر برای کمک به تعیین سرعت بارگذاری صفحه منتشر کرده است با نام web-vitals-extension.
اکنون، بیایید در مورد روش‌های دیگر برای اندازه‌گیری عملکرد وب سایت و بهینه‌سازی سرعت المنتور صحبت کنیم.
چگونه سرعت بارگذاری وب سایت را اندازه‌گیری کنیم؟
علاوه بر ابزار جدید، همه ابزارهای اصلی توسعه‌دهندگان وب گوگل اکنون از Core Web Vitals پشتیبانی می‌کنند، از جمله PageSpeed Insights ،Lighthouse ،Chrome UX Report API که تازه راه‌اندازی شده و موارد دیگر. اینها می‌توانند به صورت پشت سر هم برای اندازه‌گیری سرعت بارگذاری یک وب سایت استفاده شوند.
Google PageSpeed Insights
PageSpeed Insights ابزاری است که سرعت بارگذاری صفحه را اندازه‌گیری می‌کند. صفحه وب را تجزیه و تحلیل می‌کند، نتیجه را در مقیاس 100 امتیازی نمایش می‌دهد و بهبودهایی را توصیه می‌کند.
این ابزار نتایج را برای دستگاه‌های موبایل و دسکتاپ با توجه به پارامترهای زیر نشان می‌دهد:
- اولین رنگ محتوایی (FCP)
- بزرگترین رنگ محتوایی (LCP)
- تاخیر ورودی اول (FID)
- تغییر چیدمان تجمعی (CLS)
- شاخص سرعت
- کل زمان مسدود شدن
لطفاً تمام توصیه‌های سرویس را عجولانه دنبال نکنید. برخی از آن‌ها ممکن است به تجربه کاربری یا سایر عوامل آسیب برساند. با احتیاط عمل کنید.
فانوس دریایی “Lighthouse”
Lighthouse یک ابزار ممیزی منبع باز برای بهبود کیفیت وب سایت‌ها و برنامه‌های وب است. این شامل عملکرد، دسترسی، سئو، برنامه‌های وب پیشرفته و بهترین روش‌های ممیزی است که می‌توانید در هر صفحه وب اجرا کنید.
هدف این ابزار اندازه‌گیری سرعت بارگذاری نیست، بلکه به روش دیگری عمل می‌کند. سرعت ارائه محتوای اولیه را تخمین می‌زند.
این گزارش به این صورت است:
Lighthouse هم در برنامه افزودنی کروم و هم در گردش کار Chrome DevTools در دسترس است. با این حال، استفاده از نسخه DevTools بیشتر مورد استفاده است. زیرا امکان آزمایش سایت‌های محلی و صفحات تأیید شده را می‌دهد، در حالی که برنامه افزودنی “extention” این کار را نمی‌کند.
Chrome UX Report API
CrUX که اغلب به عنوان Chrome UX Report API شناخته می‌شود، مجموعه‌ای از داده‌های عمومی در مورد تجربیات واقعی کاربر میلیون‌ها وب سایت است. این داده‌های حقیقی جمع‌آوری شده از کاربران واقعی در این زمینه است، نه داده‌های آزمایشگاهی فرضی. همان‌طور که قبلاً گفته شد، تمام معیارهای Core Web Vitals و همچنین معیارهایی مانند Time to First Byte (TTFB) و First Contentful Paint (FCP) را شامل می‌شود.
CrUX به طور کامل در PageSpeed Insights فوق الذکر ادغام شده است، اما می‌تواند از طریق داشبورد CrUX، BigQuery یا CrUX API نیز استفاده شود، که یکپارچه‌سازی داده‌های سطح بالا با سایر برنامه‌ها را امکان‌پذیر می‌کند.
تجزیه و تحلیل ترافیک گوگل
GA یا “Google Analytics” گوگل آنالیتیکس قدیمی خوب، یکی دیگر از راه‌های مناسب برای اندازه‌گیری سرعت بارگذاری وب سایت است. با این حال، داده‌هایی که دریافت می‌کنید با داده‌هایی که از طریق PageSpeed Insights یا سایر برنامه‌ها دریافت می‌کنید متفاوت است. به این دلایل که:
- GA داده‌هایی را از کاربران واقعی سایت ارائه می‌کند که می‌توانیم آن‌ها را براساس مکان، دسته‌بندی‌های موبایل یا دسکتاپ و سایر موارد تقسیم‌بندی کنیم.
- این داده‌ها به ما کمک می‌کند تاثیر سرعت بارگذاری صفحه را بر رفتار کاربران مقایسه کنیم.
- اعداد GA به خودی خود کافی نیستند. اما با کمک آن‌ها می‌توانیم تغییرات عملکرد را دنبال کنیم. به عنوان مثال، اگر سرعت صفحه کاهش یابد، می‌توانیم به راحتی بررسی کنیم که آیا تأثیری بر معیارهای بازاریابی ما (فروش، پرش و غیره) داشته است یا خیر.
علاوه بر ابزارهای گوگل، ابزارهای دیگری وجود دارد که به شما کمک می‌کند عملکرد و سرعت بارگذاری وب سایت خود را اندازه‌گیری کنید، به عنوان مثال، GTmetrix که توسط Lighthouse پشتیبانی می‌شود.
شما می‌توانید با استفاده از ترکیب مناسب داده‌هایی که با این ابزارها و توصیه‌های آن‌ها به دست می‌آورید، به بهینه‌ترین عملکرد ممکن دست پیدا کنید. عملکرد خوب نه تنها برای یک تجربه کاربری خوب بلکه برای سئو نیز یک عامل حیاتی است.
مطمئنا، ابزارهای کارآمد دیگری برای تست سرعت وب سایت شخص ثالث نیز وجود دارد. با این حال، محبوب‌ترین ابزار احتمالاً Pingdom Tools است.
تست سرعت وب سایت Pingdom
این ابزار به طور خاص برای اندازه‌گیری سرعت بارگذاری وب سایت توسعه‌یافته است و مشخص می‌کند که آیا صفحه وب به اندازه کافی سریع است یا خیلی کند؛ خیلی حجیم است یا خیلی سبک. این صفحه ترکیبی از یک رابط کاربری بسیار آسان با ویژگی‌های به اندازه کافی پیشرفته است که برای رضایت توسعه‌دهندگان با تجربه طراحی شده و برای هر مبتدی هم مناسب است. مهمتر از همه، این ابزار کارآمدی است که به شما کمک می‌کند وب سایت خود را سریع کنید!
تست سرعت وب سایت Pingdom آزمایشات را از هفت موقعیت مکانتی مختلف انجام می‌دهد:
- آسیا – ژاپن – توکیو
- اروپا – آلمان – فرانکفورت
- اروپا – انگلستان – لندن
- آمریکای شمالی – ایالات متحده آمریکا – واشنگتن دی سی
- آمریکای شمالی – ایالات متحده آمریکا – سانفرانسیسکو
- اقیانوس آرام – استرالیا – سیدنی
- آمریکای جنوبی – برزیل – سائوپائولو
گزارش اولیه به این صورت است:
بخش دیگری از گزارش شامل توصیه‌هایی در مورد بهینه‌سازی عملکرد وب سایت، جزئیات توزیع محتوا و درخواست‌های سمت سرور و اطلاعات مربوط به منابعی است که در صفحه بارگذاری می‌کنیم.
بخش آخر تجزیه و تحلیل درخواست‌های فایل است که نگاه جامع‌تری به هر درخواست HTTP در سایت دارد.
تمام این اطلاعات به صورت رایگان و تنها با یک کلیک در دسترس است. Pingdom ابزار مناسبی است، اما به یاد داشته باشید که برای اطمینان از صحت داده‌های دریافتی بهتر است از آن در کنار دیگر ابزارها استفاده کنید، زیرا ده‌ها دلیل احتمالی وجود دارد که وب سایت ما کند کار کند.
چرا وب سایت المنتور کند کار می‌کند و چگونه آن را برطرف کنیم
ده‌ها دلیل مختلف وجود دارد که چرا یک وب سایت وردپرس ممکن است عملکرد ضعیفی داشته باشد.
در زیر برخی از اصلی‌ترین و متداول‌ترین این دلایل را معرفی می‌کنیم که ابتدا باید به آن‌ها توجه کنید:
1. ارائه‌دهنده هاست وردپرس ما، نا امیدکننده است
بیایید با سرزنش کردن شروع کنیم! بله، گاهی اوقات، کندی وب سایت وردپرس تقصیر ما نیست. مثلاً بسیار معمول است که یک سرور، میزبان صدها سایتی باشد که قدرت آن را به اشتراک بگذارند. از این رو، ترافیک سنگین معمولا باعث کاهش سرعت می‌شود.
چگونه مشکل هاست وردپرس را برطرف کنیم؟
بهتر است از قبل بررسی کنید که هاست شما خدمات پشتیبانی خوبی ارائه می‌دهد یا خیر.
اگر یک وب سایت بزرگ با ترافیک زیاد یا برنامه‌ای دارید که نیاز به کنترل زیادی دارد، اجاره سرور فیزیکی بهترین گزینه برای میزبانی سایت شما است.
2. تصاویر خیلی بزرگ هستند
بله، این ساده است. به طور کلی هیچ عکسی نباید بیش از 1 مگابایت باشد. از روی ناآگاهی، برخی از تازه کارها ممکن است تصاویر بزرگ را با CSS فشرده کنند، اما در نهایت، مرورگر کاربر همچنان تصویر را در اندازه کامل بارگذاری می‌کند. متأسفانه برخی به اندازه تصاویر توجه نمی‌کنند که این یک نگرش اشتباه است.
چگونه مشکل تصاویر بزرگ را برطرف کنیم؟
از هر کمپرسور تصویر مانند TinyPNG یا پلاگین بهینه‌سازی تصویر مانند Imagify استفاده کنید.
گزینه دیگر استفاده از CSS Sprites است. آن‌ها تمام تصاویر موجود در صفحه را در یک فایل واحد ادغام می‌کنند که در نتیجه سریعتر دانلود می‌شود. همچنین به فرمت تصویر WebP گوگل که 26 درصد سبک‌تر از سایرین تبلیغ می‌شود، توجه کنید. تبدیل تصاویر به WebP باعث می‌شود عکس‌های ما سریعتر بارگیری شوند، به کاربران اجازه می‌دهد تا داده‌های کمتری مصرف کنند، و به یکی از توصیه‌های PageSpeed Insights می‌پردازد که همان ارائه تصاویر در قالب نسل بعدی است. در نتیجه امتیاز PageSpeed Insights خود را نیز افزایش خواهیم داد.
3. از CDNها استفاده نمی‌کنید
وقتی سرور وب سایت ما در یک شهر خاص قرار دارد، اما بازدیدکنندگان از مناطق دیگر به سایت ما می‌آیند، این سرعت پاسخگویی سرور را کاهش می‌دهد.
چگونه سرعت پاسخگویی سرور را برطرف کنیم؟
از شبکه تحویل محتوا CDN استفاده کنید. این شبکه از سرورهایی در نقاط مختلف دنیا تشکیل شده است. هنگامی که سایت به شبکه متصل می‌شود، کپی‌هایی از فایل‌های منبع وب، روی سرورهای آن ایجاد می‌شود و سپس کاربر داده‌ها را از نزدیک‌ترین سرور به خود دریافت می‌کند، در نتیجه سرعت دانلود افزایش می‌یابد.
گزینه‌های سایت‌های مبتنی بر وردپرس را با دقت برری نمایید و آن‌هایی را انتخاب کنید که بیشتر برای شما مناسب است. چندین ارائه‌دهنده اصلی CDN عبارتند از Uploadcare، Cloudwatch، MaxCDN و …
4. حجم فایل‌ها خیلی زیاد است
اگر حجم فایل‌ها بالا هستند، ما همان کاری را می‌کنیم که همیشه انجام می‌دهیم – آن‌ها را فشرده می‌کنیم.
چگونه مشکل فایل‌های خیلی بزرگ را برطرف کنیم؟
استفاده از فشرده‌سازی GZIP زمان انتقال فایل‌ها به مرورگر را کاهش می‌دهد. حجم داده‌های ارسالی 4-5 برابر کاهش می‌یابد و در نتیجه سرعت دانلود افزایش می‌یابد.
فعال کردن فشرده‌سازی بسیار ساده است. برای مثال، در آپاچی، باید موارد زیر را به فایل htaccess. اضافه کنید:
# فشرده‌سازی متن، html، جاوا اسکریپت، css، xml:
AddOutputFilterByType DEFLATE
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
برنامه AddOutputFilterByType DEFLATE/xml
برنامه AddOutputFilterByType DEFLATE/xhtml+xml
برنامه AddOutputFilterByType DEFLATE/rss+xml
برنامه AddOutputFilterByType DEFLATE/javascript
برنامه AddOutputFilterByType DEFLATE/x-javascript
# یا، انواع فایل های خاصی را با پسوند فشرده کنید:
<فایل *.html>
SetOutputFilter DEFLATE
</files>
دستورالعمل‌های دقیق‌تر را در BetterExplained بخوانید.
5. کد شما بهینه نشده است
اگر از چیزی استفاده نمی‌کنیم، بهتر است از شر آن خلاص شویم. وقتی صحبت از توسعه وب می‌شود، این قانون در اینجا نیز اعمال می‌شود. کد بلااستفاده همیشه سرعت بارگیری را کاهش می‌دهد.
چگونه مشکل کد بهینه نشده را برطرف کنیم؟
هنگامی که چندین ترفند در وب سایت خود ایجاد می‌کنیم و سرعت سایت ما همچنان پایین است، می‌توانیم برای بهبودهای سفارشی با یک توسعه‌دهنده وب تماس بگیریم. هزینه زیادی نخواهد داشت، اما تفاوت ایجاد می‌کند. علاوه بر این، برخی از افزونه‌های وردپرس می‌توانند به ما کمک کنند تا بزرگترین مشکلات عملکرد خود را برطرف کنیم.
به عنوان مثال، WP Rocket یک افزونه حافظه پنهان قدرتمند است که به ما کمک می‌کند تا با چالش‌برانگیزترین مشکلات عملکرد مقابله کنیم و امتیازات Core Web Vitals خود را بهبود ببخشیم – در بالا دیدیم که چگونه این معیارها برای بهبود عملکرد سئوی ما ضروری هستند.
اگر می‌خواهیم سرعت سایت المنتور خود را افزایش دهید و امتیازات Largest Contentful Paint و First Input Delay را بهینه کنیم، باید منابع مسدود کردن رندر را به عنوان یکی از اولین اقدامات حذف کنیم. این به این معنی است که ما باید به مرورگر اجازه دهیم، صفحات سایت‌مان را بدون دانلود اسکریپت‌های CSS و JS تجزیه و رندر کند که باعث می‌شود صفحه کند بارگذاری شود. از آنجایی که این فایل‌ها برای بارگذاری صفحه حیاتی نیستند، فقط زمانی باید دانلود شوند که مرورگر محتوای اصلی را از قبل نمایش داده باشد.
به همین دلیل، باید زمان اجرای جاوا اسکریپت را نیز کاهش دهیم. فایل‌های جاوا اسکریپت می‌توانند مانع از تعامل سریع کاربران با صفحه ما شوند و بر تجربه کاربر تأثیر زیادی بگذارند. به همین دلیل است که فایل‌های جاوا اسکریپت غیرضروری نباید به عنوان اولین منابع هنگام رندر صفحه بارگذاری شوند.
علاوه بر این، حذف ساده فضاهای غیرضروری، کاما، کدهای استفاده نشده، قالب‌بندی و موارد دیگر می‌تواند تفاوت بیشتری در بهینه‌سازی سرعت صفحه ایجاد کند.
از نظر عملی به چه معناست؟ برای رسیدگی به این مسائل مهم، باید CSS و جاوا اسکریپت استفاده نشده را حذف کنید، جاوا اسکریپت را به تعویق بیندازید، اجرای جاوا اسکریپت را به تاخیر بیندازید، و فایل‌های CSS و JS را کوچک کنید. همان‌طور که در بالا توضیح داده شد، می‌توانید این کار را به صورت دستی انجام دهید یا از یک افزونه کَش (caching plugin) برای صرفه‌جویی در زمان و تلاش استفاده کنید.
6. ذخیره داده را روشن نکردید “Data Caching”
در این حالت، هر بار که کاربر از صفحه مجدداً بازدید می‌کند، مرورگر صفحه را دوباره بارگیری می‌کند.
چگونه حافظۀ پنهان داده را اصلاح کنیم؟
راه‌های مختلفی برای تنظیم کش وجود دارد. برای مثال، می‌توانید از ماژول هدرهای وب سرور آپاچی استفاده کنید که هدرها را برای درخواست‌ها و پاسخ‌های HTTP نظارت و تغییر می‌دهد. با این حال، پیشنهاد المنتور، که ساده‌ترین راه است، استفاده از یک افزونۀ کش است.
7. استفاده از پلاگین‌های اضافی و پیش فرض وردپرس
اولاً برخی از صاحبان وب، افزونه‌های غیرضروری وردپرس را حذف نمی‌کنند، که آشکارا بر سرعت بارگذاری تأثیر می‌گذارد.
برخی از افزونه‌ها بهینه‌سازی نشده‌اند، بنابراین نصب یکی از آن‌ها ممکن است بر سرعت بارگذاری وبسایت تأثیر منفی بگذارد، حتی این تاثیر منفی می‌تواند بیشتر از نصب تعداد زیادی افزونه بهینه‌شده باشد.
چگونه آن را اصلاح کنیم؟
قبل از نصب هر افزونه جدید، بررسی‌ها را به دقت بخوانید تا مطمئن شوید که هیچ مشکلی ایجاد نمی‌کند. حتی پس از افزودن افزونه‌های جدید، بهتر است عملکرد را بررسی کنید تا مطمئن شوید که همه چیز درست است. همچنین فراموش نکنید که ماژول‌های استفاده نشده را خاموش کنید و افزونه‌هایی را که استفاده نمی‌کنید، حذف کنید.
تغییر مسیرهای بسیار زیاد
سعی کنید از تغییر مسیرها اجتناب کنید، آن‌ها به طور قابل توجهی بر عملکرد تأثیر می‌گذارند.
9. قالب وردپرس نصب شده خیلی کند است
تم‌های با کدگذاری ضعیف خیلی سنگین هستند و از اسکریپت‌های خاصی برای فشرده‌سازی عناصر خود استفاده نمی‌کنند.
چگونه مشکل کندی قالب وردپرس را برطرف کنیم؟
از تم Kava استفاده کنید. یا تم وردپرس دیگری که متعادل، بهینه شده، واکنش‌گرا برای تمام سایزها و سریع باشد. برای اطمینان از اینکه قالب وردپرس با نیازهای شما مطابقت دارد و سرعت سایت را کاهش نمی‌دهد، پس از نصب، سرعت آن را بررسی کنید و تست کنید که آیا در هر مرورگر وب و موبایل به درستی کار می‌کند یا خیر.
بهینه‌سازی عملکرد وب سایت برای المنتور
المنتور یک‌سری تنظیمات و قوانین خاصی دارد که باید برای بهینه‌سازی وب سایت خود در نظر بگیرید. بیایید مهمترین آن‌ها را مرور کنیم:
بهینه‌سازی چیدمان
طرح‌بندی المنتور از اجزای خاصی ساخته می‌شود: بخش‌ها، ستون‌ها و ویجت‌ها. هرچه عناصر بیشتری در صفحه داشته باشید، درخواست‌های سرور بیشتری ایجاد می‌شود. بنابراین برای بهبود سرعت بارگذاری صفحه باید دستورالعمل‌هایی را دنبال کنید:
- در صورت امکان تعداد بخش‌ها، ستون‌ها و ویجت‌ها را کاهش دهید.
- اگر نیاز به قرار دادن مثلا یک تصویر و یک متن دارید، بهتر است به جای ترکیب دو ویجت (یک تصویر و یک متن) از ویجت «تصویر + متن» استفاده کنید.
- به جای تنظیم جداگانه برای هر ویجت، از استایل‌های کلی برای فونت‌ها و رنگ‌ها استفاده کنید.
- موقعیت‌یابی برخی از عناصر و ویژگی‌های دیگر را می‌توان به راحتی با کمک CSS سفارشی تغییر داد، بنابراین می‌توانید یک شناسه یا نام کلاس به ویجت اختصاص دهید (در نسخه رایگان المنتور نیز موجود است) به جای اینکه این کار را با استفاده از چندین بخش یا ویجت انجام دهید تا آن‌ها را تراز کنید.
- برای فیلم‌ها از بارگزاری غیر همگام (lazy load) استفاده کنید. این ویژگی در تنظیمات ویجت موجود است.
بیایید با جزئیات بیشتری در مورد کاهش تعداد ستون‌ها و بخش‌ها صحبت کنیم.
در نسخه‌های قدیمی المنتور، در صورتی که چندین ویجت در یک ردیف قرار گیرند، باید برای هر ویجت یک ستون اختصاصی ایجاد می‌کردیم. با به‌روزرسانی المنتور 5ـ2 همه چیز تغییر کرد، اما برخی افراد هنوز از روش قدیمی استفاده می‌کنند. همچنین تراز Flexbox در آن نسخه معرفی شد که به بهبود سرعت بارگذاری صفحه نیز کمک می‌کند.
برای مثال، باید یک تصویر، یک بلوک متنی و یک دکمه را در یک ردیف (در کنار هم) قرار دهید. یک بخش با یک ستون ایجاد کنید و تمام ویجت‌های مورد نیاز (تصویر، متن، دکمه) را اضافه کنید. به طور پیش فرض، آن‌ها یکی زیر دیگری ظاهر می‌شوند. اکنون زمان ویرایش ویژگی‌های ویجت و قرار دادن آن‌ها در یک خط است. برای هر ویجت، به تب Advanced بروید. ویژگی Width را انتخاب کرده و آن را روی «Inline (auto)» قرار دهید. در اینجا، شما همچنین می‌توانید یک تراز عمودی را برای ویجت‌های خود تنظیم کنید. اکنون ویجت‌های شما در یک ردیف (کنار هم) قرار می‌گیرند.
برای توزیع صحیح آن‌ها در ردیف، به تنظیمات ستون والد در تب Layout بروید و تراز افقی را بر روی آنچه که برای طراحی شما بهتر است (با استفاده از تنظیمات تراز Flexbox) تنظیم کنید. همین کار را می‌توان با تراز عمودی انجام داد.
یعنی زمانی که نیاز دارید ویجت‌ها را به درستی در یک ستون، یکی زیر دیگری قرار دهید، همین کار را می‌توان انجام کرد.
از سال 2022، ویژگی کامل Flexbox Container هنوز در مرحله توسعه آلفا است، به این معنی که نباید از آن در وب سایت‌های زنده استفاده شود، زیرا هنوز در مرحله ساخت و رفع اشکال است.
تنظیمات المنتور اضافی برای عملکرد بهتر
المنتور ویژگی‌های آزمایشی خاصی دارد و تعدادی از آن‌ها برای بهبود عملکرد ایجاد شده‌اند. آن‌ها را می‌توان در Elementor > Settings > Experiments در داشبورد وردپرس پیدا کرد. این برگه ویژگی‌های آزمایشی مختلفی را در مراحل مختلف توسعه نشان می‌دهد، اما اکثر آن‌ها در حال حاضر باثبات هستند و حتی در مرحله بتا نیستند، بنابراین می‌توان از آن‌ها در وب‌سایت‌های زنده استفاده کرد. این تنظیمات عبارتند از:
- خروجی DOM بهینه شده: این ویژگی به کاهش تعداد بسته‌های div و جلوگیری از اندازه بیش از حد DOM کمک می‌کند. تنها مشکل این است که یک نشانه‌گذاری را تغییر می‌دهد، بنابراین با سایت‌های جدید، عالی کار می‌کند (اگر قبل از ایجاد صفحه اول با المنتور آن را فعال کنید)، اما به احتمال زیاد در صورت روشن شدن سایت موجود، مشکل ایجاد می‌کند.
- بهبود بارگذاری دارایی: وقتی روشن باشد، اسکریپت‌های استفاده نشده بارگذاری نمی‌شوند.
- بارگیری بهبودیافته CSS: میزان بارگذاری کد CSS در صفحه را به طور پیش فرض کاهش می‌دهد.
افزونه‌ها و نمادهای المنتور شخص ثالث
بسیاری از افزونه‌های شگفت‌انگیز شخص ثالث المنتور وجود دارد که ویجت‌های خاصی را اضافه می‌کنند یا ویژگی‌های خاصی را فعال می‌کنند. نکته مهمی که باید در نظر بگیریم این است که تقریباً همه آن‌ها دارای کد بسیار زیادی هستند (جاوا اسکریپت، CSS) و همه آن‌ها باید بارگذاری شوند که بر عملکرد، تأثیر منفی می‌گذارد. اگر از چند ویجت استفاده می‌کنید، استفاده از افزونه‌های گسترده، کار خوبی نیست. یک افزونه را با هر چیزی که به آن نیاز دارید (یا بیشتر ویجت‌ها را) پیدا کنید و از آن استفاده کنید.
خاموش کردن ماژول‌های استفاده نشدۀ چنین افزونه‌هایی برای بهبود سرعت بارگذاری، امری حیاتی است.
از Load Level Editor با پلاگین‌های Crocoblock استفاده کنیم
Load Level Editor به ما این امکان را می‌دهد که هنگام کار با ویجت‌های Crocoblock، تمام گزینه‌های استایل غیرضروری را حذف کنیم. این ویژگی برای چندین جت پلاگین موجود است و می‌توانیم آن را در Crocoblock > JetPlugins Settings > {the plugin} پیدا کنیم.
کلمات پایانی
بنابراین اینکه چرا نیاز داریم که وب سایت المنتور ما سریع باشد؟ ابتدا چند سوال متداول را جمع‌بندی می‌کنیم:
چگونه سرعت المنتور را افزایش دهیم؟
برای بررسی میزبانی وردپرس، تصاویر، CDN، فایل‌ها، کد، کش داده‌ها، پلاگین‌های نصب‌شده، تغییر مسیرها و موضوع وردپرس، مسائل اصلی «کاهش سرعت» را بررسی کنید. همچنین بهینه‌سازی چیدمان المنتور را در نظر بگیرید.
اینکه خود المنتور سرعت سایت ما را کاهش دهد، مشکوک است. با این حال، ده‌ها دلیل مختلف وجود دارد که چرا یک وب سایت وردپرس ممکن است عملکرد ضعیفی داشته باشد.
Web Vitals چیست؟
Web Vitals مجموعه‌ای از شاخص‌ها برای سیگنال‌های با کیفیت هستند که برای ارائه یک تجربه کاربری عالی در وب مورد نیاز است.
چگونه سرعت بارگذاری وب سایت را اندازه‌گیری کنیم؟
چند ابزار توسعه‌دهنده وب وجود دارد: PageSpeed Insights، Lighthouse، Chrome UX Report API، GTmetrix و Pingdom Website Speed Test.
در نهایت، تنها یک دلیل وجود دارد و آن اینکه سرعت سایت به طور مستقیم بر درآمد شما تأثیر می‌گذارد! درک این موضوع ساده است؛
- یک سایت سریع رتبه بهتری دارد.
- افراد بیشتری از سایتی که رتبه بهتری دارد بازدید خواهند کرد.
- یک سایت سریع موانع اضافی بین محصول و مشتری شما ایجاد نخواهد کرد. این تنها معیار نیست، اما با این حال مهم است.
- سود!
بنابراین توصیه می‌کنیم فوراً سایت المنتور خود را با استفاده از هر ابزار تست سرعتی که می‌خواهید وارسی کنید، توصیه‌ها را به درستی اعمال کنید و از تغییرات شگفت‌انگیز ایجاد شده در وبسایت و تجارت خود لذت ببرید.
منبع:
