Question? Leave a message!

CSS3 vs. CSS: A Speed Benchmark

CSS3 vs. CSS: A Speed Benchmark 25
Dr.LewisFinch Profile Pic
Published Date:15-07-2017
Website URL
Imprint Copyright 2012 Smashing Media GmbH, Freiburg, Germany Version 1: June 2012 ISBN: 978-3-943075-27-4 Cover Design: Ricardo Gimenes PR & Press: Stephan Poppe eBook Strategy: Thomas Burkert Technical Editing: Talita Telma Stöckle, Andrew Rogerson Idea & Concept: Smashing Media GmbH Smashing eBook 19 Mastering CSS3 2ABOUT SMASHING MAGAZINE Smashing Magazine is an online magazine dedicated to Web designers and developers worldwide. Its rigorous quality control and thorough editorial work has gathered a devoted community exceeding half a million subscribers, followers and fans. Each and every published article is carefully prepared, edited, reviewed and curated according to the high quality standards set in Smashing Magazine's own publishing policy. Smashing Magazine publishes articles on a daily basis with topics ranging from business, visual design, typography, front-end as well as back-end development, all the way to usability and user experience design. The magazine is — and always has been — a professional and independent online publication neither controlled nor influenced by any third parties, delivering content in the best interest of its readers. These guidelines are continually revised and updated to assure that the quality of the published content is never compromised. ABOUT SMASHING MEDIA GMBH Smashing Media GmbH is one of the world's leading online publishing companies in the field of Web design. Founded in 2009 by Sven Lennartz and Vitaly Friedman, the company's headquarters is situated in southern Germany, in the sunny city of Freiburg im Breisgau. Smashing Media's lead publication, Smashing Magazine, has gained worldwide attention since its emergence back in 2006, and is supported by the vast, global Smashing community and readership. Smashing Magazine had proven to be a trustworthy online source containing high quality articles on progressive design and coding techniques as well as recent developments in the Web design industry. Smashing eBook 19 Mastering CSS3 3About this eBook New possible uses of CSS appear every day, and you shouldn’t miss any of them. This eBook Mastering CSS3 brings together tips on the newest approaches to CSS, such as CSS animation guidelines, CSS grid frameworks and modern techniques for constructing page layouts, among others. Also, you will get guidelines on how to use CSS in email newsletters and how to code email designs with improved readability and usability for the Web, mobile and email desktop. Table of Contents CSS3 vs. CSS: A Speed Benchmark Why We Should Start Using CSS3 And HTML5 Today Connecting The Dots With CSS3 An Introduction To CSS3 Keyframe Animations The New Hotness: Using CSS3 Visual Effects Adventures In The Third Dimension: CSS 3D Transforms How To Use CSS3 Pseudo-Classes CSS3 Flexible Box Layout Explained The Guide To CSS Animation: Principles And Examples Beercamp: An Experiment With CSS 3D Using CSS3: Older Browsers And Common Considerations About The Authors Smashing eBook 19 Mastering CSS3 4CSS3 vs. CSS: A Speed Benchmark Trent Walton I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At our company, we’ve happily been using CSS3 on client websites for over a year now, and I find that implementing many of these properties right now is the most sensible way to build websites. Until today, all of that was based on an assumption: that I can produce a pixel-perfect Web page with CSS3 quicker than I can with older image- based CSS methods, and that the CSS3 page will load faster, with a smaller overall file size and fewer HTTP requests. As a single use case experiment, I decided to design and code a Web page and add visual enhancements twice: once with CSS3, and a second time using background images sliced directly from the PSD. I timed myself each round that I added the enhancements, and when finished, I used Pingdom to measure the loading times. Here’s a fictitious Web page for Mercury Automobiles that might have been online had the Interweb existed back in the 1950s. The page was designed to showcase specific widely compliant CSS3 properties that in the past would have had to be achieved using background images. Smashing eBook 19 Mastering CSS3 5Smashing eBook 19 Mastering CSS3 6Above is a diagram that breaks down where I applied visual enhancements first with CSS3, and then with CSS background images (i.e. the image-based approach): 1. linear-gradient 2. border-radius 3. radial-gradient 4. text-shadow 5. box-shadow with RGBa e Experiment Process Day 1 I coded the HTML and CSS from a structural standpoint. That means no rounded corners, no shadows, no gradients and no images aside from logos and car photographs. I decided to include Web fonts at this phase because I wanted to focus on stuff that could also be done with the Web-safe font of your choice (Helvetica, Georgia, etc.). Furthermore, font-face was around long before CSS3. Smashing eBook 19 Mastering CSS3 7Smashing eBook 19 Mastering CSS3 8This gave me a blank canvas to add visual enhancements. The index page shows the end of my day 1 work, as well as what unsupported browsers will display, the appearance of which is structurally intact and visually pleasing. More on this later, but the way I see it, older browsers aren’t penalized with a broken layout, and modern browsers are rewarded with a few visual bonuses. Part of implementing CSS3 is about planning ahead and designing websites that look fine as a fallback. Day 2 Starting with the base index page, I created a CSS3 page. It took 49 minutes to complete. Here is the CSS code (css3.css): /-CSS3 Started on 2/26/11 at 7:28 AM CST-/ h1 text-shadow: -3px 2px 0px 514d46; nav -moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); -webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); background-image: -moz-linear-gradient(top, 5c5850, 48473e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, 5c5850),color-stop(1, 48473e)); background-image: -webkit-linear-gradient(5c5850, 48473e); background-image: linear-gradient(top, 5c5850, 48473e); nav a -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; nav a:hover background-color: 3a3e38; background-color: rgba(47, 54, 48, .7); nav background-color: 070807; Smashing eBook 19 Mastering CSS3 9 background-color: rgba(7, 8, 7, .7); body background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(FBF8E3), to(E6E3D0)); background-image: -moz-radial-gradient(50% 10%, farthest- side, FBF8E3, E6E3D0); learn_more, details img -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2); -moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2); box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); learn_more a -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background-color: cc3b23; background-image: -moz-linear-gradient(top, cc3b23, c00b00); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, cc3b23),color-stop(1, c00b00)); background-image: -webkit-linear-gradient(cc3b23, c00b00); background-image: linear-gradient(top, cc3b23, c00b00); a -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /-CSS3 Finished on 2/26/11 at 8:17 AM CST (49 minutes) -/ Smashing eBook 19 Mastering CSS3 10Day 3 I added visual enhancements by slicing and CSS’ing background images directly from the PSD. Even though there is less code, all of the extra app- switching and image-slicing added up to a total of 73 minutes to complete. Check out the page for the CSS image-based approach. Here’s the code (css.css): /-CSS (the image-based approach) Started on 2/27/11 at 12:42 PM CST-/ header background: url(../img/navbg.png) left top repeat-x; body background: e6e3d0 url(../img/radial_gradient.jpg) no- repeat center top; nav background-color: transparent; h1 background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; learn_more background-image: url(../img/learn_morebg.jpg); details img background-image: url(../img/detailsbg.jpg); learn_more a background: url(../img/learn_more_abg.jpg) no-repeat; .css3 background: url(../img/css3_hover.png) no-repeat center top; .smashing background: url(../img/smashing_hover.png) no-repeat center top; .trent background: url(../img/trentwalton_hover.png) no-repeat center top; .css3:hover Smashing eBook 19 Mastering CSS3 11 background: url(../img/css3_hover.png) no-repeat center -20px; .css:hover background: url(../img/css_hover.png) no-repeat center -20px; .smashing:hover background: url(../img/smashing_hover.png) no-repeat center -20px; .trent:hover background: url(../img/trentwalton_hover.png) no-repeat center -20px; .css background: url(../img/css_hover.png) no-repeat center -50px; /-CSS (the image-based approach) Finished on 2/27/11 at 1:55 AM CST (1 hour and 13 minutes)-/ Smashing eBook 19 Mastering CSS3 12Production Time Results So, we’re looking at a 24-minute difference: 49 minutes to add visual enhancements with CSS3, and 73 minutes to do it with images. For me, CSS3 was not only quicker but far more enjoyable, because I was focused on only one window (my CSS editor), unless I opted to pull some of the code from CSS3 Please. On the other hand, slicing images and switching from Photoshop to FTP to the CSS editor and back again was a hassle, and it did take longer. It’s also worth noting that I did my best to stack the deck against CSS3. I coded it first so that any initial hashing out would be done before heading into day 3. Also, the images I did slice are as optimized as I could reasonably make them: one-pixel repeating slivers, and medium-resolution image exports. Overall, 24 minutes may not seem like a lot of time, but this is a fairly simple page. Imagine how much time (and money) could be saved over the course of a year. What? Still not convinced?… File Size And Loading Time Results I took both of my pages over to Pingdom Tools to compare file size and loading times. Smashing eBook 19 Mastering CSS3 13Both pages are pretty fast, but CSS3 prevailed, with 10 fewer requests and a file size that was lighter by 81.3 KB. While loading times were close, the larger PNG files used on both pages accounted for most of the heft, which amounted to a .75 second difference on average. And when we’re talking 3 to 6 second loading times, those differences sure can add up. CSS3 CSS Difference Size 767.9 KB 849.2 KB 81.3 KB Requests 12 22 10 Smashing eBook 19 Mastering CSS3 14For argument’s sake, I created yet another version of the image-based CSS version, with a sprite containing all four images used in the original version, and then I measured loading times. This CSS Sprited version did improve things, taking HTTP requests from 22 to 19 and the overall size from 849.2 KB down to 846.7 KB. The way I see it, these differences are minimal and would have added to the development time, so it’s all relative. Without getting too sidetracked, I think the difference in loading times is significant. If a website gets 100 hits a day, the difference may not matter much, but on a higher traffic website the effect compounds. Shaving seconds or even milliseconds off the loading time of a website is no small improvement in user experience. The image-based approach could lead to upwards of a 15 to 27% drop in page traffic (based on a 5 to 9% per 400 ms rate). That’s a lot of dinero to lose. I wonder how much time and money could be saved by serving a CSS3 border-radius sign-up button on a website with as much traffic as Twitter’s. Smashing eBook 19 Mastering CSS3 15Another striking example is all the CSS3 that can be found in Gmail’s interface. The CSS3 gradients and rounded corners are there to increase page speed. Speaking of Gmail’s continued use of HTML5 (and CSS3), Adam de Boor had this to say about speeding up page rendering: Google’s current goal is to get Gmail to load in under a second. Speed is a feature.” And this: The company has found that using CSS3 can speed the rendering time by 12 percent. Convinced yet? No? Okay, I’ll keep going… Smashing eBook 19 Mastering CSS3 16inking About e Future WEBSITE UPDATES: THE EASY WAY AND THE HARD WAY CSS3 really pays off when it comes to making updates and future-proofing Web pages from a maintenance perspective. Looking at the Mercury Automobiles website, think about what would have to go into changing the height of the three-column car images or the width of the bubble hover states for the navigation. For the sake of a quick production, I sliced these images to match precisely. One option would be to open Photoshop, rebuild and resize the images, update the appropriate CSS properties, and upload. Another would be to plan ahead and slice “telescoping” images, making one end a short rounded corner cap and another longer image on the opposite end that slides to fill the interior space. You’ve probably seen and done this before: div class="border_box_top"/div div class="border_box_bottom" img src="your_content_here.jpg" / /div Smashing eBook 19 Mastering CSS3 17This isn’t ideal. While the technique comes in handy in a variety of instances, adding extra HTML just to achieve a rounded corner doesn’t seem efficient or sensible. WHAT IF YOU WANT TO GO RESPONSIVE? Serving different-sized images and changing the font size to suit a particular screen resolution simply couldn’t happen without CSS3. It’s wonderful how all of these new properties work together and complement each other. Imagine how time-consuming it would be to res-lice background images to accommodate varying image and font sizes that display at different screen resolutions. Yuk. e Take-Away For me, this simply proves what I’ve known all along: CSS3 pays off when it comes to production, maintenance and load times. Let’s revisit the numbers once more… Smashing eBook 19 Mastering CSS3 18CSS CSS3 Results Production 73 minutes 49 minutes CSS3 33% faster time Size 849.2 KB 767.9 KB CSS3 9.5% smaller Requests 22 12 CSS3 45% fewer Yes, this is just one experiment, and the outcome was influenced by my own abilities. This isn’t meant to finally prove that implementing CSS3 no matter what will always be the right way to go. It’s just food for thought. I encourage you to track development and loading times on the websites you work on and make the best decision for you and, of course, your client. We’re all concerned about browser compatibility, and opinions will differ. For me and most of my clients, this would be a perfectly acceptable fallback. Perhaps with more experiments like this that yield similar results, these statistics could be cited to both employers and clients. If a website could be produced 49% faster (or even half of that) with CSS3, imagine the benefits: money saved, earlier launch times, more time spent on adding “extras” that push the product over the top, not to mention a better browsing experience for everyone. Smashing eBook 19 Mastering CSS3 19Why We Should Start Using CSS3 And HTML5 Today Vitaly Friedman For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot. Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future. Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the Smashing eBook 19 Mastering CSS3 20