{"id":188939,"date":"2020-06-24T00:45:30","date_gmt":"2020-06-24T00:45:30","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=188939"},"modified":"2023-12-20T04:26:31","modified_gmt":"2023-12-20T04:26:31","slug":"smush-pagespeed-image-compression","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/smush-pagespeed-image-compression\/","title":{"rendered":"How To Ace Google\u2019s Image PageSpeed Recommendations With Smush"},"content":{"rendered":"<p>Smush has everything you need to optimize your images, as well as a handy repertoire of tools ready to help you smash PageSpeed Insights image-related recommendations.<\/p>\n<p>It\u2019s a simple way to speed up your site, without sacrificing your image quality.<\/p>\n<p>With Smush you can:<\/p>\n<ul>\n<li><strong>Compress images<\/strong> in bulk and with one click<\/li>\n<li><strong>Automatically resize<\/strong> and rescale your images<\/li>\n<li><strong>Enable lazy loading<\/strong> so your server can concentrate on displaying content above the fold<\/li>\n<li><strong>Convert your image files<\/strong> to formats that are drastically smaller and much quicker to display.<\/li>\n<\/ul>\n<figure id=\"attachment_220164\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220164 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2021\/02\/smush-plugin.png\" alt=\"Smush image optimisation and compression plugin for WordPress.\" width=\"1000\" height=\"452\" \/><figcaption class=\"wp-caption-text\">Smush is the most popular image optimisation and compression plugin for WordPress with over a million installs and more than 50 billion images smushed.<\/figcaption><\/figure>\n<p>There are four main recommendations when it comes to images, and Smush can answer all of them.<\/p>\n<ul>\n<li><a href=\"#defer\">Defer offscreen images<\/a><\/li>\n<li><a href=\"#encode\">Efficiently encode images<\/a><\/li>\n<li><a href=\"#formats\">Serve images in next-gen formats<\/a><\/li>\n<li><a href=\"#size\">Properly size images<\/a><\/li>\n<\/ul>\n<blockquote><p>&#8220;I had no idea that my page load time was being dragged down by the images. The plugin nearly halved the time it took.&#8221; &#8211; <a href=\"https:\/\/profiles.wordpress.org\/karlcw\" rel=\"noopener\" target=\"_blank\">karlcw<\/a><\/p><\/blockquote>\n<p>This guide will show you how Smush can help you get your PageSpeed Insights score into the green.<\/p>\n<h2 id=\"defer\">Defer Offscreen Images<\/h2>\n<p>You don\u2018t want to be wasting server resources and sacrificing page speed to load images that are halfway down your page, so deferring offscreen images makes sense for many sites.<\/p>\n<p>When you install Smush, Lazy Load is one of the first features you should check out. Simply enabling it can fix the &#8216;defer offscreen images&#8217; PageSpeed recommendation.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/lazy-loading-webm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/lazy-loading-mp4.mp4\" type=\"video\/mp4\"><\/video>\n<p>Smush\u2019s <a href=\"https:\/\/wpmudev.com\/blog\/lazy-loading-automatic-resizing-5mb-free-compression-smush-image-optimization-update\/\" target=\"_blank\" rel=\"noopener\">Lazy Load<\/a> feature comes with more than just an on and off button.<\/p>\n<p>You can choose which image formats you want to include.<\/p>\n<figure id=\"attachment_188942\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188942\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/media-types.png\" alt=\"Screenshot of the media types, whocing jpeg, png, gif, svg and iframe which can all be excluded.\" width=\"600\" height=\"251\" \/><figcaption class=\"wp-caption-text\">Maybe you want your JPEGs to Lazy Load, but not your PNGs?<\/figcaption><\/figure>\n<p>As well as any post types you want to exclude.<\/p>\n<figure id=\"attachment_188943\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188943\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/pages-to-exclude.png\" alt=\"Screenshot of the different pages you can exclude from lazy load including the front page, blog and posts.\" width=\"600\" height=\"530\" \/><figcaption class=\"wp-caption-text\">There\u2019s also the option to add the URL of any specific pages.<\/figcaption><\/figure>\n<p>Lazy Loading is something that can easily be undone so turn it on, check your new PageSpeed Insights score, and most importantly, check the impact it has on your site.<\/p>\n<h2 id=\"encode\">Efficiently Encode Images<\/h2>\n<p>If you want a full and comprehensive guide to optimizing your images, I would recommend checking out <a href=\"https:\/\/wpmudev.com\/blog\/image-optimization-guide\/\" target=\"_blank\">this blog<\/a>, as here, we\u2019re purely focusing on how Smush can help you meet PageSpeed Insights audit requirements. In this section, specifically the \u2018efficiently encode images\u2019 recommendation.<\/p>\n<p>Smushing your images prevents your server being clogged up with extra MBs that don\u2019t need to be there.<\/p>\n<p>You can Smush in a variety of ways, with virtually no difference in quality.<\/p>\n<h3>Smush on Upload<\/h3>\n<p>Automatic compression is on by default and is used to efficiently encode images. It\u2019s a high impact, low-risk feature, which should be used on most sites.<\/p>\n<figure id=\"attachment_188944\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188944\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/automatic-compression.png\" alt=\"Screenshot of automatic compression showing it enabled and ready to automatically compress images on upload.\" width=\"600\" height=\"227\" \/><figcaption class=\"wp-caption-text\">You can select whether you want it to apply to all images, or exclude certain sizes.<\/figcaption><\/figure>\n<p>If you don\u2019t want Smush to automatically compress your photos, there are a few other ways you can manage this:<\/p>\n<h3>Bulk Smush<\/h3>\n<p>You can use the Bulk Smush feature to scan your site for photos which are in need of attention and smush them all at once.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_188945\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188945\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/bulk-smush.png\" alt=\"Screenshot of bulk smush showing that there are three images in need of smushing.\" width=\"600\" height=\"281\" \/><figcaption class=\"wp-caption-text\">Click the button and let the plugin do all the work for you.<\/figcaption><\/figure>\n<h3>Smush Through the Media Library<\/h3>\n<p>You can also head to the media library to check whether you have images available for smushing.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_188946\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-188946 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/media-library-smush.png\" alt=\"Screenshot of an image of a moon in the media library ready to be smushed.\" width=\"600\" height=\"272\" \/><figcaption class=\"wp-caption-text\">You can smush individually through the media library or select images to be ignored from autosmush.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h3>Smush Other Directories<\/h3>\n<p>You\u2019re not confined to just your media uploads &#8211; you can also smush non-WordPress images outside of your uploads directory.<\/p>\n<figure id=\"attachment_188947\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188947\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/directory-smush.png\" alt=\"Screenshot of the directory smush option showing the navigati9on to the wp-content folder to search for more images.\" width=\"600\" height=\"324\" \/><figcaption class=\"wp-caption-text\">You can easily navigate through your folders to find the images you want to Smush.<\/figcaption><\/figure>\n<h3>Super Smush &amp; Ultra Smush<\/h3>\n<p>Super Smush and <a href=\"https:\/\/wpmudev.com\/blog\/ultra-smush-wordpress\/\" target=\"_blank\" rel=\"noopener\">Ultra Smush<\/a> are your next port of call if you want to bring your file sizes down even further.<\/p>\n<p>It offers 2X (Super Smush) or 5x (Ultra Smush) the smushing power compared to the standard method, so it\u2019s handy if you have a lot of images that are soaking up valuable resources.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/07\/bulk-smush-options.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/07\/bulk-smush-options.mp4\" type=\"video\/mp4\"><\/video>\n<p style=\"text-align: center;\"><small>Choose the level of compression for bulk smushing images that best suits your needs.<\/small><\/p>\n<p>Even if ensuring your images were properly encoded wasn\u2019t one of PageSpeed Insights audit opportunities, it still makes sense to get rid of any excess bloating, as long as there is no noticeable difference to your images.<\/p>\n<h3>Utilize the CDN<\/h3>\n<p>Smush also offers a blazing-fast 121 point CDN\u00a0 (Pro version only) which allows you to serve your images in next-gen formats as well as ensuring they\u2019re delivered to your browser at breakneck speed.<\/p>\n<h2 id=\"formats\">Make your Images Next Gen<\/h2>\n<p>Next-gen image formats such as WebP and JPEG 2000\/XR can bring your file size down drastically.<\/p>\n<p>Serving your images in one of these formats will save you server resources, as well as meet one of PageSpeed Insights requirements.<\/p>\n<p>With Smush\u2019s CDN enabled, you can serve your images in the next-gen WebP format.<\/p>\n<p>As not all browsers support WebP images, Smush does a super-quick check of the browser, and if WebP images are supported, then great &#8211; that\u2019s what\u2019s served to your visitor. If not, Smush can simply serve up a PNG or JPEG to make sure that no one misses out.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/webmpsi.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/mp4psi.mp4\" type=\"video\/mp4\"><\/video>\n<h2 id=\"size\">Properly-sized Images<\/h2>\n<p>Forcing the browser to resize an image before it can be displayed to the user slows down your site and lowers your PageSpeed Insight score. Part of the recommendation is to refrain from serving images that are larger than the version that will be displayed on the visitor\u2019s screen.<\/p>\n<figure id=\"attachment_188995\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-188995\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/06\/automatic-resizing.png\" alt=\"Screenshot of the automatic resizing feature showing it currently turned on.\" width=\"600\" height=\"253\" \/><figcaption class=\"wp-caption-text\">With Smush\u2019s CDN, this is one of the easiest PageSpeed Insight recommendations to solve.<\/figcaption><\/figure>\n<p>If you want to ensure you\u2019re being completely thorough in the correct sizing of your images, read <a href=\"https:\/\/wpmudev.com\/blog\/compress-resize-images-wordpress\/\" target=\"_blank\">this blog<\/a> to find out a few alternative tricks.<\/p>\n<h2>Smash PageSpeed Insights with Smush<\/h2>\n<p>While many users struggle to improve their web site optimization, Smush lets you boost your page loading speeds by making images easier and faster to load&#8230;and it does this all in just a few clicks!<\/p>\n<p>Follow the above recommendations and put Smush to work for your site today. Also, keep an eye on our <a href=\"https:\/\/wpmudev.com\/roadmap\/\" target=\"_blank\" rel=\"noopener\">roadmap<\/a> for all the exciting new features coming soon to Smush.<\/p>\n<p><em>[Editor\u2019s note: This post was originally published in Jun 2020 and updated in Dec 2023 for accuracy.]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Smush has everything you need to optimize your images, as well as a handy repertoire of tools ready to help you smash PageSpeed Insights image-related recommendations. It\u2019s a simple way to speed up your site, without sacrificing your image quality. With Smush you can: Compress images in bulk and with one click Automatically resize and [&hellip;]<\/p>\n","protected":false},"author":801248,"featured_media":220356,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"5","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4,263,11260,11259],"tags":[],"tutorials_categories":[11228],"class_list":["post-188939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-tutorials","category-wpmu-dev-products","category-wpmudev-tutorials","tutorials_categories-smush-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/188939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/801248"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=188939"}],"version-history":[{"count":45,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/188939\/revisions"}],"predecessor-version":[{"id":220269,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/188939\/revisions\/220269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/220356"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=188939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=188939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=188939"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=188939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}