We’re probably familiar with preconnect, but are we getting it right?

I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve been thinking about how MPAs have improved over the years, and where SPAs still have an …

Crazed developer attempts real ecommerce without front-end JavaScript to prove that y’all playin’

Let’s look at some more technical and non-obvious aspects of optimising Largest Contentful Paint

I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance testing on CSS-Tricks. Essentially use the tool, poke

Last week I gave a talk at AlpineDay entitled "From Vue to Alpine: How & Why". I put up my slides from my AlpineDay talk, "From Vue to Alpine: How & Why":https://t.co/xTzIl0FGunAnd also the files I used to test performance:https://t.co/tB5EThfEEJ pic.twitter.com/Jv8P7iDBcv— Matt Stauffer (@stauffermatt) June 10, 2021 In the talk I shared a few situations in which I've moved applications that were previously using Vue to use Alpine instead, for the sake of Google's Core Web Vitals. These sites were using Vue for light enhancements on top of a server-rendered app, and I found that Alpine is lighter to load and parse in these cases. I still stand by everything I said in the talk. However, a large swath of the Internet discovered my slides, hadn't heard the talk, and assumed I was badmouthing Vue. So, I wanted to write a post about how we can optimize our usage of Vue for this same scenario! How do we minimize Vue's impact on the Core Web Vitals? When Vue is too heavy In my talk, I described working on the Tighten website to improve its Core Web Vitals scores. For that particular site, we were using Vue for some very small components, and the combination of Vue's loading time and the components' initial processing time in the browser led to a significant delay for loading the page. I discovered I could solve our problem by replacing those components with Alpine components, and realized — and then gave a talk about this idea — that Alpine is an ideal fit, even for a Vue-loving agency like ours, for enhancements above vanilla JavaScript and below heavy dashboards and SPAs. Gimme my Vue! However, many of our sites — and likely yours, if you're reading this — are ideal for Vue, so we're not just going to drop it. Instead, let's look: can we optimize our page load speeds? There's a whole group of answers that have to do with code splitting and async loading, which you can find a link to down at the bottom of this post. But there are two strategies that are very similar to what I talked about in my talk, so they're the ones I'm going to cover in this talk. Making Vue load faster If you define your Vue components inline in your HTML (rather than in single-file components), it turns out this requires a heavier (larger file download) and slower (more processing power spent) version of Vue. This version has an in-browser compiler, which causes the impact to load size and processing time. I talked briefly with Evan You, the creator of Vue, who taught me that the "runtime-only" version (meaning, with no compiler) of Vue is 2/3rd the download size of the full Vue. He also gave me two ideas for how we can shrink Vue's load size and processing time. 1. Pre-compile your templates and use the "runtime" Vue build As I mentioned above, if Vue is going to have to compile Vue component definitions from your HTML, it has to include an in-browser compiler, which makes the script file larger and the proces

In recent years, instagram.com has seen a lot of changes — we’ve launched stories, filters, creation tools, notifications, and direct messaging as well as myriad other features and enhancements…

Step by step instructions to start gathering your own detailed Core Web Vitals data and use it to generate advanced reports.

Making GitHub’s new homepage fast and performant — Tobias Ahlin describes how the scrolling effects are done more performantly thanks to IntersectionObserver

Learn about the strict lazy loading setting that allows you to disable it entirely for non-production environments.

An online lecture course by Scott Jehl.

Presented by Evan Coury @EvanDotPro Presented on December 18, 2014 More and more large companies and websites are switching over to Nginx + PHP-FPM for increased performance and more efficient resource utilization. When properly tuned, this duo can be a perfect match for high traffic situations. However, it only takes one small oversight in the configuration to bring your site to a grinding halt under high load. Join Evan Coury, owner of Roave, as he shares all of his tips and tricks learned throughout years of high scalability consulting and running several extremely high traffic websites. We’ll cover how to optimally tune PHP-FPM worker pools, sysctl, and Nginx to get the most out of your servers. Additionally, we’ll cover adding additional capacity to handle traffic spikes, load balancing, and more. Meet Evan Coury Evan Coury is a core contributor and long-time user of Zend Framework who is perhaps most well known in the community for authoring the all-new ZF2 module system. He is currently a professional software architect, independent consultant, and owner of Roave, LLC, a full-service web development consulting firm specializing in PHP and Zend Framework. Evan is a strong proponent of free, open source software and also runs the successful SMSCloud.com international SMS gateway.

Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy Osmani's new book (also, check a free PDF preview). We’re happy and honored to have teamed up with Addy to publish a dedicated book on image optimization, and the book is now finally here!

This is Jess B Peck's personal website. SEO, Analytics, big data, small data, and the web.

23 founder @archtechx

Learn how to identify and fix layout shifts.

Using Search Console and Lighthouse to monitor Core Web Vitals, they discovered opportunities for optimizing CLS score by 0.2 which led to 15% increase in page views per session, 13% longer session duration, and 1.72 percentage point decrease in bounce rate.

The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to use this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.

In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board. Hopefully, this little case-study will be useful to you, and perhaps there are one or two techniques that you might be able to apply to your project right away. In the end, performance is all about a sum of all the fine little details, that, when added up, make or break your customer’s experience.

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the...

Learning the lay of the land

This guide provides you with information on tuning the performance and configuration of your Apache web server to optimize the load times of your website.

I had to handle high traffic loads in my career and I fought with down-time, not used memory and a lot of trouble in my past. In this article I want to give a step-by-step guide to apache2…

There's so many ways to speed up your site. Don't you wish every web performance tip was in one place...

I'm excited to announce the beta-release of eleventy-high-performance-blog–a high-performance blog template for 11ty based on this very...

Back in 2011, I happened to get a job writing Backbone.js app. If you never did that, don’t. I was complaining about difficulties with composition left and right to [...]

DANA Home Shopping is one of the key features that DANA provides to make us more convenience to buy stuff we want from our home without going anywhere. We can order via Whatsapp and pay it using QRIS…

Google Fonts is fast. Now it’s faster. Much faster.

Make your client-side apps load fast and provide a good user experience.

My team and I are working on a big project that is becoming bigger and bigger. Split in micro services, each end-user call generates an increasing number of HTTP API calls. Performance was becoming a problem and the Developer eXperience (DX) suffered as a result. Note that we already

Preloader helper to create a PHP-ready preload script from Opcache. - DarkGhostHunter/Preloader

Let’s make 2021... fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.

Read this page on the Filament Group website

How can we make it easier for businesses to understand when and what to measure?

Preloading allows for parsed PHP files to be available for all requests

Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.

This is a post by JSConf EU Organiser Malte Ubl. The clickbait headline got you here, so let’s make this worth your while! I have no idea whether this is the fastest conference website in the world but I also don’t know that it isn’t; and I’ve spent a...

How browsers schedule and execute scripts can impact the performance of web pages. While techniques like

Let’s make 2021... fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.

How do you scale a system from one user to more than 11 million users? Joel Williams, Amazon Web Services Solutions Architect, gives an excellent talk on just that subject: AWS re:Invent 2015 Scaling Up to Your First 10 Million Users. If you are an advanced AWS user this talk is not for you, but it’s a great way to get started if you are new to AWS, new to the cloud, or if you haven’t kept up with with constant stream of new features Amazon keeps pumping out. As you might expect since this is

Learn how to improve your PHP app's performance with this guide to installing and configuring OPcache, made easy with Cloudways' simplified integration process.

A write-up of performance.now() conference in Amsterdam.

Guidance to build modern web experiences that work in every browser.

Learn how (and why) to make your app faster by optimizing JS, CSS, images/fonts and other things

A talk on perceived performance, delivered at Fluent Conf 2017

🎮 The only Front-End Performance Checklist that runs faster than the others - thedaviddias/Front-End-Performance-Checklist

At Google IO 2018, we presented a roundup of tools, libraries and optimization techniques that make improving web performance easier. Here we explain them using The Oodles Theater app. We also talk about our experiments with predictive loading and the new Guess.js initiative.

Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll…

A quick history

Over the past six months, I've become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I

25+ experts share their advice and mistakes they see when it comes to web performance and which optimizations you should spend time prioritizing.

Learn how to manage how PHP-FPM creates and uses PHP processes to get the most out of your server.

Modern DevTools Lesson 13 https://moderndevtools.com/lessons/13

Every time you execute a PHP script, the script needs to be compiled to byte code. OPcache leverages a cache for this bytecode, so the next time the same script is requested, it doesn’t have to…

As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if…

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it…

Performance budgets are an essential but under-appreciated part of product success and team health. Most partners we work with are not aware of the real-world operating environment and make inappropriate technology choices as a result. We set a time budget of less than 5 seconds first-load Time-to-Interactive and less than two seconds for subsequent loads. We further constrain ourselves to a baseline device and network configuration to measure progress. 2017's global baseline is a ~$200 Android device on a 400Kbps link with a 400ms round-trip-time ('RTT'). This translates to ~130-170KB of critical-path resources, depending on composition; the more JS you include, the smaller the bundle must be.

Significantly improve PHPStorm's performance.

L'unica guida che ti fa ottenere veramente il 100/100 su tutte le tab di Pagespeed Insights. Metti il turbo al tuo sito Wordpress diminuisci il bounce rate

Overview: We recently rethought the architecture for the JavaScript side of our codebase at Airbnb. This post will look at (1) the product drivers that precipitated the changes, (2) the steps we took…