هنگامی که بر روی یک سایت کلیک کنید اگر لود سایت زمانبر باشد بسیار ناامید کننده خواهد بود. در این بخش به معرفی افزونه "wp-rocket" پرداخته می شود که باعث افزایش سرعت سایت وردپرسی و همچنین افزایش سئوی سایت می شود.
نکته: افزونه wp-rocket توسط میهن وب هاست خریداری و به صورت رایگان در اختیار کاربران قرار گرفته است، از لینک زیر می توانید افزونه wp-rocket را دانلود کنید:
مشاهده جزئیات
یک مطالعه از "Forrester Consulting" (یک شرکت تحقیقاتی معتبر در بازار آمریکا)، بیان می کند که 47 درصد از کاربران انتظار دارند که یک صفحه وب دو ثانیه یا کمتر بارگیری شود.
افزونه wp-rocket چیست ؟
WP Rocket یکی از بهترین افزونه ها در زمینه بهینه سازی و کش سایت می باشد که در سرعت بخشیدن به زمان بارگذاری وب سایت بسیار موثر است. wp-rocket فایل های js , css , html را بهینه سازی می کند.
آموزش کار با افزونه wp-rocket
پس از نصب، به صفحه تنظیمات رفته و طبق تصویر(1) شروع به تنظیم افزونه کنید.
1- Dashboard
در منوی داشبورد، مطابق تصویر زیر اطلاعاتی نظیر وضعیت لایسنس و تاریخ منقضی شدن این افزونه به شما نشان می دهد.
مابقی تنظیمات را به صورت پیش فرض قرار دهید.
تصویر(1)
2- Cache
در این مرحله، به تشریح جزئیات هر یک از تنظیمات مربوط به بخش cache این افزونه مطابق تصویر(2) پرداخته خواهد شد.
تصویر(2)
Mobile Cache (شماره 1)
در بخش "Mobile Cache" پس از فعال سازی "Enable caching for mobile devices"حتماً می بایست "Separate cache files for mobile devices" را انتخاب نمایید. با فعال کردن این بخش، سیستم کش بر روی موبایل فعال می شود. بدین منظور که اگر کاربری از طریق موبایل، وارد وب سایت شما شود، محتویات سایت شما بر روی دستگاه موبایل کاربر کش می شود و در دفعات بعد با سرعت بالاتری سایت برای آن کاربر در دسترس قرار می گیرد.
Enable caching for logged in WordPress users (شماره 2)
این مورد تنها زمانی توصیه می شود که در سایتتان، کاربرانی عضویت دارند (زمان ثبت نام اطلاعات خود را وارد می کنند) یا زمانی که کاربران برای دیدن محتوا باید وارد سیستم شوند. بدین شکل که کاربر در زمان ورود به سایت، پس از وارد کردن نام کاربری و رمز ورود به صورت اتوماتیک شناسایی می شود.
Cache Lifespan (شماره 3)
به طور خودکار بر روی 10 ساعت تنظیم می شود و به این معنی است که فایل های ذخیره شده به صورت خودکار پس از 10 ساعت بروز می شوند. اگر شما به ندرت سایت خود را به روز می کنید، می توانید آن را افزایش دهید (شماره4).
و در آخر بر روی "save changes" کلیک نمایید.
3- File Optimization
در این بخش مطابق با تصویر (3) می توانید تنظیماتی را به جهت بهبود فایل های css و js انجام دهید.
تصویر(3)
Minify CSS files (شماره 1)
این بخش با از بین بردن فضاهای موجود در بین کدها منجر به پردازش سریع تر فایل های CSS و افزایش سرعت سایت می شود.
توجه : از فایل های css حتماً می بایست بک آپ تهیه کنید تا در زمان بروز مشکل و بهم ریختگی قالب سایت، بتوانید سایت را به حالت قبل برگردانید.
Combine CSS files (Enable Minify CSS files to select) (شماره 2)
تمامی فایل های css وب سایت را در یک فایل ادغام می کند که این امر منجر به کاهش درخواست های http و در نهایت افزایش سرعت سایت می شود.
Optimize CSS delivery (شماره 3)
با انتخاب این گزینه، ابتدا سایت شما بدون هیچ استایلی و به صورت نامرتب در دسترس قرار می گیرد و سپس مابقی اجزا لود می شوند.
توجه: این مورد از سمت ما پیشنهاد نمی شود اما جهت افزایش سرعت سایت می توانید آن را فعال نمایید.
Remove query strings from static resources (شماره 3)
با انتخاب این گزینه، درخواست هایی که به صورت query string ارسال می شوند، حذف می گردند.
اگر به انتهای آدرس سایت توجه کنید، به عنوان مثال اگر (e.g. style.css?ver=1.0) باشد آن را به صورت (e.g. style-1-0.css) کدگذاری می کند. وجود query string ها در سورس ها باعث می شود آدرس هایی که در انتهای آن ها از (؟) استفاده شده است، کش نشوند. ضمن اینکه باعث می شود خطای "Leave Browser Caching" در gtmetrix برای سایت نمایش دهد که باعث پایین آمدن grade سایت می شود.
Remove unused CSS (Beta) (شماره4)
وقتی Remove unused CSS را فعال می کنید، CSS استفاده شده در وب سایت شما در پس زمینه ایجاد می شود و به HTML هر صفحه پردازش شده اضافه می شود.
Minify JavaScript files (شماره 5)
با از بین بردن فضاهای موجود در بین کدها، منجر به پردازش سریع تر فایل های Js و افزایش سرعت سایت می شود.
توجه : از سایتتان حتماً می بایست بک آپ تهیه کنید تا در زمان بروز مشکل و بهم ریختگی، بتوانید مجدداً سایت را به حالت قبل برگردانید.
Combine JavaScript files (Enable Minify JavaScript files to select) (شماره 6)
تمامی فایل های JS وب سایت را در یک فایل ادغام می کند که این امر منجر به کاهش درخواست های http و در نهایت افزایش سرعت سایت می شود.
Load JavaScript deferred (شماره 7)
با انتخاب این گزینه، فایل های JS در انتها و پس از محتوا و تصاویر سایت لود می شود.
delay JavaScript files (شماره 8)
با انتخاب این گزینه، فایل های JS صرفا زمانیکه کاربر بر روی آن ها اسکرول می کند، اجرا می شوند.
4- Media
در این مرحله، به تشریح جزئیات هر یک از تنظیمات مربوط به بخش Media این افزونه مطابق تصویر(4) پرداخته خواهد شد.
تصویر(4)
Enable for images (شماره 1)
با انتخاب این گزینه، زمان ورود بازدیدکننده به سایت، تصاویر لود نمی شود و تنها اگر کاربر با Scroll کردن به پایین صفحه، به تصویر برسد، تصویر برای کاربر نمایش داده خواهد شد.Enable for iframes and videos (شماره 2)
با انتخاب این گزینه، زمان ورود بازدیدکننده به سایت، ویدیو و فریم ها لود نمی شوند و تنها اگر کاربر با Scroll کردن به پایین صفحه ، به ویدیو یا فریم برسد، برای کاربر نمایش داده خواهد شد.Add missing image dimensions (شماره 3)
هنگامی که مرورگر صفحه ای را نمایش می دهد، ابتدا HTML را بارگذاری می کند و منتظر بارگیری تصاویر می ماند. در صورت وجود مقادیر عرض و ارتفاع، مرورگرها می توانند از این اطلاعات برای ایجاد فضای مورد نیاز برای نمایش تصاویر در صفحه استفاده کنند.
هنگامی که فضا برای یک تصویر مشخص نشده باشد، مرورگر چیدمان محتوا را به محض بارگیری تغییر می دهد. این تغییر چیدمان منجر به یک تجربه بد برای کاربر می شود.
Disable WordPress embeds (شماره 4)
با غیرفعال سازی این مورد، چنانچه در سایت شما ویدیویی وجود داشته باشد، تنها لینک آن برای کاربران نمایش داده خواهد شد.
در نهایت برای ذخیره تنظیمات بر روی "save changes" کلیک نمایید.
Enable WebP caching (شماره5)
اگر سایت شما از تصاویر WebP استفاده می کند، WP Rocket می تواند یک فایل cache جداگانه برای آنها در صورت نیاز ایجاد کند.
5- Preload
در این مرحله، به تشریح جزئیات هر یک از تنظیمات مربوط به بخش Preload این افزونه مطابق تصویر(5) پرداخته خواهد شد.
تصویر(5)
Activate Preloading (شماره 1)
مطابق تصویر(5) این گزینه را فعال کنید.
Activate sitemap-based cache preloading
در صورت فعال سازی Preloading، گزینه "Activate sitemap-based cache preloading" برای شما فعال خواهد شد، که با انتخاب این مورد نقشه وب سایت خود را در باکس ایجاد شده وارد می کنید (برای به دست آوردن آدرس نقشه وب سایت می توانید از افزونه Yoast seo استفاده کنید) که این کار باعث کش شدن تمامی صفحه های سایت شما توسط این افزونه می شود.
توجه: طبق تصویر(5) در صورتیکه افزونه Yoast را در وردپرس نصب کرده باشید این گزینه به "Yoast SEO XML sitemap" تغییر می کند.
Preload Links (شماره2)
Preload Links با بارگیری صفحه ای که کاربر روی پیوند قرار می دهد، زمان بارگذاری صفحات سایت را بهبود می بخشد.
Prefetch DNS Requests (شماره 3)
ممکن است در قالب یا افزونه سایت شما برخی از لینک ها وجود داشته باشد مانند:
fonts.googleapis.com,maps.google.com،maxcdn.bootstrapcdn.com
ارسال هر درخواست http به این لینک ها منجر به کندی سایت شود. بدین صورت می توانید در این باکس آدرس این لینک ها را درج کنید تا با کاهش درخواست های http سرعت سایت شما افزایش پیدا کند.
Preload Fonts (شماره4)
Preload Fonts زمان بارگذاری و عملکرد لود تایم را بهبود می بخشد.
در نهایت برای ذخیره تنظیمات بر روی "save changes" کلیک نمایید.
6- Advanced Rules
در این بخش تنظیمات پیشرفته مربوط به کش را می توان انجام داد که مطابق تصویر(6) به جزییات هر یک پرداخته خواهد شد.
تصویر(6)
Never Cache URL (شماره 1)
در این بخش آدرس صفحات و پست هایی که نمی خواهید کش شوند، را می توانید قرار دهید.
Never Cache Cookies (شماره 2)
در این بخش به وسیله تعریف یک شناسه خاص برای کوکی ها، می توانید تنظیماتی انجام دهید که کوکی ها در مرورگر بازدیدکننده کش نشود.
Never Cache User Agent (شماره 3)
در این بخش می توانید مرورگرهایی که نباید کش کنند را تنظیم کنید. این مورد برای کاربرانی قابل استفاده است که در حال تکمیل و راه اندازی سایت هستند و نمی خواهند کش شوند تا بتوانند تغییرات را سریع مشاهده کنند.
Always Purge URL (شماره 4)
آدرس URL هایی که پس از تغییر و آپدیت یک پست می خواهید از حافظه کش حذف شوند، را در این بخش می توانید درج کنید.
Cache Query String (شماره 5)
این بخش امکان کش کردن query string های خاص را می دهد.
به عنوان مثال لینک زیر را مشاهده نمایید .
example.com/page/?country=italy
در این مورد country یک پارامتر و Italy یک مقدار می باشد.
با قرار دادن country در باکس باعث کش شدن پارامتر می شود.
در نهایت برای ذخیره تنظیمات بر روی "save changes" کلیک نمایید.
7- Database
در این بخش تنظیماتی مرتبط با بهینه سازی وردپرس را می توان اعمال نمود که مطابق تصویر(7) به جزییات هریک از آنها پرداخته می شود.
تصویر(7)
Post Cleanup (شماره 1)
در این بخش رونوشت ها و پیش نویس ها و پست هایی که در سطل زباله قرار دارند به صورت اتوماتیک از دیتابیس حذف می شوند.
Comments Cleanup (شماره 2)
در این بخش کامنت های اسپم و کامنت هایی که در سطل زباله قرار دارند، به صورت اتوماتیک حذف می شوند.
Transients Cleanup (شماره 3)
برخی از داده های ذخیره شده مانند شمارنده لایک در شبکه های اجتماعی، کامنت هایی که داخل سطل زباله قرار دارند و داده هایی که دیگر کاربردی ندارند را از پایگاه داده حذف می کند.
Database cleanup (شماره 4)
این بخش امکان بهینه سازی جداول دیتابیس را می دهد. این گزینه قادر است افزونه هایی که فعال بوده اند و در حال حاضر فعال نیستند، اطلاعات آنها را حذف کند.
توجه : در انتخاب این گزینه باید دقت نمایید.
Automatic cleanup (شماره 5)
با انتخاب این گزینه و تعیین دوره زمانی، می توانید مشخص کنید که هر چند وقت یکبار عملیات بهینه سازی دیتابیس به صورت خودکار انجام شود.
در نهایت برای اجرای عملیات بهینه سازی بر روی "optimize" کلیک نمایید.
8- CDN
"content delivery network" یا "content distribution network" یا به اختصار "CDN" ، یک شبکه تحویل محتوا یا شبکه توزیع محتوا می باشد. CDN یک شبکه توزیع جغرافیایی از سرورهای پروکسی و مراکز داده (data center) می باشد.
CDN ها امروزه بخش بزرگی از محتوای اینترنتی از جمله اشیاء وب (متن، گرافیک و اسکریپت)، اشیاء قابل دانلود (فایل های رسانه ای، نرم افزار، اسناد)، برنامه های کاربردی (تجارت الکترونیک، پورتال ها) و … را شامل می شوند.
در واقع زمانی که شما این سرویس را برای سایت خود فعال می کنید، اطلاعات شما بر روی این سرورها قرار داده می شود و کاربرانی که از سایر نقاط دنیا از سایت شما بازدید می کنند، محتوای سایت را از نزدیک ترین دیتاسنتر یا مراکز داده دریافت می کنند که نهایتاً به سرعت بالاتر بارگذاری سایت می انجامد.
تصویر(8)
Enable Content Delivery Network (شماره 1)
اگر از یک CDN استفاده می کنید، می بایست این گزینه را فعال کنید. افزونه wp-rocket با اکثر cdn ها مانند آمازون و کلودفلر و … سازگار است.
CDN CNAME (شماره 2)
رکورد "CNAME" مربوط به دامنه که توسط سرویس دهنده CDN ارائه می شود را می بایست در این بخش تنظیم نمایید.
Exclude files from CDN (شماره 3)
آدرس فایل هایی که نباید توسط CDN در دسترس قرار بگیرند.
و در آخر برای ذخیره تنظیمات بر روی "save changes" کلیک نمایید.
9- Heartbeat
اگرچه heartbeat وردپرس ویژگی مفیدی است اما برای وب سایت هایی با منابع سرور کم و محدود به هیچ عنوان پیشنهاد نمی شود. روش کار قلب وردپرس به این صورت است که هر چند ثانیه یک درخواست زنده به صورت Ajax به وردپرس ارسال می کند. حالا فرض کنید چند نویسنده دارید یا وب سایت شما بازدید بالایی دارد نهایتاً منجر به درگیر شدن CPU هاست شما می شود.
این قابلیت به وسیله آدرس "wp-admin/admin-ajax.php" و توسط یک درخواست ajax اجرا می شود. اگر در گزارشات سرورتان متوجه مقدار زیاد درخواست به این فایل شدید پس حتما نیاز به تغییر مقدار heartbeat می باشد تا در مصرف منابع هاست صرفه جویی کنید.
بنابراین پیشنهاد می شود تا تغییراتی را در این بخش اعمال نکنید و اجازه دهید به همان شکل پیش فرض باقی بماند.
تصویر(9)
10- Add-ons
در بخش تنظیمات مربوط به Add-ons افزودنی هایی را مشاهده می کنید که در صورت نیاز برای فعال سازی هریک می توانید وضعیت آن را به "ON" تغییر دهید. مانند کلودفلر و وارنیش.
تصویر(10)
11- Tools
در این بخش هم می توانید درون ریزی و یا برون ریزی تنظیمات افزونه "Wp Rocket" را انجام دهید.
در این صفحه گزینه ای با نام Optimize CSS delivery for mobile وجود دارد که توضیحات آن به شرح زیر است:
وب سایت شما در حال حاضر از یک CSS Critical Path برای دسکتاپ و تلفن همراه استفاده می کند. بر روی "Generate Mobile Specific Cpcss" کلیک کنید تا CPCSS مخصوص موبایل برای سایت شما فعال شود.
تصویر(11)