General Performance Best Practices
Web development performance best practices
Ensure performance of your site doesn't become a hurdle to your shoppers by reviewing our recommendations for measuring and best practices for achieving great performance.
Why worry about performance?
In terms of business results, improved performance leads to increased conversions, increased pageviews, lower server/hosting costs, and increased SEO rankings. Bottom line: performance = money.
Superior performance has gone from being an afterthought to a crucial part of a buyer’s decision-making process when selecting a vendor. If you don’t have performance at the heart of your website-building process right from the start of the project, it is very difficult to achieve performance gains without significant investments at later stages.
Metrics to measure
There are a lot of different metrics out there that you could possibly measure, and it’s not always obvious which ones make the most sense. Network speed? Time to first byte? Frames per second? Repaints/layouts?
RAIL metrics to the rescue! The Chrome team has come up with a model that highlights the crucial metrics that matter to a user, in terms of the tasks they are trying to accomplish:
- R - Response: Response refers to input latency, or the lag between a user action and resulting pixels on the screen. Provide feedback in less than 100ms after initial input.
- A - Animation: Animation includes visual animation, scrolling and drag. In order for animations to appear fluid, each frame of animation should be completed in less than 16ms, thereby achieving 60 FPS (frames per second).
- I - Idle: In order for apps to appear responsive, any work should be defered to idle periods. Load the essential interface immediately, reserving any resource-intensive processes like network requests, CPU processing, hard-disk requests, etc. for periods when there is no user interaction. For instance, use the Optimistic UI pattern to immediately show a comment after the user hits the send button, and then defer the actual network request after the initial animation/rendering has completed. Group work into blocks of about 50ms. This leaves enough time to respond to the user within 100ms.
- L - Load: Get the first meaningful paint (actual content) to the user as quickly as possible, and then remain responsive to the user. Deliver the first meaningful paint to the user under 1 second. Prioritize the critical rendering path and defer non-essential requests to idle-times or load them on demand.
How to make performant websites
Making performant websites involves making good decisions along every step of the design and implementation process. The best way to ensure that you have a performant website is to pay close attention to RAIL metrics and learn about the best practices that affect a website’s performance.
- WebPageTest and Speed Index
- Google Page Insights