If you are not experienced in doing site speed optimization, this could be a real headache. Additionally, it could cost you your site if you are messing around with it.
Here are a few tips that I normally use in order to achieve a great speed score.
Image Compression
I believe this is the number 1 issue on site’s speed scores. When building a website, people often times just upload the images regardless of the size. The impact of an image is huge. I have seen cases where the images weigh more than the actual site.
So, be sure to…
- Resize your images to the actual size that are going to be displayed on the site.
- Use JPEG rather than any other format.
- Use image optimization tools such as Optimizilla (online), Smush it (WordPress), andImageOptim(Mac).
Don’t Overload Your Site With Plugins
Plugins can be super helpful sometimes. You can have a plugin for almost anything you would want. The issue is when you have a plugin for every single functionality. This will definitely cost you some speed. Most of the plugins use third-party scripts which slow your site because it makes your site request multiple links from different sites. The same thing happens when you add some JS, images, CSS, or any type of files from other servers.
In order to solve this, keep your site simple without overloading it with unnecessary plugins, and if you are getting files from other servers, just host them all in your server to reduce the number of requests.
Minify Your Resources
CSS files, as well as JavaScript and HTML, use many lines of spaces that could take up a significant amount of space depending on the number of lines that these files have. In order to reduce their weight and make them load faster, you could minify these files by taking all the unnecessary spaces off the files. Tools such as Minifier and Refresh SF could help you accomplish this.
Optimize CSS Delivery
Organization goes along with optimization. When setting up all the styling of your website it is important to have everything thoughtfully laid out and organized. A good way to layout this would be:
- Adding ALL your CSS rules into ONE external file (hosted in your server)
- Link them within the <head>.
- Avoiding inline CSS
Prioritize Above-The-Fold
Above the fold means whatever the users see first when they go on a site. It is important to prioritize that the site loads above the fold first so the user does not experience any delay while the rest of the site loads later. To do this, it is important to structure your HTML accordingly to load everything you want showing immediately, first. Inline CSS would normally load before external CSS, so use inline CSS for Above the Fold sections, while the rest of the external CSS can load after.
Deferring JavaScript to load after the actual content loads could help you reduce the amount of loading time for Above the fold.
Reduce Redirects
Redirects are methods to automatically take visitors to other locations. Every time you redirect a user, you are hurting your page speed score. So, it is important to get rid of as much redirection as possible. It is okay to keep the ones are necessary if there is no other solution, but try to keep your site clean of those.
Enable A CDN
A content delivery network (CDN) is a collection of web server which is used to deliver content more efficiently to users. Through a CDN, content is more likely to be received by the user faster, reducing the slow time on your website. W3 Total Cache is a very popular plugin used in WordPress to store cache.