Website Slow to Load?

The average page load time is 7.25 seconds according to Radware via Marketing Land.

Users decide very quickly if they want to wait for a page to load. Several seconds can not only turn potential customers away, but discourage them from returning. Search engines, like Google and Yahoo!, consider page load times when ranking search results, so it’s important to implement as many tips and tricks to speed up over cumbersome loading sites.

Behind the scenes

As we all know code is the magic sauce behind websites, from CSS, HTML, JavaScript, and PHP. How it’s structured and pulled is extremely important in correlation with page loads times, for example more HTTP requests to a server means the longer it takes for data to get from point A to B. HTTP requests consist of loading –

• CSS
• HTML
• Images (jpg, png, gif, etc)
• Scripts

The aim is to reduce HTTP requests and the strain caused when sending data. We can accomplish this by altering structure of code, file sizes, and other methods, but it’s a good to first check what the issues are by using Google’s PageSpeed Insights.

Browser Caching

Store static version of resources within the browser to reduce HTTP requests. Add the following code to your .htaccess file to enable browser caching –


# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 1 second"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
# END Expire headers


Google Developers have a detailed explanation on how to implement caching in the browser.

JavaScript Code Structure

JavaScript can be over cumbersome and slow down page loads times when implemented incorrectly. Code is parsed from top to bottom, so it’s best to place scripts at the bottom just before the end body tag.

Alternatively defer JavaScript parsing until all other code has been loaded –


<script type="text/javascript" src="includes/general.js" defer="defer"> <script>


Image Compression & Scaling

Compress images to web-based quality by using tools like ImageOptim, this way data is reduced so transference of files will be much quicker.

Scale images either by using third-party programs like Photoshop or default programs with the ability to scale to specific sizes, e.g. 800×600 – this way you image size is reduced whilst maintaining quality.

Combining Images into CSS Sprites

Save on the number of images used by combining them into CSS sprites, which is essentially one large image that is made up of smaller images. Create CSS sprites using SpriteMe.

Minifying HTML, CSS, & JavaScript

HTML, CSS, and JavaScript can be minified and compressed to speed up page loading times. Remove whitespace and squish code together to save on space by using HTML Minifier, CSS Minifier, and JS Minifier.

Combining Files

Running multiple files can slow down a site’s load time, that’s why it’s better to combine. Grab JavaScript files and place them into one (1) script, and do the same for CSS files into one (1) Cascading Style Sheet.

Make sure to properly structure and comment code when combining files as it can get confusing with thousands upon thousands of lines of code.

CDN’s

Content Delivery Networks (CDN), like CDNify, can carry the load of your website by caching static resources on edge servers around the world, which is a great way to speed up page load times and off load data if you have heavy traffic globally.

Final Thoughts

Applying methods like minifying and image compression can significantly improve load time speeds considerably, benefiting developers working on pages, user experience, and appearing friendly to search engines which ultimately rank better.

Can you suggest any more tips and tricks? What about modifying the DOM structure? Share your thoughts in the comments below.