.This lesson is a part of the Free Crucial WordPress Plugins Course by TemplateMonster. Hello wordpressers! Here comes the lesson #3, this time we’re going to talk about performance optimization plugins, and a bunch of things related to performance optimization. Optimization Whether you run a high traffic WordPress installation or a small blog on a low cost shared host, you should optimize WordPress and your server to run as efficiently as possible. This article provides a broad overview of WordPress optimization with specific recommended approaches.

Description

Optimize images, turn on lazy load, resize, compress & improve your Google Page Speed with the incredibly powerful and 100% free WordPress image smusher, brought to you by the superteam at WPMU DEV!

And whether you spell it ‘optimise’ or ‘optimize’, Smush will compress images without a visible drop in quality.

Image optimization is the easiest way to make your site load super fast!

Award Winning Image Optimizer

Smush has been benchmarked and tested number one for speed and quality. It is also the award-winning, back-to-back proven crowd favorite image optimization & image compression plugin for WordPress.

• Lossless Compression – Strip unused data and compress images without affecting image quality.
• Lazy Load – Defer offscreen images with the flip of a switch.
• Bulk Smush – Optimize & compress up to 50 images with one click.
• Image Resizing – Set a max width and height and large images will scale down as they are being compressed.
• Incorrect Size Image Detection – Quickly locate images that are slowing down your site.
• Directory Smush – Optimize images even if they are not located in the media library.
• Automated Optimization – Asynchronously auto-smush your attachments for super fast compression on upload.
• Without Monthly Limits – Optimize all of your images up to 5MB in size, free forever (no daily, monthly, or annual caps).
• Gutenberg Block Integration – View all Smush stats directly in image blocks.
• Multisite Compatible – Offers both global and individual Multisite settings.
• Process All Your Files – Smush will process PNG, JPEG, and GIF files for optimum results.
• Super Servers – Smush images with no slowdown using WPMU DEV’s fast, reliable Smush API.
• Convert to WebP (Pro Only) – Upgrade and automatically serve images in Next-Gen WebP format.
• And many, many, more!

Learn The Ropes With These Hands-On Smush Tutorials

Compress Image While Preserving Image Quality

Some image compression tools destroy images with as much as a 30% loss in quality. Our servers strip hidden bulky information from your images and reduce file size without affecting the appearance.

Smush meticulously scans every image you upload – or have already added to your site – cuts all the unnecessary data and scales it for you before adding it to your media library. And it can serve images in the WebP format.

Compress any Image in any Directory

In addition to smushing your media uploads, you may want to compress the images stored in other folders. Smush now lets you compress any image in any directory so that you can optimize all the images on your site – including NextGEN images, images stored on Amazon S3 using WP Offload Media and images in EVERY WordPress plugin and theme package!

Compatible with Your Favorite Themes, Page Builders and Media Library Plugins

No matter what theme or plugins you use to better manage your WordPress media library, Smush has you covered. Check out just a few of the popular products Smush is working with to help make your site faster and more efficient:

• And many, many, more!

Incorrect Size Image Detection

Smush includes a wrong size image finder. Activate and your images will be highlighted with smart tips for scaling your images. Quickly locate the images that are keeping you from getting that perfect 100 on your Google PageSpeed test.

Defer Offscreen Images

Smush has lazy load built-in. If your page has a bunch of images below the fold, lazy loading will drastically speed up your page by serving only the images being viewed and delaying others further down the page.

★★★★★

“I had no idea that my page load time was being dragged down by the images. The plugin nearly halved the time it took.” – karlcw

★★★★★

“I optimise my photos in Photoshop, but Smush makes it so easy – it does it automatically. I can just sit back and enjoy the speed.” – helen432

★★★★★

“Smush helped reduce the total files size on my site and increased browsing speed. Well done guys!” – pdci

★★★★★

“It’s very discrete and does not bother me with an API key or other additional installation steps. The main dashboard of the plugin gives me nice insight. Overall it really fits my needs and I’ll be willing to upgrade to pro if my needs change. I’d recommend it to clients/friends without hesitation. Keep it up!” – tarkan_

What about Multisite?

Smush can be used to optimize all the images across your entire network! Use global settings or configure each site individually.

Smush is super easy to use – no confusing compression software settings. Smush images in your library one at a time or bulk smush up to 50 images at a time. Plus, configure auto-smush to asynchronously scale and compress some or all of your images as they are being uploaded – it’s incredibly fast.

The faster your site loads, the more Google, Bing, Yahoo, and other search engines will like it. Your site will load faster and rank higher.

Shameless Plug(ins)

• Hummingbird – Page Speed Optimization
• Hustle – Pop-ups, Slide-ins and Email Opt-ins
• SmartCrawl – SEO Optimizer
• Defender – Security, Monitoring, and Hack Protection
• Forminator – Form, Poll, and Quiz Builder
• Beehive – Customizable Google Analytics Dashboards

Smush can take care of all your image compression needs, for free!

However, if you’d like Super Smush lossy compression, fast CDN image delivery, WebP conversion, automatic resizing, the ability to optimize (or optimise) images up to 32MB, bulk smush optimization for all your images in just one-click, auto-convert PNG to JPEG, the ability to Smush and make a copy of your full-sized images (to restore them at any point), you can always take the next step with WP Smush Pro. And get even more with her whole team of WordPress optimization hero friends (security, SEO, performance, support, and maintenance automation) – trusted by thousands of agencies and freelancers offering site maintenance services.

Privacy

Smush does not interact with end users on your website. The only input option Smush has is to a newsletter subscription for site admins only.

Smush uses a third-party email service (Mailchimp) to send informational emails (Opt-in) to the site administrator. The administrator’s email address is sent to Mailchimp and a cookie is set by the service. Only administrator information is collected by Mailchimp.

Smush sends images to the WPMU DEV servers to optimize them for web use. This includes the transfer of EXIF data. The EXIF data will either be stripped or returned as it is. It is not stored on the WPMU DEV servers.

About Us

WPMU DEV is a premium supplier of quality WordPress plugins, services and support. Learn more here:
https://wpmudev.com/

Don’t forget to stay up to date on everything WordPress from the Internet’s number one resource:
WPMU DEV Blog

Hey, one more thing… we hope you enjoy our free offerings as much as we’ve loved making them for you!

Contact and Credits

Originally written by Alex Dunae at Dialect (dialect.ca, e-mail ‘alex’ at ‘dialect dot ca’), 2008-11.

FAQ

This means your images were not properly scaled for where they are being displayed. Scaling images before uploading them can be time-consuming but can save space and speedup load time. First, determine what size your image needs to be. You can use the built-in images size detector included in the free version of Smush to find what height and width your image should be. Once you know how large the image should be, scale your images to the right size.

Lazy Load will defer your offscreen images from loading until they are needed. From the Smush Dashboard, select Lazy Load and click Activate. Smush Lazy Load works out of the box or can be customized based on your needs.

Tip: If you’re having any issues or want to save a ton of time, the Smush Pro CDN includes auto-resizing.

Nope. WordPress crops and resizes every image you upload for embedding on your site. By default, Smush only compresses these cropped and resized images, not your original full-size images. To compress your original full-sized images, use Smush Pro.

GIF files are large and can’t be optimized much. They should only be used if the image is animated.

PNG is best for computer generated graphics (vectors, logos, fonts, etc.), images with few colors or images with transparency.

JPG should be used for photography or images with a lot of color variation.

Tip: The Smush Pro CDN includes WebP compression – sharper images that are 25 to 30 percent smaller than JPEG and PNG files.

Yes! EXIF data stores camera settings, focal length, date, time, and location information in image files. EXIF data makes image files larger but if you are a photographer, you may want to preserve this information. We have included the option to preserve EXIF image data in Smush.

First, check to see if you’re receiving any server errors. If your images seem to be processing correctly, check the file size of the images being skipped. Images over 5mb will be skipped. To compress images up to 32mb, get Smush Pro.

Great question! It is important to understand Smush is an optimization tool that uses lossless image compression to save disk storage space and speed up your site. Smush squeezes data from your image files that will save space, resize huge images, and improve speed without changing quality.

You can track file size changes in your media library, individual image savings, directory savings, and Smush total savings with Smush stats. If you want to see some additional magic, run before-and-after page-speed tests with WP Checkup or Google PageSpeed Insights. Every little bit of resource savings is important when it comes to page-speed!

Optimizing all the image sizes generated by WordPress, images being imported from plugins and themes, and images from other web sites is a painful and time-consuming process.

Smush automatically handles optimizing all your images no matter where they come from and can be used as a standalone tool or alongside Photoshop.

WebP and other Next-Gen formats are not supported on all browsers and require fallback images. For that reason, WebP conversion is only available in Smush Pro. Smush Pro converts images to WebP for a 25-30% savings over JPEG and PNG and serves fallback images on unsupported browsers.

It depends what side of the pond you live on…but whether you say optimize, optimise, optimizer, or Smush goddess of speed, this plugin will make sure your images are loading lightning fast.

Reviews

This article may contain outdated material

This optimization guide pertains to the legacy version of GTmetrix.

A step-by-step guide on how to optimize your WordPress installation.

Overview

Many of our users run WordPress either as a CMS or blog platform. With a lot of great plugins available, it’s easy to create a full-featured website with a lot of neat functionality. These plugins however, can insert additional CSS and JavaScript files into your header which can hurt your site’s performance (and PageSpeed and YSlow scores).

We’ve listed some plugins and written some recommendations for our WordPress users seeking optimization help.

Note: These plugins address mainly front-end optimization issues only. If your site still takes a long time to load, an improved server or back-end code optimizations is what will make a real difference. Read more about our WordPress Hosting Service.

(Optional First Step) Install and activate GTmetrix for WordPress

Use this plugin to get a before snapshot of your WP performance.

Alternative: Log in and analyze your site on GTmetrix.com – You’ll be able to keep track of it better with History graphs.

Note: We are currently working on a maintenance update of GTmetrix for WordPress. While it hasn’t been updated in a while, it has been tested and still works for the latest version of WordPress (4.7.5 at the time of this writing), excluding some small formatting issues.

Once you’ve installed it, enter your API key from your GTmetrix account in the Settings page (you must be registered to generate an API key).

After this is done, visit “Tests” and under the “Latest Front Page Score” module, click “Test your Front Page now” button.

A report will be generated with PageSpeed and YSlow grades for the front page of your WordPress site. This is your before performance.

Step 1) Install and activate UpdraftPlus

It’s critical that you backup your WordPress installation before optimization (and on a regular basis!). UpdraftPlus provides a simple and effective way to backup your entire WordPress install, including your database, plugins, themes, uploads, and more.

a) Backup your WordPress installation

Under the “Settings” section in your WordPress sidebar, you’ll have access to a new menu option called “UpdraftsPlus Backups.”

Click “Backup Now” – a popup will appear. Ensure that both “Include the database in the backup” and “Include any files in the backup” options are checked.

Click “Backup Now” – UpdraftPlus will create a complete backup of your WordPress installation. If anything goes wrong with the optimization, or if your installation gets hacked or corrupted – you can restore using your backups.

That’s it for UpdraftPlus settings!

How To Optimize Wordpress Site

Step 2) Scale your images (Optional)

If your GTmetrix report indicates that you need to Serve scaled images, follow this guide we wrote on how to optimize images – specifically steps 2 to 4.

In WordPress, you can insert smaller sized images based on what WordPress has generated for you.

Basically, you do not want to serve images that are larger in dimensions than what your user needs to display. Learn more about image optimization here.

Step 3) Install and activate WP Smush (Smush Image Compression and Optimization)

Under the “Media” section in your WordPress sidebar, you’ll have access to a new menu option called “WP Smush”

In this section, ensure that the “Auto-Smush Images on upload” feature is checked. The plugin will now optimize every image you upload henceforth since you activated it.

Next, smush all of the images in your Media Library by clicking on “Bulk Smush 50 Attachments” (The free version of the plugin is limited to bulk smushing 50 attachments at a time. You’ll need to revisit this page and bulk smush the next 50 attachments).

That’s it for WP Smush! If you want more details on options like optimizing images outside of your Media Library, read our How to Optimize Images: A Practical Guide article.

Step 4) Install and activate WP Fastest Cache

On the sidebar, you’ll notice a new option called “WP Fastest Cache.”

a) Enable the following settings:

• Cache System
  • Enable caching for faster delivery of pages.
• Preload
  • Upon clicking this, you’ll get a popup telling you which pages to cache.
  • Check all of them and leave the “pages per minute” at 4 – click “OK”.
  • You may need to reduce this number if your hosting service complains.

• Logged-in Users
  • Ensures that if you’ve logged in, you see the actual state of your pages, not the cached versions.
• Minify HTML*
  • Compresses HTML and reduces file size.
• Minify CSS*
  • Compresses CSS and reduces file size.
• Combine CSS*
  • Joins your CSS files into a single CSS resource, reducing number of HTTP requests.
• Combine JS*
  • Joins your JavaScript files into a single JS resource, reducing number of HTTP requests.
• Gzip
  • Further compress your pages to be smaller in file size and faster to download.
• Browser Caching
  • Helps with the Leverage browser caching recommendation.

Click “Submit” when you’re done.

That’s it for the WP Fastest Cache settings!

Important notes

Minification and Combining

Minifying and combining HTML/CSS/JavaScript can break functionality in your website. Minification essentially goes through your scripts are removes extraneous data like comments, formatting, whitespace and other things that computers don’t need to read. Combining takes the contents of each individual script and aggregates them all into a single script.

Speed Up My Wordpress Site

Because these processes modify data, they sometimes break functionality due to coding typos, syntax errors, duplicate function names, etc.

Make sure to check your site functionality after enabling the minification/combining features. If you find things are broken, disable all minification/combining features, and re-enable them one-by-one to find which feature is causing the issue.

If your hosting environment supports HTTP/2, combination of scripts is not needed, as the HTTP/2 protocol supports multiplexing – essentially allowing multiple downloads using a single TCP connection (as to only 6 parallel connections in HTTP/1.x.)

Page Caching

Whenever you make major changes to the site, like adding a plugin or modifying the CSS/theme, its recommended to delete the cache and preload it again to ensure you’re serving the latest version of the site. You can find the option to delete the cache in WP Fastest Cache in the “Delete Cache” tab.

WP Fastest Cache will automatically preload the cache again after you’ve deleted it. New content like posts or pages do not require you to delete the cache.

Step 5) Analyze your site

Analyze your site again (via GTmetrix.com or with our plugin) and see the difference in performance!

You should see improvements in the following metrics:

• Fully loaded time/Onload time
• Total Page Size
• Requests
• PageSpeed/YSlow scores
  • Serve scaled images
  • Optimize images
  • Leverage browser caching
  • Minify CSS/HTML
  • Enable gzip compression
  • Make fewer HTTP requests

Your mileage may vary! Due to the varying nature of WordPress installations, plugin usage and hosting environments, you may not be able to considerably affect all of the above metrics. Things like third-party resources (Facebook widgets, YouTube embeds, etc) and ads can still heavily affect your score.

Summary

After testing and playing around with many similar plugins, we’ve found that the combination of WP Fastest Cache, image scaling and WP Smush provides the most effective and simplest way to improve the performance of your WordPress website.

Take a look at the difference in our test blog – Comparison here:

If you have a WordPress blog, slow or not, give this guide a try and improve your user’s experience!

Need help? Hire a Developer

Is your WordPress site still running slow?

We recommend finding help using one of our optimization partners. They’re a great option for website owners that want to improve performance, but don’t have the technical skill to implement optimizations.

Have a look at our partners below:

Got an Enterprise-Level WordPress, Magento, or Zencart site?

Seo Wordpress Optimization

The expert developers at Numinix can give users the gift of a great website experience by improving your website’s speed.

Need help? Hire a Developer

We recommend finding help on Fiverr. This is a great option for website owners that want to improve performance, but don’t have the technical skill to implement optimizations.

Visit Fiverr, register for an account, and search for a speed optimization service that matches your platform, whether it’s WordPress, Magento, Shopify, Squarespace, Opencart, etc.