 Alright, so hello everyone. My name is Boris Vanschers. I just turn off the light. I forgot to do my hair this morning So that's you don't see me anymore No, in fact the screens are quite bright and I hope this is for you easy to see to see the slides All right Let's introduce myself. I'm Boris Vanschers. I said I am Known as Barris W on Twitter triple.org And other social platforms. I maintain several contrips including the font your face module the profile complete this percentage And about 10 other modules and I've done some contrips for a triple seven triple eight triple six I'm chairman of the Dutch Drupal Foundation, and I'm co-founder and CEO of a Dutch company based in Amsterdam called Limoon Goon Which is Dutch for lime green hands the limes on the previous slides We are a company based in Amsterdam and we are focused on building sustainable Websites mainly for our government, but we do more But accessibility is a thing that we find very important So today I'm talking about speed speedy websites Just to make sure this is a front-end session if you expect me to Go into detail about server configurations and varnish and whatnot. I won't so don't I won't be offended if you leave That's fine. This is front-end session I hear a Morton, right? And But to start with how to do so how to create speedy websites, let's start by telling you why it's so important to do There have been several researchers pointing out that if you have a slower website and one second Delay in speed results in 11% view page views 16% degrees and customer satisfaction and More important at 7% loss in conversion I'm not sure how accurate these numbers are but for me, they're quite Convincing to to pay some attention to make your site speedy also keep in mind that search engines like Google take into account The speed of the website so for a few years now about two years they rate slower websites Lower in page rank than they do for faster websites So and if we calculate the 7% loss in conversion on a real e-commerce website like an Amazon website If they have a website and it would be one second slower They lose 1.6 billion dollars a year which calculates to 1.1 euros a year and a bazillion Jackie's crown like this So it's quite important to make your site speedy and the funny thing is for a few years I always thought to update your MySQL cache size and Do as a put foundation front of a server and whatnot Well, actually it seems that 80 to 90 percent of the render time of your website or the time It takes to view the actual the actual website 80 to 90 percent of that time is spent in the front end that is your browser Rendering the CSS and the JavaScript files and downloading all the needed assets only 10 to 20 percent is the web server actually Doing the MySQL stuff and the PHP stuff and generating the HTML sending it to the client This research has been done on several websites, but including the 50,000 websites on our guys that come and Here the number is even higher 13% backends and 87% front-end Which makes the golden rule and if this rule the performance golden rule is Thought of by Steve Saunders. He's the head performance up to my head performance manager at Google He he wrote a blog post about this so-called performance golden rule saying that if 80 to 90 percent Is actual the time spent in the front-end? Let's start there by optimizing the website and don't start putting furnish etc in front of your service Of course furnish and other optimizations Tools on the web server is important if you have a website with say 10 million visitors a day But first most of the times that's not the case and we have a website with maybe 100 visitors or thousand visitors And then varnishing such such a case won't really help might help a bit Optimizing the front-end is easier. You can do it in a few a few hours At least the most important parts and it's a big win So let's focus on front-end And to begin with how actually does a browser work what happens if you if you type in the URL in your browser and So I'm going to talk to you a bit through the steps that happen that happen So if you if you enter a URL like google.com DNS request has been is made To fetch the belonging IP address So your browser knows to which IP address to connect this DNS look up takes about 20 to 120 milliseconds then the browser scans the HTML and Starts to look for all the CSS files all the style declarations because it needs the style declarations first Because CSS files CSS style declarations, whether it be files or inline styling that blocks rendering of the page And the reason the browser waits until it Downloaded all these styles is that it wants to make sure it doesn't redraw So say one CSS file defines the background color as black and another CSS file defines the same background color The same the background color of the body As yellow it would be very annoying if you see the page flickering all the time Well, every CSS file has been downloaded So therefore the browser waits until it has all the CSS files and only then it starts rendering the page at once So for this reason we want to make sure to put the CSS files As high as possible in the page so that the browser has access to those CSS styles as soon as possible Then the browser starts downloading all the assets images JavaScript phones or not and when it Hits a JavaScript request it stops downloading all the other assets Because a browser can download so many files at a time currently. That's about four to eight Assets at the same time from the same domain however, if it gets to one JavaScript file it stops downloading immediately all the other files and it waits until the Single JavaScript file has been downloaded It reads the content and then starts downloading the next JavaScript file and the reason it does is that the JavaScript file can Influence the DOM of the body It can change the HTML it can even make you download more JavaScript files or remove other JavaScript files for that reason The browser waits until it has fully downloaded one JavaScript file then continues with the next For that reason we want to put the JavaScript as low as possible in the body So we can see your page. We have to see is as already we have the HTML elements We already see some images popping up on the screen and Then in the end finally the image is start to slide because the JavaScript is down, but it's fine So in my presentation, I want to achieve the following and I hope I can make this clear a bit To put the CSS on top because it blocks rendering put JavaScript as low as possible because it blocks downloading other files How to minimize the number of requests? So let's try to remove as much unneeded stuff as possible And for the data that we are going to send over to the client Compress the hell out of it make it as small as possible by compressing it And another tip is to spread assets across several domains Because a browser can download for two eight files from the same domain. So we might split those files across several domains So we can download 12 for 24 files at the same time So let's start because oh, sorry in Drupal already puts a CSS on top by default So we can start with bullet point to JavaScript in the footer This is done quite easily using the hook.js altar in Drupal. You can put this in your template dot PHP Or you're a team file in in Drupal 8. It's the same hook in Drupal 8 You get a variable an array with all the JavaScripts. I think most of you can I see some hands How many of you are front-end developers? It's about half of the audience Okay So you get a you get a big array with all the JavaScript files Which are basically URLs to the file on the on the file system And the only thing you need to do is change the scope to the footer and by doing so Drupal puts the variables in the closure variable which is by default in the in the in the last part of the body element However, some JavaScript libraries require it to be on top On top of your body elements for instance the modernizer because the modernizer influenced HTML Put some elements on the on the body element and CSS files needs those elements So the modernizer is one of those libraries I think the only one in most cases that you need to put on top and the other ones can go to the footer There are several base teams most of you may use them like Aurora or Adaptive team or Zen they I think what a ship has it to They have team settings in the in the back end where you can just check all the JavaScripts that you need I don't need and to put all the JavaScripts in the footer All right, let's go with the next bullet minimize requests how to make sure to only send That data to the client that he actually needs and for us team is I call myself a teamer as well It's quite annoying to always override all the CSS that Drupal outputs So I use this team or this dysfunction a lot hook CSS altered almost the same as the JavaScript one Which you can use to unset all the CSS that you don't need Whether it be contrived files or Drupal core files So this is basically how you do it throw it throw out all the stuff like the for instance the comments comment styling such a thing I always remove because we have a graphical design which has comments stalled So why should I override all those Drupal core styles? And if you want to be very rough You can ease it can also do it like this and loop through all the CSS files And if the path contains the core module the core core folder and droplet It is a Drupal core CSS file and you can inset it. So with this piece of code you remove all the Drupal core CSS This might be a bit too much as you can use it So let's look at Drupal 8 when we enable Drupal 8 out of the box we install it I didn't enable any concert module whatsoever And I look at the source of the HTML I see this Drupal puts 35 requests for CSS files in the HTML Which is a lot I think and also 50 JavaScript files. So we end up with 85 requests for the front page only By default I was quite surprised but it seems you are okay with it So we need aggregation and luckily this is in Drupal core So we can just enable the checkbox to aggregate all the CSS and JavaScript however There is always or however This is what what you get and the only thing here what happens is I visited the front page and I visited Note one in this case the first note on the front page. So I did two page requests And these are all the CSS files to Drupal generated And what surprised me is there is one file that which is 34 kilobytes on one file Which is 33 kilobytes the 33 kilobyte file is the one on the front page That one has been sent to the to the client on the front page The 34 kilobyte has been sent to the client on the on the node one page And I did a diff to see what what the changes were in those two files And it seemed that only the comment dot CSS file and the wishy-wink dot CSS file Were needed on the on the on the node one page because that note had a comment form below But Drupal Isn't smart enough to know that the 33 kilobytes have already been sent to the client So it's simply just Aggregates all the file requests all the CSS request on that page makes it a new CSS file and sends it over to the client So we are sending over and over the same CSS code with the aggregation in Drupal, which is quite dumb The good thing is Drupal already G-SIPs the files So you see for every CSS file also a G-SIP file and within the HD access file Drupal does a redirect to it to the G-SIP file If the if the browser supports it If you have access to the server configuration it is better to Let the G-SIP be handled by the server instead of Drupal So if the server and if the server supports G-Sipping and able to dare and disable it in Drupal because your web server Is better and faster at the Drupal The good thing is the CSS and Drupal is already on top So a few months ago. I discovered the advanced CSS JavaScript aggregation module. I think it's a module with the longest name I know of and the short name is at Vagg I Was I was in doubt if I should call it at Vagg or at Vagg, but I think I stick with at Vagg This is a great module. It does Does the aggregation in Drupal a lot better than Drupal core itself? It is smarter in Drupal core. It can happen if you clear caches and exactly at that same time a user requests a page When you clear the cache the CSS files have been Are deleted and and regenerated and during that process if the user just request a page He gets a blank screen. He gets a screen without any styling the advanced CSS aggregation module Prevents this and has a better solution for it It does also the ordering of the JavaScript in the CSS better aggregation and it can minimize your CSS and JavaScript as well I come back to that later My screen is empty Lazy loading content. I think most of you know it Twitter does it Facebook does it if you have long pages of content and scroll down you see content appearing on the screen This is this is a very no-brainer for pages where you have lots of images and lots of assets Because why would you want to send 100 pictures over to the client if he's only looking at the top 10? So in that case it might be better to just show pictures Once they appear in a few pure few port of the browser just like this There are several Java script and a jQuery Libraries that can offer this solution and Drupal has some modules as well to do the integration out of the box and Use sprites. How many of you already do use sprites? Wow Let's go. All right, well, then I can skip this quite easily For the few that don't know what sprites are In short what it does you generate one huge image with all those icons combined into one single image And your HTML you define elements with classes say I have a diff with the class Twitter icon You might see is as I define this diff as 10 by 10 pixels and I position my huge background image Just so that the Twitter icon on the huge image is positioned exactly below my 10 by 10 diff icon container Now a few years ago. We had to generate such a sprite in tools like Photoshop. This is not needed anymore There are better ways to do it. One of them is compass. This is a check All right Let's go back once There it is That's already starting. All right. So this is a website. We recently built for Hero, which is a Dutch producer of drinks ice creams Jellies for your for your bread They have a lot of products and they wanted to show these products on the so-called product finder. It's a Dutch website And if you go to the product tab, you see the same as you see here the slideshow, but then on a full page And what they wanted to do is that they want the clients to be able to filter the products based on a category They were in or the ingredients they they have We've built this with JavaScript so you can say Let me see all the drinks you have that contain bananas You can see on this page. There's a lots of images not only icons, but also all the ingredients here 47 ingredients out of top of my head So if we would send all those assets to the client as a single file, we end up with about 80 assets on a single page So what we did we used compass to generate an image pride, which is the image you see on the right side of the screen And comp and comp as you can simply throw all the icons in the folder and it generates automatically one sprite And if you update one of the icons the the the sprite as is regenerate automatically We did the same for all the ingredients. So we ended up with two sprites one for all the ingredients and one for all the icons And with by doing so we brought back 80 s 80 requests to the server to just to This is then how it looks in your file system, and this is what compass outputs So it says for all the list items in my ingredient in order to list just use the same background image and then per list item Reposition the background image. All right. So we know about sprites about lazy loading about Aggregation and then we have one more chip to send less data I told you how to remove only the CSS using the CSS alter hook and who G is alter How to G sip your data before sending it to the browser? You can also mean fire it Drupal does a bit of minifying out of the box if you put on the aggregation checkbox But there are better tools to do so For CSS you cannot do much more than just remove all the comments and white space because the elements in the HTML won't change So you cannot change the CSS at what as well for JavaScript However, it's quite easy to change all the nicely readable function names into a short name We just wanted to cherish this and same for all the variables because your browser doesn't know and doesn't matter How the function is named as long as the call to that function is changed as well So there are tools to do so and it took the jQuery.js in Drupal 8 for for as an example This file is the one that is shipped in core currently 250 kilobytes for just a single file This is not a minimized file so that therefore all the comments and the white space makes it 250 kilobytes But if you minify this with the GS lint for instance, which is such a tool It strips out all the comments it minimizes the function names in the variables and you end up with a file Which is minified 129 kilobytes and if you then compress it using G sip you end up with only 37 kilobytes So it saves you about almost a tenth of the original file There are several tools that can do this compass can help here But the at the AGG module does this also for you and you can choose which minifier tool you like to use So come with this break your assets over several domains There else there are options to do this you can use a CDN a content delivery network And basically what a content delivery network does is that you can put all the assets you can you spread your assets over a Content delivery provider Amazon is one Akamai is one And they make sure that they spread all the assets across the globe across the several network of service So that when someone from coming from China visits my blog which is hosted in Amsterdam They don't have to download all the images from Amsterdam But they can just download the image from the server nearby in China And only the HTML is sent from the from Amsterdam in this case So this is really a help helpful to to make your site superior and also your browser can as I already said download For two eight files from the same domain So if you spread your assets across the three domains, you can download 24 files at the same time However, don't overdo this because you have to keep keep in mind that the DNS lookup is slow It's about 20 to 120 milliseconds So if you have too many domains your site ends up slower because of all the DNS lookups There is a small tip you can use to overcome this a little bit in the head of your page you could use the DNS prefetch tag I'm not sure if you can read it But basically you you reference to the domain that you're going to use later on in the page And we've put all the scripts to the bottom So by doing so you tell your browser to hey Why not just already look up this belonging IP address for this domain because we're going to need it later And I once it it's it gets to the point where he needs the JavaScript file from this domain He already knows the belonging IP addressing just can't download it at once You can use the same also for external phones on Google phones and whatnot So the browser can just start you in doing the DNS request already And setting up such a network of Sending your files to a CDN is quite easily Wim Lears who gave a session here. I think two days ago about JavaScript interpolate. You wrote the CDN module. It's an amazing module Just enable it. You can go to your favorite CDN provider. I use Amazon S3 And you just enter the URL that Amazon gives you here and Drupal take takes care of the rest of actually the CDN module takes care of the rest And once you enabled it enabled it the CDN Provider will download all the assets and puts it on on their own server It's a big win You can choose using this interface to put your JavaScripts on one domain and all your CSS files on another domain And all your images on another domain Oh, by the way, it's always best to keep all the CSS files on the same domain as your HTML or your Web page is loaded from For the same reason that we want to put the CSS on top of the page By by putting it on the same server as the HTML page You make sure we don't do we don't have to do that extra DNS look up No, it's as fast as possible to push to the client Cookies a small talk about cookies What I didn't know for a month ago is that once Drupal sets the cookie which Drupal does out of the box And I request a page as a client as a browser For all the assets I'm requesting all the images and all the CSS files My browser sends that same cookie back to the web server so Drupal can handle the information in a cookie But it's not doing it just for the HTML. It's doing it for every request So even if this cookie is just two kilobytes if I have 40 files on my Side, I'm sending over 80 kilobytes on every page request over and over again Therefore, it's very important to put all your assets on a domain name which doesn't Uses the same cookie in Drupal. There is in the settings PHP file of variables called cookie domain But the fault this isn't set. This is just the same URL as you are requesting But if you set your website as a website to www.example.com and you set also the cookie domain to the same domain You define in this cookie that it is only accessible from this domain And if I then set my assets on another domain, whether it be images.domain.com or assets All the images on assets.example.com in this case won't send over the cookie because the cookie belongs to another domain This is the reason that It's one of the reasons that Drupal.org Has problems with cookie. I believe they just recently switched to www.drupal.org Not sure. And now this is one of the reasons It's better not to to use your domain without any sub-domain because you cannot serve assets from the same domain without Sending the cookies over and over again What you can also do is of course use a totally different domain like Twitter does the TW image.com domain for all the assets and Google and Facebook do the same Because the domain differs so the assets don't handle cookies By the way in a CDN has this by default. So if I use Amazon for instance as a CDN It is a different domain than my own domain. So it saves me all sending all over the cookies And you can do this easily in your own browser. I use NAMP locally You can just use an extra alias in your settings for your for your domain pointed to the same dog root And enter assets.example.com in the CDN module and then all the assets are sent over from this sub-domain caching in Drupal. This is I think known to most of you just enable it. It's a no-brainer. You need it on a production server And tell your client just to wait five minutes or ten minutes Please don't set this to zero Once you get slashed on your website once you get a million hits at the same time And you don't enable this this this thing to five minutes at the minimum Then you serve will go down. Oh and one thing I discovered Only for a year ago and I work with Drupal since 4.6 is that if you enable page caching and you disable block caching Doesn't do anything because if you enable page caching it caches the whole page including all the blocks on it It's quite surprising for me because I disabled the block caching and still all my blocks are cached. It's funny All right, so I did some tests on my own block for instance for as an example So about once to spin com this one is hosted in Amsterdam and I run tests from that's very small Web page test org from America from Internet Explorer 9 In this case you can you this website is amazing You can select the browser you want to use and the point of where you want to do to do all the requests And it gives you this nice interface here saying that well for this request I needed five fifty assets and in total 186 kilobytes and it took me 2.5 seconds And then it also does some repeating views to see if it is just the first request which is slow or all my requests slow slow Point here is that our web server is already pretty optimized So the the repeating few is already quite fast nine hundred milliseconds is pretty fast It also give you some indicators here And one of them says that CDN isn't used which is correct one of them says progressive GPEGs are induced And it brings you might might bring you back to to a few years ago Maybe 10 20 years ago when we had to dial up connections And when when you download the file you see this image popping up into screen slowly very slowly And only after 50% of the images loaded you can see what the image actually is Therefore we used at the time progressive images Like this so once you have just a few kilobytes you can already see the image It's quite blurry and it gets sharper over and over But this is actually a good thing and I would suggest using always use progressive GPEGs on on websites Gives it gives the feeling for a client You can already see is this the photo I'm looking for now It isn't just scroll down and and don't wait for the rest of the loading so then I continued with my tests and I enabled all the Drupal cache settings page caching and aggregation and I ended up with some slightly quicker results not 2.9, but 1.9 24 requests Because of the aggregation and repeating views were a bit faster as well But still no CDN no progressive GPEGs Then I enabled the FEEG module and I get a little I get less requests and less data and a bit faster It's it's already set. This is quite fast. It's very hard to slice more of the speed But but once I enabled the CDN module as well My times were dropping more and more and was 1.2 seconds and 590 milliseconds almost half a second on the repeating views and this is really fast And I took a look at oh, yeah, and imagine that the average page load of websites The average across those 50,000 on archive.com is six seconds Which is really slow. I think so about a half a second on repeating views is quite fast In the Netherlands the quickest websites are roughly about 1.1 1.2 seconds I was quite happy with this with just a few one or two hours enabling modules and configuring checkboxes So what did I tell you I explained how to put the CSS on top which is Which is by default in Drupal and how to put the JavaScript in the footer using the hook.js alter How to minimize the number of requests using aggregation and you can use the at VHG module. It's a really helpful Use sprites for your images send us little little data as possible using minifying and G sipping can be done by compass can be done by Online websites it can be done by the at VHG module and Spread your assets over several domains, but don't overdo it and as a guideline I would say if you you you should use about 20 assets per domain So if your single page needs 40 assets, you might consider using one CDM one extra domain for your assets And for 60 use to see a two extra remains All right Here I've put some some extra links in the slides to the to the results out of the the What are the first slides I told you about how many seconds how many percentage? These are in the in the links here The web performance today is a nice website with has almost daily blogs about performance on websites And you can download the slides as well pit.ly slash blazingly fast ruffles with dashes between So that went pretty fast I think we have time left for some questions by way my company in Amsterdam is still looking for people You look front end we're looking for front-end developers and back-end developers If you are looking for a job in Amsterdam at the night's company, I put up a stack of cards on the table grab one, please Questions and please walk over to the microphone if you have questions because these are recorded I'm a back-end developer, but I really want to help two hours from 10 guys to to to make their life easier and I'm very curious on this topic We very recently we have a Problem with external assets with a slow external assets. Do you have a solution with how to catch them or or something? How do you handle this situation? So you are asking about slow assets on external domains and how to to make sure that they how to how to check why they are so slow You could check the cash the cash headers to see if they are set from the domain Because by doing so your browser can catch the files and you only have to download them once and also check if the cookie isn't sent over Because that makes it slow as well These are only these are the two things that come up in my mind for now By the way, I don't call myself an expert expert So if someone in the audience has a better answer, please stand up and let's help each other then Thank you It's very good as well. I forgot to mention it in my slides. I can font is amazing It saves you all the icons in just one simple font file And there are lots of websites very nice websites where you can pick out some icons Somewhere where you can pick out some icons and it just generates the font file for you So yes, it's very good. Also if you if you can prevent to use icons at all by by generating them using see a CVG of SVG or By by defining them in in CSS CSS 3 Do so because CSS can be aggregated can be minified and in icons. It's very hard to compress more out of them Thank you It's retina friendly. Yeah, that's true. So you can zoom in as much as you want and it stays razor sharp Any more questions? Yeah to play it. How about that? Can you can you make you make your question a little bit more specific? Do you think we should make to play it faster load less CSS files make that easier for people to work with? I'm not sure in Drupal 8 they Applied your idea which I'm your motton came up with the idea to split up CSS files for what they are used for So instead of just using comment that CSS let's make it the tree out of out of my head We have the comments dot base dot CSS the comments dot admin dot CSS and the comments dot team dot CSS So as a team and we can just remove all the dot team dot CSS files and start them ourselves That's quite helpful, but we have now three requests instead of one So we need the aggregation and the aggregation needs to be way better than it does currently because what I what I showed was Drupal 8 ready Okay, I'm kind of the thing why I asked that question is how I've mentioned just a little buff We have about 30 minutes around the new theme layer in Drupal Which is a trick which is gonna one of the things we have talked about actually is the front-end experience that We've seen here how it works in Drupal and we want to get more front-end developers in now To help us out figuring out the right experience that we want So I hope that you with the with that Well, you don't call yourself an expert, but you are an expert that you're actually going to show up from a little buff So we're trying to gather all of the front-end developers who know stuff that want to see Drupal be a better work tool and Common help and that's the buff is in 30 minutes over at Club B Which is just over there at the at the bathrooms So it's just it's the third room and we're gonna fill it up with a lot of front-enders and come and help us make Drupal 8 absolutely epic Thanks. That's one more Hello, I actually have a small tip for front-end developers. There's a small like extra plug-in. That's called grunt Which helps with a lot of stuff for front-end designing It does soft refreshes so you can design very easily It also compresses your images with open-source libraries compresses the JavaScript I still have to Research it myself a little bit snaggak has a lot of information about this so you can ask him And a good site as a tip is also icon for making Scalable icons Okay, thank you. I think that's about it. Thank you for the attention and have a great Drupal con