advertisement

Faster Frontends

50 %
50 %
advertisement
Information about Faster Frontends
Technology

Published on March 14, 2012

Author: AndyDavies

Source: slideshare.net

Description

Faster Frontends - talk on web performance from Bristol Skillswap, March 2012

Covers the basics but a bit wordy in places!
advertisement

Faster Frontends@andydavies Bristol Skillswap, Mar 2012 http://www.flickr.com/photos/mikebaird/2464769129/

People are impatient... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez

Pages are bigger and more complex 14.1k 498k 684k 2.3 objects 75 objects 83 objects (est) http://www.strangeloopnetworks.com

Are we relying on browsers and ISPs tobail us out? http://www.flickr.com/photos/12023825@N04/2898021822/

Browsers are kickin’ ass and taking names http://www.flickr.com/photos/brianauer/2197218356/

But faster connections have limited impact 40Percentage Improvement 30 20 10 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps) Mike Belshe, “More Bandwidth Doesn’t Matter (much)” - http:// bit.ly/ACPGiA

So, what can we do to make sites faster? http://www.flickr.com/photos/halans/5456860491/

Bulk of load time after page has been generated Front-end time Look: Bandwidth not close to being maxed out!

The basics...

Beat latency - reduce requestsMerge CSSMerge JSCombine images into spritesPictogram / icon fontsdataURIs?Cache forever http://www.flickr.com/photos/martinrp/470090889/

Work the bandwidth - squeeze the contentgzip/deflate anything that can be compressed html, css, js, xml, json etc. (perhaps even favicon.ico)‘Minify’ js and css http://www.flickr.com/photos/andih/240584392/

Images make up the bulk of bytes transferredPick the right format Consider alternatives jpeg - lossy SVG png - lossless CSS3 gif - animated Canvas Icon / pictogram fonts Don’t forget to optimise them! http://www.flickr.com/photos/zaprittsky/4520788183/

Frameworks and tools can helpFrameworks are adding support for minifying,merging, versioning and cachingServer plugins and cloud based services to dosimilar things are available http://www.flickr.com/photos/mtneer_man/359116762/

Progressive Rendering

Load CSS firstBrowsers block rendering until external CSS filesare downloaded (avoids the ‘Flash of UnstyledContent’)Avoid inline styles outside the <head>, maytrigger reflow and repaint

Split the JavaScript payload Load only the essential JS in the <head> - mondernizr, html5shiv etc. Put the rest at the bottom of the page, or load asyncronously (Pagespeed can help find deferrable js)“Fast Loading Javascript” by @aaronpeters is a really good reference http://www.slideshare.net/startrender/fast-loading-javascript

Load Third Party ‘Widgets’ asynchronouslyScript for asynchronous loading: <script type="text/javascript"> function() { var js = document.createElement(script); js.async = true; js.src = myscript.js; var first = document.getElementsByTagName(script)[0]; first.parentNode.insertBefore(js, first); })(); </script>Synchronous scripts can break a site if the script fails toload or is blocked.

When Third Party ‘Widgets’ go bad From http://bit.ly/yRjX63

When Third Party ‘Widgets’ go bad From http://bit.ly/yRjX63

Flush the <head> CSS starts loading before page has finished (Can also flush other blocks of the page too)

background-image: url(...) delays thehero Hero arrives 4.5s in debenhams.com tested from Dulles,VA using webpagetest.org

A few last things...

How many of these stylesheets get loaded?<link rel="stylesheet" type="text/css" href="css/base.css" /><link rel="stylesheet" type="text/css" href="css/flow.css" media="screen and (max-width: 960px)" /><link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (max-width: 480px)" /><link rel="stylesheet" type="text/css" href="css/retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)" /><!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]-->

How many of these stylesheets get loaded?<link rel="stylesheet" type="text/css" href="css/base.css" /><link rel="stylesheet" type="text/css" href="css/flow.css" media="screen and (max-width: 960px)" /><link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (max-width: 480px)" /><link rel="stylesheet" type="text/css" href="css/retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)" /><!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]--> All of them! (ie7.css only in IE7 though)

Font foundries will slow things downGoogleTypekit (Both have really short cache expiry times. Typekit doesn’t compress eot) http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

Browsers move on - use up to date libraries Most popular version of jQuery is over two years old! (released Feb 2010)1.3.0 1.3.1 1.3.2 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.5.0 1.5.1 1.5.2 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.7.0 1.7.1 Based on references to jQuery hosted on Google CDN in http://httparchive.org/ Feb 2012 crawl

Performance matters, it has a measurable impact on engagementBrowsers and ISPs can’t fix all our speed issues We have the tools and techniques to make a dramatic difference

http://www.slideshare.net/andydavies @andydavies andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

3 steps to make better and faster frontends - Nico Hagenburger

3 Steps to Make Better & Faster Frontends With Sass/SCSS, Compass and Lemonade’s CSS Sprites
Read more

PrestaShop 1.7 Release: „Code Better“, „Create Easier ...

Zudem wird ein komplett überarbeitetes Starter-Theme, das die Grundlage für Erstellung sehr individueller Frontends bildet, ... Sell Faster – von ...
Read more

Front and back ends - Wikipedia

Front and back ends This article has multiple issues. Please help improve it or ... The back end usually optimizes to produce code that runs faster.
Read more

Photodiode Front Ends - Electro-Optical

Photodiode front ends are by no means glamorous. ... faster this way. In order that the op amp not domi-nate the noise, we should choose it by the
Read more

Get there faster. - softwareag.com

Get there faster.tM Kundenreferenz Vr Leasing ... browsergestützte Online-Frontends: VR-LeasyOnline (LOS) für die Kundenberater bei den Volks- und
Read more

[ZBXNEXT-1679] value mapping xml import/export - ZABBIX ...

... configured value mapping should also be exported. ... + operator must be used here because it works faster. frontends/php/include/classes/export ...
Read more

Maximus Arcade:

Maximus Arcade is Windows-based software that allows you to relive thousands of classic games and creates seamless interaction with multiple arcade and console
Read more

Hagenburger - Concepts, Design, Frontends & Ruby on Rails

I’m Nico Hagenburger. I’m doing websites with Ruby on Rails, HTML5, Haml, Sass/SCSS & CSS3. And you should click me.
Read more

DOSBox, an x86 emulator with DOS

An open source DOS emulator for BeOS, Linux, Mac OS X, OS/2, and Windows. Primarily focuses on running DOS Games.
Read more