How to kill a web performance
Recently I have worked on two web projects, the goal was creating new responsive web design, because mobile traffic of those pages grown significantly last years and current designs ware not acceptable for nowadays.
Unfortunately, I had a lot of problems trying to achieve good web performance, even very basic stuff so this blog post is about what kind of problems I met and what I tried/did to solve them.
Large transparent PNG images
One of web pages has a very fancy design with a lot of png and graphics, I tried to compress all those pngs and to reduce size but it just doesn’t work. 10% from 1mb image is nothing and I had minimum 3 per page ( some pages have 5 or 6 images by 1mb ). Solution: I just created several images and serve them based on screen size with media queries, in that way my css growth a bit because I have 5–8 media queries, from 320px to 2600px retina screens. Gulp helped me with task that optimize and resize images.
I had to serve 2 fonts and we can not use Google Fonts because it has limit if 10000 impression per day. Solution was self hosted fonts, and I fount that the best compression is woff2 format, not all browsers supported it but I always have fallback to other formats. Surprisingly, woff2 is 10 times ( in some cases ) smaller than woff. In my situation I had 6 fonts ( 2 x 3 variations ) which reduce about 200kb.
Social network widgets
Social widgets are heavy shit . I had to put facebook, twitter and instagram timeline, that is large amount of JS and additional images that comes from posts. Its funny but those plugins add ~3mb to my page. Solution: tried to set limit of posts that those plugins shows but not everyone has such option.
Animations and transitions are very important for designers and sometimes for users. Based to best practices, all animations and transitions should use only transform and opacity. Changing those properties trigger only composition, which is not se expensive compared to painting and layout. ( also those properties are optimized for GPU instead CPU ). Finally we have smooth animations even on 4 year old devices with android 4.0 native browser ( yes, this crappy browser )
RI are real pain in the …. The biggest shame for w3c, there are several options but no one is universal and has good browser support ( 6 years after RWD went mainstream ). My solution for serving multi dimensional images was picture element and using picture polyfill. Actually it works really good.
Backend developers did great job, all the content we serve is cached and the user receives static html page, no waiting for DB queries and so on.
I’m planing to user serviceworker and to cache all static assets like fonts/css/js/images maybe that will solve some of my problems with page. There are two very handy plugins sw-precashe and sw-toolbox by Google that will
p.s. In this post I have mentioned mainly initial loading problems, maybe I will write second post about other problems that I had.