Smashing Magazine

AUGUST 15, 2023

That’s practically an eternity when talking about page speed performance. 400 pages , jam-packed with in-depth user research and best practices. Wrapping Up In this article, we identified, measured, and fixed a very common performance issue, not only in Drupal but in everyday front-end work.

Media 73

Media Metrics Mobile Best Practices 73

Smashing Magazine

JANUARY 7, 2019

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]. Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]. Web performance is a tricky beast, isn’t it? How do we actually know where we stand in terms of performance, and what our performance bottlenecks exactly are? Vitaly Friedman.

Performance 103

Performance Cache Metrics Network 103

Smashing Magazine

JANUARY 6, 2020

Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]. Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word]. Web performance is a tricky beast, isn’t it? How do we actually know where we stand in terms of performance, and what our performance bottlenecks exactly are? Vitaly Friedman.

Performance 145

Performance Cache Network Metrics 145

Smashing Magazine

MAY 20, 2020

How To Make Performance Visible With GitLab CI And Hoodoo Of GitLab Artifacts. How To Make Performance Visible With GitLab CI And Hoodoo Of GitLab Artifacts. Performance degradation is a problem we face on a daily basis. Performance is a competitive advantage that can bring and retain customers. Anton Nemtsev.

Performance 98

Performance Metrics Best Practices Code 98

Smashing Magazine

DECEMBER 17, 2020

Implementing SEO best practice doesn’t just give you the best chance possible of ranking well in search engines; it makes your websites better by scrutinizing quality, design, accessibility, and speed, among other things. Following best practice usually means a better website, more organic traffic, and happier visitors.

Engineering 130

Engineering Google Website Analytics 130

Smashing Magazine

FEBRUARY 24, 2022

How would you measure performance? Other times it’s about how fast a task is performed. Unfortunately, there is no silver bullet for measuring performance. Performance vs Perceived Performance. Facing this code, one would (rightfully) say it does not perform well. Átila Fassina. 2022-02-24T09:30:00+00:00.

Benchmarking 116

Benchmarking Metrics Best Practices Monitoring 116

Smashing Magazine

FEBRUARY 2, 2022

Improving JavaScript Bundle Performance With Code-Splitting. Improving JavaScript Bundle Performance With Code-Splitting. Before delving into details about code-splitting, let’s quickly remind ourselves what makes JavaScript so impactful on overall performance. Performance Costs. Adrian Bece. 2022-02-02T10:30:00+00:00.

Code 89

Code Performance Network Website 89

Smashing Magazine

OCTOBER 18, 2021

Performance is one of the core aspects to ensure our users are having a delightful user experience irrespective of their devices or network connection. We found out user-centric performance metrics to be the perfect fit for this purpose. We use Lighthouse and WebPagetest as our synthetic testing tools for performance to measure CLS.

Website 105

Website Google Metrics Testing Tools 105

Smashing Magazine

MAY 5, 2021

But first, let’s talk about the importance of speed improvement. Why Is Speed Improvement Necessary To Our SEO Efforts? One of the best technical ways to improve the crawl budget is to help Google do more in less time : Q : “Does site speed affect my crawl budget? Performance Impact. How about errors?”

Google 110

Google Architecture Servers Speed 110

Smashing Magazine

JUNE 8, 2021

For a thorough guide on image optimization, we’ve teamed up with Addy Osmani , an engineer manager working on Google Chrome who was working all around web performance for decades. Some of the biggest size savings and performance improvements can come through a better image optimization strategy. Image Decoding Performance. +.

Media 105

Media Cache Google Best Practices 105

Smashing Magazine

APRIL 28, 2021

For a thorough guide on image optimization, we’ve teamed up with Addy Osmani , an engineer manager working on Google Chrome and focusing around performance for decades. Some of the biggest size savings and performance improvements can come through a better image optimization strategy. Image Decoding Performance. +.

Media 92

Media Cache Google Best Practices 92

Smashing Magazine

JUNE 1, 2022

You may have a lean, agile, responsive site design only to find it gradually loaded down with more and more “extras” that are often put onto the site by marketing departments or business leaders who are not always thinking about website performance. Measuring Performance Impact. You cannot always anticipate what you cannot control.

Website 131

Website Design Network Best Practices 131

Smashing Magazine

MAY 6, 2019

Lazy loading is a way to improve the performance of a website or web application by maximizing the rendering speed of the above-the-fold images and iframes (and sometimes videos) by deferring the loading of below-the-fold content. It’s not very hard to write the JavaScript code required to perform these operations on your own.

Website 103

Website Best Practices Media Open Source 103

Smashing Magazine

JULY 8, 2021

Tools And Practices To Speed Up The Vue.js Tools And Practices To Speed Up The Vue.js Throughout this tutorial, we will be looking at practices that should be adopted, things that should be avoided, and have a closer look at some helpful tools to make writing Vue.js Best Practices When Writing Custom Directives.

Speed 132

Speed Processing Development Code 132

Smashing Magazine

JANUARY 16, 2023

Since recently becoming a ranking factor, this major web performance KPI is still a new concept for many web developers. To address this problem, I’ll provide an overview of the best practices for the integration and optimization of an LCP image. It becomes especially tricky to optimize when the LCP element is an image.

Media 104

Media Mobile Website Metrics 104

Smashing Magazine

APRIL 29, 2021

While not render-blocking, they can indirectly impact render performance. If using 11ty for your static sites, try the 11ty high-performance blog template. It also shows up on hover in the DevTools Performance panel. From Speed at Scale with Katie Hempenius and I at Google I/O. We’ll cover this later. Large preview ).

Media 145

Media Network Metrics Mobile 145

Smashing Magazine

APRIL 9, 2019

Most sites were all hosted on a single physical server somewhere on our own hosting infrastructure, and it was the server we thought about defending when it came to security best practices. This remains a good, practical way to work, but it does introduce a potential vector for attack. What Could Go Wrong?

Website 57

Website Servers Code Best Practices 57

Smashing Magazine

AUGUST 22, 2021

HTTP/3: Performance Improvements (Part 2). HTTP/3: Performance Improvements (Part 2). In this second part, we will zoom in on the performance improvements that QUIC and HTTP/3 bring to the table for web-page loading. We will, however, also be somewhat skeptical of the impact we can expect from these new features in practice.

Performance 105

Performance Network Latency Servers 105

Smashing Magazine

AUGUST 2, 2021

We’ll develop the card component in isolation and use the agreed standards and best practices. Using automated visual regression testing tools like Percy or Chromatic on a Pull Request level can speed up testing, allow developers to address regressions quickly and early, and make sure that the bugs don’t end up on the live site.

Strategy 132

Strategy Testing Best Practices Code 132

Smashing Magazine

JUNE 28, 2021

If you’re creating tons and tons of DOM elements and doing a lot of real-time updates, you might or might not run into performance challenges. Mike: I haven’t seen a performance issue ever. is performance right at the box. There’s accessibility, best practices, performance and one fourth one. It’s concern.

Website 62

Website Design Open Source Software 62

Smashing Magazine

JULY 6, 2021

We’ve explored the concepts behind headless CMSes in detail here on Smashing Magazine, but let’s do a quick recap. But beware of circular references to content which could cause headaches and performance issues. Also, building on an existing SDK has allowed us to follow the best practices recommended by the vendor while saving time.

Cache 143

Cache Website Mobile Google 143

Smashing Magazine

NOVEMBER 4, 2021

Drew McLellan: He’s an engineer at Skypack and a major contributor to a new project called Astro, which aims to combine performance best practices with the developer experience improvements we see from component based approaches. I mean, it’s not like we figured out some crazy way to get performance. Transcript.

Media 87

Media Website Architecture Servers 87

Smashing Magazine

JULY 20, 2021

Moreover, they give us the possibility to improve the website’s performance and to have more control and security over the application. Having this setup will not only give you freedom, security and comfort, but will also improve the performance of your application without third-party services. Monolithic vs Headless. Monolithic.

Website 141

Website Architecture Technology Technology 141

Smashing Magazine

OCTOBER 6, 2021

To simplify this behavior, a best practice is to ensure your styles include resetting all elements to use border-box. Speaking of layers — speeding through the spec process is another new feature that was designed specifically to assist in orchestrating the cascade and alleviating clashes. Cumulative Layout Shift.

Design 145

Design Availability Mobile Website 145

Smashing Magazine

SEPTEMBER 6, 2021

If after the previous two parts — HTTP/3 history and core concepts and HTTP/3 performance features — you’re convinced that starting to use the new protocols is a good idea (and you should be!), HTTP/3 performance features. then this final piece includes all you need to know to get started!

Network 104

Network Servers Cache Traffic 104

Smashing Magazine

SEPTEMBER 29, 2021

This is why a lot of our guidance on performance talks about image optimization. Assuming encode/decode speeds meet your needs. Encode/Decode Speed. Degree of compression, image quality, and decoding speed are key factors to be considered when comparing image performance for the web. Large preview ).

Open Source 144

Open Source Speed Website Google 144