If your web pages take longer than 3 seconds to load and open, then you are already losing 40% of your traffic to your competition.
Before we even proceed, do you know how slow or fast your website loads? So, to know the current speed of your website, you can use online tools like PageSpeed Insights, or, here is a list of 5 Free Online Tools to choose from.
Noting down your current website speed, will help you know how much effect the tips you are going to apply have had on your website. So again, it’s important you take note of the current speed.
Here are 20 simple and easy tips and ways you can dramatically improve your website loading speed. I’ll keep it simple and easy and we’ll save one’s that are too technical, for another day.
Images
#1. Compress Images
If you use images a lot on your website, its likely that, they are not optimized for the web, and this a lone has been slowed down your website speed because a lot unnecessary bytes are downloaded by the browser which delays page rendering.
Images often times contain unnecessary data, such as comments, date & time, especially those uploaded direct from a camera. Such data is not necessary and should be removed, without affecting image quality.
There are dozens of online tools like CompressNow, JPEGmini, Smush.it. You can also compress your images with tools like Photoshop by choosing “Save for web” option before saving them.
For WordPress websites, there are awesome plugins which can do the job for you. EWWW Image Optimize, WP Smush, ShorPixel are some of the amazing tools you can install and compress images on the fly. These tools are able to even compress already uploaded images prior to plugin installation.
#2. Serve Scaled Images
With responsive design, you’ll want to have different image thumbnail of different sizes. For instance, 800x600px for desktop, and 400x300px for mobile.
Its a bad idea to use CSS to resize a large image suitable for desktop so as to display it on mobile. This is because the browser will still be downloading a large file size.
Trying to use height and width attributes to generally resize an already large image for display, is a bad practice. For example, an image of size 1200×800 pixels, and then using CSS or <img src=”our_img.png” height=”500px” width=”200px” />. In this case, the server spends time trying to download a huge image, which doesn’t profit the user who spent their time waiting.
When downloading images on the web, some sources like Pixabay, allow you to choose different images sizes. Plugins such as WP Smush, can scale your images and create different thumbnails, for mobile and desktop.
Using reasonably scaled images, both for desktop and mobile will see your webpages speed improve tremendously.
#3. Use Image Sprite
Take for example, you have 50 separate icons which you use on your website, this means the server has to make 50 different trips to fetch all these images/icons.
You can save the server some time and resources, by combining all these icons into a single image. So, you end up with just one image containing all your icons. This will now mean that, the server will have to make just one trip.
Tools like SpritePad should help you create CSS Sprite images, it also generates the CSS which is important for knowing the position of each icon on board.
So, with your sprite image in place, you can use CSS to show a required image/icon by specifying its position on the sprite image. For instance, #send_button {background: url(img_navsprites.gif) -18px 0;}, where -18px and 0 are the position.
Go to W3Schools to learn more about CSS Image Sprite.
#4. Leverage CSS3 Effects
Use images only when it is really necessary. Because, images require more byte to download. It is better to use CSS3 to achieve the same result where possible.
For example buttons. You can create a beautiful button with just CSS only. Take a look at the button below, its purely a result of CSS. (Click the image to see source code).
With CSS3, there is a number of effects which can be achieved right away without having to necessarily use an image. You can design these for yourself, or use online generators such CSS3gen to generate buttons, gradients, text shadows, animation, etcetera.
#5. Specify Image Dimensions
As the browser begins to lay a webpage flow, it can render the page even before the images are downloaded, as long as it knows the necessary dimensions required to handle the images.
To prevent reflows, you should explicitly define the height and width of all images. This can be done in either CSS or HTML <img > tag.
However, be sure to specify image dimensions that match the images themselves. Don’t rely on this to try to resize large images, but as away to help the browser kind of sketch the page the page really fast.
CSS, JavaScript & Resources
#6. Make CSS & JS External
Having CSS and JavaScript as a separate external document helps to reduce webpage loading time. This is because, JavaScript and CSS files are cached by the browser.
Even though having inline CSS and JavaScript reduces the number of server requests made, this requires more bytes for the document to be downloaded because its long.
External CSS and JS files on the other hand, can be downloaded once, kept by the browser (cache), and same styling or script is used even for other pages.
#7. Remove Duplicate CSS & JS Files
Duplicate CSS affect your web performance by causing the server to perform unnecessary HTTP request.
Mistakenly linking an external JavaScript file more than once, causes the browser (especially IE and Firefox) to waste time trying to execute the code.
Some browser are not intelligent enough to know that it is a duplicate external file its trying to fetch again. Therefore, its a good habit to ensure that you are not linking your external files more than once.
#8. Minify & Combine CSS
It’s okay to write your CSS code with white space and comments, and even have them as separate files for development purposes.
However, when time comes to deploy these files to the server, you should consider compressing your CSS. This reduces the files size and will require less bytes to download.
If you have several different CSS files, consider merging these files into a few groups of files. The maximum number of files shouldn’t exceed 3 files for the entire website.
Minifying means you remove all white space and comments. You can do this manually, however, to avoid mistakes, you may use tools like CSS Minifier.
#9. Inline Small CSS/JavaScript
Inlining small external CSS or JavaScript files saves the overhead of fetching these small files from an external file. A good alternative to inline CSS/JS is to combine the external CSS/JS files.
#10. Put CSS In-between <head> Tag
As you might know already, putting CSS in-between <head> tag is an HTML specification. However, according to Yahoo, putting CSS inside <head> tag, makes the pages to appear loading faster.
This is because, it makes the page to render progressively. This means that, the browser displays whatever content it has to, as soon as possible.
#11. Avoid CSS @import
CSS @import imports another external CSS file. However, when the browser encounters such a CSS file with @import, the browser then stops downloading CSS files in parallel; that is, it stops to download other files until this particular file and it’s child file are completely downloaded.
This delays the page from rendering faster, and this makes patient users begin to drum their fingers as they try to wait for the page to appear.
Instead of using @import, consider using <link>. This means, instead of importing other CSS files from within another document, you should rather explicitly link these files in the HTML using the <link> tag.
Doing this will allow parallel download which will make your webpage appear to your users pretty fast.
#12. Minify & Combine JS
Similar to CSS, JavaScript should also be compacted and combined into single files. Minifying your JavaScript files can reduce over 40% file size.
To compress your JavaScript files, there are free great tools you can use to do the job, among these include JSCompress, JavaScript Minifier.
And combining your files will improve performance, because it will require the server to make fewer HTTP requests unlike when you have small different separate files.
#13. Put JS File at the Bottom
Unlike CSS, when the browser is downloading JavaScripts, it will not start any other download. The user will not wait for the scripts to load because they have no idea.
To allow your webpages load and display to the user quickly, it is strategic to put your JavaScript files at the bottom of the document. It should still be inside the <body> tag though.
This makes the necessary elements required to display the page, load and render before the scripts are even downloaded.
#14. Avoid Empty href / src Tags
You might be surprised to know that empty href or src tag don’t mean nothing happens. IE for example makes a request to the directory in which the page is located, other browsers make a request to the same page.
Furthermore, empty href/src tags hurt your server because it sends a large number of unexpected traffic.
Empty href can be found in <link href=”” … />, <a href= “” ..>link</a>, var img = new Image() ; img.src = “”; in JavaScript. Even in CSS for instance background: url() is also a an empty request.
#15. Avoid Broken Links
Broken links hurt your website performance. Even if the resources do not really exist, the server will attempt to make a request trying to reach this non-existing resource.
This wastes time with unnecessary server requests. It is therefore, a nice practice to perform regular link checks so as to try to identify and fix or remove broken links as this will avoid your server from making fruitless request.
See Steps To Follow To Find And Fix Broken Links On Your Website.
WordPress
#16. Avoid Poorly Coded Theme
Sometime back, I was using a free theme which I randomly picked. I tried to optimize my website, but whatever I did couldn’t yield anything really, the website was still slow.
Until I changed the theme.
It is risky to use poorly coded and outdated themes, they also make your website take a long time to load. A abandoned themes leave you at the mercies of security risks as well.
So, here are a few easy ways of determining a properly coded and updated theme theme:-
- Check which version of WordPress the theme is compatible with.
- See the last time the theme was updated.
- Read reviews from other users, if there is a problem one of the users should have faced it.
- Check the theme using validator.w3.org
There are thousands of free good themes you can use without any web speed problems, however, it is better to spend a few bucks to purchase a premium theme as this comes with added benefits such as premium maintenance and updates.
#17. Use Plugins Sparingly
Most plugins when installed, add their own CSS and scripts to your website, sometimes, they add already existing scripts such as JQuery. Assuming you have 5 plugins duplicating scripts, this means 5 unnecessary HTTP requests that your server has to make.
Use plugins only when it is really necessary, and when you choose to use them make sure to use proper plugins; compatible to your theme, up-to-date, and also read reviews before installing a theme.
#18. Disable Plugins You Don’t Use
Chances are, you have one or two active plugins which you don’t really use. This is because you probably installed and forgot about it when you changed your theme.
These quiet plugins are using up your server resources, it is high time you disabled them and if you don’t need them any more, delete them completely.
#19. Use W3 Total Cache Plugin
I strongly recommend you install W3 Total Cache plugin. This plugin alone will perform most of the recommendations I’ve mentioned above especially in the CSS,JS section plus a lot more advanced web optimization.
If installed and properly configured, you can fold your hands and watch your website speed improve dramatically.
#20. Choose a Good Host & a Right Plan
Web hosting is worth mentioning here, because it also determines how slow or fast your website pages can load.
Depending on the traffic your website receives, you should choose between a dedicated and shared web hosting.
If your website receives a high volume of traffic and or is an eCommerce website, you should consider using a dedicated server for your website.
Here is a quick list of fast web hosts you should consider:-
