Images
When a website is slow, images are usually the biggest culprit. When uploading images to your site, there are three things you need to consider: dimensions, type, and compression. Ignoring any one of those three can lead to a slower site.
1. Image Dimensions
When uploading images to your site, you should upload images that are the same size as you want them to be on your site. For example, if you have an image that will only display as 300px by 300px on your site, don’t upload an image that is larger than that. Larger images mean larger file sizes, which means a slower website.
To resize an image, simply to go your media library, click on the image you’d like to resize, and hit the “Edit Image” button. The image editor will then open up and you can enter the new dimensions from there. If you do not know what dimensions you should resize your images to, right click on the image you need to resize, then select “Inspect” from the options that show up. The images dimensions will then pop up.
2. Image Type
The type of image you upload is one of the things that matter the most. PNG, JGP, WEBP, and SVG are just some of the many image formats out there. To change file types, you can use an online converter.
PNG
The PNG format is great for high quality, crisp images. There is a big problem with them though, they will tank your site speed. PNGs have some of the largest file sizes. An image in PNG format could be as much as 10 times larger than the same image in a JPG format.
Only use a PNG for logos and icons.
WEBP
The WEBP file is one of the newer ones, and is even better than PNG or JPG. The files sizes are smaller, and you can use transparency. the only downside is that not all browsers currently support WEBP, so if you use this file type, some users won’t be able to see your images.
JPG & JPEG
The JPG format is best for photograph type images. Their file sizes are far smaller than PNGs, so they load far quicker. Sometimes JPGs are listed JPEGs, but there is virtually no difference between the two formats.
SVG
The SVG format is for vector graphics, such as logos. They are better to use than PNGs, as they can be uploaded at a small size and display larger, without getting blurry. The only down side to using an SVG over a PNG for your logo is that not all browsers support SVG. Internet Explorer version 8 and lower lack SVG support.
3. Image Compression
Compressing your images is another great way to speed up your website. There are a few ways to do this. You can manually compress all your images before you upload them, or you can use a plugin to do that for you.
If you don’t have a ton of images to add, I would highly suggest compressing the images before uploading them, that way you don’t have to use a plugin, so your site will have a much smaller file size. You can optimize images at TinyPNG.com then download them and upload them to your site.
tinyPNG – JPEG, PNG & WebP Image Compression
TinyPNG is a great plugin that will help you compress WEBP, PNG, and JPG files.
Imagify – Optimize Images & Convert WebP
This plugin lets you optimize images in one go with its bulk optimization option. You can resize your images on the fly and, with 3 compression levels to choose from.
Unused Images
Unused images can cause a ton of bloat on your site. Deleting images you aren’t using is crucial to keeping your site fast. There are a couple ways to find out what images aren’t being used and get rid of them.
1. Manually
The manual way you can find unused images is by going to the “Media” tab in the left hand menu. Then click on the drop down menu item in the media tab that says “All Menu Items” then click “Unattached”. This will show you any images that aren’t attached to a page. You can then delete them from there.
Be careful with this though, images in your menu, like your logo file, will show up as unattached, since it’s not technically attached to a page, but to your navigation. So double check to make sure any image that shows up under unattached is truly not being used anywhere else on your site.
2. Plugins
The other way you can delete unused images is with a plugin. Media Cleaner – Clean & Optimize Space is one such plugin you can use.
When using a plugin to delete all your images, make sure to take a backup of your site before installing it, just incase it deletes something it’s not supposed to.
Media Cleaner – Clean & Optimize Space
Is a plugin that deletes your unused images and optimize your media library.
Videos
Self hosted videos aren’t recommended. When adding a video to a website, best practice is to use an external video player, such as YouTube or Vimeo. This allows your page to load before the video is loaded, which saves a ton of loading time for your website.
Optimizing Videos On Websites
1) File Type
The file type you use will impact the file size. WebM files are smaller than MP4 files, but MP4 files look better on mobile. Consider what device users will be seeing your site on the most.
2) Data Compression
You can compress the video without loosing much image quality. Check out Blazemap and HandBrake for compression tools.
3) Muted Videos
If you have a video on your site that is muted, actually remove the audio from the video file.
Plugins
Not all plugins are created equally. Some will brick your site or break various features. It’s important to try to use a few plugins as possible. Each plugin you add to the site adds more lines of code to your site, which increases the file size of your website. The bigger the file size, the longer it takes to load. If you do absolutely have to use a plugin for something, research a plugin before adding it, some will work better than others.
Contact Form 7
Contact Form 7 is pretty popular contact form plugin. But, it actually slows down your site speed more than other contact form plugins. This is because the code for Contact Form 7 is loaded on every single page, not just on pages where the form is actually located.
Gravity Forms
Gravity forms allows you to create more complex forms and doesn’t slow down your site as much as Contact Form 7.
- ReCaptcha version 2 is prefered for ReCaptcha version 3 for speed. Version 2 is faster.
Yoast SEO
Yoast SEO is the go to plugin for SEO, however, it can conflict with Jetpack.
Avoid pop up plugins as much as possible. They tend to cause conflicts with other plugins and for some reason, will can change the appearance of text on your site. I once had a site where the pop up plugin changed all the text to white for some reason.
Autoptimize
Minifies your JavaScript and CSS. Free version works well enough.
WP Rocket
Cache your website. Also optimizes your JavaScript and CSS. Not free, but is the highest recommended plugin for optimization.
Some Plugins I Recommend
WP Rocket
Most recommended caching plugin. Also removes unused CSS, optimizes CSS & JavaScript files, optimizes your database and integrates with Cloudflare CDN. If WP Rocket is used, Autoptimize is not needed.
JavaScript, CSS, and HTML
JavaScript & CSS can quickly take up a ton of space on your site if it isn’t properly optimized. When it comes to JavaScript, there are three things you need to keep in mind: Minify, defer, async.
Minified JavaScript & CSS
To minify JavaScript/CSS means to cut out all the unnecessary blank spaces. This reduces the file size of your JavaScript, therefore, making your site load faster. Not all plugins have minified JavaScript, because not all developers create their plugins with speed in mind.
You can use a plugin to minify JavaScript for you, or do it yourself with the help of this website.
Minified code is a lot harder to edit than regular code, so be sure to only minify it when you are sure you are done editing it.
Defer VS Async
Defer and async are two different ways to load JavaScript. They are especially useful if you have JavaScript that is render blocking. To find what JavaScript is render blocking, follow this guide.
Defer
Deferring JavaScript means that the is downloaded in the background and runs after the HTML is run. Only use defer for external scripts.
There are a few ways you can defer JavaScript. You can either add a defer tag directly into the code. That would look like this: <script src=”myscript.js” defer>. You can also just use a plugin to do this for you.
Async
Async JavaScript means that is JavaScript is downloaded in the background and run when ready, even if it’s before the HTML is done running.
Autoptimize
This plugin allows you to aggregate & minify (local) JavaScript and CSS.
Hosting
What PHP version are you using?
The version of PHP that you use can have a big impact on site speed. If you’re using an older version, your site will be slow. If your site is running a VERY old version, then upgrading to the newest version can cause certain elements to break. Always take a backup of your site before changing your PHP versions. This is something you usually have to do with your hosting provider.
Hosting Providers to Avoid
Bluehost
Bluehost is a common hosting platform, it helps that they offer relatively cheap prices. But, you get what you pay for. Their servers are SLOW, especially if you’re on their cheap shared hosting plan.
GoDaddy
GoDaddy is another common hosting provider, however, they crowd their servers and enforce CPU limits. They are also slow at adapting to newer versions of PHP.
Hostgator
Hostgator is one of the slowest hosts out there.
Content Delivery Network (CDN)
A content delivery network (CDN) utilizes caching to reduce the strain on your hosting provider. CDN’s can also help protect your website from DDOS and other malicious attacks. For a more in depth explanation, check out Cloudflare’s article. Some hosting providers will come with the option to use a CDN, some do not.
Cloudflare
Cloudflare will cache the content on your site in their servers, then deliver the content to people using the server closest to them. Speeding up your site by up to 300%.
Google Maps
Adding in a google interactive map slows down your mobile speed by 50%, when possible, just add an image of a map that opens up google maps in a new tab when clicked on.