Bundled js and css is HUGE, which degrades mobile experience significantly
-
Currently Shariff will serve a 34 kb css file (around 7 after gzip) and 116(!) kb of javascript (40 kb gzipped).
This is a big problem for mobile clients (which you can try for yourself i.e. using the Chrome Dev Tools in mobile mode and selecting the “GPRS 50 Kbps 500ms RTT” profile). Even with gzip compression enabled, Shariff alone will currently delay initial site rendering by around 1 second (css) and DOMContentLoaded by a whopping 23+ seconds (css+js). FontAwesome (the icons) will add another 56 to 72 kb, which thankfully does not affect initial rendering or the DOMContentLoaded event.
In other words: using Shariff will currently kill your mobile web performance.
Why is this?
FontAwesome is included without any kind of subsetting.
Styles for ALL FontAwesome icons are served, which makes around 22 kb of the total css (you would probably need around 2 kb for the icons that are actually used in Shariff). ALL icons are included in the font files, which is 56-72 kb (gzipped) compared to an estimated 5-7 kb when using a subset.
Subsetting can be done with services like icomoon or fontello (the latter sadly produces fonts that have problems in Android Browser 4.2). When subsetting I would recommend giving it its own namespace (i.e. font-family: FontAwesomeShariff) and instead of using the predefined classes (.fa-something) using your own so Shariff won’t interfere with other plugins or themes possibly using different incompatible versions of FontAwesome.
jQuery is bundled.
Since nearly every theme and loads of plugins are using jQuery nowadays and WordPress will even come with its own version, I can think of no reason whatsoever to inline that into a huge script bundle. jQuery is probably makes 95 of your 116 kb script file and will load regardless of other already loaded jQuery versions.
You should rather go the WordPress way, use
wp_enqueue_script('jquery');
and be done with it. WordPress will only load jQuery once now. If you are paranoid about jQuery versions, you could check $wp_scripts and load your own version if necessary, but since the API is largely compatible across loads of versions that would probably be overkill.So to summarize the solution to all of the above:
- Please use the minified css and js versions that can be found in the main Shariff git repo. They are around 2.9kb (css) and around 19.9 kb (js)
- Include jQuery using
wp_enqueue_script('jquery') - Generate a font subset of FontAwesome using the services mentioned above (or using another, or your own tools)
- Include FontAwesome using its own namespace to avoid conflicts.
After doing all of that, Shariff should only add around 1-2 kb of css, 7 kb of js and a few kb for the icons. That’s less than a third of its original payload.
Initial rendering in the slow GPRS profile would be delayed by a split-second instead of just over one second that it takes right now. DOMContentLoaded will fire around 19 (!) seconds earlier.
Mobile users will thank you! 🙂
- The topic ‘Bundled js and css is HUGE, which degrades mobile experience significantly’ is closed to new replies.
