 Is there anybody can anyone raise your hand if there's a seat next to you so we can just pack more people in here more There are no seats. All right. There's no seat. Let's let seats left. Sorry There's like a window sill over there. I don't know. All right, it's about time to get started Thank you for coming to high performance theming at DrupalCon Munich 2012 My name is Chris Ruppel more on that later So who am I? I'm Chris Ruppel. I'm a friend and developer at four kitchens I do Drupal stuff occasionally got a couple modules I like doing the core development sometimes When it's not too difficult. I'll let mark do the rest of that Cod and then it needs a little bit of love, but Drush make me as a generator for Drush make So what is this about high performance theming? It's actually not about theming Because no one would come if you didn't put the word theming in a front-end development talk at a DrupalCon so it's actually about front-end performance and The basic idea is that we have a lot of flashy effects and They're all really cool and we've got all these new browser capabilities But it's more important to make stuff that's lean and fast and you can have both and that's what we're gonna talk about here Because users actually want performance over effects even if they don't realize it Because a site can be cool, but if it's not loading quickly then they're just gonna walk away anyway and Mobile devices make the stuff way more difficult latency bandwidth Connection speeds and all sorts of stuff like that it just exacerbates the problems So here's a short rundown of what we're gonna talk about today in order to help Make awesome websites that also run really well Front-end development how can I build and debug faster? Web performance we're gonna talk about how to make pages load quickly When they're actually deployed in live and then some Drupal specific tools because it wouldn't be a Drupal concession without a couple of those So first front-end development your best tool here is actually the browser There used to be extensions and things That you would download and add on to your browser to make them a developer tool But that is no longer the case all the browsers they come with these tools included because they want Developers to use the browser first mosaic was the first browser and it was actually an editor in addition to a consuming device and We kind of got away for that from that for a while, but now we're back into that Development workflow. There are lots of local development tools that help you build sites and I know that Chrome in particular is about to Release a couple features that let you make changes in the browser and then save them straight to disk So they really want you to use the browser as your authoring tool not just a consuming tool Because all these browsers want the open web to win So all the all of them share features and they all have the same kind of development tools embedded in them opera IE even Firefox and Chrome Safari they all want this and then I just want to make a note that any of you are welcome to go and make suggestions to these browser Makers when you're doing your development because they want to hear from you and they want to know what you need so that they can make the browser a better tool for you and There's a couple Twitter accounts go bug them So I'm going to talk about a couple Chrome dev tools tips here And like I said the feature set is similar in all these browsers I'm firebug has to be downloaded for Firefox, but Firefox proper does have some development tools that are very similar So you can get these features in all of the web browsers. I picked one because Chrome is what I use on a day-to-day basis Whoops So this is a cool one if you do responsive web design Now the dev tools can kind of show you what media query is actually The media query that Finally affected the element that you're looking at so if you've got a couple different width settings in a different media query You can see that at a glance now Now this is an oldie the goodie in like Firefox. There's a user agent switcher add-on that's been around for ages But now this got dropped into Chrome proper and operas had it forever Just because of their relatively low market share, but you can override override the user agent and Chrome you can now even override the device metrics and tell it a I am actually 320 by 480. It's got a little Switch button there so that you can simulate device orientation change And they've got font scale factor and and you can even emulate touch events for when you want to do feature detection testing in a browser, which you should always use a real device, but it can be helpful and Then also we've got a disabling cache So browsers will do all sorts of caching that we don't even think about anymore You know, you've got your normal clear the cache To clear out like images you've downloaded, but there's DNS caching There's all sorts of caching that they do and you can disable all of that Like in Chrome you can do it when the dev tools are open. It'll just turn the cache off Period and you don't have to worry about it Which is really good when you're trying to test network latency and like page speed downloads and stuff like that Which we're gonna get to in a minute So network waterfalls are another great thing Not used as often as we'd like but that's why we're here, right? And this should be your first step to debug load time issues So when you've got a page, it's like part of the page loads and then it hangs and then oh there it goes And you're just like I wonder why that was so slow Maybe I shouldn't use so many fonts or whatever, but you can actually figure this out now This projector can't handle the size of screenshot. I took that's my fault. Sorry But you get the idea here the waterfall will show you the exact sequence of downloads that happened in your page And you can see up here at the top that when you open the dev tools There is a network tab that you can access Elements is off to the side there. I'm sure we all use that one very often And so this network tab will show you the sequence of downloads as the browser assembled the page and we've got a couple My first screenshot is not going to show you this, but maybe I can drag it. Nope In the very corner is going to show you the amount of time that it took to download the page That's in the bottom left the next Number there is the amount of data that was transferred So you can see the total page weight of of your of your download of the page and Also the amount of time that it took to download and there are two numbers here There is an on-load which we're all probably familiar with if you ever set up like dream weaver mouseovers a long time ago And then there's a DOM content loaded, which is actually a more important number because that's the point In the page load where we all start to feel like the page is loaded It's when things start showing up CSS starts rendering the page and this is due to the ability of the browser to to pre parse information and Start assembling the web page before it's actually finished downloading everything And so you've got this blue line on the waterfall also that'll help you figure out when your DOM content event is actually happening and The further left we push well left for you for you guys The further left you push the blue line The better your page is going to be the faster. It's going to seem that it's loading even if it takes another second to load Assets if you're doing that asynchronously People will still feel like the page is already finished So if you want more information about browser tools Because this would be this could be a four-hour session just on browser tools alone go read these links I've got all these slides online at the end. We'll we'll have links so I Read more about it. This is from jQuery UK earlier this year and then Yeah, so the next topic here is web performance. How do we make these pages load fast? That's just what we were looking at right So I want to issue a warning here not everything in this section is universal and you shouldn't just take everything That's listed here and then do it all because it's possible that you could even hurt your performance by blindly applying optimizations where none is needed So you want to look at your site and you want to take these tools and you want to test them And you want to figure out what is actually wrong with your page and apply a fix for that particular issue Get good data analyze it So having said that let's talk about some universal fixes You can reduce your HD HTTP requests minify and concatenate CSS and JS Combine images into sprites and move scripts to the bottom. All these things are things that you should always do Regardless of my previous advice Network latency is one of the worst offenders of page performance A lot of times you make a request and then you sit there for 400 milliseconds Just waiting for the server to get back to you now That's may not be a problem for one request if you've got a big image sprite But if you've requested 13 images for a page, you're going to multiply the amount of time that you're waiting If it's not using something like speedy, which is the next version of HTTP So we're not going to talk about any of these these are kind of basic And there are definitely other Drupalcon presentations that have happened in the past and other just web development presentations where this information is available Let's have some real fun I'm gonna talk about a few JavaScript tools Because we all love JavaScript, right? You do There are a couple tools here that I'm just blatantly explaining from South Street by Filament Group They are a shop primarily based in Boston, Massachusetts And I don't know if anyone heard about the Boston Globe redesign Sometime this year or last year, but it was a really really big responsive launch And so there were a lot of JavaScript tools that came out of this because as we mentioned when you're doing any kind of web development But especially responsive when you've got a mobile site to serve and a richer desktop experience You want everything to load fast and you want it to load intelligently So they put a lot of work into making tools that are going to make our jobs easier. Hooray So essential is the first one the problem is that CSS is often loaded when it's not needed we use media queries to to Restrict the display of our CSS on a page but oftentimes even if you split it up into files and put the media query directly in the Attribute of the link tag that does not stop the browser from downloading it. It still goes and gets it So what you want to do is use this tool because you want to avoid CSS from being loaded unless it's truly going to be used A perfect example would be a style sheet that has min width 1,400 pixels or something very large for a desktop and then an iPhone is going to download this or a mobile phone in general And then it's also going to go download those enormous images that are in that style sheet. It's never going to display them It's just downloading it for fun That's not good So essential will only load CSS that is used immediately It is a tiny little piece of JavaScript you instead of making link tags You load up this array of code into the head of your document and then it figures out how big the window is now It figures out how big the window could ever get and then it loads some of it directly And it lazy loads the rest of it, and then it doesn't load some of it Which is awesome. This is free and open source. It is on github Picture fill there is a lot of talk in the Drupal community about picture fill right now But let's talk about the general problem first So we need some images a lot of times we put images in content what do you know and When you're loading an image onto a mobile phone You need a smaller one than you need for a desktop layout for instance and Affecting this a loading a big image can affect the usability and the page speed So if you're loading a big thousand pixel wide image and the device that you're looking at is only 320 by 480 then you're wasting a lot of bandwidth and you're wasting someone's time while they wait to download that image So we need to avoid doing that when possible This is doable in CSS with the other tool That I just mentioned, but when we have content images, that's a little different Luckily, we do have the wonderful image styles in Drupal 7 image cache in Drupal 6 So we have the ability to create different size images and even crop them intelligently sometimes if you've got you know You're willing to sit down and write some code for it But then how do you get those images to be served correctly to the browser? So picture fill was developed to explore responsive images before a native browser implementation emerges Sometimes when web standards are created Someone at Apple headquarters just writes whatever they feel like writing and then we have to deal with it Which almost happened for this, but we had a good Community rally around this and Matt Wilto Marquis is the responsive images community group leader for the W3C and he kind of Helped rally the troops. We've got a couple people in Drupal that are actively involved in this as well And kind of said hey, no, this is not what we want. We we want a different solution here So picture fill is the prototype for that solution that the community is leaning towards and The code is on GitHub again So here's another tool not by filament group. The rest of these are just other standalone tools Modernizer, I'm sure everyone's heard of it and It solves a very specific problem Which is the old problem of user agent sniffing How many people let's get a show of hands how many people have ever done like user agent sniffing or use mobile tools You're like, oh hey mobile. Yeah. Yeah, we've all everyone raise your hand. Yeah and So user agent sniffing doesn't really scale Especially as more and more new devices are created some of these devices are not going to be top of the line devices Some of them are just other Middle of the road type devices. There are other economies that aren't as Developed as you know first-world countries and they also have people who are buying Phones that have what we would consider to be old Capabilities, but it's still a good phone and it still can do the activities that you need to do on the internet and As web developers, we should be striving to allow All people and all devices to access web pages as well as they can So when we do user agent sniffing what we do is we take a tiny little string in the web browser And we make every assumption possible after that We just make assumptions about the user agent string and if you've ever looked at one I don't have one in these slides, but for Chrome example, for example, it has the words Mozilla webkit gecko Safari Chrome KHtml it basically names every engine that has ever been popular in it. And so you can't really be like, oh Safari this must be on a Mac, you know because Safari's on Windows as well And you just shouldn't be making assumptions like that from a user agent string So the solution here is to detect individual features of a web browser That sounds kind of hard now doesn't it but Modernizer makes it easy and As a bonus after it detects the features it can allow you to conditionally load other assets that you might need Were that be feature present or not present and The code here is at modernizer.com or on github if you like github everyone likes likes github so Let's talk about some Drupal tools What problems has Drupal solved already? Speedy module it's pretty cool The problem is that some of the JavaScript in Drupal core is not minified While this might not be your first issue that you want to tackle it can definitely be one when you're starting to shave bytes off and so this module ships alternate versions of core JavaScript and it allows the The it allows those libraries to be minified and to reduce the size of them so you've And I should say that you you probably shouldn't be worrying about minifying files until you've Covered some of the other things that we've talked about already such as pictures and like images being responsive and so forth because As a point of reference here Just removing one JPEG from your website will have like ten times as much impact as minifying your JavaScript You're just doing a lot more to decrease the Total weight of your website when you are Removing big assets than when you're just minifying files But if you have a lot of JavaScript or if you have a web application that's based on 5,000 lines of JavaScript Something like minification is going to make a bigger difference So this project is at speedy Drupal.org speedy And Also, we're adding a scripts at the bottom feature so you'll be able to do that automatically in Drupal. It's cool Because right now there are some really good methods for that but they are not They're not Modulified you have to do it in code So if people are a little averse to writing a hook to J s alter Then you might want to check out this module when we release a new version So modernizer the new version the new Drupal version The problem with Maintaining a modernizer library is that as you add new features to your website You it can kind of be hard to keep track of what feature tests you need inside modernizer so when you Add geolocation to your website and then you want to do some feature detection for geolocation if you haven't added it to modernizer It's not going to be there to test and that's not good but in Drupal we've got all these different tools we've got You know themes that provide pieces of functionality. We have different modules that know what functionality they're providing and So what we can do is we can use Drupal to communicate with modernizer and we are doing that in a library So full disclosure. I maintain this module But we're working on a modernizer load API and a modernizer test API to allow modules and themes to communicate to the The other Drupal modules and themes communicate to the modernizer module what tests they need and then the modernizer module can Give you the site administrator a link to click on to go download your modernizer build and When modernizer 3 comes out not to be confused with the modules 7x30 version When modernizer the JavaScript library gets to 3.0 There will be a modular build feature and we will able to we will be able to assemble these via drush So it's going to be super cool The API right now is does have a couple drush commands to get you a development copy really quickly It has libraries integration We're working on speedy integration And the code is at drupal.org slash project slash modernizer So back to picture fill because this is an important one responsive images are really hard It's not really solved yet as we've been talking about There is a Drupal 7 module. There are actually several Drupal 7 modules that in their own ways Try to solve the responsive images problem I contributed to one, but it was based on an earlier library that is now Just kind of defunct and so we stopped pushing on development of the Drupal module for it but this one that I'm showing you on the screen is the active one that I would recommend going and trying it integrates with image styles and I believe it outputs or it has an option to output this picture tag That is being worked on in picture fill and Additionally, if anyone's interested in Drupal 8 development There is an issue here that you can follow and See how core is going to deal with this for Drupal 8. I I Wasn't at the keynote this morning. I'm sorry, but I don't know if they talked about any of the Drupal 8 stuff So this is definitely being actively developed right now and furthermore The team that's working on the Drupal 8 implementation is actually helping influence the web standard So the the picture tag that is going to hopefully eventually be created The the Drupal 8 team is actually helping Influence the formation of the standard which is really cool because it helps us all solve our problems now and it helps the Standard that eventually gets solidified Will be already working within Drupal 8 So one day people were just like you know what let's just put this in Drupal 8 Who cares if it's not ready yet and the w3 was like oh really okay? well, let's talk about it and But that's exactly how picture fill got created which was a bunch of people saying you know what we don't like the direction that this web Standard is heading It was called source set and it involved putting a huge array of sources in the source tag it was kind of silly so people decided to make the picture tag instead and Drupal 8 is jumping on board and we're helping out So here is the third and probably most important section we've the the links here are Not as numerous but at the same time This is not something you should skip because everyone's found themselves in a situation where you're wondering why Why is this happening to me? so web page test or is one of the tools that you can check out and What it does is it offers? Testing from various browsers various locations in the world and it allows you to test web pages performance as it downloads and as it executes in a browser and this is a good real-world test They're using real hardware and they're not using Like VMs or or you know any sort of emulated software So you're getting the real data and then they push it out to you and they show you all the data on the web page after The test cues and shows up So what does it test? It can attest it can test the initial load time It can test the repeat load time. So once your cache is warm your browser cache That is you can see that oh, you know, it may have taken 400k to download the first page But on subsequent downloads, it's only 39k or something like that, which is awesome That means you're doing really well it will show you network waterfalls the types of Diagrams that we were looking at before in chrome and It will show you the header for every request you're making which if you are a Server admin or you're on the server side performance and scalability end of things That's going to be really useful to you because you're trying to make sure that all the headers are being set Correctly and you're using varnish and all those crazy words that I'm not really like I know the word But I don't know what I'm talking about so point is Go check this out and even if you're a server admin It's your front-end developer will be able to generate data for you And if they say they can't be like ah, but I heard you can go to this website and do that So another tool is a Akamai blaze and this used to be called blaze.io, but Akamai acquired them and This is performance testing for mobile and it does the exact same thing except it uses mobile devices instead Which is pretty handy So it'll show you It allows you to pick which device to test and it'll do an automatic number of page loads So that you can say oh only do this once I'm only interested in the initial load at the moment or if you really want to know about your Load times with a warm cache then you can start testing that after you've solved all your initial load problems And once again, it will allow you to test for many many locations all around the world So it's not specific to San Francisco or whatever You can test from close to where you live, which is awesome So yeah, that's about it That I hope everyone got something out of this and we've got a lot of time for questions because maybe I was a little nervous and talked too fast, but You can go ahead and contact me. I'm a lame six-digit Drupal org user number I am a RuPaul on github and Twitter and everything else and then you can contact me Just email me at chris at four kitchens if you'd like But yeah, does anybody have any questions? Yes Okay, okay. So yeah, all right. We've got a second world publishing website that Doesn't want to create two Mobile and desktop websites, although the primary audience is desktop users just to repeat the question Yep, of course Mm-hmm. Sure. Yes So this is the the the question was when you have a responsive website You want a very lean mobile experience and you might want a more Just a bigger and fuller desktop experience with more content in sidebars and so forth How do you handle those types of page loads and the answer is conditional loading? We covered conditional loading for CSS But modernizer has the ability to conditionally load whatever you want. So you could also use The anchor include pattern which is also by Scott from filament group And this is actually something that could be very handy in Drupal as well so In the context of Drupal you would use this anchor include pattern to Load a block but don't load the content just load the title and Hyperlink it to a URI of the data now. This will be so easy when Drupal 8 comes out because Drupal 8 is going to be magical Conditional loading you want to load things based on conditions And then a type of conditional loading is the anchor include pattern and What happens is if you imagine a Drupal block? The title would be hyperlinked to a URI that contains that content and when the page loads if your browser is Meeting the conditions that say it should load additional content dynamically What it will do is it will follow that URI and With Ajax like fetch the data and fill in that block for you But a mobile user would just see the title and they would be able to tap or otherwise select the title and Then go look at that content on its own as its own atomic block Mm-hmm Yes, sir then when the browser disables JavaScript then they won't get that content and They'll they should know that that's going to happen. Yeah They'll still be able to click on that title and see the content just like a mobile user would Mm-hmm. So there is no loss of accessibility of content at all Yes, can I just answer one at a time and repeat the question? Yeah So the question was about the picture fill work that's going into Drupal 8 He's asking the interface is rather complex and I I Don't want to pull it up right now But it is complex and it's based on image styles and there's media queries in there And just the question is how are we going to make this accessible to a site admin? That doesn't necessarily want to know what a media query is Unfortunately my answer for you since I am not an authority or really an active participant in that particular issue is I don't know so Drupal Khan is a great place to hunt down the dude who is doing it or the person so I Don't know if they're here in the room or anywhere else, but I'm sure there will be a core Conversation or something like that. That's more geared towards future-looking improvements to Drupal, but We may not be able to solve Those types of interface issues within core But that's the great thing about contrib is that someone can come along and clean that interface up in a contrib module and call it easy pictures or something like that and Did you say you had a second part to the question? Oh, yeah, it doesn't it doesn't take into account that an image might be shown twice Yeah, I get I have nothing so sorry Any other questions? Yeah Modernizer actually doesn't address creating sprites There is a website Called sprite me. I don't know Sprite cow. Okay, so there's a couple And there's sass also the sass will do it automatically although The directory based sass sprite generation leaves something to be desired for me at least But there are tools who will actually read the source code and the CSS of your web page And it will tell you what to to put how to organize your sprites because Spriting is a delicate Art that involves, you know, like if you've got a a an image that repeats why you can't sprite that next to something that repeats X because they'll cross over each other and stuff like that. So I would just look for sprite generation tools and There's a couple out there. Maybe I'll add some links to this presentation when I publish the the slides Yes, sir. Yes Yeah, to condense that down that into a question and a statement the no not a big deal The responsive images the are a RESP underscore image module and the Drupal core Implementation is going to cover multiple break points. So I was contributing to another module called responsive underscore images and We only had like one set one break point, you know, it was either small or big That was like 18 months ago though. So at the time it was like way better than nothing You can actually Use a couple of those just depending on how simple or complex your need is I believe the Drupal 8 implementation is going to have multiple break points since it's media query Based and you can arbitrarily set it up yourself, right? The answer is Javascript Yeah, any other questions? Sorry repeat again. Yes, I believe so like I said, I'm not an expert at that particular module I'm sorry that everyone's asking questions about the thing that I don't know about I know about everything else So I Believe that it works off of image styles or what was known as image cache in desix So it you should be able to create multiple styles that may not even be Dimension oriented they can be based on something else because with image styles I'm pretty sure you can write a hook that's just like hey if this module exists make this other image style So it's very arbitrary and you have PHP available to make whatever decision you need to make Actually, okay, so the question was is the work in core? going to Make use of data URIs if people aren't familiar with data URIs You can add a well hold on so Data URIs are the ability to add arbitrary data and It's prepended by the prefix data dash and then you can put a bunch of data in line in your HTML And the question is basically are we going to be able to Use inline data to help make decisions and I'm pretty sure oh data URIs, sorry Okay, data URIs not data attributes. Sorry So the the real question was are we going to be able to use data URIs? Which is essentially the inlining of image data straight into a web page if you've ever gone to Google news and tried to like inspect element on some of the icons when you look at it you'll actually just see a bunch of base 64 text and At the moment, I'm not sure if data URIs are going to be implemented, but again module, right? I'm not aware of any that handle data URIs. I do know that some pretty decent research has gone into using data URIs for Images and unless the image is smaller than about 5k. It's very often not Worth it to send that down the pipe as text Just because of caching and all that kind of thing But you also have to consider how often it's going to be reused and that sort of thing as well. So Get in there cowboy Yes, sir. Yes a point has been made that some of this could be viewed as being for SEO and The counter that I always have to that statement is that SEO is for people anyway so if you do it for people to begin with and You will just naturally have better results. It is very well known that Google places a high high emphasis on page speed nowadays, so That is correct. If you do some of these things and you get your page loading much faster, then you will be viewed more You will you will be viewed as a more valuable website in a search engine. Thank you for mentioning that Did I see a hand way over here on the side? No Cool Yes, yes so LabJS is an interesting one Modernizer load was actually written in response to labJS both of the authors living in my current hometown of Austin, Texas so I've had the privilege of talking to both of them directly about this type of thing and Unfortunately, there is a there is a labJS module and it does work for Drupal but Kyle Simpson the author of labJS had to specifically help rewrite pieces of DrupalJS because all of the JavaScript that is in Drupal 7 core was never meant to be loaded asynchronously and there can be problems when when you just go ahead and do that without you know checking over the code and making sure that things were designed to have Tolerance for asynchronous loading. So there is a lot of thorny issues there and there are different reasons to use different script loaders and LabJS actually has a decent implementation within Drupal. So Yeah, when it works Uh-huh, and sometimes you won't even see it You won't always see a performance boost from just automatically asynchronously loading all of your JavaScript So yeah, we have some dependency management issues also in core, which is what mark was saying that It means that you know when you use Drupal addJS You want to be able to say oh I must be loaded after this but before this and so forth And so there's a lot of dependency management issues that have to be addressed if we were to go and put The ability to asynchronously load JavaScript into core It's a little different when it's a contrived module because it's not You know automatically going to be used by all components of Drupal, but excellent question So if that's about it, I guess I'll kick over to the obligatory Rate my session slide. I made a tiny little Jump link for you if you want J.mp slash DC Munich Dash HPT and I would love it if you would click on or tap on Provide feedback on this session and not only does it help me figure out how I can Present information better, but it also helps Drupal configure out. You know how they can do it across the board So I appreciate that you came and thank you very much. I Will edit the node and put a link to the slides in the node. So Basically That has the same name as a core file Possible that we might be able to write a Tool to do that in Drupal 8 in Drupal 7. I don't see how I can have Maybe an issue in the module then the onus is on me to either figure out if it's possible at all or not So file issue and then we can talk about it because that's not something that's been a priority for me at the moment I've been working on Module integration And that is actually a very interesting Discussion that should be having It's a very good point that you can use both to the problem is that the content of the aggregates is not necessarily known sometimes And so we would have to figure out a way To know what we're loading because there is CSS that you always want to load Synchronously and then there's some stuff often it's JavaScript But sometimes it's CSS that you want to load asynchronously. It's not necessary like at the time of page Yeah CSS is most of the time you want that to block the rendering of the web page When you wrote CSS like that essential tool It blocks the rendering of the web page while it figures out what CSS to load And then it lays it loads the rest that it doesn't Yeah, so yeah Yeah, I saw you yesterday, but I was too busy. I just had like run by Do you train