is the creator of Performance Tooling Today, a website including a collection of powerful resources to help you improve your workflow and to deliver better and faster websites. Stefan is also the occasional teacher, organizer of CSS classes Berlin, and former at Contentful.

Hi Stefan, to start with, tell us a bit about your life journey.

Yeah, sure. I started with development in my early twenties. Before that, I used to mix the sound for German TV shows. After countless events and concerts I felt stuck and had to find something new, and it had to be something challenging where I could learn new things. I looked around and thought “well… you were always good with computers,” and this thought lead me to study “Media and Computer Science” here in Berlin.

I started working on the side of my studies and did my first internships to finance these. A group of very talented and smart people got me up to grow quickly at my first company. I was doing PHP and Magento at the time. Frontend became a thing, and I got responsibilities for more significant JavaScript-driven projects and was part of the development team as a part-time working student.

Going forward, I finished my Bachelor’s degree and was ready to enter the Berlin startup scene specializing in Frontend technologies. At the time Node.js just became a thing, Grunt entered the stage, and Backbone.js was the go-to frontend framework. Good old days.

I switched companies roughly every two years and kept specializing in frontend technologies because I discovered that I enjoy building beautiful, accessible and UIs. Additionally, I started blogging and also engaged with the Berlin dev community.

These community activities helped me land a job at Contentful as Developer Evangelist. In case you don’t know the role of a Developer Evangelist — it is to educate people, build relationships and help them succeed (with or without your company’s product). I love helping and teaching — so that was a perfect fit.

How’s the Berlin web developer scene nowadays?
I love the web developer scene in Berlin. There are very talented people in this city, and there is always a meetup for anything. People share knowledge and are very friendly with each other. My go-to meetups are Berlin.js and Upfront which are more focused on Frontend side of things. If you’re around, definitely stop by to say “Hi.”

We also have initiatives like Open Tech School and CSS classes. If you ever want to learn something, I highly recommend starting teaching the subject to beginners. Priceless! For example, once at CSS classes, four experienced developers tried to answer a tricky question, and well… it took us quite some time, and we all learned quite a bit.

What are you currently working on?
Currently, I’m writing an Electron app to control and monitor the build status of my sites running on Netlify (a fairly new static sites hoster) because very often I trigger a build from Contentful and go to Netlify to watch the deploy waiting for it to be ready and deployed. I prefer an automatic notification “just popping up” so I decided to write this app. I’m developing it in TypeScript to learn something new. It’s been a challenging journey so far. I hope to release it soon.

What is the idea behind Perf-Tooling Today?
Perf Tooling Today is a project that I created to scratch my itch. I’m continually struggling with the amount of information out there. It’s just too much! Moreover, now and then I think “hmm… you read something about that, but where was it?”. This problem is why I started building Perf Tooling, to have a place to find good related content. If it’s useful for someone else — even better.

I started it several years ago, but the site needs some love these days. Currently, it’s running on a Node.js server on Heroku. It should go static and only be served from a CDN (so that I don’t have to pay the monthly Heroku bill anymore). If anyone wants to help to triage content or help me rebuild the site, I’m happy about anyone helping! You can always ping me via email or Twitter.

Is it possible to tell how fast a website should load? Why?
You can approach the decision if “a website loads fast” from several angles. One could talk about page load time, the first paint, the first interactive state, etc. A fast loading experience very often is a mixture of different metrics. Browser developer tools provide you with many metrics which you should have an eye on. It’s an excellent habit to continually monitor the metrics that are most important for you and your project.

The tricky thing is that web performance regressions make it very quickly into your project without you noticing them. I recommend using monitoring services like Speedcurve or Calibre or even something self-made to see how you’re doing over time. Set yourself a threshold (a so-called performance budget), stick with it and become faster and not slower over time!

What are some of the most pressing performance issues young developers should look out for?
I think the two most pressing issues are a) too long time to give the users something they can interact with and b) how much data you ship.

You may have render-blocking JavaScript in the head of your document or decided to show a spinner instead of content first. There are so many ways to slow users down. Nobody likes to wait. It is like it is — if people can’t quickly access the sites we build while they’re on a slow connection they’re gone. And who knows if they’ll come back. Get something meaningful on the screen as quickly as possible!

The other issue is the amount of data we ship. Data correlates directly with the money people spend on the access to it. The heavier the site is, the more people pay for it. I see that all the time when I’m in the States. My German provider only offers options to buy data packages. Guess how far I come with 20MB of mobile traffic?

Need ? Minify/uglify source code, compress images, only load what is needed… there many ways to slim down the weight of your pages in an automated fashion.

If you’re interested in learning more about the pricing angle, I highly recommend you to check out whatdoesmysitecost.com. You’ll be surprised — I promise.

Why do you think web performance is so important?
Web performance is one of the crucial pillars of excellent products. Nobody wants to look at a blank page for ages, and nobody wants to load a few MegaBytes of data for 1000 words of an article. Thinking about me, I am privileged and lucky because I usually am on a relatively fast mobile connection with more or less current hardware. This setup is not the case for the majority of people using the internet. Use a 100€ phone on a slow connection, and you’ll be surprised “how the internet feels.”

“Use a 100€ phone on a slow connection, and you’ll be surprised how the internet feels.”

Fast and light websites keep the internet accessible for everybody. That’s what the internet is about, isn’t it — information for everybody?

What’s more important performance or UX?
Neither. I consider things like performance or accessibility as crucial parts of UX. When your site needs ten seconds to show something on a cheap phone or people can’t use your site with the keyboard I’d consider it to have a pretty bad user experience. 😉

Do you have any spare time for some fun side projects/activities?
Similar to Perf Tooling I made it a habit of documenting everything that could have value for other people. I record my web development learnings continually for quite some time, and I only can recommend it. Sometimes the posts are concise, but sometimes I also do some reading and researching. In either case, I know where to find this piece of information when I need it.

Additionally, I document accessibility resources, talk quotes, resources about diversity and inclusion… mainly I do this to scratch my itch, but maybe someone else benefits from it, too.

I also spend much time on Twitter (probably too much…) and a year ago something significant happened. I asked a question about HTTPArchive, and someone replied with the correct answer. It turned out it was one of the maintainers. He agreed to jump on a call with me to explain to me how things work and also agreed to record the whole session. I call this now “developer smalltalk.”

The idea is simple: I see an exciting technology that I don’t know yet and jump on a call with an expert to explain it to me in a pair-programming session. I made it to five videos so far and well… I’m enjoying these videos so much!

In real life, if there’s the time I attend CSS classes as a teacher and 2018 for the first time my friend Joschi and I ran a conference completely about accessibility — the Accessibility Club. We’re currently evaluating if we will do it again next year, I’ll keep you posted. It was a great experience!

What’s the next chapter for you?
Serving and helping developers for another company. 😄

What are your favorite tools to use when you working on improving a website’s speed?
Lighthouse shipping with the Google Chrome developer tools is the tool I use the most. It’s an excellent addition to developers toolchain to check how I’m doing quickly.

For performance monitoring, I rely a lot on WebpageTest because it gathers performance metrics on real devices in different locations with different connection speed. And if you want to convince someone that web performance is important, you can record videos of your and your competitor’s site loading next to each other. Especially these direct comparisons are always a strong argument for web performance. Nobody wants to be significantly slower than their competitor!

Also, one tool that deserves some more traction is webhint from Microsoft. It’s the pickiest tool I ever used. Love it!

All these tools help us to ship good products!

What tools do you use to cooperate with designers and why?
Living style guides — a few years back they opened the conversation between developers and designers. Recently there are a lot of cool things happening to glue code and design together. Unfortunately, I haven’t had the time to try these, e.g., Sketch ↔ React flows yet though. In general what is happening in the design system space is very exciting!

No matter what tools we come up with though, I have to say that an open conversation between developers and designer is indispensable. The two fields can be very different and getting into a room and talking things through stays a necessity!

“Open conversation between developers and designer is indispensable.”

What’s your dream project to work on?
My dream project includes passionate people that want to build an excellent product which works for everybody — user-first so to say. I don’t mind what the product is about in detail as long as I can be proud of the work we do together and build something great!

Humble, I like it! Okay Stefan, thank you a lot for your time! Before we wrap this up, let’s do a set of quick questions.
Sure, let’s do it. And thanks for having me.

Humble, I like it! Okay Stefan, thank you a lot for your time! Before we wrap this up, let’s do a set of quick questions.
Sure, let’s do it. And thanks for having me.

React or Angular?
React… I guess. I did Angular.js development (before the “big break”) for one year and lost track of everything that came after that. Overall I don’t think that framework matters that much, however. Choose your tools wisely and role with it.

Windows, Mac or Linux?
Mac. A UNIX environment is essential for me because this is what runs on most servers in my surroundings. I’m not that happy with the latest Touchbar and keyboard movements though. Let’s see what comes next…

Why Electron?
I love the fact that I can quickly build things that integrate well with the operating system and found that the entry barrier of Electron is relatively low. Developing with Electron also teaches you how browsers work which is a lovely side effect.

At some point, I will go all in progressive web apps, but for now, I feel like we’re not entirely there yet concerning native capabilities. For example, integrating a PWA into the menu bar of an operating system is currently not possible.

I’m sure that web technology will win the race at the end though!

Your open-source project you are most proud of?
That’s Perf Tooling I guess because it’s still alive and I always keep adding content to it. Maintaining a project over several years is very hard!

From a product point of view — a few years back I wrote an Electron app to run npm scripts without opening the terminal called Forrest. I’m pretty proud of it — because it feels good and I’m enjoying using it myself.

Great stuff! Any last words or fun facts about yourself?
Fun fact, hmm… I think I unveiled that I’m an educated sound engineer already.

Additionally, last year I bought a 360° camera and I’m very much enjoying to post “planet pictures”!

Want to stay in touch with Stefan? Find him on his website, Github, Twitter, Instagram or Youtube.

Have a suggestion for an exciting designer or front-end developer we should interview? Hit me up at [email protected].





Source link https://blog.avocode.com/tips-on-fast-web-performance-with-ex-contentful-developer-evangelist-stefan-judis-5946715d09ca?source=rss—-3d381deaf83—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here