Kategorie: technology

Case Study: Jelly Pixel Studio’s Journey With WordPress.com

Jelly Pixel Studio, a web development agency based in Indonesia, specializes in crafting unique and illustrative websites for clients worldwide. The company serves a wide variety of clients, from small businesses to larger corporations, utilizing WordPress.com as their primary hosting platform due to its exceptional stability, fast performance, and robust features.

Over the years, the agency has migrated numerous websites to WordPress.com and has seen consistent uptime and improved efficiency, saving both time and money. The agency’s founder, Andika Purnawijaya, better known as Dika Fei, cites WordPress.com as the magic solution that helped solve many hosting challenges for the agency’s clients.

Let’s explore a bit more about Jelly Pixel and how WordPress.com helps keep their clients happy.

Dika’s path to web development

Dika Fei embarked on his web development journey right after university, learning and mastering IBM’s WebSphere. His first interaction with WordPress.com came when he joined Codeable to work with various clients whose sites were hosted on the WordPress.com platform. Dika saw the immense value in WordPress.com and adopted it for the majority of his projects.

Jelly Pixel Studio was born out of a failed startup venture by Dika and three of his friends from college. After their initial attempt at creating something similar to Shopify for the Indonesian market didn’t work out, the team decided to channel their expertise into a highly successful web development agency. When choosing a platform, they settled on WordPress due to its simplicity and intuitiveness.

The team later branched out to form a second agency, WP Stronk, which handles subscription-based web maintenance and content entry.

When asked if the agencies focused on any specific niche, Dika said, “YES! Jelly Pixel is exceptionally skilled at creating illustrative websites with subtle scrolling animations. Our websites leave a lasting impression even after you close the tab.”

The impact of WordPress.com

WordPress.com has been instrumental in helping Jelly Pixel Studio streamline its operations and deliver outstanding services to clients. With a mix of projects in maintenance and those being actively developed, Dika and his team of seven, or “the magnificent seven” as they like to call themselves, have benefited greatly from the platform’s robust features and top-notch performance.

WordPress developers and agencies are no strangers to the perils and pitfalls of hosting. But WordPress.com solves those problems for Jelly Pixel Studio clients:

What I love about WordPress.com is its exceptional stability and blazing-fast performance, regardless of your setup. Even with other managed hosting providers, you often need to be mindful of  various settings such as: cache parameters and PHP workers. However, with WordPress.com, everything just works seamlessly. It’s a true “set it and forget it” experience. 

As long as your site is hosted on WordPress.com, you can rest assured that it won’t go down and it won’t slow down, no matter the traffic. I have no idea how you accomplished it, but it’s absolutely AMAZING! 

Literally magic

The team considers WordPress.com to be a good fit for their clients. Why?

You have amazing support, and your infrastructure is LITERALLY MAGIC. We have monitored our clients’ uptime, and 100% is a number we often see. How is this even possible? “Amazing” would be an understatement. You have saved me from a ton of urgent calls at night.

Jelly Pixel Studio believes WordPress.com has one well-kept secret:

I firmly believe that WordPress.com is the best hosting option for WooCommerce, particularly those with high traffic. 

He thinks this is a missed opportunity for many freelancers and agencies who may not have considered using WordPress.com for their hosting clients. He shares this example:

I have a client on a different host. They get HUGE traffic. Every time they have a sale, they need to purchase a package upgrade and I have to constantly monitor their ad parameters to ensure proper caching. With the way WordPress.com works, all of this would be seamlessly handled out of the box.

He adds:

Unfortunately, the knowledge of WordPress.com as a highly stable WooCommerce hosting solution seems to have been lost over time. It almost feels like a well-kept secret! 

The verdict

Dika and his team at Jelly Pixel Studio view WordPress.com as a valuable partner in their web development journey. Dika credits the platform for providing peace of mind, leading to a happier and more productive work environment for his team, as well as clients who no longer complain about their site’s performance. He looks forward to further cooperation with WordPress.com and hopes for the continued evolution of the platform’s capabilities.

At the heart of his work, Dika stands by this quote from Victor Frankl:

“For success, like happiness, cannot be pursued; it must ensue, and it only does so as the unintended side-effect of one’s personal dedication to a cause greater than oneself.”

This approach is echoed in the success story of Jelly Pixel Studio and WP Stronk, marking the agencies as businesses of kindness, dedication, and commitment to problem-solving.

The power of hosting with WordPress.com

WordPress web design and development agencies are discovering the power of WordPress.com hosting and the benefits it offers their clients. With full-stack performance, robust security, and developer-friendly features, WordPress.com provides agencies with a platform they can confidently recommend to their clients.

If you’re interested in getting access to the tools and features on WordPress.com that can support your development process, click here to enable our “I am a developer” setting on your WordPress.com account.

Finally, if you’re in search of an agency specializing in illustrative websites and CRO (Conversion Rate Optimization), Jelly Pixel Studio can help you. For web and content maintenance, check out WP Stronk for their comprehensive services.
Quelle: RedHat Stack

Welcome to a More Powerful WP-Admin Experience

As Automattic CEO Matt Mullenweg teased in a January blog post, our team at WordPress.com is working hard to enhance our developer experience. Improving what you see in your dashboard when you log into WordPress.com is one of our biggest goals.

Today, we’re excited to unveil a more powerful wp-admin experience (if you know, you know), which will soon be available to all sites on Creator and Entrepreneur plans. Read on to find out how to get early access.

Don’t call it a comeback

For many years, the default view for WordPress.com users has been a modernized, more friendly version of the classic WordPress experience. Around the office, we call this interface “Calypso.” It offers sleek post/page management, easy profile edits, built-in tips and resources for starting or growing your site, and more.

While the Calypso interface is ideal for some folks, we’ve heard from a lot of developers that you’d prefer easy access to the classic WordPress dashboard experience. So, we’re doing just that by making it possible for wp-admin to be the default view when you log in. 

Our mission here is to empower our power users—those on Creator and Entrepreneur plans—to leverage WordPress to its fullest. This update promises:

Enhanced flexibility: Tailor your interface to seamlessly match your workflow.

A familiar, WordPress-centric experience: Enjoy an interface that feels right at home, mirroring the robust capabilities you expect from other WordPress hosts.

Superior management for complex sites: Handle sophisticated sites and client projects with ease.

While this initial launch is for Creator and Entrepreneur subscribers, our commitment extends to all WordPress.com users. We’re excited about the possibility of expanding these features to everyone in the future. 

Join the early access list

To access the wp-admin interface you know and love, please join our email list below to be considered for early access.

Submit a form.

And stay tuned for even more updates coming your way, including a few menu and navigation changes that you won’t want to miss.
Quelle: RedHat Stack

How We Built a New Home for WordPress.com Developers Using the Twenty Twenty-Four Theme

In the last few weeks, our team here at WordPress.com has rebuilt developer.wordpress.com from the ground up. If you build or design websites for other people, in any capacity, bookmark this site. It’s your new home for docs, resources, the latest news about developer features, and more. 

Rather than creating a unique, custom theme, we went all-in on using Twenty Twenty-Four, which is the default theme for all WordPress sites. 

That’s right, with a combination of built-in Site Editor functionalities and traditional PHP templates, we were able to create a site from scratch to house all of our developer resources. 

Below, I outline exactly how our team did it.

A Twenty Twenty-Four Child Theme

The developer.wordpress.com site has existed for years, but we realized that it needed an overhaul in order to modernize the look and feel of the site with our current branding, as well as accommodate our new developer documentation. 

You’ll probably agree that the site needed a refresh; here’s what developer.wordpress.com looked like two weeks ago:

Once we decided to redesign and rebuild the site, we had two options: 1) build it entirely from scratch or 2) use an existing theme. 

We knew we wanted to use Full Site Editing (FSE) because it would allow us to easily use existing patterns and give our content team the best writing and editing experience without them having to commit code.

We considered starting from scratch and using the official “Create Block Theme” plugin. Building a new theme from scratch is a great option if you need something tailored to your specific needs, but Twenty Twenty-Four was already close to what we wanted, and it would give us a headstart because we can inherit most styles, templates, and code from the parent theme.

We quickly decided on a hybrid theme approach: we would use FSE as much as possible but still fall back to CSS and classic PHP templates where needed (like for our Docs custom post type).

With this in mind, we created a minimal child theme based on Twenty Twenty-Four.

Spin up a scaffold with @wordpress/create-block

We initialized our new theme by running npx @wordpress/create-block@latest wpcom-developer. 

This gave us a folder with example code, build scripts, and a plugin that would load a custom block.

If you only need a custom block (not a theme), you’re all set.

But we’re building a theme here! Let’s work on that next.

Modify the setup into a child theme

First, we deleted wpcom-developer.php, the file responsible for loading our block via a plugin. We also added a functions.php file and a style.css file with the expected syntax required to identify this as a child theme. 

Despite being a CSS file, we’re not adding any styles to the style.css file. Instead, you can think of it like a documentation file where Template: twentytwentyfour specifies that the new theme we’re creating is a child theme of Twenty Twenty-Four.

/*
Theme Name: wpcom-developer
Theme URI: https://developer.wordpress.com
Description: Twenty Twenty-Four Child theme for Developer.WordPress.com
Author: Automattic
Author URI: https://automattic.com
Template: twentytwentyfour
Version: 1.0.0
*/

We removed all of the demo files in the “src” folder and added two folders inside: one for CSS and one for JS, each containing an empty file that will be the entry point for building our code.

The theme folder structure now looked like this:

The build scripts in @wordpress/create-block can build SCSS/CSS and TS/JS out of the box. It uses Webpack behind the scenes and provides a standard configuration. We can extend the default configuration further with custom entry points and plugins by adding our own webpack.config.js file. 

By doing this, we can:

Build specific output files for certain sections of the site. In our case, we have both PHP templates and FSE templates from both custom code and our parent Twenty Twenty-Four theme. The FSE templates need minimal (if any) custom styling (thanks to theme.json), but our developer documentation area of the site uses a custom post type and page templates that require CSS.

Remove empty JS files after building the *.asset.php files. Without this, an empty JS file will be generated for each CSS file.

Since the build process in WordPress Scripts relies on Webpack, we have complete control over how we want to modify or extend the build process. 

Next, we installed the required packages:

​​npm install path webpack-remove-empty-scripts –save-dev

Our webpack.config.js ended up looking similar to the code below. Notice that we’re simply extending the defaultConfig with a few extra properties.

Any additional entry points, in our case src/docs, can be added as a separate entry in the entry object.

// WordPress webpack config.
const defaultConfig = require( ‘@wordpress/scripts/config/webpack.config’ );

// Plugins.
const RemoveEmptyScriptsPlugin = require( ‘webpack-remove-empty-scripts’ );

// Utilities.
const path = require( ‘path’ );

// Add any new entry points by extending the webpack config.
module.exports = {
…defaultConfig,
…{
entry: {
‘css/global': path.resolve( process.cwd(), ‘src/css’, ‘global.scss’ ),
‘js/index': path.resolve( process.cwd(), ‘src/js’, ‘index.js’ ),
},
plugins: [
// Include WP’s plugin config.
…defaultConfig.plugins,
// Removes the empty `.js` files generated by webpack but
// sets it after WP has generated its `*.asset.php` file.
new RemoveEmptyScriptsPlugin( {
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
} )
]
}
};

In functions.php, we enqueue our built assets and files depending on specific conditions. For example, we built separate CSS files for the docs area of the site, and we only enqueued those CSS files for our docs. 

<?php

function wpcom_developer_enqueue_styles() : void {
wp_enqueue_style( ‘wpcom-developer-style’,
get_stylesheet_directory_uri() . ‘/build/css/global.css’
);
}

add_action( ‘wp_enqueue_scripts’, ‘wpcom_developer_enqueue_styles’ );

We didn’t need to register the style files from Twenty Twenty-Four, as WordPress handles these inline.

We did need to enqueue the styles for our classic, non-FSE templates (in the case of our developer docs) or any additional styles we wanted to add on top of the FSE styles.

To build the production JS and CSS locally, we run npm run build. 

For local development, you can run npm run start in one terminal window and npx wp-env start (using the wp-env package) in another to start a local WordPress development server running your theme.

While building this site, our team of designers, developers, and content writers used a WordPress.com staging site so that changes did not affect the existing developer.wordpress.com site until we were ready to launch this new theme.

theme.json

Twenty Twenty-Four has a comprehensive theme.json file that defines its styles. By default, our hybrid theme inherits all of the style definitions from the parent (Twenty Twenty-Four) theme.json file. 

We selectively overwrote the parts we wanted to change (the color palette, fonts, and other brand elements), leaving the rest to be loaded from the parent theme. 

WordPress handles this merging, as well as any changes you make in the editor. 

Many of the default styles worked well for us, and we ended up with a compact theme.json file that defines colors, fonts, and gradients. Having a copy of the parent theme’s theme.json file makes it easier to see how colors are referenced.

You can change theme.json in your favorite code editor, or you can change it directly in the WordPress editor and then download the theme files from Gutenberg.

Why might you want to export your editor changes? Styles can then be transferred back to code to ensure they match and make it easier to distribute your theme or move it from a local development site to a live site. This ensures the FSE page templates are kept in code with version control. 

When we launched this new theme on production, the template files loaded from our theme directory; we didn’t need to import database records containing the template syntax or global styles.

Global styles in SCSS/CSS

Global styles are added as CSS variables, and they can be referenced in CSS. Changing the value in theme.json will also ensure that the other colors are updated.

For example, here’s how we reference our “contrast” color as a border color:

border-color: var(–wp–preset–color–contrast);

What about header.php and footer.php?

Some plugins require these files in a theme, e.g. by calling get_header(), which does not automatically load the FSE header template. 

We did not want to recreate our header and footer to cover those cases; having just one source of truth is a lot better.

By using do_blocks(), we were able to render our needed header block. Here’s an example from a header template file:

<head>
<?php
wp_head();
$fse_header_block = do_blocks( ‘<!– wp:template-part {"slug":"header","theme":"a8c/wpcom-developer","tagName":"header","area":"header", "className":"header-legacy"} /–>’ );
?>
</head>
<body <?php body_class(); ?>>
<?php
echo $fse_header_block;

The new developer.wordpress.com site is now live!

Check out our new-and-improved developer.wordpress.com site today, and leave a comment below telling us what you think. We’d love your feedback. 

Using custom code and staging sites are just two of the many developer features available to WordPress.com sites that we used to build our new and improved developer.wordpress.com.

If you’re a developer and interested in getting early access to other development-related features, click here to enable our “I am a developer” setting on your WordPress.com account.

Quelle: RedHat Stack

More Control Over the Content You Share

There are currently very few options for individual users to control how their content is used for AI training, and we want to change that. That’s why we’re launching a new tool that lets you opt out of sharing content from your public blogs with third parties, including AI platforms that use such content for training models. 

The reality is that AI companies are acquiring content across the internet for a variety of purposes and in all sorts of ways. We will engage with AI companies that we can have productive relationships with, and are working to give you an easy way to control access to your content.

We’re also getting ahead of proposed regulations around the world. The European Union’s AI Act, for example, would give individuals more control over whether and how their content is utilized by the emerging technology. We support this right regardless of geographic location, so we’re releasing an opt-out toggle and working with partners to ensure you have as much control as possible regarding what content is used. 

Here’s how to opt out of sharing: 

The new toggle can be found in Settings → General → privacy section. Or, you can click here: https://wordpress.com/settings/general.

To opt out, visit the privacy settings for each of your sites and toggle on the “Prevent third-party data sharing” option. 

Please note: If you’ve already chosen in your settings to discourage search engines from crawling your site, we’ve automatically applied that privacy preference to third-party data sharing.

Here’s a Support Center doc with more information.

We already discourage AI crawlers from gathering content from WordPress.com and will continue to do so, save for those with which we partner. We want to represent all of you on WordPress.com and make sure that there are protections in place for how your content is used. As part of that, we have added a setting to opt out of sharing your public site content with third parties. We are committed to making sure our partners respect those decisions.
Quelle: RedHat Stack

My Condolences, You’re Now Running a Billion-Dollar Business

Halfway through a relaxing winter break with my family, I opened Slack for a quick dopamine hit. The message I saw waiting from Matt, Automattic’s CEO, was quite the surprise:

“Would you be interested in running WordPress.com while I’m on sabbatical?”

In honesty, my initial reaction was “No, not really.” It seemed like a lot of work, stressful, etc. But, I named my last team YOLO for a reason: the answer is always “Yes,” because you only live once.

Many teams at Automattic use the “red / yellow / green check-in” as a communication tool. At nearly the one-month mark of running WordPress.com, I can safely say I’ve experienced the entire rainbow of emotional states. Today, I’d like to share a few of my learnings with the hope that they help you during your leadership journey.

Also, one pro tip: don’t open Slack on vacation.

Problem #1: I’m receiving 50x more pings

My former team is largely based in Europe, so their day started much earlier than mine. When I signed on for the morning, I’d usually have a few things to respond to before I dived into work.

These days, I drink from the firehose. I wake up to dozens of P2 mentions, Slack DMs, and other communication threads. I clear them out, and then they just pile up again.

Solution: Delegate, delegate, delegate

Ideally, I’d like to run the business while skiing fresh powder. In order to do so, I need a great team whom I can trust to get the job done.

For our recent efforts, the WordPress.com leadership team traveled a collective 160 hours to meet in NYC. While there, we focused on identifying goals that answered the question: “If we did this in the next 90 days, would it be transformative to the business?” Everyone went home with a specific set of goals they own. Knowing what we’re trying to do and who is responsible for what are two key elements of delegation.

Additionally, I also encourage the team on a daily basis to:

Actively work together before they come to me. On a soccer field, the team would get nowhere if they had to ask the coach before every pass.

Come to me with “I intend to,” not “What should I do?” Actively acting on their own and reporting progress represents the highest level of initiative.

Ultimately, I should be the critical point of failure on very few things. When something comes up, there should be an obvious place for it within the organization.

Problem: Something is always on fire

I am a very “Inbox Zero” type of person. Running WordPress.com breaks my brain in some ways because there’s always something broken. Whether it’s bugs in our code, overloaded customer support, or a marketing email misfire, entropy is a very real thing in a business this large.

Even more astounding is the game of “whac-a-mole”: when making a tiny change to X, it can be difficult to detect a change in Y or take Y down entirely. There’s always something!

Solution: Focus on the next most important thing

When dealing with the constant fires and the constant firehose, I’ve found a great deal of comfort in asking myself: “What’s the most important thing for me to work on next?”

Leadership is about results, not the hours you put in. More often than not, achieving these results comes from finding points of leverage that create outsized returns.

At the end of the day, the most I can do is put my best effort forth.

Problem: We’re moving too slowly

By default, nothing will ever get done in a large organization. There are always reasons something shouldn’t be done, additional feedback that needs to be gathered, or uncertainties someone doesn’t feel comfortable with.

If you’ve gotten to the point where you’re a large organization—congratulations! You must’ve done something well along the way. But, remember: stasis equals death. Going too slowly can be even more risky than making the wrong decision.

Solution #3: “70% confident”

I think “70% confident” has been kicking around for a while, but Jeff Bezos articulated it well in his 2016 letter to shareholders (emphasis mine):

Most decisions should probably be made with somewhere around 70% of the information you wish you had. If you wait for 90%, in most cases, you’re probably being slow. Plus, either way, you need to be good at quickly recognizing and correcting bad decisions. If you’re good at course correcting, being wrong may be less costly than you think, whereas being slow is going to be expensive for sure.

In leadership, I find “70% confident” to be a particularly effective communication tool. It explicitly calls out risk appetite, encourages a level of uncertainty, and identifies a sweet spot between not enough planning and analysis paralysis. Progress only happens with a certain degree of risk.

I’m excited to start sharing what we’ve been working on. Stay tuned for new developer tools, powerful updates to WordPress.com, and tips for making the perfect pizza dough. If you’d like some additional reading material, here is a list of my favorite leadership books.

Original illustrations by David Neal.
Quelle: RedHat Stack

Hot Off the Press: New WordPress.com Themes for February 2024

The WordPress.com team is always working on new design ideas to bring your website to life. Check out the latest themes in our library, including great options for gamers, writers, and anyone else who creates on the web.

All WordPress.com Themes

Spiel

This magazine-style theme was built with gaming bloggers in mind, but is versatile enough to work exceptionally well for nearly any type of budding media empire. Using a classic blogging layout, we’ve combined modern WordPress technology—Blocks, Global Styles, etc.—with a nostalgic aesthetic that hearkens to the earlier days of the internet.

Click here to view a demo of this theme.

Allez

Whether you’re a casual observer or a diehard rain-or-shine follower, fandom means a lot of things to a lot of people. Allez is a perfect theme to chronicle that part of who you are. Built with sports-focused content in mind, the layout, styling, and patterns used all speak to that niche. That said, WordPress is versatile enough that if you like the overall feel of Allez, it can easily be customized to your particular endeavor.

Click here to view a demo of this theme.

Strand

Strand is a simple newsletter and blogging theme with a split layout, similar to Poesis. We placed the newsletter subscription form in the sticky left column, so that it’s always visible and accessible. It’s a simple design, but one we really like for the minimalist writer who puts more emphasis on words than visual panache.

Click here to view a demo of this theme.

Bedrock

Inspired by the iconic worlds of Minecraft and Minetest (an open-source game engine), this blogging theme was designed to replicate the immersive experience of these games. While encapsulating the essence of virtual realms, we also wanted to ensure that the theme resonated with the Minecraft aesthetic regardless of the content it hosts.

At the heart of Bedrock is a nostalgic nod to the classic blog layout, infused with a distinctive “mosaic” texture. The sidebar sits confidently on every page and houses a few old-school elements like a tag cloud, a blogroll, and recent posts, all rendered with a touch of the game’s charm. If this theme speaks to you, give it a shot today.

Click here to view a demo of this theme.

Nook

Nook is another blogging theme that offers a delightful canvas for your DIY projects, delicious recipes, and creative inspirations. It’s also easily extensible to add paid products or courses. Our aim here was to create an elegant and timeless look with a sense of warmth and familiarity. The typography and color palette feature high-contrast elements that evoke coziness and comfort.

Click here to view a demo of this theme.

To install any of the above themes, click the name of the theme you like, which brings you right to the installation page. Then click the “Activate this design” button. You can also click “Open live demo,” which brings up a clickable, scrollable version of the theme for you to preview.

Premium themes are available to use at no extra charge for customers on the Explorer plan or above. Partner themes are third-party products that can be purchased for $79/year each.

You can explore all of our themes by navigating to the “Themes” page, which is found under “Appearance” in the left-side menu of your WordPress.com dashboard. Or you can click below:

All WordPress.com Themes

Quelle: RedHat Stack

Small Changes, Big Impact: A Look at What’s New In the WordPress Editor 

The WordPress project team is continuously improving the Site Editor—your one-stop shop for editing and designing your site.

The latest batch of updates—Gutenberg 17.4 and 17.5—include a handful of small but powerful changes designed to improve both your WordPress experience and that of your site’s visitors. 

Let’s take a look at what’s new. 

More robust style revisions 

Image credit: WordPress.org

When you’re in the zone making changes to the look and feel of your site, you sometimes hit a dead end or realize that the version you had three or four font and color tweaks ago was a bit better. The updated style revisions pane gives you a robust, detailed log of the design changes you’ve made and makes turning back the clock easier with a one-click restore option to take you back to that perfect design.

Newly added pagination and more granular details make this feature even more powerful. 

You can access style revisions from the Site Editor by clicking the “Styles” icon on the top right of the page, and then clicking the “Revisions” clock icon. 

Unified preferences panel 

Image credit: WordPress.org

It’s now much easier to manage your site and post-editing preferences, which have been combined and enhanced in the latest update. In addition to familiar settings, you’ll find new appearance and accessibility options, and an “allow right click” toggle which allows you to override stubborn browser defaults. You can access your preferences by heading to the three-dot menu at the top right of the editor and clicking “Preferences” at the bottom. 

Randomized gallery images 

Video credit: WordPress.org

The Gallery Block’s always been a great way to show off a collection of photos or images. And now there’s a fun new setting to randomize the order in which those images appear every time the page or post is loaded by a new visitor. 

You can turn this setting on with a toggle found at the bottom of the block settings pane: 

Streamlined edits in List View 

Image credit: WordPress.org

Not everybody knows about the Site Editor’s List View, but it can make editing your site, posts, and pages significantly faster and easier. A new addition to the List View makes editing even more convenient: just right-click any item in the list to open up the settings menu for the selected block. 

Even small changes can make a big difference to your workflow, and your site visitor’s overall experience. 

We’d love to hear what you think about the new features when you’ve had a chance to take them for a test drive! 
Quelle: RedHat Stack

Bringing You a Faster, More Secure Web: HTTP/3 Is Now Enabled for All Automattic Services

HTTP/3 is the third major version of the Hypertext Transfer Protocol used to exchange information on the web. It is built on top of a new protocol called QUIC, which is set to fix some limitations of the previous protocol versions. Without getting into technical details—though feel free to do so in the comments if you have questions—our users should see performance improvements across all metrics:

Reduced latency. Due to faster connection establishment (i.e. fewer round-trips), latency from connection setup is lower.

Multiplexing. That is, using a single connection for multiple resources. While this feature is present in HTTP/2, HTTP/3 has improved on it and fixed a problem called “head of line blocking.” This is a deficiency of the underlying protocol HTTP/2 was built on top, which requires packets to be in order before relaying them for processing.

Reliability. Designed to perform better in varying network environments, HTTP/3 uses modern algorithms to help it recover faster from lost data and busy networks.

Improved security. QUIC uses the latest cryptography protocols (TLSv1.3) to encrypt and secure data. More of the data is encrypted, which makes it harder for an attacker to tamper with or listen in on web requests.

Ultimately, HTTP/3 (on top of QUIC) has been designed to be updated in software, which allows for quicker improvements that don’t depend on underlying network infrastructure.

After about a month of preparing our infrastructure—including fixing bugs and upgrading our CDN—HTTP/3 was enabled for all of Automattic’s services on December 27th, 2023. It currently serves between ~25-35% of all traffic.

And now for some stats. For each of these, we want numbers to be lower after the switch, which ultimately means faster speeds across the board for our customers. Let’s look at three metrics in particular:

Time to First Byte (TTFB) measures the time between the request for a resource and when the first byte of a response arrives. 

Largest Contentful Paint (LCP) represents how quickly the main content of a web page is loaded.

Last Resource End (LRE) measures the time between the request for a resource and when the whole response has arrived.

Results for fast connections—low latency and high bandwidth

Improvements look pretty good for fast connections:

TTFB: 7.3%

LCP: 20.9%

LRE: 24.4%

Results for slow connections—high latency or low bandwidth

For slow connections, the results are even better:

TTFB: 27.4%

LCP: 32.5%

LRE: 35%

We are dedicated to providing our customer’s websites with the best possible performance. Enabling HTTP/3 is a step in that direction. See you on the QUIC side!

Automattic’s mission is to democratize publishing. To accomplish that, we’re hiring systems engineers to join the best infrastructure team on the planet. Learn more here.
Quelle: RedHat Stack