Smashing Magazine

JANUARY 11, 2021

Front-End Performance Checklist 2021. Front-End Performance Checklist 2021. This guide has been kindly supported by our friends at LogRocket , a service that combines frontend performance monitoring , session replay, and product analytics to help you build better customer experiences. Web performance is a tricky beast, isn’t it?

Performance 145

Performance Cache Media Metrics 145

Smashing Magazine

JUNE 10, 2022

Measuring The Performance Of Typefaces For Users (Part 2). Measuring The Performance Of Typefaces For Users (Part 2). Therefore, how well does it perform when compared to other typefaces that are considered to be historically well done or have been revived well? Thomas Bohm. 2022-06-10T08:00:00+00:00. 2022-06-10T12:33:17+00:00.

Performance 94

Performance Design Speed Testing 94

Smashing Magazine

JUNE 10, 2021

These are only a few questions to consider when having the goal of building a fast website. But how do you find all these things causing performance issues? Let me share three tools that will help you spot performance issues and ship high-quality and fast websites. It’s a perfect companion to build a high-quality website.

Cache 105

Cache Website Best Practices Network 105

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

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 15, 2021

By running basic optimizations of our videos before adding them to our websites, we can prevent these issues from occurring for good — well, most of them. It’s not uncommon to find websites with extremely large videos — for example, used used as hero background videos. There is a solution though! Real-World Data. Large preview ).

Network 143

Network Speed Website Mobile 143

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. 400 pages , jam-packed with in-depth user research and best practices. There is a wealth of information on websites to help guide you along your learning path.

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

JULY 27, 2021

and exercise best CSS practices. In this article, we’ll build a website (a tea shop!) CSS-in-JS can also have a performance impact by causing additional renders and dependencies on the global state. Recommended reading : “ The Unseen Performance Costs Of Modern CSS-in-JS Libraries In React Apps )” by Aggelos Arvanitakis.

Website 142

Website Design Best Practices Code 142

Smashing Magazine

OCTOBER 24, 2023

The Fight For The Main Thread The Fight For The Main Thread Geoff Graham 2023-10-24T18:00:00+00:00 2023-10-24T22:02:26+00:00 This article is sponsored by SpeedCurve Performance work is one of those things, as they say, that ought to happen in development. But not everything about performance happens directly at the code level, right?

Google 90

Google Analytics Traffic Metrics 90

Smashing Magazine

MAY 23, 2022

Continue reading below ↓ Meet Smashing Online Workshops on front-end & UX , with practical takeaways, live sessions, video recordings and a friendly Q&A. On design systems, UX, web performance and CSS/JS. When creating responsive websites, we often make assumptions about input mechanisms based on their screen size.

Media 140

Media Tuning Design Website 140

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. Your website will gradually benefit from it as support arrives to your users in most modern browsers.

Website 103

Website Best Practices Media Open Source 103

Smashing Magazine

NOVEMBER 16, 2021

To understand touchscreen performance, Steven undertook several studies and found that popular notions of touch accuracy and preferred touch regions are wrong. Chapter 9 describes ways we can consider likely problems when planning the design of our apps and websites. Eye opening and practical, but above all, useful.

Mobile 87

Mobile Design Best Practices Website 87

Brendan Gregg

APRIL 30, 2018

In fact, we’d link to the first LISA conference website for reference, but this conference not only predates the Wayback Machine – it also predates the World Wide Web! USENIX 1984 speakers: USENIX has been running tech conferences since before the World Wide Web. Photo by Perry Kivolowitz.

DevOps 43

DevOps Network Best Practices Programming 43

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. This way, the image loads faster, and your website will get a better LCP score.

Media 104

Media Mobile Website Metrics 104

Brendan Gregg

APRIL 29, 2018

In fact, we’d link to the first LISA conference website for reference, but this conference not only predates the Wayback Machine – it also predates the World Wide Web! USENIX 1984 speakers: USENIX has been running tech conferences since before the World Wide Web. Photo by Perry Kivolowitz.

DevOps 40

DevOps Network Best Practices Programming 40

Smashing Magazine

APRIL 11, 2022

JavaScript, CSS, images, iframes, and other resources impact how quickly website loads, renders and becomes usable to the user. Of all those options, it’s safe to assume that text is the best choice for LCP performance because it loads and renders fast. Improving Largest Contentful Paint performance. Adrian Bece.

Media 69

Media Tuning Metrics Google 69

Smashing Magazine

SEPTEMBER 27, 2021

Example: If you want to test the checkout process in an online shop, don’t perform all of the other steps, such as creating the products and categories, even though you will need them to process the checkout. Example: Finding My Articles in Smashing Magazine. I want to write a test for this website, Smashing Magazine.

Testing 135

Testing Website Code Efficiency 135

Smashing Magazine

JUNE 28, 2021

Mike’s personal website. Actually, I was just checking the Cut Into The Jamstack website today, and the accessibility score is very high. I’ve done static websites. 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. Show Notes.

Website 62

Website Design Open Source Software 62

Smashing Magazine

APRIL 9, 2019

Way back in the days when JavaScript was very much the poorer cousin to HTML and CSS, we didn’t need to think too much about how our scripts could be used as an attack vector for our websites. This remains a good, practical way to work, but it does introduce a potential vector for attack. What Could Go Wrong? Conclusion.

Website 57

Website Servers Code Best Practices 57

Smashing Magazine

JULY 12, 2021

CSS is a simple stylesheet language for defining a website or document’s presentation. Some such examples include: Decreasing code quality as more features are added due to the varying CSS skill levels within a development team and lacking internal rules, conventions, and best practices. Refactoring CSS: Introduction (Part 1).

Best Practices 145

Best Practices Website Architecture Media 145

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

JULY 9, 2021

These are just a couple of examples of what disabled users face daily when they try and access a website that is inaccessible. The case for accessibility is this; we as stakeholders, managers, teams, designers and developers need to do better in not only practicing accessibility but advocating for it as well.

Website 145

Website Mobile Design Testing 145

Smashing Magazine

JULY 20, 2021

WordPress is the most used website builder in the world; almost half of the web has used WordPress to create their website. It makes sense, because it allows you to quickly create websites and has a rich plugin’s ecosystem to help you scale your site. Monolithic, Regular CMS architecture ( Large preview ).

Website 141

Website Architecture Technology Technology 141

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. When it comes to a Traditional CMS, the CMS and the resulting front-end website are built on a monolithic architecture. there was a separate subdomain for a mobile website). Infrastructure Integration.

Cache 143

Cache Website Mobile Google 143

Smashing Magazine

DECEMBER 22, 2021

Created by Jon Yablonski, this lovely website explains 21 psychological principles that designers can consider to create more human-centered products and experiences. The Ultimate Guide to UX Research shares tips and best practices from leading industry experts. If not, Laws Of UX will shed more light on their meaning.

Airlines 128

Airlines Mobile Design Strategy 128

Smashing Magazine

JULY 23, 2021

That is also something that you can find when using a procurement website. Larger organizations often post their invitations to tender on procurement websites. Websites like Upwork tend to be highly competitive and price sensitive. However, in practice, the results can be underwhelming. Procurement Sites. Networking.

Social Media 145

Social Media Media Network Website 145

Smashing Magazine

JULY 2, 2021

It is recommended to follow rules and best practices of building and sending emails. Their purpose, sending method, and performance vary, and so should the testing flow. A mistake could be made when you work with several projects/websites. How can we address these challenges? Large preview ). Spam checks.

Testing 109

Testing Servers Social Media Automotive 109

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

OCTOBER 6, 2021

To simplify this behavior, a best practice is to ensure your styles include resetting all elements to use border-box. Within a fixed layout set to 100vh , the bottom part of the website content is stuck behind the browser chrome, making it inaccessible when scrolling is prevented. Cumulative Layout Shift.

Design 145

Design Availability Mobile Website 145

Smashing Magazine

JULY 8, 2021

Best Practices When Writing Custom Directives. It is considered best practice not to directly access a state object. Quasar with its high performant frontend stack allows you to build cross-platform applications for Web, Mobile, and Desktop. Vue Devtools ,” website. This is the virtual node of Vue.js.

Speed 132

Speed Processing Development Code 132

Smashing Magazine

NOVEMBER 30, 2021

Improving The Performance Of Wix Websites written by Dan Shappir. Adding A Dyslexia-Friendly Mode To A Website written by John C Barstow. We last talked to him in July 2020 , where we asked if modern best practices about for the web. Chris on Twitter. The Vanilla JavaScript Podcast. Weekly Update. Chris: Indeed.

Technology 94

Technology Technology Servers Code 94

Smashing Magazine

AUGUST 31, 2021

If you have multiple pieces of state defined in a single context, you may start running into performance issues. For example, you might share authentication in one Context, internationalization preferences in another, and website theme in another. There’s a great article (and e-book!) on this topic here that goes much more in-depth.

Cache 103

Cache Servers Best Practices Code 103

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

AUGUST 9, 2021

Often they make it seem as if HTTP/3 is a revolution in performance, while it is really a more modest (yet still useful!) This is dangerous, because the new protocol will probably not be able to live up to these high expectations in practice. Websites would magically become 50% faster with the flip of a switch!

Transportation 145

Transportation Internet Internet Network 145

Smashing Magazine

SEPTEMBER 29, 2021

If you’re optimizing for the Web Vitals , you might be interested to hear that images account for ~ 42% of the Largest Contentful Paint element for websites. This is why a lot of our guidance on performance talks about image optimization. JPEG works best with photographs, while PNG is its counterpart for other still images.

Open Source 144

Open Source Speed Website Google 144