We came across a lot of these performance issues whilst developing our new company site over at etchapps.com.
I’ll be first to admit we’re running 50 something requests and a 3.2Mb total page load on our heaviest page on desktop (ouch!), but we’ve done a lot to mitigate that pain.
The site is fully responsive (with a touch of adaptive) from around 290px all the way up to 1600px or so with a lot of imagery and so serving up those images in a nice way was essential to download speeds.
We lazyload our images with JS so the user can get hold of the content as fast as possible. They’re also resized at the server end so we don’t send any wasted pixels and smushed with ImageOptim. If the user resizes the window and hits a breakpoint, we check if there’s a more appropriate image size to serve up to maintain image quality.
On the JS side, we’ve tried to keep plugin usage to a minimum and written our own where appropriate to keep filesize down.
We’re also using the lovely HTML5 boilerplate htaccess file (as you suggest!) and it does a great job of caching files for faster downloads where appropriate.
Based on your article we’ll be diving into conditional loading for CSS and JS as I think we could squeeze a few more Kb off the site size by not loading some of our more complex JS on mobile.
Our own performance optimisation attempts have given us the same number of total requests on mobile but total page size on the heaviest page (3.2Mb desktop) is down to 1Mb on mobile. As the images are loaded with JS, initial download is only 15 requests and 400Kb.
Great article! I’ll be using it as a reference checker for further projects to help make sure we’ve got everything covered.
Gav
We came across a lot of these performance issues whilst developing our new company site over at etchapps.com.
I’ll be first to admit we’re running 50 something requests and a 3.2Mb total page load on our heaviest page on desktop (ouch!), but we’ve done a lot to mitigate that pain.
The site is fully responsive (with a touch of adaptive) from around 290px all the way up to 1600px or so with a lot of imagery and so serving up those images in a nice way was essential to download speeds.
We lazyload our images with JS so the user can get hold of the content as fast as possible. They’re also resized at the server end so we don’t send any wasted pixels and smushed with ImageOptim. If the user resizes the window and hits a breakpoint, we check if there’s a more appropriate image size to serve up to maintain image quality.
On the JS side, we’ve tried to keep plugin usage to a minimum and written our own where appropriate to keep filesize down.
We’re also using the lovely HTML5 boilerplate htaccess file (as you suggest!) and it does a great job of caching files for faster downloads where appropriate.
Based on your article we’ll be diving into conditional loading for CSS and JS as I think we could squeeze a few more Kb off the site size by not loading some of our more complex JS on mobile.
Our own performance optimisation attempts have given us the same number of total requests on mobile but total page size on the heaviest page (3.2Mb desktop) is down to 1Mb on mobile. As the images are loaded with JS, initial download is only 15 requests and 400Kb.
Great article! I’ll be using it as a reference checker for further projects to help make sure we’ve got everything covered.
Cheers
Gav