The Changelog: Software Development, Open Source - SiteSpeed.io and Performance (Interview)

Episode Date: July 23, 2016

Peter Hedenskog joined the show to talk about SiteSpeed.io and web performance. We covered where it came from, where it's going, and more importantly, simple ways you can focus on your web performance.

My name is Peter Hedenskog if you listen to the intro, it sounds a little different because, you know what? We did it in Peter's native language. We talked to Peter about SightSpeed.io, an open source tool helping you to analyze your web speed and performance based on best practices, as well as timing metrics. We talked about the inception of the project, where it's going, where it's been, the history, and what you can expect. We had two sponsors for today's show, Rollbar and Compose. First sponsor of the show today is our friends at Rollbar. And I talked to one of their customers, Andrew Childs, co-founder of Clubhouse.io.

And Clubhouse has a JavaScript-heavy front end to their application. So tracking errors and drilling down to the root cause was a major challenge for them. And I talked to Andrew about how and why they to the root cause was a major challenge for them. And I talked to Andrew about how and why they use Rollbar. Take a listen. You could see if you looked at our Rollbar, we have just kind of a constant stream of errors coming in that we need to fix. People are leaving these windows open for weeks and they've got all these extensions loaded and those extensions are doing things to the page, rewriting things and rewriting stuff on the DOM. And it's like you're in a very, very hostile environment. And you can only do so much to guard against that locally when you're testing it yourself. What do you do when bugs come in then? How do you deal

with that? Whenever we get a new bug that comes in, that goes to our Slack channel. So we're notified right away whenever we have a new bug. The page on Rollbar that has the bug information is super nicely laid out. Since they've got source map support, we can actually see exactly where in the code, even though our code is minified, we can see exactly which line is causing the issue. It does a good job of combining, you know, like if multiple people are having the same bug,

it will combine all of those into the same kind of list. And I guess it's a good overview of how many people it's affected. If it's just a single person who's on Linux running an old version of Firefox, then we know, or if it's something that's affecting everybody. Now, be honest here. Don't say this just because I'm asking you, but could you build the application and do what you're doing without Rollbar's help? It's very safe to say that we wouldn't be where we are right now if we weren't using Rollbar. That's awesome. Thanks so much for your time today, Andrew. I appreciate it.

For the listeners out there, we have a special offer for Changelog listeners. Go to rollbar.com slash changelog, sign up, you get the bootstrap plan for free for 90 days. Basically, that's 300,000 errors tracked totally free. Once again, rollbar.com slash changelog and now on to the show now we're back we got a fun show about performance here like who doesn't love performance performance matters performance i love it we're building a new website we want to be very fast right how fast is it i don't know yet i'm gonna have to run site speed on it we'll get it launched Performance matters. Performance does matter. We're building a new website. We want it to be very fast, right? How fast is it?

I don't know yet. I'm going to have to run Sitespeed on it once we get it launched. Speaking of Sitespeed, Sitespeed.io, we're talking to Peter. And the last name is said very differently in English as it is in Swedish. So, Peter, welcome to the show and tell us how you see your name.

Thank you. Yeah, I say it's Hedenskog. Hedenskog. Peter, we'll say it Hedenskog. Hedenskog. That's what makes sense to us in English. Yeah, that sounds good. So, Adam, this show was brought to us by longtime Changelog listener and community member Justin Dorfman.

So shout out to Justin. Yeah, big thanks, man. This was actually on the front page of Hacker News, which I think he was excited about it being there and then wanted to make sure we talked about it on the show because he's such a fan, but there's some sort of backstory to their relationship, is there not? Yeah, it is. So Justin reached out to me a couple of years ago when I started Sitespeed.io and I met him at conferences and so on.

So yeah, we met. We met. Yeah. Internet friends. Yeah, internet friends. Yeah, exactly. That's good stuff. Lots of good relationships can start with just internet friends, you know?

I'm your friend, Jared, you know? I'll always be your friend. Adam and I met on the internet just a few short years ago. How long did it take us to actually meet face-to-face? Two years? I started helping out in early 2013, and the first time we met was at Keep Ruby Weird, wasn't it? In November of 2015?

2014. 2014, so a year and a half. Yeah, not bad. That's my shortest internet friendship prior to IRL, which was... I never say IRL, by the way. I just had to just now. I say it. I think I'm getting you to say it. Oh, boy. Anyways.

Well, thanks for the warm fuzzies. Back to Peter. So, Peter, you know, one way we like to show the listeners kind of like the backstory of something like this coming to be is kind of figuring out where you came from so help us understand what your backstory is how did you get into programming yeah so when i was young i was really really lucky because my parents bought me a commodore 64 uh i really wanted it and i i i got it and I played games but I started to do things like basic and learning assembler and you know starting like that and I got one thing I remember when we were going out for the summer and summertime and I couldn't bring my computer you know but I loved programming so I took my pen and my paper and when i was away from home i used to write my programs uh on the paper so when i got home i tried to i wrote it back on

the computer and then i can run it and try it out so that's how it started that's not the first time we've heard that yeah was that matt who didn't have any access and so he would no he would just read books about programming languages but never actually was able to program because he didn't have any access. And so he would, no, he would just read books about programming languages, but never actually was able to program because he didn't have a computer that could do those things. Is that what you're thinking of, Adam? Yeah, yeah, exactly.

Yeah, similar. Yeah, so that's how it started. But then, you know, I got older and kind of computers was, yeah, it wasn't so hot. So I tried out other things and I didn't know what to do in sweden when i started to study at a university at that time you could so i i failed a lot you know

i tried out many many different things but i i failed totally i tried to be a chemical engineer but i didn't like it and i tried tried business and economics, but I didn't like that. And then finally, I started a course or like a program about human resources management. So I thought I was going on that path. But then somehow I started to do programming again. And then I did it a little at the university and then i my first work was like a as a developer as a on like building a website in sweden called spray so that's the short story of how i started what year was that and what technologies were you using yeah so it was 1999 and it was java java yeah so uh i i used to love java but now

i've been working with it for so many years and so many other things that are refreshing and new now so it's i try to avoid it i hear that i hear the java's coming back yeah but why i don't know why the jvm yeah but you know yeah so you know you have the interfaces and factories and you need to do a lot of boilerplate code uh instead of focusing on what really matters so it's so at least for me it's so like uh moving to paradise when you started doing javascript or node.js to where you can actually do a couple of lines that actually do something so yeah i try to avoid that now yeah less verbosity but let's all admit that javascript also has its uh its pain points as well yeah of course yeah yeah that's all languages do when you love a language is because you don't know it well

enough and then as you will you know better and better you find all the little corners of it that drive you mad but that's uh that's kind of just life as a programmer so take us to site speed so you've used you know back in around the turn of the century, your program was doing Java. You said you had an opportunity to switch to JavaScript and Node. Maybe take us from the point where you're doing Java at that first job to finding JavaScript and to a point where you could build something like site speed, which, as Adam said at the beginning, is a tool all about performance testing websites. the first version of sidespeed was actually built in java so i worked for spray.se that like that was like a swedish version of yahoo

at that time so it's like a big portal and then i worked for a small startup company for a couple of years and doing that back-end java stuff and i worked for a as a consultant for a while and worked with a big customer that had a lot of problem on their site so it was a customer that that used the cms and the people that was editing they could change whatever they could add extra j JavaScript, extra CSS, and whatever. So the performance of the site wasn't perfect. And since the amount of pages was enormous, we're talking millions of pages, it was hard for me as a developer to actually do something about it and find it.

And the tools at that time didn't have a good way to to find those pages that weren't working so that's how i got the idea of site speed io at that time and that was like a simple crawler and then run a couple of performance metrics on each page yeah so give us give us the year context again because and give us some of the tooling that was available because i'm imagining you had firebug and you had why slow but i'm not sure exactly which i'm not sure what year this is yeah so this is uh must have been 2012 i think so we had why slow but why slow wasn't perfect but what's what's cool about why slow was that you can write your own rules because when wisely was first created by yahoo so many so many things has changed you know you know you have the mobile phone and a lot of the rules isn't applicable or wasn't applicable

even 2012. so i used y slow but i wrote my own rules and then use site speed together with y slow so like a site speed version of y slow and crawling aside collecting a lot of URLs and then running y slow on them to get there like a metric and then when I found the page that wasn't so good then we could report it and start fixing it so that's what was the idea but i only started it like uh 2012 yeah but i i like i had the idea of what i wanted to do but i didn't have the time to do it and then i got kids and you know in sweden you have like the fantastic thing that you can be at home for a long time so i got twins so i was at home for almost a year what's that adam twins how long was your paternity leave adam uh well my paternity leave was not given you by the

government it was given by me it was maybe two. I think I even did a little bit of work during that, but I was mostly just email checking. I did not get to fully enmesh myself in the process, which did suck. And then obviously when I got back, there was a pile of stuff to do. So you didn't get a year off to work on open source? No, no year off for me.

No, not at all. So we're a little bit jealous, Peter, but you had twins, which I a, which is, I'm assuming is a huge amount of work. Yes. So it's nice that you had a year to, to, to raise them up and, and you found yourself getting a little bit bored. Is that the case?

Yeah. So, uh, in Sweden, in Sweden, you know, I hope his wife's not listening to this. Uh, so, you know, rephrase that for me. Yeah. So in Sweden, you get a little money to be home with the kids and that's perfect. I mean, it's, it's a wonder.

It's like being home as a dad is it's fantastic. So I was home taking care of the kids, but having twins, it's, it's a lot of work. It's a lot of work it's a lot of work when they are small so and you know you talk with the kids and you never you hardly meet any people and you don't do things with your head so much you only like taking care of the kids so then I I tried to be up at night and started to do side speed because um you need to have something to like stimulate the brain and so i was doing that and then try to and that was cool you know because when you're starting a project you don't have any users you can do whatever you want and

it's quite you can take it in your own pace and you can do stuff so yeah that was really great what's cool about that is i think that's where the best ideas come from is whenever you're just sort of like in your life, right? You're not sitting there at a computer thinking, what problem is best for me to solve today? I mean, sometimes that happens too, but like you just kind of get into life. And before you know it, you start thinking more and more about this problem you're trying to solve and you find new and interesting ways to take it to the next level.

Exactly. So taking care of small kids, I've done it, I've been through it a few times myself. It requires a lot of effort and a lot of patience and a lot of your time. But what it doesn't require is a lot of your mental, you know, exercises. And so you have a lot of free brain time, but not a lot of free time. And so you need an outlet for that. So it sounds like, you know, I said bored earlier, but it sounds like more like just mentally not challenged.

And so that seemed like a good outlet for you, especially after you got the kids down to bed is now you can actually take those thoughts you've been having throughout the day and you can inject them into this project which is probably pretty fulfilling yeah exactly yeah so you said the first version was java but i i read that the first version was just a shell script so maybe there's maybe there was even a pre-version yeah so it was shell script but it's the crawler was built in java because java was the thing i did like the like doing something really fast than i did in java at that time but it was a bash script so it was super simple but it's hard to when it gets bigger and bigger and bigger and bigger it's hard for people

to to help out if it's built in initial script i think and so that was 1.0 and then so i was scrolling a site and you can test a couple of urls and you were testing like the against the web performance best practice rules why slow and like a modified version but then for what's missing then was actually collect the real metrics like how fast is like the first paint time or dump content load time. So I built a super simple version in Java that's driving a browser in Selenium to collect those metrics. So you can use the navigation timing API and user timing API and now resource timing API to get some metrics right from the browser.

So that was the aim for 2.0. And then I got help from my friend Tobias that I worked with at the previous company. So I had an idea of what it would be like and I did a rough version and then he could um make it better like making a good structure and and what's cool about it is

i did a rewrite or we did rewrite the whole code to node.js um and then i also did like the first version and then he did a more structured version so it's good i think we we work good together because uh he he got the structure and i can like have the ideas and like do the first version and then he can help out and doing stuff in a really good way that's interesting it's always nice to have a partner in crime, especially when you're doing open source. And, you know, 2012, we're many years past that. So your paternity leave has been over for a while.

And at a certain point, that time becomes so precious and you need help. And maybe give us the story. Give me his name again. What was his name? Tobias Lietzkog. Tobias. So shout out to him for all the work he's put in over the years as well

maybe give us that story of like how you got him involved into it because what a lot of people with open source projects have is not very much help and sometimes all you need is somebody else not just to report a bug or you know to do a pull request but to actually like come alongside you and be

you know a team do a pull request, but to actually like come alongside you and be, you know, a team on something that especially ambitious projects. So it might be helpful for our listeners and for us as well to hear, how'd you get him, you know, so into it and that story. And then after that, we'll cut out for our first break. Yeah. So first of all, I think like, um, I've been working mostly at nights and that works perfect when you, you don't have, you are not at work. So, but when I, when I was working and I did fixing things and doing stuff at nights, you know, the, the code quality isn't like perfect, at least it isn't so good, but at least I solved the problems. I can do a new release and fix the bugs for users.

So that's good. But the quality was really low at that time. And so that's good, having people that can help you out and we can share things. And Tobias and me, we worked together. So he was tech lead or like something like that for for a customer and then uh he was moving on to other stuff and and i was taking over this customer and yeah and you know you know if you get a friend and you get like the perfect match uh and then when i showed inside speed io and he started to help out with a couple of things and

um he's also really interested in in performance and yeah so it's more like a on a friend's basis i think we we have a good match and then but it's hard he also have two kids so it's it's hard to find the time yeah real quick before the break one last question you also uh just to give a little bit more context around you peter as you work for wikimedia on the performance team you also call yourself a web performance geek um you uh are one of the organizers of the stockholm web meetup group, which has over 600 members. That's pretty cool. Um, why is performance and you're going to be preaching to the crowd a little bit here, but tell us anyways, uh, why is performance so important

and why is it something that you dedicate all this of your free time to helping other people improve their site speed? What, for you personally, why do you think performance is such a big deal? Yeah, for me, it's so I get really annoyed when things are slow so especially on mobile you know and and you want to find the information and you want to do stuff and things aren't happening it makes me really angry so so that annoys me and you know you want to do things fast you maybe want to find something or you need help yeah slow things really annoys me actually so

I don't know if you guys feel the same what kind of car you drive I don't have a I don't drive a car oh boy yeah what kind of bike do you ride uh so I run do you run fast or slow

yeah okay quite fast that's funny I figure we could judge your wrong. I run? Do you run fast or slow? Yeah, okay. Quite fast. That's funny. I figured we could judge your statement there based on your car, but I was way wrong. Yeah.

Backfire. It's Forrest Gump on you, you know. Just running. Yeah, he was running. All right, I think that's a good time to

take our first break. And when we get back, we're going to dive more into site speed. We want to learn not just what it does. We know that it helps you judge the performance of your site, not across just a single page, but crawling an entire website, which was kind of the original reason why Peter wanted to create it.

He could use YSlow on a single page, but when you want to automate that, you want to crawl a whole site. He needs something more. We want to talk about what it measures, how it measures it, and get into some of the nitty gritty details of how Sitespeed.io works. So we'll talk about all that after this break. Production ready, cloud hosted databases.

That's what Compose is all about. Compose.com, check them out. Pick your flavor, MongoDB, Elasticsearch, RethinkDB, Redis, Postgres, SCD, or RabbitMQ. And today we focused on Redis. I talked to Sean Davis deeply about why Compose, but specifically why Redis on Compose. Take a listen.

The core benefit of using Redis on Compose is not necessarily just using Redis on Compose. It's the fact that we handle all the administrative side of things for you. Backups are automatic, you don't need to code them yourselves. We handle auto scaling so you don't have to worry about your instance running out of resources and we properly configure it so you know it stays up and running. On top of that we offer a suite of tools that a lot makes just hosting it that much easier. The fact that you can use Redis in the same environment and using the same

UI as you do any other databases that are hosted by Compose makes it that much easier. If something goes down, we're fixing it, not you. Things happen. Maybe there's a bug in Redis or maybe there's a failover that just didn't happen the way it should have due to a bug in Sentinel. We're there to discover and debug those issues, not you. You focus on your product, not on administering your database. All right, for our listeners out there ready to get started, they got a database out there already and they want to give Redis Uncompose a try. What's the process? We have an import tool that allows users to simply enter in a remote Redis URL. And what we'll do is actually attach

to that remote cluster as a slave, sync everything over and break off the connection and you have your data. So if you're ready to get started, check out compose.com. Our listeners get 60 days free. Learn more at compose.com. And when you're ready to sign up, use our special URL, compose.com slash changelog. That'll get you 60 days free on Compose.

Now we're back with Peter Higginscog and we're talking about performance because who doesn't love performance? But Peter, it come to me that it would make sense to have something like this as a web service versus some sort of NPM

module you can install, which is great. We love that version. And I'm just thinking why not make this a web service? Why not give the people out there, since it's so important to you, the choice to say, okay, well, here's four or five pages that are really important to me. Let's track those pages performance. And if they're not performing well, alert me. Yeah, I guess take us through the idea of this site speed and where it's at and why it's not a service like that. Yeah. And let's start with the first.

Uh, so, uh, I built a version like that, that you could use. Um, so I, I, I got funded by the Swedish internet foundation to, to build that. So I can take three months off from work to build it and I built it and it was working fine and still works fine. But, but having something online, you know, it takes so much time to keep uh from work to build it and i built it and it was working fine and still works fine but but having something online you know it takes so much time to keep it up and running and taking care of of different instances and it was so much work so i i closed it down now to be able to focus on 4.0 to make sure that um, it's going to be released. So, right.

Yeah. Because it is having something online like that. It's yeah. So you think the efforts on the hosted version was premature then? Like it's possible. It's just hard right now. Cause the actual tool itself isn't all well enough. Yeah.

So, I mean, to like, if you're, you're working at a company and you need to you really care about performance you should host your own version because you want to dump the data into something else and you make them you want to make the graphs and you make them make sure that you can get alerts when you want it and so on. So an online version wouldn't help you with that. But an online version is more of making it easy for users that just want to try and try it out. But still, it was too much work for me, so I couldn't keep it up.

So I guess maybe now would be a good time to really break it down. What actually is Sitespeed.io? Is it a tool? Is it a tool? Is it a website? We know it's open source, obviously, but what it is,

what does it break it down for us? Yeah. Can I start with a new version? Because the new version is really cool. Please, please do. Can you release it before this show goes live? Yeah,

probably. So we released, it's fast, you know, we released the alpha version or like early alpha and

the beta is going in a couple of weeks if we are really let's see I don't know it's vacation town now in Sweden

so does that mean you get more work done or less work done on Sightseeing it depends I don't know yeah

version 3 is the current you know quote unquote production version, version 4.0. That's the one that you're referring to, which is currently like a canary bill that you can get. But just so everybody's clear, the features that you're talking about now, we're going to talk all about 4.0, which is the near future, right? Yes, exactly. Because 3.0, it um like a a big blob in 4.0 we want to we it's I'm gonna say we I mean me Tobias and also Jonathan Jonathan Lee also helps out and it's a team member now so we have three team members so that's perfect and we are looking for more so if anyone wants to join you can just hit my twitter nice and

yeah so we had a big blob and we were using y slow y slow as i said before the rules aren't applicable nowadays so we want to change that and we in the old version we were using phantom yes phantom yes is a lovely tool that perfect but it's not a real browser. So we want to make sure that we were using a real browser to collect the metrics because now with HTTP2, you need to have to make sure that your tool can handle it because PhantomJS will not support HTTP2 and so on. So the big thing, the big, the thing we wanted to do is to split it into multiple different tools instead. So people can build their own tools on top of that. And we can build Sitespeed on top of our tools.

So the first tool now is the coach. And the coach helps you and gives you advice on what you can do better performance wise so the coach knows a lot of things and the coach is like the new Weissloh but the coach will never give you a false advice the coach will say oh i see something is fishy here maybe you should look into it so you still is in like in the driving seats to to make sure that that it's okay because like why slow it was rules and and you know rules are often made to be broken right because you cannot find rules that are like perfect because it's you have desktop and you have mobile phones and you have

slow connections and fast connections and so on but the coach knows all about that so the coach is more of it will give you advice so we are removing y slow and using the coach instead so that's kind of cool i think and because how would you go about so the coach is, how would you go about, so the coach is a, is a project that you all started for this version 4.0. But like you said, these are all kind of their own modules. So is this just a separate NPM package or is this a browser plugin? How do you use the coach by itself if you wanted to? Yeah.

So it's a, an NPM package. Uh, and it's also a, a browser plugin in Chrome, in chrome that you can use and what it does it's execute some javascript inside the browser to like check and collect metrics and see how the site or the page is built and then it uses a HAR file, a file that describes how different assets are loaded in the browser

and the different timings, and analyze that and give back some feedback to the user. OK. Very cool. So go on. What other modules or other sections are there for the new version? Yeah, that's the one like the

cool thing because that one you can use a standalone you can build a book booklet and you can build a plugin for firefox and yeah so you can run standalone and get the feedback for a page but um that's one thing another thing is like page x-ray because the hard file format format today the format that describes how different assets are downloaded by the browser is quite hard to work with it's not like a good json format so we try to like convert it to a to format that everyone can understand and more telling you more about what the page is built upon like like how many JavaScripts and how many CSS files and so on. So that's one thing, PageXray. And the third thing that we were actually using in 3.0 also is BrowserTime.

And BrowserTime is the thing that Tobias has been working the most on. And that is it drives a browser so it's used in selenium to start firefox or chrome and execute some javascript to collect some metrics browser time was originally focused on just collecting timing metrics like timings from the navigation timing api but now it's executes JavaScript. So it's a JavaScript runner inside the browser. And then take the metrics back, and you can say, test this page five times,

and give me the median metric of the DOM content loaded time. So it collects a lot of metrics and then on top of that it's site speed inside speeds you have the crawler you can send the data to graphite and soon influx db and you can you run have your own performance budget so you can run it in your build tool so we can check your site on the way out to see okay we can break the build for example if you have um if the site is too slow or you have to like a massive amount of javascript or whatever kind of rules you set up well that's really cool but use it almost as part of like a test suite or like you said like a pre-build it's like after your build but before your deploy you can even integrate it with your ci or something yeah yeah yeah exactly so it's

output stack or j unit xml is this i mean it seems like that should be out there already like performance should be part of testing is this i mean is there anything out there like it at all now yeah so you know about uh there's one super great tool and that's web page test if you tried it maybe web page test web page test web page test.org so web pages.org is built by pat uh like a super great guy uh that now works on google but he started the project on when he was working on aol and that tool is like amazing it's really really good it's open source uh it runs on windows um and uh and that's that's the web process is a service so you use it online right and then there's built tools upon it that you can use, like you can have an NPM module that collects the data.

But Sitespeed actually also uses web page tests. So you can run web page tests with Sitespeed and Sitespeed drives web page tests, collects the metrics for web page tests, and then dumps the data to Graphite or whatever you want. Or run the tests like in your continuous integration so i forgot to mention that website speed also wraps web page test so if you are like having webpages instances you can drive it with size with io and to collect the metrics and because what's cool about webpages is that you can also collect metrics from real mobile phones. You can that in Sitespeed 4.0 also, but only Android phones. So WebPageJest you can drive an iPhone.

So that's really cool to collect metrics from real phones. So that's why we integrated WebPageJest also to be able to use it and collect the metrics. So if you use Sitespeed speed you can run it standalone or you can use it with webpages and have the same flow like break the builds on specific metrics or dump the data where you want it and create the graphs in graphana that's the part i'm talking about if if there's that before like breaking the builds part of the ci process because that's that's the interesting piece there to me i mean's all interesting, of course, but testing

not only just if something renders properly based on database knowledge, but also the fact that the site's speed isn't quite the same way it should be and breaking based on performance, that seems new and interesting.

Yeah, so there's uh there's been a couple of different small projects so you can run standalone with web just and and then side speed and then i think yeah so you actually need to use it with real browsers so you need to have side speed or web pages there's a couple of other tools that use phantom yes and that's cool but you cannot get like the same timing metrics that will be okay if you use that but yeah but i agree so that's really like the the main how you should use side speed or where you should use it either you can use it on testing your code on the way out so you can make sure that you are not introducing regression on your performance and then you can use it to monitoring your your site so you can run it

on production and collect the metrics and freight graphs and and and um alerts if you want to if you see something that happens because i I mean, some sites, you know, you have still, you have a CMS and you have people that can do whatever they want. And it's good to be able to, to spot that, or you have ads and you want to make sure that they run fast and so on. So let's talk about a performance budget. Is this something where everybody gets together and decides 300 milliseconds is good for us in terms of a certain threshold of our page loading?

I know we talk about when a web page loads, you have a lot of different things that that could mean. You have time to first paint. You have DOM ready. You have completely loaded. You have lot of different things that that could mean. You have time to first paint, you have, you know, DOM ready, you have completely loaded, you have all these different things. So maybe tell us how you'd go about setting a performance budget to break a build and then, you know, how granular you can be with those types of rules

that you're giving it. Yeah, so in the old version, and I think most of the tools I've seen has done it like, you can set up a hard budget so you say don't control the need to happen within uh 1000 milliseconds or you will not you can set up uh to break the build if your amount of transfer size of the javascript is like 200 kilobytes or whatever and that's good in a way but what we are aiming for in the new version is that you can catch regression so instead of setting like a hard limit you can see okay we are doing 10 slower than yesterday or 10 than the last build or

we have 10 bigger javascript files so it's better to like compare with the past instead because it's um to have those limits works in some cases but you know to to be able to find stuff it's good to to like have comparing and find regression i think so that will be part of the new version to make it easier for people. Because how can you decide, like, yeah, you set a limit, and it's like, yeah, who knows if it's the right limit or not. It's better to make sure that you don't catch regressions, I think. Or that you can catch regressions, of course. So previously used PhantomJS and uh recent news around chrome dev tools is uh this new

headless uh version of chromium right uh care what it's called just called headless i don't know but it's upcoming and i i assume that that's something that will affect you perhaps in a good way and perhaps in a bad way what's your reaction to that news that the Chrome team is going to have this headless version available upcoming soon? Yeah, I think it's really cool. So I guess it will kill Phantom EOS and other things. But I think it's good because it's been missing, right? So that will be good. For Sitespeed.io, we can use it.

But what's important for me is that we at least support two different browsers. Today we have Chrome and Firefox. We want to be able to use Opera. So we can test on mobile phones and test with Opera because Opera is really big in Africa and we want to be able to test that. And we want to move on when Safari, the rumors that Safari 10 will be able to be driven with the web drivers, so then we can use Selenium.

And then in the future, maybe we can also drive Safari on iOS. So that would be really cool. So we will also try to have a couple of browsers. But I think headless Chromium is good, and it will be exciting to see what people can build up and use it, how they can use it. Let's talk about who's using it, because the features that you're delivering in the open-source world,

I mean, these are things that you probably have killed a few potential startups that would like to offer this as a paid service and so much value provided in the open source that's what we love about it you meant you you mentioned on a recent blog post it's kind of an annual review some of your successes that you've had throughout its three years or this was 2015 review and uh just the the number of downloads that you're getting surprise of that you had set a goal in 2015 for 25 000 downloads and at the end of the year you found it was about 141 000 downloads which is you know almost well it's a it's not quite an order of magnitude it's

definitely the new level of magnitude but anyways uh it's a quite a bit more and who's using it that you know of you know big players or small players or ones that are interesting to you yeah so i i haven't uh I know quite many that uses it, but I haven't... I don't know if I can say the names, actually, because I haven't okayed them. Ah, that's not fun. Yeah, I know.

But there's a lot of people using it. And I mean, what's cool about it is that we have a Docker version. So last year, when we did try to see how many downloads we had we had like almost 40 000 docker downloads and that's cool because the docker downloads then you get firefox and chrome um on the same time so you have like a perfect setup and we also have like a graphite version so you know graphite where you can store your time series data we have like a graphite version. So graphite where you can store your time series data. We have our own version, but you can use whatever version you have.

But we have a Docker container, and that container had 14,000 downloads. And that's cool, because then you only have one version. You have it up and running and you don't need to upgrade it so that's a good amount of people that actually run it and and take care or actually look at the data and and use it as like the the most um getting the most out of the tool i think so that's cool i know in one there there has been a couple of companies that has talked about site speed at least.

So Marks & Spencer in the UK, it's like a shopping site, has been using it because they have talked about it in a conference talk. So I think I can mention them. So for those out there that uh that are slight fans of docker maybe they've dabbled with it here and there but what's the importance of having this as docker images like walk us through how someone would pull these images and and actually make use of it to to get something up and running and you want to monitor the performance of your site, you want to

have site speed. And you run site speed and you run it maybe every five minutes or 10 minutes or once a day or yeah, you can set it up in your Chrome tab or whatever tool you have. And to run site speed, you need to have site speed and you need to have a browser. And if you download the Docker container, you get an exact version on the browser because that's good because browsers are updated updating themselves all the time and and to make sure that site speed is is working correctly we release it with specific browser versions so for example it has happened in the path and past that chrome and firefox has has done a new release and it's broken with selenium and everything's broken but if you

use the docker container containers you have a specific version and it will work fine uh so you have a docker container for site speed and then you can have a container for graphite where you store the data and a docker container for a graphana where you can actually where you make the graphs and so you're maintaining all these different content these all these containers for docker to make sure they work with the current version of site speed or the conversion of of the browsers that work yeah so actually yeah we have only a site speed in the new version we'll have a Sidespeed container with specific browser versions. So the other ones is the ones that you download,

the official ones. So you just do docker pull graphite, docker pull grafana, and you get that one, and you set it up. So right now in the 3.0, 3.x version, it's, it is some hacking, you know, you need to configure things, you need to set up Graphite with Grafana and you're aiming for making sure that you can like run one command and everything is up and running. So it's more easier to get things up and running. And so version four is making that easier.

Yes. So it's the one thing yeah so now you know it's um it's um i don't know you need to follow a couple of or you need to do a couple of things and and you know if you do things manually things will things will stop to work so it's good to try to automate everything so So, yeah. We're hitting our next break, but one thing we wanted to kind of follow up on, which Jared, this is just a, you know, an eyeball for us. We're not really sure if, if, if your work on site speed got you your position at Wikimedia, but we'd love to learn more about that process for you.

And also the background of what's going on at wikimedia foundation and all that stuff so let's uh let's talk about that and decide this break for those of you out there who are super fans and i mean people who care about this show listen every single week care that we stay on the air we want to invite you to join the membership community for just 20 bucks a year and we'll give you an all-access pass everything we do, access to our members only Slack room, exclusive discounts from our partners, 50% off in the ChangeLog store. And of course you support us so we can support open source. Hit the changelog.com slash membership to learn more, and we appreciate your support. All right, we are back with Peter Hedenskog talking about all things SightSpeed.io.

And next up, we're going to talk about his role on the performance team at Wikimedia slash Wikipedia. But first, Peter, you wanted to give a shout out to somebody who's been working on a special integration with your new coach tool. Yeah, so I want to thank Matthew Harrison-J Jones that built the Chrome extension for the coach that's really cool and he has also author that he has starting doing things for size to be I oh so that's really cool people that start doing one thing and then do more things to the project so I really like that so thanks we'll link up that Chrome extension and the show notes. So you've had this reputation since 2012. You've been building Sitespeed, and you've been meeting people who are also performance geeks,

as you call yourself. Ten months ago, you started at Wicked Media on the performance team. So first, we're interested if your work with Sitespeed perhaps gave you a shoe-in with Wicked Media. And then secondly, we want to hear about what it is that you do there, if Sitespeed's being used by the company, and just any sort of behind-the-scenes at Wikimedia that you can give us. You know, I've been working with Sitespeed.io for quite a while,

or at least it seems so. And one thing when I... So I applied for a position at the Wikimedia Foundation and they were looking to add more people to the performance team. And at Wikimedia Foundation, the most important thing, or one of the most important thing as a developer is that everything you, every line of code you write is open source. source so they are really looking to other yeah when when you start at the foundation they it's it's a good thing that you have been working on open source before and since I've been working on sitespeed.io that was a really cool thing I think but you need to ask ask the people that hired me but I I think it was a good way in because you have something to show and when we can we discussed this and you know you have you can show what you have done so I think it was a good way in because you have something to show and we can, we discussed this and you know, you have, you can show what you have done.

So I think that's really good. So give us a little bit of the insight your day to day. What do you do as a member of the performance team? This is one of the, I mean, Wikipedia is at number seven. I don't know. It's in the top 10 of websites on the entire internet. So would love to hear what your day-to-day is like working there yeah so we are um five members of the of the team it's ori timo gill's aaron emmy and we do different you know it's it's a big site and we have different uh specialties so

uh a day for me i work on web page test Sitespeed.io, that we use to measure performance. So we have been working on trying to do synthetic testing where we test parts of the site or a couple of pages to make sure to see if we can find regressions or performance regressions. So I built some open source tool around that to measure the sites. And then now I'm focusing on an extension to the media wiki, helping users to know if an article page on Wikipedia can be better for performance, to give a hint on what you can do and change things to make it faster. Because what's really cool about Wikimedia and Wikipedia is that we have a lot of users that really cares and they create the content and they do fantastic things. And if we as performance engineers can help them to make the site faster, that's the best thing.

Because, okay, we have a couple of engineers, but there's a really, really big site and we have a really big amount of users. And if we can give them the tools to make the site faster that's like the best things because then we empowering them to make make it better that's what I've been working on yeah the last month one of the major ways to increase performance nowadays it's still i mean it's out there in production but it's still kind of on the edge is implementing http2 is that something that

wikimedia foundation that you guys have done or interested in yeah we have switched http2 the thing was we uh we did this which i don't remember now could it be a mom so you know that chrome stopped supporting speedy right we were using yeah we we um we moved to hdps uh i don't remember now a while ago quite long ago and then we're using speedy because we needed to have speedy to make it fast or quite fast. And then when Chrome was shutting down speedy, I mean, we need to move on. So then we switched to HTTP2. Any stories from that? Was it easy?

Did it take a long time? Were there bumps in the road? Yeah, so I haven't been working on that what was important for us was to make sure that we did the switch when when like um we had the same amount of users that was using http2 as was using speedy so we didn't do the switch too early so we are people are losing on performance. But I haven't been working on that. So I have a new store on that.

But it's cool because it's, I mean, HTTP is the future, but still it will not solve everything because it's still problematic. So you need to know what you're doing and you need to make sure because yeah. And still, I mean, also the service that supports HTTP, HTTP to have a lot of things to do to make sure that you can prioritize content and make sure that the prioritizing is right. So the browser can start to, uh, to render the content as out as possible. Yeah. So, I mean, it's, it's really early in http 2 life so and

there's a lot of things that can be done i think so one last question and then we're going to talk about how people can get involved and help out with sitespeed.io but as a performance geek give us this if you had to talk to a total beginner or an outsider with regards to website performance and you had to give three tips but you can only give three you can't get four three tips low-hanging fruit what should i be doing to make sure that my website is fast what were the three things that you'd tell that person that would be first i would make sure that the cache headers are set so that assets are cached so the browser don't ask for the same asset over and over again. So for example, if you hit one page and then go to the next page and use the

same JavaScript and the same CSS, the browser doesn't need to download it. That's, that's really important because if you don't do the request, uh, then it will be much faster. So that's really good uh the other one thing that that are still even with http2 it probably like really important is that inlining css and when i started you know a long time ago inlining css in inside the html was like the most ugliest thing you can do, right? Because you need to have some structure and you need to have the files. But on mobile, on a really slow connection, you want to make sure that the browser can start to render things really early.

So you want to inline the critical CSS that can make sure that you can start rendering the page. So that's really cool. But still, that one is maybe not for a beginner because it's a little bit hard to make, but it's really cool because it's important. I was going to say, with that one, you have to decide what's critical and what's not. Because you're not saying, you don't inline all your CSS.

It's just the critical stuff, right? Yes. Above the fold, so to speak. There's also a reason about that, but when you say inline, do you mean in the head of the document or do you mean actually in line in the elements as a style attribute? That's the style. Yeah.

So, uh, yeah. So you do it in the, in the head, right? So you, you can, uh, you add the style instead of like doing the request, you just inline it in inside of head so the browser when it's finished with the head can start rounding the page because it's been setting up the css obvious structure that's it or you could or you could be old school and just code it that way from the start yes of course love that all, what's your number three tip here? Yeah, number three.

Let me think about that. Yeah, so number three would be for me to make sure that you only deliver things that you are using. Because a lot of sites deliver everything. You have 10, 20, 30 different JavaScript libraries in the delivery to your browser and maybe use like 1% of it. And that's, I mean, on a desktop computer, like a fast computer, that doesn't matter. But when you are on a mobile phone and you're on a slow connection and you have a limited CPU,

a lot of JavaScript will make your phone slower. So trying to minimize or at least make sure that you're using the things that you send to the browser. I think that's important. Yeah, a follow-up to Jared's question on those last two, since the first one was definitely closer to beginner. The second two seem a bit more... The second two are giving me imposter syndrome over here.

Yeah, definitely. Because I'm thinking, like, okay, what's the fastest, if those are focused on beginners, or just in general three core things you can do, what are ways to identify what... It seems like you say to send a minimal amount of HTML, CSS, JavaScript on the pipe to the browser, regardless if it's mobile or desktop. But how do you define that for one? And then to the inlining the CSS, like you said, to focus on what's what they what the browser needs to render first.

How do you how does one go about doing that? What do you recommend for that? Yeah, so you can use tools. So there's tools where you actually can get the CSS that are rendered. I don't have it in my head. But you're right. So maybe this recommendations

is more for experienced users. I would say the first one, try to minimize the number of requests. I think the cache address is perfect because that's quite easy. And then it would be to make sure that you are compressing all the texts that you send. So the HTML, the CSS and JavaScript is compressed

because if you're compressing it and you're sending over a line, it will be much faster. So that would be number two and then i would also try to focus on a simpler number three and that would be but i mean still if you're a developer you need to make sure that what you are you are only using the things that that that matter your download yeah exactly because i mean that that's in your like uh it should be in your blog to make sure that i mean i don't think when we say beginner we mean somebody who's never built the web before i think when we say beginner maybe it's beginner for web performance you know someone who's just you know throwing slinging css javascript

everywhere and they're like uh there's such thing as performance. And then maybe you're like, well, hey, you should do caching. You should be concerned about inlining CSS, for example, or only sending down to the browser what you need for that particular page, not the JavaScript and CSS for 10 other pages. Just the thing you're actually trying to render. Yeah, so then I would say to start measuring. That would be actually not a good one

because, I mean, if you don't measure, you don't know. So it could be that you are super fast, and why should you spend time on trying to do things better if you are fast already, right? So start measuring would be the first step. I love that. For beginners and for experienced, start measuring. That's the best thing. Start measuring. I love that. For beginners and for like experienced. Start measuring. That's the best thing.

Start measuring. I love that. We worked our way around to you promoting your tool. You're not, you wouldn't be very good in Silicon Valley. You know, you got to start with the promotion of the tool and then go from there. That's right. That's absolutely true. Got to measure before you can make wise decisions.

Well, on the note of promotion, let's promote something that's pretty important, which is help. You have a doc on the repo that I actually sent a pull request to while we were here on the show, which is the best ways to help. And money was at the very bottom, which, you know, it's not always all about money. But obviously, as you said before, you've got a wife, you've got twins, you've got a family, you've got things going on, you've got two team members that are helping you out. So obviously, this is an important mission and a mission that has more and more people jumping on board. So what's the best way for the listening audience to focus on helping, whether it's joining the team, whether it's contributing knowledge,

whether it's advocating for support. How can people listening to this show take action today and step in and help out in whatever way? Yeah, perfect. So actually money is not important to me, but I will start with other things first. If you are a developer and doing stuff and you like Sitespeed, I think doing a pull request, that's perfect. And we have, we've been working now to make it easier to, to, to tag issues. So, you know, what, where you can start and what you can take on and so on, but it's always

best to like create an issue and talk to us first. So we can, we can guide you through and, and discuss what you can do. Um, but then making the documentation better, because right now we are lacking a lot of things and helping us writing tests because part of the tools have really good tests today, but part we don't have so good tests. So writing tests and writing documentation that's like perfect or helping us where it's done something wrong, like like in the docs that's perfect but if you're so there's a lot of companies working or using sitespeed.io and and i mean you know i i'm so blessed because i live in sweden i have kids i have a partner i work i mean i don't need money

but what's if you if you're if you're usingpeed.io, I would love you to instead like trying to help people that are really suffering, like people in Syria and trying to support the Red Cross and doing stuff like that instead, because there's a lot of me or the people that work on Sitespeed.io because we are really blessed because we have money that we can take care of our families. It's better to help people that really need it. On the note of, I guess, not so much exactly money, but maybe partnerships, have you pursued or are you open to partnerships with CI services out there? Earlier in the show, we talked about automation. There's obviously different ways you can integrate this into various either open source things like Travis, for example, or even paid services like sponsors of this show, CodeShip, for example.

What's your position there in terms of partnerships? And it might not be money, but it might be you know indirect support so to speak yeah so we use i mean we use tools today we use travis for example so that in a way travis is supporting us because we use travis to to check our bills we are looking for i mean it's important for us uh that uh getting support from i mean i would love to to get some support but it would not be for i mean it's important that they don't try to influence the product so making sure i don't know if i had a good answer we have been looking but we are most looking into maybe a foundation to help us to make sure that um we don't have we don't want to have a like company supporting us

that makes sense yeah so to speak yeah exactly because you want to be agnostic in terms of how you conduct your business and maybe it's kind of politics you know could sway the vote so to speak yeah you know yeah exactly you don't want to be lobbying you no that's good that's good it's it's good to know that about a person's character for one and also a project's character to kind of remain flat in that regard, so to speak. Let's ask a favorite around here, because we always love to hear about somebody's hero. We talked about where you came from.

We talked about your Commodore 64. We even see a picture of you pushing your twins with a computer on it. So we know that you love what you do, and somebody must have gotten you to love what you do. Who's your influencer? Who's your hero that got you where you're at? That's something that you look up to. I've been thinking a lot about that.

And I think, so it seems like almost everyone have a hero, right? But I think my hero is like the everyday programmer you know you go to work you do your time you build your stuff and maybe it's it's not a cool product but you do you do your time you you try to solve your problems and and like i i really like uh i i really like the everyday programmer yeah was there an open source side of that question the open you like the everyday programmer. Yeah. Was there an open source side of that question? The, you know,

the everyday programmer who also loves open source or just in general? I mean, cause on your about page, you say you're such a huge fan of open source. Like that is the way forward. That's why I asked that. No, I think,

no, I think like, like being a developer or programmer at work and like focusing on your problems. I think, no, I think like, like being a developer or programmer at work and like focusing on your problems. I think that's, it's so cool that, that that's how the world looked like today. You don't have to care about, I care a lot about open source, but I mean, do your stuff at work. I think that's so, yeah, it's, it's cool. Cool.

In Washington DC, we have a, we have a monument to the, what is it, the unknown soldier. That's right. You know that one, Adam? Yeah. I always liked that sentiment. I thought it was very poignant. You know, it's basically, isn't it a tomb, I think, or a grave site of some unknown soldier who died at war? And we don't know who it is, but we honor that person.

Yeah, exactly. It's an unidentified soldier. I believe it might have even been a Marine, and it's guarded 24-7, seven days a week by diehard Marines. I think it's only Marines who guard it. I could be wrong, but it's a very prestigious kind of thing that they guard that tomb, and they're very diligent about how they march

around it very specific and it's a it's a big deal wow just reminding me of that the everyday programmer you know as a hero that's true yeah i think that's um that's probably the best one of the best answers to that question because it's not somebody in particular. It could be you, the listener, right now. It could be the person listening to this thinking, I'm Peter's hero. And that's awesome. So, congrats. It could be even me, Jared. Who knows, right?

We'll never know. It could be you, Jared. Now we're going to give on. Is it Serpico? I'm Serpico. What's that movie? I'm Serpico. What's that movie? I'm Serpico. That's right. Well, we need to close the show before I dive us into movie quotes.

Yes, yes, yes. That's a bad land. We've been there before. But Peter, one last thing for you. Anything, any closing thoughts for you? Any advice you want to share with the open source world? This is a chance for you to kind of put one last thing out there before we close out uh i think making making something really easy to use like so if i want to help out in an open

source project and it doesn't work or like it's it's like the readme is quite complicated it scares me off and i mean and that's why i think like for example i've seen the firefox developer tools they have made a new version that's that's where you can actually just clone the repository and then you can hook it up with firefox nightly and in this up and running and you can hack on it and i think building tools that are easy to get up running i really like that and i think that's that's a good thing that you should focus on keep things simple there's a an acronym k-i-s-s keep it simple silly i don't like the other version of that people say that they say i was actually i was actually just thinking that exact same word i was like silly

yeah silly i mean who wants to say the other one? I mean, no one's stupid out there. There's no stupid questions. There's no stupid answers. It's the curiosity that moves things forward. There are silly questions. There are silly questions. And sometimes those are fun questions. Who knows, right?

Sometimes we ask those questions. Yes. Again, we were on a tangent. Peter, it was awesome having you, man. It was great to hear about your history, where you came from. It's certainly interesting to hear how important this mission is. And obviously, the things you do at Wikimedia Foundation and, you know, kind of closing that loop for you with Justin. And Justin, thank you for obviously being a fan of the show and teaming up this question on Ping.

Jared, you know, on that note, we had a tweet. It was actually a response to somebody else but mentioned us and they said that we seem to only do shows that are recommendations on ping is that true do we only do shows that are recommendations no no we don't right we we every once in a while we'll line a show up ourselves we're somewhat smart we can we can well the point is though is that we do really appreciate and really love an interactive audience. And so that's just a way to open up and say, we have our ideas for fun shows, too. But we always are open to hear you, the listeners' thoughts.

And that's where we have github.com slash thechangelog slash ping. There's issues there. Put one down. If you've got somebody that's an influencer to use, a show you want us to do, or pitch us an idea or a new project. We have change law weekly that goes out every single week. Those are ways you can interact with us. That's our open inbox, so to speak. We're an open organization by and large. So that's just a way to say we have fun shows. We line up ourselves, but we love it whenever you tell us about things that are interesting to you.

So Peter, that's it for this show, man. It's been a blast ourselves, but we love it whenever you tell us about things that are interesting to you. So Peter, that's it for this show, man. It's been a blast having you, where can people find you at? Where are you at on Twitter? We hadn't get up, but we'll link these up in the show notes,

of course. But, uh, what's up with your handles there? Yeah. On GitHub, it's so cool. And on Twitter,

it's so this love. Okay. So it's different. Yeah. Being sneaky. I see. Yeah. Listeners will leave that up in a show notes.

So find the show notes for this show. And fellas, with that, let's call the show done and say goodbye. Goodbye. Thanks, Peter. Appreciate it. Thank you. Bye-bye. We'll see you next time.