José M. Pérez

José M. Pérez

Engineer at Facebook and GDE in Web Technologies. Ex Spotify.

Increase the Performance of your Site with Lazy-Loading and Code-Splitting

Componentization has marked a before and after in web development. The main advantages that are usually mentioned is reusability and modularization. Well defined pieces that we can use to build our sites, like bricks of Legos. It turns out this component structure provides a great foundation to improve the performance of our sites.

We are explicit about our dependencies, so we know what code we need to run to run a specific component. Lazy-loading and bundle splitting can have a huge impact on page performance: less code requested, parsed, and executed. And this not only applies to JavaScript, but every type of asset.

I see many sites that could take advantage of this, and I wanted to show how some basic techniques to load content as needed.

Continue reading about Increase the Performance of your Site with Lazy-Loading and Code-Splitting...

Displaying Page Load Metrics on Your Site

I was browsing Tim Kadlec’s website and I noticed he had added page load time metrics in the footer.

Tim Kadlec's site shows how long the page took to load in the footer Tim Kadlec’s site shows how long the page took to load in the footer.

Stoyan Stefanov also realized and wrote “This page loaded in X seconds”, a blog post describing the code used for this. Stoyan also created a bookmark that shows an alert with the load time of the current page. The data is obtained from window.performance.

I liked the idea and added a similar snippet that shows the page load time in the footer (you should see it if you scroll to the bottom). If your browser supports the Paint Timing API you will see a couple of extra metrics: First Paint and First Contentful Paint.

Continue reading about Displaying Page Load Metrics on Your Site...

Sketchy SVGs with RoughJS

I love hand-drawn graphs and I have always fantasized about applying it to vector images. That’s why I was very happy to find out about RoughJS, a library that draws SVG primitives like lines, curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn style.

Continue reading about Sketchy SVGs with RoughJS...

Choosing a Platform for Blogging

Or why no single platform is the best one.

As a web developer I consider my personal website part of my portfolio. It’s the canonical site where I write about the topics I care about. It helps me remembering ideas and resources. It also gives me a public presence on Internet beyond LinkedIn and Twitter.

But It’s not only about the contents. It’s also about how they are delivered. My blog is my playground, a space where I can play with browser APIs and put in practice ideas about accessibility and performance.

Continue reading about Choosing a Platform for Blogging...

My 2017

This year has been a ride. More blogging and speaking at events than ever, and the feeling that it was well worth it.

Continue reading about My 2017...

Speaking at FrontFest 2017 in Moscow, Russia

A couple of weeks ago I attended FrontFest 2017 in Moscow. There were around 200 attendees at Digital October, an impressive venue. I had a lot of fun and met many local developers.

Jose M. Perez speaking at Frontfest Moscow 2017

Continue reading about Speaking at FrontFest 2017 in Moscow, Russia...

How to use SVG as a Placeholder, and Other Image Loading Techniques

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

Example of a SVG generated using 10 and 100 triangles based on a bitmap image

Generating SVGs from images can be used for placeholders. Keep reading!

Continue reading about How to use SVG as a Placeholder, and Other Image Loading Techniques...

Duotone using CSS blend modes

In a past post I explained how to use SVG and a feColorMatrix filter to apply a duotone effect to an image. This time I’m going to show how to achieve a similar effect with only CSS.

Duotone effect on image using CSS blend modes
Continue reading about Duotone using CSS blend modes...