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.
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.
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.
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 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.
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.
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.
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.
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 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 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.
Some Plugins I Recommend
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
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 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 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 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 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%.
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.