Website speed? Does that even matter? Isn’t a good design and great content enough?
Think for yourself! If the user has to wait to have a look at your website, how will the design, images or content make an impression? Logical, isn’t it?
Let’s go through some stats first.
Amazon reported increased revenue of 1% for every 100 milliseconds improvement to their site speed. (Source: )
So did Walmart, they noted a 2% increase in their conversions for every 1 second of web speed improvement.
In addition to this, a study by Akamai found:
47% of people expect a web page to load in two seconds or less.
40% will abandon a web page if it takes more than three seconds to load.
52% of online shoppers say quick page loads are important for their loyalty to a site.
Okay so before getting to the list, here is a very important TIP:
Have a backup before you make any changes! We don’t want to make permanent errors, right?
1. Minimize HTTP requests
The factors affecting a web page’s loading time are scripts, flash, images, stylesheets, etc. For each of these elements, one HTTP request is made, therefore, more the elements on your page, more will be the loading time.
The quickest way to handle this is by simplifying your design. So by now, you might have understood,
1. Streamline the number of elements
2. Use CSS in place of images
3. Combine style sheets and reduce the number
4. Reduce scripts; place them at the bottom of the page
Leaner is better!
So the bottom line here is: To improve your web page performance, reduce the number of HTTP requests.
2. Reduce server response time
Reducing your server response time will help your web page load faster. Sounds sense? Good. So your aim must be, to have server response time less than 200 milliseconds. Therefore, it is very important to choose your web host (server) carefully.
HTTP Keep-Alive allows TCP connections to stay alive and it helps to reduce the latency for subsequent requests. So contact your hosting provider and tell them to think twice. Most hosting companies disable this feature, because it’s an optional feature (whenever it transfers less than 60 bytes per request).
3. Use compression
Compression is technique to speed up the loading time of heavy pages which are 100kb or more; in the process of creating high-quality content, pages often become large. These pages are slow and bulky to load and kills your page loading time.
Page compression reduces the bandwidth thereby reducing HTTP response.
You can use Gzip to compress files before server downloads it, either by calling a third party module or using built-in routines. Most servers support Gzip.
You can enable it by adding the following code to your .htaccess file:
# compress text, html, javascript, css and xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
“
SetOutputFilter DEFLATE
“”
Or, use the following PHP code at the top of your HTML/PHP file:
Or, simply use plugins for your CMS (like the WP HTTP Compression plugin for WordPress).
However, some external javascripts (AdRoll, Simpli and CloudFront) could reduce transfer size more than 60% by using gzip. (Source: Moz)
4. Enable browser caching
Have you known Cache? Yes, it helps speed up the loading time of your web page. So it works like, when you visit a webpage for the first time, your browser stores the page elements on your hard drive in a cache or a temporary storage. This allows the browser to reduce the web page loading time in your subsequent visits. It has to download only a few elements and hence, caching save you time.
Note: For all cacheable resources (JS and CSS files, image files, media files, PDFs, etc.), set Expires to a minimum of 1 week to 1 year in the future. Setting it beyond 1 year, violates the RFC guidelines. (Source: The Daily Egg)
5. Minify Resources
A messy code can make your website slow. As the saying goes, “There will be always someone who will give it to you cheaper, but the quality is all that matters”
Every unnecessary piece of code adds to the size of the web page, it is very important to eliminate extra spaces, line breaks and indentation in the code in order to make it leaner. This will minify your code and give you an optimized HTML code.
Here’s what Google has to say: use Chrome Extension to generate an optimized version of your HTML code. Run the analysis against your HTML page and browse to the ‘Minify HTML’ rule. Click on ‘See optimized content’ to get the optimized HTML code.
To minify CSS, you can try YUI Compressor and cssmin.js.
To minify JavaScript, try the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
6. Images optimization
To optimize images consider: size, format and the src attribute.
Size the image to the width of your web page. Reduce color depth to lowest, JPEG/PNG is your best option. Keep no image comments. GIFs should be small and simple graphics of not more than 10×10 pixels and color palette of 3 or fewer. For animated images do not use BMPs or TIFFs.
For Src attribute: Avoid empty src codes. Use as image code. Empty sources drive unnecessary traffic, that we seem to avoid.
You can also make use of plugins to optimize resources for your web page.
7. Optimize CSS Delivery
CSS is responsible for the style requirements of the web page. A website accesses this information either in an external file, which loads before your page renders, or inline, which is inserted in the HTML document. The external CSS is loaded in the head of HTML code where as the inline CSS is fitted in the page’s HTML. External stylesheet reduces the size of the code and reduces duplication of the code. CSS delivery tool can help you identify the number of external sheets your website is using. External stylesheet will reduce the HTTP requests and in turn aid the loading speed.
8. Above-the-fold content is important
As we all know how much the first impression matters, we want to make most of it. Keeping in mind the UX, the section that first meet the eyes of the user: above-the-fold (top section of the web page) must load faster than the rest of the page. It is considerable even if the rest of the web page loads after the first section. You can make a smart use of CSS here, split it into two: one short inline part that styles above-the-fold elements and another external part that can be deferred.
Along with the above tips, we have two additional tips for your web page!
9. Reduce the use of plugins
This will make the page slower and prone to security and other technical issues. Disable plugins selectively and then try measuring the performance of your web page.
10. Reduce redirection
We have learnt that less the number of HTTP requests more the loading speed of the web page. Redirects is just going to add to the HTTP request made to the server and make your page slow.
Have you any unique ideas to speed up a website or a web page? Share your tips below.