Best practices for website performance
Website performance is a critical part of user-experience, but many web designers forget many website performance best practices. Following these best practices for website performance can help to dramatically improve a site's user-experience, scalability and SEO.
Website performance best practices
These best practices help web designers and developers keep websites loading quickly, able to handle lots of traffic and keep web hosting costs low.
- Reduce HTTP Requests - 80% of the end user response time is spent on the website frontend. Much wasted time is spent downloading website resources such as images, stylesheets, javascript, Flash, Webfonts, etc. Reduce the number of requests that are required by your website. Designers and web developers need to be mindful of their end-product in terms of total number of such requests and the size of their download. Consider CSS Sprites, Image maps and Inline images (use the data: URL scheme) to enhance performance.
- Empty image src can hurt - Images with empty src attributes can really harm website performance. Scan your website for empty IMG SRC.
- Rid your website of duplicate scripts - Loading the same javascript file twice in one page can kill web performance. This is a fairly common mistake. For examples, many Wordpress websites will have numerous duplicate javascript files that are loaded by installed plugins. This could cause your website to slow down considerably.
- Minimize the number of third-party plugins for Wordpress - It is possible that too many plugins can reduce load time for a website. Plugins can have dependent resources that may make additional requests from a Wordpress theme. For Wordpress web design, it is a best practice to be careful when installing third-party plugins. Test the new plugin and code on a production server before installing on the live website.
- Keep your stylesheets at the top of the page - Yahoo! discovered that moving stylesheets to the document HEAD helps websites to appear to load faster. Stylesheets (CSS) in the <HEAD> of a website allows the page to render progressively.
- Put scripts at the bottom of a website - Downloading scripts can block parallel downloads. While javascript is downloading for a user, the web browser won't begin any other downloads, including images at that time.
- Don't scale images with HTML - Try to use images at their actual size. This is a common reason for a website's slow load time. Web developers can programmatically resize images and store the resized images in a cache bucket to reduce media load time issues.
Useful website performance tools
- Google Pagespeed Tests:
https://developers.google.com/speed/pagespeed/insights/
- YSlow by Yahoo - https://developer.yahoo.com/yslow/
