Web performance is often seen as esoteric, difficult, and best left to specialists. As a result, performance optimization is too often relegated to the end of the development lifecycle. Because of this oversight, poor design decisions and a lack of time to fix them lead to sites that are quite promising but completely unusable. However, the idea that regular web developers cannot optimize performance is not true! The basics of performance optimization are so simple that anyone can do them, and yield fantastic results. However, before we dive into the details, it would behoove us to discuss the meaning of modern web performance. Performance means many different things to different people, but web performance in the modern era means more than just the speed and responsiveness of your website. In order for your website to be performant, it must also be:

  • Fast (loads quickly, doesn’t have long animations that prevent the user from seeing content)
  • Responsive (doesn’t hang or freeze, has an efficient workflow)
  • User friendly on any device (desktop, laptop, phone, tablet)
  • Efficient in its use of system resources (CPU, GPU, memory, power)

With all of those things in mind, here are three ways to improve your application’s performance:

1.  Design your site to allow the client’s system resources to rest. Understand the performance implications of your decisions – images, animations, scripts, etc all have a cost. Things to avoid:

  • Long running animations – these keep the GPU engaged and drain power. Additionally, if you must have an animation, use CSS instead of Javascript – CSS uses the GPU rather than the CPU.
  • Heavyweight, long running scripts – these keep the CPU engaged and drain power. If you need long scripts, put them at the end of your html so they load last and ensure that they run asynchronously so that the page does not hang.
  • Constantly using system sensors (GPS) – system sensors come with a big drain on battery, so use them sparingly.

2.  Limit the impact of your images. Small download sizes do not necessarily mean small in-memory sizes – for example, an image that is less than 800 kb on disk is often more than 3 mb in memory. Furthermore, users almost always have several tabs open, making the impact of every new website that much more severe. Things to avoid:

  • Unnecessary images – images eat through memory very quickly, making the user’s device slow
  • PNGs (use JPEGs instead) – compressed images are much smaller in memory as well as on disk
  • Single-server websites – Use a CDN! They are cheap and incredibly effective at improving page load times.

**3.  Test****your website regularly. **If you are measuring your site’s performance, you will be able to correct any big performance losses before they become embedded within your system. Please comment below with strategies that you’ve found useful in your own websites!