Site speed has never been more important. Your site speeds affects everything from search engine rankings to your user experience. If your site is slow, it won’t matter how good your products are, no one will stick around to experience them.
Good news is, with few simple changes you can tackle this issue. You will be able to drastically cut down page load times and improve site speed.
How Fast Should A Website Load? The average load time for mobile sites is 19 seconds over 3G connections. Models predict that publishers whose mobile sites load in 5 seconds earn up to 2x more mobile ad revenue than those whose sites load in 19 seconds.
According to Semrush if your site loads in 2.9 seconds, it is faster than approximately 50% of the web. If your site loads in 1.7 seconds, it is faster than approximately 75% of the web. If your site loads in 0.8 seconds, it is faster than approximately 94% of the web.
Why do these numbers matter? 47% of users expect websites to load in 2s or less. And 40% will leave a page that takes 3 or more seconds. If your site takes more than three seconds to load, you lose almost half of your visitors before they even arrive on your site. That alone is a huge blow to your potential conversions.
In this post, I’ll share 5 ways to get your site to load faster.
1. Minify Your CSS/Javascript
If you are using visual studio code, tools like Live Sass Compiler, JS & CSS Minifier (Minify) can be very helpful in this department. By removing unnecessary line breaks, extra space, and so on, you will speed up parsing, downloading and executing. This simple task can cut bytes of data from your page, and every little bit counts.
2. Minimize Your HTTP Requests
According to Yahoo, 80% of a Web page’s load time is spent downloading the different parts of the page, like images, stylesheets, and scripts. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render. The first step to minimizing your requests is to figure out how many your site currently makes, to use as a benchmark.
If you use Google Chrome, you can use the browser’s Developer Tools to see how many HTTP requests your site makes. Right-click on the page you want to analyze, and click “Inspect,” then click the “Network” tab. The “Name” column shows all the files on the page, the “Size” column shows the size of each file, and the “Time” column shows how long it takes to load each file. In the bottom left corner, you’ll also see the number of total requests the site makes.
Reducing this number of requests will speed up your site, look through your files and see if any are unnecessary.
3. Configure Expired Headers
According to Mozilla Developer Network (MDN) expires header contains the date/time after which the response is considered stale or in other word expired. When a user visits your website, the website files are stored on their computer so that your website loads faster for them the next time they visit.
There is an expiration date in the file header that determines how long these files will be stored on their computer, which is usually set to 24 hours by default. You can configure the expires header so that the files never time out, or you can increase the expiration date so that it doesn’t impact your server and page load time. See Mozilla Developer Network (MDN) web docs for detailed information regardig HTTP headers.
For our site we use the following expired headers, feel free to use it in your HTACCESS file.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType image/mp4 "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"
ExpiresByType image/ico "access plus 1 month"
<IfModule>
4. Evaluate Your Plugins
Plugins can bring tons of new features and functionality to your website, but just like opening numerous tabs on your computer can affect your speeds. Having numerous plugins for you website will do the same.
Generally speaking the more plugins a website has, the longer it takes to load. Outdated and poor plugins slow down website performance drastically. This can be fixed quite easily by removing plugins that are redundant, for instance they duplicate functionality, are out of date, no longer needed and are out of date.
5. Optimize Images
According to the HTTP Archive, 61 percent of a website’s page weight on a desktop computer is images. Before you start optimizing images, you should check to see if the image file format is cross platform supported. Some image formats may be new such as WebP used by google photos and can help save on image size without sacrificing quality.
It’s not supported by Internet Explorer or Safari. First check Can I Use for the right image format. That will work on all the major browsers.
If you want to run a successful site, images are absolutely necessary.our website conversion rate can go up significantly by including lots of helpful optimized images. You can always run Google’s Inspect tool and see how much impact images have on your site. I would recommend tools such as Squoosh (free),GIMP (free) or Adobe Photoshop (subscription) to optimise your images.