Rail: Putting the user first Paul Irishhttp://www.paulirish.com/ and Paul Lewishttps://aerotwist.com/ wrote an articlehttp://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/ for Smashing Magazine outlining a new way to look at performance by analyzing how users perceive the speed of your site. Paul Irish presented about RAIL at SFHTML5's AMP Project Presentations. He began by asking the question What is slow? - Is changing the DOM slow? - Are Javascript animations slower than CSS animations? - Is loading a script in the head of the document slow? Is it slower than loading the script before closing the body? The answer to all these questions is it depends. As...
Performance budgeting allows developers to user performance as another part of our design and builld process. There is no reason why a site should weigh in at over 2 mega bytes or take more than 10 seconds, and over 30 seconds in a mobile device, to load. In his post Performance and Designhttp://bradfrost.com/blog/post/performance-as-design/, Brad Frost writes that: > Too often, any talk of web performance quickly ventures into the land of heavy geekery. Terms like DNS lookups, Gzipping, minifying, far future expires headers, caching, ETags and more are thrown around and consequently lose the attention of most non-techy people. This...
Unless we are careful when creating them or manipulating them with Photoshop or its equivalent images can become huge very quickly. If we're not careful when saving the images we will find ourselves with images that are way larger than they need to be. Photoshop or your favorite image editor save for the web The simplest way to compress your images is to save for web. I can hear your laughter but it still holds that most of us will use Photoshop, or something similar to it, to create and manipulate images. So it makes sense to figure out how...
Tasks that minimize HTML are available for Grunthttps://github.com/gruntjs/grunt-contrib-htmlmin and Gulphttps://github.com/jonschlinkert/gulp-htmlmin and both are based on the HTML minifierhttps://github.com/kangax/html-minifier tool. | Option | Description | Default | | --- | --- | --- | | removeComments | Strip HTML commentshttp://perfectionkills.com/experimenting-with-html-minifier/removecomments | false | | removeCommentsFromCDATA | Strip HTML comments from scripts and styleshttp://perfectionkills.com/experimenting-with-html-minifier/removecommentsfromscriptsandstyles | false | | removeCDATASectionsFromCDATA | Remove CDATA sections from script and style elementshttp://perfectionkills.com/experimenting-with-html-minifier/removecdatasections | false | | collapseWhitespace | Collapse white space that contributes to text nodes in a document tree.http://perfectionkills.com/experimenting-with-html-minifier/collapsewhitespace | false | | conservativeCollapse | Always collapse to 1 space never remove it entirely. Must...
Optimizing Javascript is nothing more than eeliminating as much white space as we possibly can and, if we want to, to mangle the names of variables down to as few letters as possible. The idea is that the fewer characters the smaller the file will be and the less bandwidth it'll consume and the faster it will transfer and the quicker your scripts will become available and run. Be particularly careful when mangling variables. The mangling may have unexpected results Uglify Uglify was the first command line and build process minimizer I found for Javascript. It will both minimize and...
> Optimizing the critical rendering path is critical for improving performance of our pages: our goal is to prioritize and display the content that relates to the primary action the user wants to take on a page. Ilya Grigorik Critical Rendering Pathhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/index?hl=en The sad truth is that we've become obsessed with speed and how fast does a page load and, for a fast page load, we need to know what to load when. "Above the fold" is a concept inherited from printed media. In the context of web design/development: > Above the fold is also used in website design along...
CSS vendor prefixes are both a blessing and a curse. They are a blessing because, as originally designed, they allow browser vendors to implement new CSS features that were not part of any final specification in a way that could be easily changed when the specification changes or is withdrawn; and, once the specification is finalized, vendors can drop the prefix and developers can use the new properties as they would any other CSS property. They are a curse because, as good as the theory was, it never really worked that way. The web is littered with prefixed selectors long...
Unless you already work with a customizer or are familiar with SASS to know what imports to comment out in order to remove a feature from your CSS framework you are bound to have unused features bloating your CSS and making it bigger than it need to be. Or it may be that your CSS has grown too large after accommodating feature after feature... without removing them your file will bloat to unmanageable sizes. Tools like UnCSS allow you to remove unussed CSS selectors by following these steps: 1. The HTML files are loaded by PhantomJS and JavaScript is executed....
CSS can become very large and very convoluted if we're not careful. This is particularly important when using third party libraries like Bootstrap or Zurb Foundation where most users download the full framework with large chunks of the library that they will never use but still load and push over the wire bloating the application and slowing everything down. When you work with your own code it's easier to slim down but it still makes sense to build a default set of CSS stylesheets for our applications and then selectively choose which ones to use based on the page or...
The tools for making content performant have improved considerably in the last few years. As designers we can now influence the size and the type of resources that the end users will see when they view our content. In this series we'll discuss strategies and tools to minimize the size of our web content: CSS, Javascript, HTML, images, video and audio, along with best practices in serving the content. Good overview of the topic are: - Steve Souder's High Performance Web Siteshttp://shop.oreilly.com/product/9780596529307.do did the first book length treatment of web performance - Steve Souder's Even Faster Web Siteshttp://shop.oreilly.com/product/9780596522315.do updates the...
