بهینه سازی وردپرس یک امر مهم و کاربردی جهت افزایش سرعت وب سایت به حساب می آید. مهمترین عمل در افزایش سرعت سایت بهینه سازی کد های JS (جاوا اسکریپت) و کد های CSS است.
با توجه به مهم بود این امر می خواهیم یک افزونه حرفه ای و در عین حال ساده را معرفی کنیم که می تواند کد های JS و CSS سایت را به خوبی بهینه سازی کند.
معرفی افزونه Autoptimize
افزونه Autoptimize یک افزونه حرفه ای و کاربردی است جهت بهینه سازی کد های جاوا اسکریپت و سی اس اس های وب سایت وردپرسی شما.
نصب افزونه Autoptimize
به 2 صورت می توانید افزونه بهینه سازی وردپرس را نصب نمایید؛
- دانلود از مخزن وردپرس و بارگذاری در سایت » دانلود افزونه بهینه سازی وردپرس
- نصب مستقیم از مخزن وردپرس در بخش افزونه ها
مراحل نصب و فعال سازی افزونه Autoptimize
بهترین روش برای نصب افزونه های وردپرسی, نصب مستقیم آنها از مخزن وردپرس است, برای انجام اینکار مراحل زیر را دنبال کنید:
- ابتدا از بخش افزونه ها, گزینه افزودن را انتخاب کنید.
- سپس در بخش جستجو (سمت چپ) نام افزونه را وارد کنید » Autoptimize
- سپس افزونه را نصب و فعال کنید.
پس از فعال کردن افزونه گزینه Autoptimize به بخش تنظیمات وردپرس اضافه خواهد شد, بر روی کلیک کنید.
پس از ورود به صفحه تنظیمات افزونه Autoptimize بر روی گزینه نمایش تنظیمات پیشرفته کلیک کنید.
پس از کلیک بر روی گزینه نمایش تنظیمات پیشرفته, گزینه های بیشتری برای شما نمایش داده می شود, که به صورتی کلی آنها را بررسی خواهیم کرد.
تنظیمات HTML
تنظیمات مربوط به بهینه سازی کد های HTML و نگه داشتن کامنت های HTML, تیکت هر دو مورد را بزنید.
تنظیمات JavaScript
تنظیمات مربوط به کد های جاوااسکریپت, باتوجه به نیاز خود می توانید این گزینه را فعال یا غیرفعال کنید, من باتوجه به اینکه اسلایدر آوا سایت از جاوا اسکریپت استفاده میکنه این گزینه رو فعال نکردم.
تنظیمات CSS
تنظیمات مربوط به بهینه سازی کد های سی اس اس, طبق تصویر بالا تیک های بخش های مشخص را بزنید.
تنظیمات CDN
تنظیمات مربوط به CDN که نیازی به تنظیم خاصی برای آن نیست.
ذخیره و تخلیه کش ها
در آخر گزینه ذخیره تغییرات و تخلیه کش را بزنید تا تنظیمات شما ذخیره شود.
بررسی بهینه سازی سایت
حال می خواهیم نتیجه کار خود را بررسی کنیم و ببینیم این افزونه بهینه سازی وردپرس Autoptimize واقعا کار آمد بوده است.
برای انجام یک بررسی درست از سایت GTmetrix.com استفاده کنید.
امیدوارم این آموزش مفید بوده باشه.
منبع: گروه طراحی آوا
سلام
لطفا در باره دو گزینه زیر بیشتر توضیح دهید.
Remove Google Fonts?
درون خطی (inline) نمودن تمام کدهای CSS؟
درون خطی نمودن تمام CSS ها باعث افزایش سرعت سایت هایی با بازدید کم می شود، اما در غیر اینصورت به صورت عکس عمل خواهد کرد.
سلام
remove google fonts: عدم استفاده از فونت های انلاین گوگل و بارگذاری فونت ها از پوشته مورد نظر در هاست.
Inline: منظور از این اصطلاح این است که می توان کدهای سی اس اس (CSS) را در قالب Attribute، داخل تگ های اچ تی ام ال (HTML) استفاده کرد. برای روشن شدن این مطلب کد زیر را مد نظر قرار می دهیم:
همانطور که می بینیم داخل تگ آغازین
کلیدواژه style را نوشته و یک علامت مساوی مقابل آن قرار می دهیم. سپس داخل علامت های ” ” به هر تعداد Property که بخواهیم می توانیم مورد استفاده قرار دهیم و آن ها را با یک فاصله از یکدیگر جدا می سازیم. تا حد ممکن استفاده از این نوع نوشتن کدهای سی اس اس (CSS) توصیه نمی شود چرا که اگر بخواهیم روزی مقادیر یک تگ را تغییر دهیم، می بایست شروع به ویرایش کلیه کدهای سی اس اس (CSS) در کلیه فایل های اچ تی ام ال (HTML) نماییم.
سلام
لطفا در باره دو گزینه زیر بیشتر توضیح دهید.
Remove Google Fonts?
درون خطی (inline) نمودن تمام کدهای CSS؟
درون خطی نمودن تمام CSS ها باعث افزایش سرعت سایت هایی با بازدید کم می شود، اما در غیر اینصورت به صورت عکس عمل خواهد کرد.
سلام
remove google fonts: عدم استفاده از فونت های انلاین گوگل و بارگذاری فونت ها از پوشته مورد نظر در هاست.
Inline: منظور از این اصطلاح این است که می توان کدهای سی اس اس (CSS) را در قالب Attribute، داخل تگ های اچ تی ام ال (HTML) استفاده کرد. برای روشن شدن این مطلب کد زیر را مد نظر قرار می دهیم:
همانطور که می بینیم داخل تگ آغازین
کلیدواژه style را نوشته و یک علامت مساوی مقابل آن قرار می دهیم. سپس داخل علامت های ” ” به هر تعداد Property که بخواهیم می توانیم مورد استفاده قرار دهیم و آن ها را با یک فاصله از یکدیگر جدا می سازیم. تا حد ممکن استفاده از این نوع نوشتن کدهای سی اس اس (CSS) توصیه نمی شود چرا که اگر بخواهیم روزی مقادیر یک تگ را تغییر دهیم، می بایست شروع به ویرایش کلیه کدهای سی اس اس (CSS) در کلیه فایل های اچ تی ام ال (HTML) نماییم.