المنتور برای افزایش سرعت لود صفحات خود چکار کرد؟

در بین افزونه‌های صفحه‌ساز وردپرس، المنتور قطعا با اختلاف زیادی از باقی رقبا در صدر جدول قرار می‌گیرد و این امکان را برای کاربران بی‌شماری فراهم کرده که بدون آشنایی با حتی یک خط کدنویسی، نیاز خودشان را برطرف کنند.اما در عین حال المنتور افزونه سنگینی است، هم از لحاظ منابعی که از سرور مصرف می‌کند (به خصوص رم و سی‌پی‌یو) و هم از نظر حجم کدهایی که تحویل می‌دهد و این دو موضوع روی هم رفته همیشه تاثیر منفی خودش را در سرعت لود سایت نمایش می‌داده است.به عنوان مثال نوشتن کلمه «سلام» به زبان HTML نیازمند تنها چند کاراکتر است:<p>سلام</p>ولی وقتی همین را با ابزارک «سربرگ» در المنتور می‌نویسید، با چنین هیولایی از کدها روبرو می‌شوید!<div data-elementor-type=&quotwp-page&quot data-elementor-id=&quot59&quot class=&quotelementor elementor-59&quot data-elementor-settings=&quot[]&quot> <div class=&quotelementor-section-wrap&quot> <section class=&quotelementor-section elementor-top-section elementor-element elementor-element-75c3e77 elementor-section-boxed elementor-section-height-default elementor-section-height-default&quot data-id=&quot75c3e77&quot data-element_type=&quotsection&quot> <div class=&quotelementor-container elementor-column-gap-default&quot> <div class=&quotelementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-404b2e0&quot data-id=&quot404b2e0&quot data-element_type=&quotcolumn&quot> <div class=&quotelementor-widget-wrap elementor-element-populated&quot> <div class=&quotelementor-element elementor-element-4e4af2f elementor-widget elementor-widget-heading&quot data-id=&quot4e4af2f&quot data-element_type=&quotwidget&quot data-widget_type=&quotheading.default&quot> <div class=&quotelementor-widget-container&quot> <p class=&quotelementor-heading-title elementor-size-default&quot>سلام</p> </div> </div> </div> </div> </div> </section> </div> </div>و تازه این در حالیست که شما گزینه «بهینه‌سازی خروجی DOM» را در المنتور برای ساده‌سازی بیشتر کدها فعال کرده باشید، وگرنه حجم کدها از این هم بالاتر می‌رود.مشکل المنتور ولی به این حجم عظیم و زائد کدهای HTML ختم نمی‌شد، بلکه همزمان کوهی از فایل‌های استایل و جاوا اسکریپت و فونت هم داشت که در تمام صفحات سایت لود می‌کرد- فارغ از اینکه آیا اصلا آن صفحات با المنتور ساخته شده‌اند یا نه و اگر بله، از کدام ویجت‌ها یا ابزارک‌های المنتور استفاده می‌کنند. المنتور در هر حال تمام این فایل‌ها را لود می‌کرد.اما از نسخه 3.1 به بعد، المنتور سعی کرد بالاخره با چند تکنیک این معضل را حل کند.بهینه‌سازی فایل‌های جاوا اسکریپتیکی از تغییرات آپدیت جدید، تمرکز المنتور بر نحوه لود فایل‌های جاوا اسکریپت و سر و سامان دادن به وضع آن‌ها بود تا عملکرد سایت نسبت به قبل بهبود پیدا کند. به این ترتیب برخلاف سابق که تمام اسکریپت‌های مربوط به ابزارک‌های مختلف در قالب یک فایل کلی تجمیع و در سمت کاربر لود می‌شد، این بار المنتور این فایل JS را به قطعات کوچک‌تر تقسیم کرده تا هر ابزارک بتواند اسکریپت‌های مجزا و منطق خودش را داشته باشد. بنابراین الان با این روش هم حجم فایل کلی JS المنتور در سمت کاربر کمتر شده و هم المنتور نگاه می‌کند که شما از کدام ابزارک‌ در ساخت یک برگه استفاده کرده‌اید تا فقط اسکریپت‌های مربوط به همان ابزارک را در صفحه لود کند.هرچند توسعه‌دهندگان المنتور متحمل عذاب بازنویسی کدها شدند، اما این روش جدید و منطقی جواب داد و تاثیر قابل ملاحظه‌ای بر بهبود سرعت لود صفحات گذاشت.قدم بعدی المنتور بهبود نحوه استفاده ابزارک‌ها از کتابخانه‌های جاوا اسکریپت بیرونی بود. به این معنی که اکثر ابزارک‌ها از کتابخانه‌های جاوا اسکریپت خارجی استفاده می‌کنند (برجسته‌ترین نمونه‌اش کتابخانه swiper.js است) و قبلا این کتابخانه‌ها بدون استثنا در تمامی صفحات لود می‌شدند (حتی اگر اصلا نیازی به آن‌ها‌ نمی‌بود و این یعنی خودِ فاجعه!).ولی المنتور بعد از آپدیت خود قادر به تشخیص اینست که کدام اجزای صفحه از مثلا کتابخانه swiper استفاده می‌کنند و آیا این کتابخانه را باید لود بکند یا نه. بنابراین الان کتابخانه swiper در این مثال فقط زمانی لود می‌شود که حداقل یک عنصر در صفحه وجود داشته باشد که از آن استفاده بکند. به عبارتی لود کتابخانه، مشروط به وجود چنین عنصری شده و در صورت عدم نیاز به لود این کتابخانه، به اندازه 136 کیلوبایت در اندازه صفحه صرفه‌جویی می‌شود.المنتور همین روشِ لود مشروط فایل‌های جاوا اسکریپت بیرونی را به سایر کتابخانه‌ها هم تعمیم داد و الان تنها زمانی آن‌ها را لود می‌کند که نیاز باشد، مثل کتابخانه‌های Lightbox و Screenful (20 کیلوبایت کاهش در اندازه صفحه)، کتابخانه Dialog (111 کیلوبات کاهش)، کتابخانه Share links (3 کیلوبایت کاهش) و از نسخه 3.3 به بعد کتابخانه Sticky که در صورت عدم نیاز به لود، حجم صفحه را 7 کیلوبایت کاهش می‌دهد.قدم سوم المنتور حذف کدهای جاوا اسکرپیت دوبل بود. المنتور برای ساخت فایل‌های Build از ابزار وب‌پک (Webpack) استفاده می‌کند و همین باعث می‌شد که در داخل فایل‌های مختلف جاوا اسکریپت کدهای تکراری و دوبل زیادی به وجود بیاید. المنتور با بهینه‌سازی زیرساخت وب‌پکِ خودش این مشکل را رفع کرد.بهینه‌سازی فایل‌های استایلالمنتور مشابه همین قدم‌ها را برای بهبود لود فایل‌های CSS هم برداشت. به طوری که از نسخه 3.3 به بعد استایل‌ها هم مثل اسکریپت‌ها به طور دینامیک و بسته به ابزارک‌هایی که در هر صفحه استفاده کرده باشید لود می‌شوند. به عبارتی الان هر ابزارک استایل خاص خودش را دارد که فقط در صورت استفاده لود می‌شود. در حالی که سابقا یک فایل کلی به نام frontend.css وجود داشت که دستورات CSS همه ابزارک‌ها را در خود یکجا داشت و در سمت کاربر سایت لود می‌شد.با این تغییر جدید، هم حجم دستورات CSS کمتر شده و هم مقدار CSSهای بلااستفاده در صفحات. بنابراین بعد از آپدیت المنتور اگر سایت خود را با ابزارهای تست سرعت چک کرده باشید، احتمالا باید متوجه شده باشید که وضعیت استایل‌هایی که باعث Render Blocking می‌شده‌اند یک مقدار بهتر شده و زمان کمتری می‌گیرند.کار دیگری که المنتور انجام داد، ادغام و درون خطی کردن محتوای فایل‌های CSS کوچک (کمتر از 8 کیلوبایت) بود. یعنی به جای اینکه استایل‌های کوچک هم به صورت یک سورس خارجی لود شوند و بی‌خود و بی‌جهت تعداد درخواست‌ها به سرور را بالا ببرند، کدهایشان در بین خطوط HTML ادغام شد. با این روش گرچه یک مقدار ناچیز به اندازه صفحات اضافه شد، ولی در عوض با کاهش چشمگیر تعداد درخواست‌ها به سرور، عملکرد و رتبه صفحات به طرز ملموسی بالا رفت.آیکون‌ها و فونت‌هابرای نمایش آیکون‌ها چه در بخش ویرایشگر و چه در سمت کاربر، همچنان فایل Font باید لود بشود. ولی المنتور حجم این فایل استایل را با 94 درصد کاهش از 17 به 1 کیلوبایت رسانده. به علاوه این امکان هم به شما داده شده که به جای Font Awesome از آیکون‌های جایگزین‌ SVG استفاده کنید. در این حالت به جای لود کل فایل Font، در عوض فقط آیکون‌هایی لود می‌شوند که در صفحه استفاده شده‌اند. بنابراین با این روش هم سرعت و عملکرد صفحات بهتر شده. در مجموع با برداشتن این قدم‌ها بود که المنتور توانست از نسخه 3.1 به بعد به طور قابل توجهی سرعت و عملکرد صفحات را بالا ببرد و به همین خاطر است که بروزرسانی توصیه می‌شود. البته قبل از بروزرسانی بهتر است هم از دیتابیس سایت پشتیبان تهیه شود و هم ابتدا نسخه جدید در محیط آزمایشی (لوکال هاست) تست شود. وندا نوژنمطالب مرتبط:بروزرسانی و تغییرات جدید ابزار تست سرعت گوگل (Pagespeed Insights)تفاوت PageSpeed Test گوگل با ابزار Lighthouse در کرومبهبود سرعت لود سایت با ایجاد تاخیر در اجرای اسکریپت‌های نالازمکوچک‌سازی کدهای HTML چیست و چطور عمل می‌کند؟بهبود سرعت سایت: استفاده از افزونه کش و کاهش زمان پاسخگویی سرور(TTFB)تست سرعت سایت: استایل‌های مزاحم و خطای Render Blockingتست سرعت سایت: اسکریپت‌های مزاحم و خطای Render Blockingافزونه Asset Cleanup: یک ضرورت برای افزایش سرعت سایت وردپرسی شما!افزایش سرعت سایت‌های فروشگاهی وردپرس