Share this article Return
In this age of instant updates, same-day delivery, and otherwise high customer service expectations, site visitors simply are not going to wait very long for your website to download.
Web performance and download speeds are a growing science and research shows that milliseconds can make a real difference in customer behavior and getting those sales conversions.
There are certain unwritten rules, which define when an application can be called “fast“.
- Time for the First Byte: 200ms - 350ms
- DOM Content Loaded: 1000ms - 2000ms
- JS Load Event Fired: 900ms - 2200ms
- Total Download Size: 1MB - 2MB
- DNS Lookup: 10ms - 20ms
- HTTP Requests per page: 50 - 75
A 1-second delay in page load time yields:
11% fewer page views
16% decrease in customer satisfaction
7% loss in conversions
Organize Image sets
You can have a huge application with a lot of code but you’ll find that in most of these projects, your biggest problem ends up being with the images. They increase load time and the HTTP requests count. If you use a high quality transparent PNG files it can be even more of a headache. That is, until you start to use appropriate tools and learn how to organize image sets.
This is especially true when you animate multiple items at once. You can see the difference here. Don‘t forget, that Firefox has some
issues when animating more than 150 items at one time with CSS transitions/animations.
Websites today are increasingly integrated with third party content: social media, chat features, commenting services, information feeds, and others. So if you load asynchronously then in the event the third-party crashes, your page won’t be held up trying to load that resource. Async loading can also speed up page loads.
Optimizing expensive CSS properties
check with your hosting provider to see whether you have shared or dedicated hosting. A shared hosting account often involves sharing server space with dozens of other companies where website speed is impacted by the number of people using the servers. If this is the case, then it may be time to consider a dedicated plan where you have sole access to the server.
Load resources from a CDN (Content Delivery Network)
CDN means that instead of using a single web server for delivering the
files that make up your web site, you will use a network of servers.
Using a CDN is one of the easiest and fastest ways to boost your website performance.
Using a CDN for hosting video, audio and image files can help.
Measure and monitor your results
Web analytics answers some extremely important questions for a site owner.
What kind of traffic are you getting? Where is it coming from?
What is your conversion rate?
What is your bounce rate?
How much time are they spending on your site?
What is the last page they visit before leaving your site?
Code your site for mobile-first quality and speed
The paradigm of making desktop sites responsive for mobile devices must now be switched. The strategy should be to code for mobile users first and then progressively enhance the experience for tablets and desktops. Doing so will help reduce the number of unnecessary dependencies.
Cache as much as possible
Caching is a mechanism for the temporary storage of web pages in order to reduce bandwidth and improve performance. When a visitor arrives at your site the cached version will be served up unless it has changed since the last cache. This saves server time and makes things altogether faster. Make sure this feature is enabled on your website!
Combine images into sprites
This is a really useful technique that combines commonly used images into a single image file, thus reducing the number of HTTP request that are required to download the webpage. This feature is implemented through proper use of the CSS background-image and background-position properties.
Review your hosting service plan
Websites today are increasingly integrated with third party content: social media, chat features, commenting services, information feeds, and others. So if you load async then in the event the third-party crashes, your page won’t be held up trying to load that resource. Async loading can also speed up page loads.
Minimize HTTP Requests
80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts, Flash, etc. 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.
- Streamline the number of elements on your page.
- Use CSS instead of images whenever possible.
- Combine multiple style sheets into one.
- Reduce scripts and put them at the bottom of the page.
Tools for monitoring & optimizing your website speed and load time
- Pingdom tools
The Pingdom Website Speed Test is great and free tool for testing your website speed and getting a first glimpse on how your website performs.
- Google Webmaster Tools
The webmaster tools from google are another – yet great – resource for checking your website performance. The webmaster tools from Google will provide you with notifications and
messages regarding the mobile usability of your website and if there are any crawling errors.
- PageSpeed Insights
With PageSpeed Insights you can test the website speed of any URL. Google exactly tells you what you should fix and what you should consider
fixing on your site in order to boost your speed.
Nibbler checks your website speed, also takes an overall look of how your website is perceived by crawlers and users.
The free tool from Nibbler takes a look at more than 20 parameters – such as code quality, internal links, page titles, headings and so on – and provides an overall score (between 0 and 10)
for your website. Make sure to check your optimization progress regularly with Nibbler.
- W3C validator
W3C validator provides you with straight-forward fixes to make. Simply run a W3C test for your website and see which errors appear on your site
SpeedCurve allows you to monitor your website performance. Besides that, you can also monitor your competitor’s performance.
- Chrome Developer Tools
Google Chrome offers a pre-set of devices where you can play around with screen sizes and network speed.
By speeding up your sites you're not just contributing to a better user experience for your users, but a better user experience for the web!