افزونه Optimole

افزونه Optimole

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

تصاویر بخش مهمی از طراحی وب مدرن را تشکیل می دهند. آنها می توانند یک وب سایت کسل کننده و بی روح را به یک وب سایت جذاب و تعاملی تبدیل کنند. وقتی یک متن با تصویر همراه می شود می تواند پیام نویسنده را به طرز مؤثرتری به مخاطب القا کرده و درک بهتری از متن دهد.

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

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

❇️آموزش افزونه Optimole و نحوه فشرده سازی تصویر در وردپرس

برای استفاده از افزونه Optimole باید ابتدا یک کلید API دریافت کنید تا بتوانید سایت وردپرسی خود را به سرورهای Optimole اتصال دهید.

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه صفحه ای مشابه شکل زیر نمایش داده می شود. برای دسترسی به این صفحه می توانید به مسیر رسانه » Optimole نیز مراجعه کنید.

برای دریافت کلید API روی دکمه Register & Email API Key کلیک کنید. با کلیک بر روی این دکمه کلید API به آدرس ایمیلی که وارد می کنید ارسال خواهد شد. کلیک API را کپی کرده و در صفحه ای که مشابه شکل زیر برای شما باز می شود، پیست کنید.

پس از وارد کردن کلید API، روی دکمه Connect to Optimole Service کلیک کنید تا سایت شما به سرورهای Optimole متصل شود.

این افزونه برخی آزمایشات را به منظور آماده کردن سایت شما برای بهینه سازی انجام می دهد. پس از آنکه آزمایشات به پایان رسید، صفحه تنظیمات افزونه Optimole برای شما باز خواهد شد.

برای بهینه سازی تصاویر در سایت خود نیاز به اقدام دیگری نیست. Optimole تمام تصاویری که قبلاً در سایت شما بارگذاری شده است را بهینه سازی می کند.

اگرچه انجام کار دیگری ضروری نیست، اما در ادامه آموزش یک مرور کلی از تنظیمات مختلف موجود در افزونه Optimole انجام می دهیم.

❇️تنظیمات عمومی افزونه Optimole

برای پیکربندی اکثر تنظیمات افزونه Optimole باید به تب General مراجعه کنید. البته تنظیمات پیش فرض این افزونه کاملاً مناسب است و به محض فعال سازی و اتصال سایت خود به سرورهای افزونه، تصاویر شما بهینه سازی می شوند. اما با این حال شاید مایل باشید قسمتی از تنظیمات پیش فرض افزونه را تغییر داده و آن را برای خود سفارشی سازی کنید که در ادامه آموزش در مورد آن توضیح خواهیم داد.

• Enable image replacement : افزونه Optimole به طور خودکار همه URL های تصویر را با آدرسهایی که به سرورهای آنها هدایت می کند، جایگزین می نماید. فعال کردن این گزینه توصیه می شود زیرا باعث لود سریعتر تصاویر می شود.
• Scale images & Lazy load : فعال کردن این گزینه باعث می شود که افزونه تصاویر شما را کاهش داده و نسخه های کوچکتر را برای دستگاه های تلفن همراه بارگیری کند. همچنین ویژگی بارگذاری تنبل تصاویر را نیز فعال می کند.
• Enable error diagnosis tool: افزونه Optimole در صورت فعال کردن این گزینه یک مکانیزم عیب یابی فراهم می کند که به شما کمک می کند هرگونه مشکل احتمالی در سایت خود را شناسایی کنید.
• Clear cached resources: با کلیک بر روی دکمه موجود در این قسمت، تمام منابع کش شده (شامل تصاویر ، js ، css) را از سایت شما پاک می کند. اگر این منابع را بروز کرده و Optimole همچنان نسخه قدیمی را نشان می دهد، از این دکمه استفاده کنید.

❇️تنظیمات پیشرفته

تب Advanced که مربوط به تنظیمات پیشرفته افزونه Optimole است، خود از چند زیرتب مختلف تشکیل شده که در ادامه آموزش به بررسی آنها می پردازیم.

💠تنظیمات فشرده سازی

در زیرتب Compression می توانیند تنظیمات فشرده سازی افزونه را پیکربندی کنید.

• Enable network based optimizations: اگر وب سایت شما بازدید زیادی از دستگاه های تلفن همراه دارد یا بیشتر بازدیدکنندگان شما از مناطقی با اتصال کند شبکه هستند، می توانید این گزینه را فعال کنید.
• Serve CSS & JS through Optimole: اگر در فایل های CSS / JS تصویر دارید، فعال کردن این گزینه مفید است. Optimole تصاویر را از آن فایل ها بهینه کرده و CSS / JS را از طریق CDN (شبکه تحویل محتوا) ارائه می دهد.
• Enable Gif to Video conversion: این گزینه به شما امکان می دهد GIF ها را به صورت خودکار به فیلم تبدیل کنید. اگر در سایت خود دارای GIF بزرگ یا طولانی هستید، این گزینه را فعال کنید. فیلم ها بسیار سریعتر از GIF ها لود می شوند زیرا تصاویر GIF را نمی توان به خوبی بهینه کرد.
• Image quality: نوار لغزنده کیفیت تصویر به شما امکان می دهد درجه بهینه سازی تصاویر را انتخاب کنید. برای اکثر وب سایت ها، کیفیت Medium مناسب است. بازدیدکنندگان شما متوجه تفاوتی در تصاویر نمی شوند و سایت سریعتر لود می شود. در وب سایت هایی مانند وب سایت های عکس که کیفیت تصاویر بسیار مهم است، این تنظیم را روی High قرار دهید.

💠تنظیمات تغییر اندازه

در تب Resize می توانید تنظیمات اندازه تصاویر را پیکربندی کنید.

• Enable Smart Cropping: برش هوشمند تصاویر یک ویژگی جالب است. اما تنها در صورتی آن را فعال کنید که به الگوریتمی که برای برش تصاویر در نظر گرفته شده است، اعتماد دارید.
• Enable Retina images: اگر به تصاویر واضح و شفاف در صفحه های 4K نیاز دارید ، می توانید تصاویر رتینا را فعال کنید.
• Resize large images original source: این گزینه تمام تصاویری که در سایت خود آپلود می کنید را به صورت خودکار تغییر اندازه می دهد.

💠تنظیمات بارگذاری تنبل تصاویر

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

• Enable generic lazyload placeholder: شما می توانید Placeholder را فعال کنید تا قبل از لود کامل تصاویر برای بازدیدکنندگان نمایش داده شود، اما فعال کردن این گزینه در برخی موارد ممکن است بر تجربه کاربر تأثیر خوبی نگذارد. با این حال فعال کردن آن باعث کاهش تعداد کل درخواست ها و وزن صفحه می شود. بهتر است ابتدا آن را امتحان کنید و ببینید که تأثیر آن بر سایت شما چگونه است.
• Use native lazyload: در صورت پشتیبانی از lazyload بومی مرورگر از آن استفاده می کند. در غیر این صورت به lazyload کلاسیک بازمی گردد.
• Scale Images: در صورت غیرفعال کردن این گزینه، مقیاس بندی خودکار تصاویر روی lazyload غیرفعال می شود.
• Enable lazyload for background images: اگر تجربه کاربری بدی در سایت شما ایجاد نکند ، بهتر است به Optimole اجازه دهید تا تصاویر پس زمینه را نیز در سایت شما به صورت تنبل بارگذاری کند.
• Enable lazyload for embedded videos and iframes: فعال کردن این گزینه باعث می شود ویدئوهای جاسازی شده و iframe ها به صورت نبیل بارگذاری شوند.
• Lazyload background images for selectors: شما می توانید سلکتورهای CSS مورد نظر خود را در این باکس وارد کرده و تصاویر پس زمینه را برای آنها بارگذاری تنبل کنید.

افزونه Optimole به شما امکان می دهد تصاویری که نمی خواهید بهینه سازی شوند یا ویژگی بارگذاری تنبل روی آنها اعمال شود را مستثنی کنید. در ادامه آموزش به بررسی این موضوع می پردازیم.

💠حذف تصاویر از بهینه سازی و بارگذاری تنبل

در تب Exclusions می توانید تصاویر مورد نظر خود که نمی خواهید بهینه سازی یا بارگذاری تنبل شوند را مشخص کنید.

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

افزونه Optimole علاوه بر تنظیمات پیشخوان وردپرس یک پیشخوان ابر نیز در اختیار شما قرار می دهد که می توانید میزان استفاده از Optimole را در تمام سایت هایی که از Optimole و کلید API آن در آنها استفاده می کنید، مشاهده کنید.

پلن رایگان افزونه Optimole اجازه بهینه سازی 1GB تصویر در هر ماه، CDN و 10GB مشاهده پهنای باند در هر ماه را می دهد. این پلن از یک CDN سفارشی با 7 موقعیت در سراسر جهان استفاده می کند. پلن های غیر رایگان Optimole به طور مستقیم با Amazon CloudFront با بیش از 130 موقعیت مختلف در سراسر جهان ادغام شده اند. لازم به ذکر است که اگر وبسایت شما از بعضی از CDN ها مانند Cloudflare از قبل استفاده می کند، هیچ گونه تضاد یا مشکلی به وجود نمی آید و در این حالت هیچ تنظیمات اضافی مورد نیاز نیست.