Tips to Improve Page Performance

The website of today are very different with the website from the early days of the internet. Today, websites are filled with ads, multimedia content and bloated codes. As websites becomes more complex, it is unavoidable that the codes written are getting bigger. This in effect increase the size of the webpage.

Websites are getting fatter, dramatically fatter, with the average page size of sites tracked by the HTTPArchive now nearly 1.3 MB. If the current rate of page size increase continues, that number will reach 2MB sometime early next year.

Source: Webmonkey

At the same time, mobiles are taking off, this means, smaller screen and less bandwidth. Most smartphones are utilizing 3G and 4G technology, which are still slower than fibre-optic home-based internet speed. Thus, web pages loads slower on mobile smartphones.

To counter this, here are tips from Brad Frost to help keep the size down and improve webpage performance :

This trend needs to stop. How do we fight against bloated web pages? Here’s some things to consider:

  • Treat Performance As Design—It’s essential for everyone, not just developers, to make performance a priority. Performance is invisible and as a result slips between the cracks in projects. It also gets super technical super fast, which causes non-developers to lose interest. Change the nature of the conversation by talking about performance as an essential design feature. Boss or creative director not convinced? Point to Facebook’s app debacle as evidence that performance makes and breaks a product.
  • Set a Performance Budget—One great way to make sure performance doesn’t slip between the cracks is to set a performance budget. Set a maximum page weight, which forces everyone involved in the design process to make some tough, realistic decisions about what deserves to end up on the page.
  • Embrace Conditional Loading—Conditional loading is one of responsive design’s most important techniques. From social widgets to images to maps to lightboxes, conditional loading can be used to ensure that small screen users don’t download a whole bunch of stuff they can’t use. Here’s a bunch of resources about conditional loading that explain why it’s so important and awesome.
  • Test often—Mobitest is a great tool that fires up a site up on a real mobile device and spits back page weight, load time and other performance-related stats. It’s a great gut check tool, but there’s no substitute for firing it up on your device while walking around town on a real cellular connection. Test on real devices early and often and you’ll see the true performance of your design.
  • Look for low hanging fruit—There are tons of little things we can do to improve the performance of our websites. I’m a big fan of using Yslow and Google Page Speed because they explain everything in relatively human terms and give you explicit instructions on how to make performance better.

Source: Brad Frost Web

I strongly suggest you visit Brad Frost Web link above, as he has a lot of things written, especially links that I cannot include here.

Let us help Brad Frost in improving page performance in our website, that way, the internet will be a better place.