 of the slides I tend to zip through these fairly quickly so if I am speaking too quickly oh my god raise your hand let me know okay because I want you to get this information in writing this talk I had this fantastic oh my god it was an amazing introduction and I did that I practiced it and then I realized oh my god I have too much information to cover so that's the entire end of the introduction let's see if we can get this going no I have no idea what just happened keynote just quit sweet going to cancel we're going to open recent you're gonna giggle and laugh feel a little embarrassed scroll to the top okay I am here simply to help you look good you're here to learn about website performance increasing your site performance as well as automating maintaining that performance once you get it we're gonna do this with grunt with a big heads up oh wow my slides are showing up there with a big heads up that a lot of the tools that I talk about apply to other ways of automation you can do this with grunt you can do this with gulp you can do this with broccoli you can do some bash scripts you have lots and lots of opportunities you're not required grunt I happen to like grunt so the fundamental tenant of website performance is that it is everybody's problem and the problem with making it everyone's problem is that a lot of times we do things and we don't know how it impacts the site one of the things that we need to do is we need to make sure that when we make changes we know how it affects things we need to know did we if we make a change to improve performance did it succeed did it not or we're not even sure so the I'm gonna try and lose the Canadian accents the process here is pretty much these four steps we're gonna determine the key metrics that we care about we are going to establish a baseline where are we now we're going to make a change and we're going to measure that effect of the change oops one more click then we're gonna make a change repeat the change make a change and measure and we're just gonna repeat this over and over again so to start first step what do we want to measure if we don't know what we're measuring we can't tell it oh it's faster you know it seems faster it's like well what does that really mean a lot of people have already defined the key metrics and what we want to be testing here's one that you have probably heard 40% of users will abandon a site if it doesn't load in three seconds or less or fewer fewer you kind of have to take this with a grain of salt because if you look at the statistics it's actually not quite true people people will wait for your website if this is true for an e-commerce website and in that particular case you definitely want you know you want to get in there and you want to get them by really fast but for everyone else if you're doing a content site if you're doing something else it's okay to have a little bit of leeway in reality these studies are also what people say they do if you look at the statistics what they really do is there are people that once they have been there for 20 seconds they are invested and they are waiting for that thing to load so people will stay on your website one way of defining the goals is with a performance budget this is a concept popular created and popularized by Tim Cadillac and basically it's the upper bound that on your metrics on your key metrics your key metrics could be load time it could be page size it could be the number of requests it could be at what point is the site actually usable by a end user and that's the one that I think is the most important Tim has written a number of articles on the subject they are worth reading this one the middle one in particular is about what to measure and strive for initially on a project and again don't copy down those URLs just grab the slides they're all in there clickable it should be clickable if they're not I will make them clickable if you don't know where to start and I'm gonna do it I'm gonna do a performance budget where do I start here's an aggressive one let's just pull for what someone else has already done Etsy has these incredible performance budget goals it is just like it stuns me it's like I can't do that with my site my personal site but they have a lot more resources and you want to do you have different key metrics that you're doing so they have the load time they have page wait for the mobile they have the page wait for the browser fast network slow network that sort of thing if you have no if you don't know where to start these are a great place to start I would honestly triple quadruple them in my projects to start and then work to get them down so with this and we've read these things we now have our key metrics so we're going to establish a baseline where are we now we want to know how fast our website is so quick show of hands how many people know how fast their website is yeah yes but that's not really acceptable and you can imagine a lot of there are a lot of cases where it's fast enough it's fast enough and the CEO of the company is on an edge network somewhere out in the boonies and tries to load the page and it takes him two minutes to load the page and like it comes back and it's like okay we're making the site performance and you like we spend a lot of time working on this and then it's great and then things kind of happen again sort of thing so we really want to know how fast our our sites are we want to know that they're going to continue to get fast and they're gonna get fast and stay fast the easiest way to do this the very simplest way to do is just open up your browser and look you open up the developers tabs you open up the network tab you reload a page and you see this waterfall this waterfall says how long something takes to render what things are being blocked what things will not start loading until the next thing starts loading firefox has this safari has this ie has this ie's next generation has this chrome has this and if you go and look on the chrome one the chrome has this fantastic link explanation tells you what's going on and the documentation is amazing this this page that they have the links at the top is the page just just start with to understand key metrics just start with the browser it is fantastic and so when you look at this waterfall this waterfall will tell you different stages of how page assets get to you and it's worth noting that not all of these are front-end issues one of the things that if you look on my website I I do SSL on everything but it takes a second and a half sometimes for the browser to go to my site to come back to say no go to this other one that's if my performance budget has me at three seconds I've lost a second and a half to this redirect sort of thing so this is not necessarily a good thing another one is SSL negotiation that the handshake happens to take a long time on my server I don't necessarily want Apache SNI anymore I want a dedicated IP address so these are things that are back in that affect the front end and you have to be aware of those so it's not just the front end piece the easiest way after you've looked at the browser the waterfall and you just want to look at key metrics browser metrics you're not sure what they are and you want it you want to do is to load up this perf bar it is a bit of JavaScript again slides cut and paste don't copy that and what it'll do is at the bottom of every page that this isn't loaded on it'll show you a little toolbar at the bottom you click on it and it'll show you when you load this page key metrics that are interesting things like how long it took on the back end and how long it took on the front end this is this is the these two just looking at your browser and then this one are the easiest ways to just get a feel for where you are this one is great if you're doing development work and you want to know your performance on this change that I just did compared to the one that I had just done 10 minutes ago or an hour ago this one is great however I know what you're all thinking I'm not gonna click on all of this and this deals with my network I am sitting here I am on this latest generation MacBook and I have all this memory and no tabs open because normally I have 600 tabs open and yeah oh man this speed looks fantastic I'm done I am done this is a valid scenario because when you do your performance budget you're gonna have the desktop you're gonna have the people who are sitting in a high speed they're gonna have the fastest things and that's okay it's a valid test case but it doesn't handle automation which is really kind of what we want to do we want to make sure that these things are in everybody's face so we're gonna do that with grunt as mentioned with grunt I'm going to assume that no one here has used grunt and at the end of this all of you can use grunt so if you've used it before bear with me and if you haven't welcome grunt is a JavaScript task runner you configure it and you basically how about do all of these repetitive tasks it uses node server side and it uses npm the node package manager to configure and get all of the different dependencies in to install node you pretty much download it it's a little bit more difficult with Linux and if you're using Linux you want to likely want to use a few more tools come and talk to me there's lots of information online also but if you're using your desktop in order to set things up you pretty much you just download double-click you get npm node package manager and this is how we're going to install everything like grunt so after installing node on the command line grunt is installed with npm install dash g grunt dash cli so there are two parts to grunt there is the one that runs globally and that triggers the one that runs locally in every project this way you can have different versions in the project and have the one the globally one just triggers all of those this means that when you have a project you have it set up perfectly and oh my god and then you mothball it and then client comes back four months later and come back you can then bring it back and you know that it's going to keep working even if you have upgraded everything else the versions are going to work which is fantastic grunt needs two files to work there's the package.json and the grunt.js there's a number of ways to create these files for example to create a package.json you can do npm init on the command line and that will give you a bunch of instructions that pretty much no one means and a bunch of questions to answer so you answer these questions you end up with a json file that looks like this JavaScript you know what this looks like I kind of say fooie to all of that just download what someone else has already done makes it a lot easier makes it quicker and I've already done one for you so there's one this the second link is the one that you download it and once you download it and you have these things you're going to have something similar to this and this is more what a package.json for a grunt project looks like in particular it has your node engine and it has your dev dependencies these dependencies have versions on them the tilde before the version means match the minor number if you have a care it means match the major number so if you can be a little bit flexible with your compatibility what happens when you have this package.json in there is that you can then do npm install and that will go off to the node package registry and it will download those packages locally and so dash g means that it doesn't go globally it's not going to be available in all the projects it's just going to be available in the local project and it's going to create a node modules directory and this is if you look in the if you do analysis in the node modules you're not going to list all of these libraries that you just downloaded now as a general rule you wouldn't commit your node modules directory to your repository when you want to run tasks and you want to automate all of these and you're running tests for example and you want to redo your environment you're going to have to balance between I'm using up disk space for these node modules and I'm using bandwidth in order to download all these again and again and again so you can set up your own private repository or you can check these in that's kind of dependent on you there are a couple of resources I have no opinion because I don't know your projects so a grunt.js file looks something like this the file is just JavaScript and in .js any valid JavaScript is works in here one of the things that a lot of people will do is they will do all of their grunt files located in the same as their project files and I know a couple of Rails developers that are very upset that there's this node stuff cluttering up the Rails project and you don't have to do that way you can definitely set it up so that it's in parallel and references this so it's it's JavaScript it's nothing that you haven't seen before the important parts that you'll need is to include the package.json file we want we don't want to have to declare our dependencies a couple of times so we just include this one we then have our plugins these are the tasks that we're going to call on the command line with commands so you take tasks and these are the ones that we say okay run this task with these options on these targets. Next we're going to include our library files that we downloaded and we installed with the MPN install and then we're going to do commands commands are what you will run on the command line grunt space this command and the command is built up of the tasks that we have defined above and included with our libraries all make sense right yeah I saw some smiles one of the things that we really don't want to do because quite honestly I am one of the laziest people you will meet efficient I'm one of the most efficient people you'll ever meet is have this in my file in my grunt.js I don't want to have to I just install this thing why isn't it working oh because I forgot to include it not gonna happen so we're going to include match dev you'll see here that the dash dash I don't know if you can see that that's red a dash dev what that does is that says take this module that I am now downloading and include it in my package.json so then I can check that into my source code and I know that this is now going to be available you don't have to do the dash dash save dev if you don't then you get it locally and when someone else runs it it's gonna fail so it's an easy way to save it and then when we do this now we can just have this globbing we can just glob it just a single line that includes all of our tasks we are on our way alright firstly we're gonna do now we're gonna start this automation part is with grunt is we're gonna look at devperf devperf is a grunt module that uses phantom as in the back end which is phantom js with metrics so phantom js is a headless browser it basically lets you download and render pages without sitting there on the browser during you can programmatically download these things and when you as mentioned tasks have options and then they have targets so dev per basic options we can go ahead and like look at this one and if you look at this localhost 8000 this is not going to give us any interesting data woohoo everything is really fast as expected so a more realistic one looks more like this so we have our URLs this is what we're gonna this is what we're testing we're gonna do the performance on this we want to the the open number of runs one of the things that you don't want to do is you don't want to do your performance with data points of one data point of one is the data point of none according to my professor in college because you don't you don't have enough information I do have a straight line do you have no idea so you want to run multiple runs and you go ahead and take the median of that and say this is our performance so number of runs five you do a couple more things and we output the the results to a folder and what we get it once we run it remember back in the command I said the command is pe so this is the output of the running man I really should have made that a bigger font but then I'd have to scroll so you end up with a page it looks like this and when you have one data point one data point is kind of worthless so run it multiple times and what we end up seeing is how we're doing and again over time we see that these things are are changing and we're getting better we're getting worse and we know these things a more interesting one then this one where everything is green yeah green good is this one which has a whole bunch of reds and this this particular module is fantastic because it tells you you need to do this at the very bottom it just says here's what you need to fix and it gives you pretty graphs along with it but here's what you need to fix so I think at this point we're like on the right track to start to improve our performance so looking at this and we're seeing what these are we just we can just start with the com start with the fix this things at the bottom and the first thing it says on one of mine is remove the HTML comments comments are fantastic when you're doing development and you know that this ends there and this this goes with this and so there's stuff and you don't need necessarily that in production unless you're debugging something that you really want in production but normally you don't need it in production so you can remove them and you can do this in your template files with the grunt grunt contrib HTML min which will get rid of comments it will also squish them a little bit take away some of the space spaces that you have any grunt module that starts with contrived means that it is maintained by the grunt maintainers so when you're looking for ones to use which you do on MPMJS the website when you're looking for them and you're like oh I searched for this and there was like 16 different ways to reduce ass and grunt and this is okay because people are just scratching different issues if you have one that has contributed use that one because you know it's gonna be around for a while so we set it up where we have our task which is the HTML min we have our target distribution in this particular case production and then we have development we have different things that we want to do for development maybe for development we just want to remove spaces maybe we don't want to remove spaces and so you can set up the different targets and then we can run them when we run these things we want to make a change and then we want to measure any effects and this is important because if you make too many changes you don't necessarily know what causes problems or what what you did to improve things that you should keep doing so any changes should be checked as soon as possible it doesn't need to be checked necessarily on production you don't necessarily have to push all your production having a testing environment where you push to the testing environment and then see the difference just between this and the last run it's very helpful and when improving a performance concatenating and minifying CSS this one's a big one that pretty much I haven't been on a project that hasn't done this recently this one and setting all of your assets to send via gzip or pretty pretty standard now if you don't if you don't have are using a system that does gots covered grunt contribute CSS min well you can configure this I don't have a config file there my apologies you can configure it and it will aggregate the CSS files and then strip out the spaces you can remove duplicate CSS if you have a case where you're working with preprocessors and you have everything nice and modular and you're fantastic with all of these things it turns out that you can have something in one file and something in the same file in reality just the selectors you put them both in the same file now you've removed all this extra stuff so removing duplicate CSS is a way that you can do this with CSS CSS you're getting really aggressive you can remove unused CSS yes you can automate this and quite honestly this one terrifies me oh my god automatically removing CSS when it's used like this one time and there's one place and you have to have it sort of thing and it's just absolutely oh gosh this one terrifies me so if you are going to automate removing CSS I highly recommend automating visual regression tests so phantom CSS is also built on phantom JS but what it does is it takes screenshots and then does a visual comparison so that you know what changed this is fantastic just during development because there have been times when in a preprocessor I'm going along and I'll just change the link to red and then suddenly everything in the entire site is red oops I didn't mean that I only meant this one so having the visual differences and you can just scan look at it's fantastic so if you are going to automatically remove CSS I highly recommend something like this and you can set it up fairly fairly straightforward one of the things that it specifically does is it has these tests and what these tests are they are Jasper files that you can use to walk where your site is where in the site you want so if you need to log in or something you control your site you can submit posts and follow along so you can get to exactly the right page in the exact same state that you you need it in one of the other things that I really like about Phantom CSS is that you can pick parts of the page I am just going to be removing stuff in this particular template or this particular file and so I can do regression testing on just the header or just the side bar and or just these pages and I like that a lot instead of automatically removing things we have CSS stats you can it's a website and we have a grunt test that matches it this website is fabulous if you haven't used it before I ran it on my site and was like oh my goodness I have 62 background colors of which I use three pretty sure I'm using a framework when I have how many years this 30 some font sizes I used to and I have 10 different fonts I use three and so it's kind of like it's an eye-opener to see these kind of things and again we can automate this so that we can keep track of these over time maybe put up a big dash of five word up that says these are the things that are changing and one of the things that I really like about automating this particular one is that it also checks for invalid CSS so this looks great on this browser but it happens to render a particular invalid CSS one way and I get to another browser and it renders it in a different way and this will catch you can have a barf on invalid CSS which I find helpful on a number of times this is the URL all right aggregate and minify JavaScript very similar to the CSS a lot of people are doing this uglify is the one that most people use to do this pretty straightforward again when you make a change you want to measure the effects every time all right too many small images these are images that we're still we're still on the first tool right we're still like these are all the things it told me was wrong with my website too many small images you have like the icons and various different places but it's like okay we already have a sprite for that you're thinking but also you have let's say you have a design that has this sidebar and it has small thumbnails right it's got like six six thumbnails that rotate out of 12 or 24 putting those images also into a sprite is very helpful because now you have one request you don't have these six requests that rotate every time someone reloads the page it's fabulous so you can stick them grunt montage is one of the several this is one of the cases where there are many different ways to make sprites in grunt that you can use I happened to like it mostly because I use it has all the features that I have recommended but and the example here has icons but again you can do it for thumbnails image min image min so every image has crafted it gifts have like lots of pngs jfa everyone has extra file has extra header information so what image min does is it essentially reduces the file size without reducing the file quality or the image quality which is great because why send over bitch that you're never going to be used and it is also straightforward you can usually run this just once you're not going to get optimizations and once the files are run once you're good SVG we're all moving towards SVG makes it even easier but even they have croft in them because they like editors have a lot of pointers and information in them put a lot of information into the SVG so this is a way for you to get rid of even that if you I think I was supposed to ask a leading question right here which is pretty much what's the biggest thing that happens on every web page and if you don't know what this is images okay so images are the biggest thing and we can resize images responsive images are completely and totally the way to go and you want to make sure that you and you resize them you actually set in the smaller images also there's a new HTML5 has the new image that has the sizes in the attributes highly recommend look that up and use that but we can resize the images and these values we can specify so that we have our mobile size we have our medium size or tablet size we have our large size we have our retina size we can automatically generate this so as an easy way to just go through if you don't have something that is automatically resizing them go ahead and resize them if you were looking for a magical SVG to PNG fallbacks there is grunt con it is declared the unicorn of SVG files alright what else is really big on pages since I forgot to ask the first one after images what's the next biggest one anyone this happened to me no two megs of web fonts is not acceptable my answer was indeed no but we did compromise and the compromise that we made is that I was going to subset we the particular project was an English only website and so we were able to just take out all of the non English characters we were able to subset basically we have this giant font file and we are only ever going to use these characters until we were able to reduce it down to kilobytes instead of megabytes it was still hundreds of kilobytes but we took that hit so subsetting web fonts yeah so thinking alright great I'm still sitting in my office and I'm still or the coffee shop and I'm going through and this is all still dependent on my network so let's change it so that this process is not and to do that web page test.org is your best friend oh my gosh your best friend it is the gold metric in web performance this is the one that all the major sites go to it's been around since AOL open sourced it in 2008 it's well sponsored fabulous I absolutely love it it allows you to specify the test location with installs and servers all around the world and it lets you shape the traffic so you can say I am on a 3g slow 3g network in England and I'm going to access my site in California and so it gives us the opportunity to get these metrics though you wouldn't necessarily have we're going to automate this so the first step in automating it is to request an API key link at the top the downside of this particular API key is that it is limited 200 page views per day a few per day I was thinking it might be worse the problem with this is that if you're running multiple tests you're doing five tests and taking the medium now suddenly you're down significantly fewer if you're doing 10 pages you know it looks like these add up especially if you're going to want to integrate this into any kind of CI so if you need more you can set up your own web page test server so once we have it set up once we have our key or we have our server and therefore we have our key grunt perf budget yeah it's a grunt task for enforcing performance budgets in builds and you do a little command line while you're testing but also in builds we set up what our metrics are and we can track and we can fail the builds that don't aren't performant the changes that you make aren't performant so the one that you see on the website is this one where you know here's the URL and I put my key here and I run it in reality this is more likely to what yours is going to be this is what mine is for one of my projects where I have my particular instance and I specify a different URL than web page test and you might need to adjust it certainly when you start off a few more variables when I have a 3g connection everything times out the first time absolutely everything times out so I usually bump everything up to oh god if my thing doesn't render in four minutes I think I will kill myself but so we go ahead and run this again if you'll go back a couple I'm gonna go back a couple real quick you'll see my register task budge at the bottom which means that I do a grunt budge at the top and unsurprisingly it fails the first time that's okay I'm trying to establish what my baseline is in this particular case and perhaps my performance budget was too aggressive so we can configure this so that okay here's where I currently am and don't fail the bill through it's over this because we know that we're not doing well yet but eventually we start to bring these I these performance these key metrics down so then with these new ones that are less aggressive we now have okay we're winning with this web page test also has a film strip view which shows you as your site is being loaded little screenshots and you can see at what point oh it took 30 seconds for my user to see anything or oh you know what this grade loads maybe I should have this this my default color to be white so they can see it on this gray and then when the background image comes on flip it over to a different color enables you to see when something first starts up this is especially important when you are doing the performance step of on your on the main page that people access you're just going to inline CSS if you inline your first 25 I think 25k or 200k of CSS that gets downloaded with the page and will render immediately before the rest of the files have downloaded you also get the waterfall and the waterfall has lines in there that says here's when things started happening and it labels the key metrics for you all right now great we've got this now what do we do we can integrate these into CI builds we can continuous integration builds there are ways and they're well documented so I'm not going to cover them to get them into github so if you do any kind of builds off a github you can have it fail push your fails to github individual ones are great but you want to see how we're going to do over time so web page tests I forget this exact URL oh sorry web page WPT monitor.org enables you to set it up so that your stats go over to the site so that you can see how they are over time you can also run web page test sorry the question is if this is dependent upon the web page test instance if using the public or the private did I get that correct you can also download install this install this locally so if you do public go to public you do private you can do private you can't go private to public so we can run this in the command line and from here we can do we we define our own tasks because in this particular case when we're running it from the command line we're not using the we're not using the library and task name so when we run this we end up with pretty pictures that we need to have these running from the same place all the time because it stores all these locally which is a good start but maybe we want something a little bit more chaotic like these so and looking at these I mean these oh these these make me happy sort of thing when these first came out because I could see over time how my sites were performing or in particular not performing the problem with these tools is that they weren't integrated into grunt they were just command line tools so if you have tools that currently existing that run on the command line or that you can trigger from the command line grunt shell there's also grunt exact does very similar thing enables you to do commands that are outside of the grunt ecosystem you set it up so that you have a callback you have a command and then you have a callback that does something with the output of that command and enables you to pretty much opens up the anything that you have that currently exists you can likely and they're already automating you can connect into the grunt world okay so back to those as an example using grunt shell back to the the the images that the little bit more chaotic ones web page test mapper is dependent on the web page test api and this enables us to when you install these these need to be installed globally because these basically are like commands that you run on the command line they aren't grunt command they are just commands they're programs that you run enables you to define what files you want to have loaded and when you have them loaded you can then run them and from there you'll get output and you can then take this output and then that output then goes into the pretty pictures and oh gosh yes we made a change we measured the effects and we have these pretty pictures but we need a better way to actually announce the effects that had back to the beginning was it's everybody's problem but if we don't know how the changes have affected everyone if it's this thing that a developer has to run on his machine and it isn't priority is built in and isn't aware then it's never going to be everyone's problem and it needs to be so people really like pretty visualizations they like the things up on the wall they like to know that things are happening the site that i highly recommend for the ease of use in order to generate a lot of these visualizations is sitespeed.io in particular if you go to run.sitespeed.io just throw in a URL very similar to web page test throw it in you end up with a summary at the end that says hey here are the good things and here are the bad things very similar to the def perf that we had back in the beginning that was on the command line but more instead of here instead of the actual items here are the things that you you need to be aware of that you need to start changing fixing upgrading uh fabulous part about this is that it provides a list that you can go through it's like here look at this sorry here's the detailed summary here are all the the key performance metrics that you have it also says here are the most used assets so if you know with most you can have a crawl you're an entire site if you wanted to do this and here are the most used pages on this so we know that if if someone is going to download this one asset they're going to have it cached so you want to make sure that you list your caches you want to make sure that there is a that this asset is not downloaded each time it also lists uh sorry uh the largest images that one was important to me because i realized that i was not indeed using responsive images i was building them but i forgot to put in the sizes on those and it also lists the worst loading uh the slowest assets when i realized that one of my css files was taking 16 seconds to load it's like oh wow what is going on and more importantly do i need that css file because you know clearly i'm working around on the on my website and i don't think i really need this file anymore so in order to automate this you know that's great we can do the URL you know you you could even script this right i mean theory you could you could do a web scraper you could submit to this URL and that's fine but um a lot of companies prefer to keep things in house and i can understand that and so one of the things that you can do i'll give you a moment to copy down this URL okay just kidding um one of the things that uh peter head and scott had talked about recently is how he had set up uh site speed to run locally in your own instances using docker and uh i had difficulties following his so i did the hard work for you and would like to go through a quick on setting up the docker installs uh i would like to point out that right now if you have your laptops open and want to go to tiny dot run colon 3000 there happens to be a running install but i won't give you the username and password to the end of this presentation so you install docker uh it's download clickable kind of sort of thing it's fairly simple straightforward even for linux and you do a pull of three docker containers these are the ones that he has uh two of the ones he controls and one is grafana for all of the pretty graphs uh this i wanted to say that you could do this whole setup in five minutes in reality pulling these down and installing these takes that five minutes actually took me 12 so it's going to take a little longer and if you're on a high if you're on a hotel network it'll take half an hour so you start graphite and because you're going to download these slides you're going to be able to just cut and paste these uh commands so basically you start the grafana sorry the graphite container then you start the grafana container and here's when you when you do this you can then go and you can log in to your instance uh in particular if you paid any attention to this slide which i hope you weren't hope you're paying attention to me you'll see that there is actually a username and password in there and those happen to be the ones that are available on tiny dot run colon 3000 if you go to it so my user my super strong password to log in and seed the system with a single metric run so you have the data gathering and then you have the graphics generation with the graphite and the grafana and now you need to give it data so if you seed it with a single metric run you then have something to play with in order to build up your graphs this is where most people get stuck because in the online documentation it says your grafana host or your graphite host and i'm just like i have no idea what this is it turns out that it's the docker ip address so if you do an if config and you look for docker zero that's the ip address that you want to use so you take that and uh it's barely read there uh you take that and that's your your when you run your metric run you're going to run yet another docker run you're going to give it that ip address you're going to give it your your url and then you're going to give it a namespace and this namespace is where in the graphs this particular data is going to live and you run it and now great you log in and this is what you get and you're thinking who that is a dark screen it is a dark screen it's all black uh but if you go to data sources this is where you set up your graphite instance and this test button you want to use oh my gosh it is it is a godsend sort of thing type everything in in particular the problems that i had with this were when you type in the url you need hdp or hdps in front of it which was a surprise to me um and if you're using um this the docker set up you want to use a proxy hit the test and go ahead and save and then go to the dashboards and the dashboards it's not very clear how you set these up but you download the drop down under the home button and then you click new and now you have the screen to do you add your dashboards you add a graph and when you're adding a graph another hidden thing follow the arrows pretty much there's the there's a place where you do edit you click to edit and you get this new thing at which point you can start adding data okay so you've done a single metric run and now you have the data available so you add a you add the metric that you want to do and since you have seated it it will now follow the paths um if you don't have it if you don't have the data source working then it won't provide the paths and it's very confusing to go through so you go through and when you're running you get a data point and this is fantastic you run your metrics the best way to continue to get these data points is to put it on a cron job so uh there's you can run your docker gathering metrics call on a cron job and then you end up with very full graphs you can also send over a ping so that when you do a production deploying a marker gets set so that you see okay everything's going oh and there's production deployed everything went up okay let's look at what we did in that particular deployed to see what we did wrong all right as I said this is currently available I'm going to leave it live likely to the end of the weekend uh and hope that it doesn't get stuck either I'm speaking faster I have a question um just like uh also worth looking at are these particular tools um download the slides and grab them really quick all right questions there is an api call that you do that is in the documentation that I did not put this in here sorry the question was how do I set the the production deploy markers that is in the api so I have gone 42 minutes and one of the things that uh is kind of important to me is to make sure that you can leave with what you need to get this going and a couple of people said well what about the private instance and if you have an api if you have an api key you only get 200 uh you end up or you're waiting you're always waiting behind this other one so waiting behind uh web page test is popular is kind of painful to me so I'm a big fan of setting up my own server and they have made it easy to do and it's an amazon install so I can go with questions or I can give you a four minute how to set this up four minutes questions four minutes it is okay so first thing you do is you log in to aws amazon and uh you have to have an account if you don't have an account go ahead and sign up for that account and you go to the ec2 instance upper left you'll be able to follow these slides um as you go along download them click on the ec2 instance and then launch instance what you're going to do is you're going to search for the community amis the web page test people will set up all these amis they've already set up all the stuff they've done all the hardening of the stuff just grab them and upload them go back to the web page test documentation where they list so uh ec2 basically gives you different regions that you have to that things are available in so you have to find the web page test ami that's in that region so we go back over to web page test in the documentation it lists the region the URLs at the top of the page we cut and paste it I happened to be in Oregon so I knew which one to look for so I paste that value in and I search for the correct web server when I find it I'll go ahead and use this particular ami and you'll note that this message is important in particular it deals with the security groups it basically says what traffic can come in by default no traffic can come in you're going to have to edit that so you click the button on the bottom at the launch and another one comes up that basically these are your keys to get into your server you need to remember to grab these keys so follow the steps to get the keys and once the keys are there you're going to watch to watch this instance come up once the instance comes up instances up scroll down to the next step that took me about 10 minutes to figure out the first time I did scroll down you click the instance and now you've got your list of instances and this one this one took me another 10 minutes I think this one actually took me 20 minutes scroll down again so now we have our security groups now we can set up what comes in to this particular instance and in this instance when you look at it you're just going to have port 22 you can ssh in with the keys that you had previously downloaded so go ahead and look at the security ones when you click the security ones you can add yeah you're inbound traffic you want to allow 80 and 443 those are your hpp and hps so those come in go ahead and edit these are the three that you want and when you're done you hit save and then oh sorry these are the three that you want I missed a step there oh you add the rules and these are the rules that you want to add all right phew click on the instances over in the left side and now we know what we have we have our URL this this URL is at this point live and accepting traffic and we can go ahead and if we paste that into the URL we have our own private instance the problem is is that it doesn't do anything there are two parts to web page test there's the front end where you get your results and I am now over 45 and then you have the part that actually does all of the work so we have to go through this process again and install the workers we have the server and are going to install the workers phew before we're going to install the workers we're actually going to harden our server a little bit so there's a PEM file that you downloaded and when it said here are your keys this is your key and you want to make sure that ussh is a buntu and I'm going to be if you are not a unix person have no fear I'm going to give you the exact commands that you can do in vi because I don't like vi I like emacs who likes emacs not enough of you okay so you open up vi because vi is on every system emacs is not and you delete the first line which is basically allows them to get into your ec2 system and then you save it and then you up using the same process you add you update a few more files these are the files that you specifically want to do contact me if you need help on doing these I'm more than happy to help you on these and then you set up your keys this is basically where you are your your region you need to specify the regions that you're in and you add your key you update the values to your key this key is important because it's going to be used for the servers that are working this is how the servers sorry the the workers can communicate to the the main server and no one else can restart the web server and now we're going to set up the testing instances and this is where there are ways to set up your ec2 server key in the settings.ini of your server so your server will automatically start the working instances which is fantastic and the easy way to do it so i'm going to go with the hard way to do it just so that you have everything so for the manual setup once again you go back you launch an instance you find the instance for the workers instead of the server and this is the one that's the tricky part that bites a lot of people you want to set up your configuration your user data before you start the instance on the very first time and this is where you put in your key this is where you put in your server host and this is this is the what ties your your workers to your server then once you save that you launch your instance and you wait a few moments and so then after you're done with that after basically your ec2 workers are starting up the community here with the server and then the server will say gotcha now you have your private instance and you can use this for all of your tests these are also available um i believe not just on amis but also on docker so you can install it in-house i know that there are there were some companies that had talked to me before that nothing goes out nothing so it is possible to install this also in-house using just web page test then when you run this you can run all these tests that we had before and we get our pretty graphs all right now now that i'm way over questions did i talk too fast if you're giggling i must have all right thank you