Posts with tag performance

How to Estimate Web Performance Impact Before Making Fixes

Web Performance is important for user experience and business metrics. Estimating its impact is key to be able to prioritize it, yet it’s difficult to quantify its benefits until the work has been done.

We need to break this chicken-and-egg loop. This post explains several ways of assessing the potential performance gains with little effort and, more importantly, without actually implementing fixes.

Continue reading about How to Estimate Web Performance Impact Before Making Fixes...

Developing modern sites with good performance

Poor performance leads to exclusion. When we create heavy sites we limit what users can access our content. Those with more powerful devices and better network will get sites loaded faster. Those with older devices and slower network will need to wait more.

A user with a mobile phone on their hand
Continue reading about Developing modern sites with good performance...

Fostering a Web Performance Culture

Web Performance is not only about understanding what makes a site fast. It’s about creating awareness amongst both developers and non-developers. Performance is a feature and needs to be prioritized as such.

Forstering Web Performance Culture

Continue reading about Fostering a Web Performance Culture...

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...

PerformanceObserver and Paint Timing API

In a recent post about Chrome 60 Beta, Google announced the support of the Paint Timing API to get metrics on when your page starts rendering and when the user gets content that can be consumed (more info on the definition of the events below). Here I’m going to describe this new API a bit and show you how to use it.

Continue reading about PerformanceObserver and Paint Timing API...

Revisitando la nueva web del Senado

Hace unos días hacía un análisis del rediseño de la web del Senado, justo tras su lanzamiento, desde el punto de vista de rendimiento web y mejores prácticas a la hora de desarrollar sitios web. La nueva web del Senado sufría múltiples problemas poco más que inaceptables para un proyecto tan reciente y con tal presupuesto.

Continue reading about Revisitando la nueva web del Senado...

The not so good web performance tips

Yesterday I was reading Zakas’ Performance on the Yahoo! Homepage slideshare presentation, and I got very surprised when I saw that Yahoo had realised that two of the wide accepted tips for improving website performance had not work so well for them. Yahoo's Home page

Continue reading about The not so good web performance tips...