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.
Web fonts
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.
Ads
Ads are another external javascript data that user has to load everytime when opens one of pages. There is no solution for that, just install add blocker ( sorry dear publishers ).
Cookie wall
Since several years is mandatory every page to put banner with cookie policy that explain how and why a page uses cookies. I had to use external banner that comes from client, and guess what, this banner comes with own version of jquery, even you use jquery this cookiewall will load own version. Just amazing 80kb external javascript.
Animations
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 )
Responsive images
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
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.
ServiceWorker
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
In conclusion, skipping all external javascript libraries can provide really good initial loading
p.s. In this post I have mentioned mainly initial loading problems, maybe I will write second post about other problems that I had.
