spaceninja + performance   262

The term “Responsive Web Design” has failed
I think what he should have said was that Responsive Web Design alone has failed so far in keeping the web at the forefront of users experiences where most users are most of the time — on mobile. Of course, that’s much more nuanced than he had time for in his talk, but if that is a goal of RWD then it has failed. If the goal of RWD is just to be a practice to making things visually work on different screen sizes, then gold stars all around.
fridayfrontend  responsive  css  layout  mobile  accessibility  performance 
12 hours ago by spaceninja
Images done right: Web graphics, good to the last byte
Start taking graphics on the web seriously and boost your applications’ performance by learning the essentials about image formats, both modern and old-school. Dig into SVGs and adopt the latest and greatest tools to optimize your graphical content: both vector and raster. Study the theory behind digital images and how humans perceive them—to improve the experience for your users.
fridayfrontend  images  optimization  performance  svg 
13 hours ago by spaceninja
The Mobile Web: MIA, by Alex Russell
Responsive Design didn't work, at least not the way we hoped it would. How do we know? Nearly a decade into the new reality of mobile eating everything, the web is a shrinking, bit-player in the future of computing. We made our viewports smaller, but forgot to reduce everything else. What would our content be like if we shrunk everything to meet the constraints of mobile? And would it be enough to turn the tide? This talk explores those questions.
fridayfrontend  video  mobile  performance  javascript  accessibility 
13 hours ago by spaceninja
ASPIRE: Ideals to Aspire to When Building Websites
When we set out to build websites, it can help to retain a list of goals. There are many qualities that can make or break an experience on the web, and it’s sadly common for sites to fall short in some critical areas (like performance or accessibility) while still excelling at others (like responsive design). Great sites are made through a combination of best practices, so perhaps a handy acronym can be helpful for recalling our priorities as we work.
fridayfrontend  cssbasics  accessibility  performance  inclusive  responsive  ethics  security 
8 days ago by spaceninja
Performance… It’s for People!
It’s easy to focus on the number of 3rd-party tags, how large a page is, or even its Lighthouse score, but fundamentally performance is about our visitors’ experience – how quickly it loads, how smooth it is to use.

This talk looks at our perception of performance, some of the issues and challenges with our current approach to designing and delivering fast experiences.
fridayfrontend  performance  video 
8 days ago by spaceninja
How to read a Web Page Test waterfall chart
So I often find myself looking at WebPageTest (WPT) waterfall charts, but as I seem to have the memory of a chimpanzee (not a goldfish, that’s a myth) I tend to forget some of the details and what they all mean. So I decided to pull together many bits of information into a single blog post I can then refer to at a later date.
fridayfrontend  webpagetest  waterfall  charts  performance 
8 days ago by spaceninja
Interview with a Pornhub Web Developer
I was recently lucky enough to interview a Web Developer at the web's largest adult website: Pornhub. I wanted to learn about the tech, how web APIs can improve, and what it's like working on adult websites. Enjoy!
porn  pornography  pornhub  development  performance  tools 
8 days ago by spaceninja
Recipes for Performance Testing Single Page Applications in WebPageTest
But things can get difficult pretty quickly when dealing with Single Page Applications — usually written with React, Vue, Svelte or any other front-end framework. How can you get through a log in page? How can you test the performance of your users’ flow, when most of it happens client-side and does not have a specific URL to point to?
performance  javascript  webpagetest  testing 
8 days ago by spaceninja
Why Progressive Web Apps Are The Future of Mobile Web
PWAs are powerful, effective, fast and app-like.  It’s hard to imagine a mobile web property that could not be significantly improved via PWA implementation. They can also potentially eliminate the need for many “vanity” native apps that exist today.  In short, now is the time to integrate these technologies into your ecosystem of customer touchpoints. 
fridayfrontend  pwa  mobile  performance  apps 
15 days ago by spaceninja
Beginner's Guide to Front-End Performance Boost
Front-end performance guide for beginners to optimize website visitor traffic, higher conversion rates and best front-end performance tools
fridayfrontend  performance  cssbasics 
21 days ago by spaceninja
Investigate animation performance with DevTools
Users want snappy and delightful experiences, which means running at 60 frames per second. To achieve this, you’ll have to know how browsers transform code to pixels on the screen and how styles can affect that process.

In this post you’ll learn how browser rendering works and how to navigate DevTools to diagnose animation performance issues. We’ll use Chrome DevTools, but other browsers have very similar features and the high-level concepts are the same everywhere.
fridayfrontend  css  cssbasics  animation  devtools  performance 
21 days ago by spaceninja
Fixing layout instability
In an earlier post I wrote about measuring Cumulative Layout Shift (CLS) in WebPageTest. CLS is an aggregation of all layout shifts, so in this post I thought it'd be interesting to dive deeper and inspect each individual layout shift on a page to try to understand what could be causing the instability and actually try to fix the issue(s).
fridayfrontend  css  cssbasics  layout  performance 
21 days ago by spaceninja
Why I'm preloading a font even when I shouldn't have to
Preloading fonts is a great way to get text to display faster on a web page. This post looks at why it's a good idea to preload fonts, even if they're referenced in inline CSS.
fridayfrontend  performance  typography  webfonts  preload 
28 days ago by spaceninja
The Curious Case of the Render Blocking Resource
We were recently notified by a client that when he visited his department site from China, the site would take a very long time to load. Everything seemed fine on first inspection, so we tested the site using WebPageTest with the Beijing, China (Firefox) location. After waiting in a fairly long queue, one glance at the waterfall made the issue clear.
fridayfrontend  performance  cssbasics 
5 weeks ago by spaceninja
5G Will Definitely Make the Web Slower, Maybe
Faster networks should fix our performance problems, but so far, they have had an interesting if unintentional impact on the web. This is because historically, faster network speed has enabled developers to deliver more code to users—in particular, more JavaScript code.
fridayfrontend  javascript  performance  5g 
5 weeks ago by spaceninja
image-actions · Actions · GitHub Marketplace
Image actions will automatically compress jpeg and png images in GitHub Pull Requests.
github  actions  images  compression  optimization  performance 
5 weeks ago by spaceninja
Less Data Doesn't Mean a Lesser Experience
One of the things I think is so great about the Save-Data feature is that it gives companies some sort of control over how their brand is experienced in data-constrained environments. They’re not relying on a proxy service to do a bunch of manipulation on their behalf, hoping it turns out alright. Instead, they have an opportunity to be proactive and careful consider how they can provide a low-data experience that still reflects their brand in a positive light. There are endless ways you could do this without causing the experience to feel lesser in any way. Here are a few ideas.
fridayfrontend  save-data  performance 
6 weeks ago by spaceninja
Using rel="preconnect" to establish network connections early and increase performance
Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.
fridayfrontend  performance  cssbasics  preconnect 
7 weeks ago by spaceninja
Efficiently load third-party JavaScript
Avoid the common pitfalls of using third-party scripts to improve load times and user experience.
fridayfrontend  performance  javascript  async  defer  preconnect  lazyload 
7 weeks ago by spaceninja
Faster Image Loading With Embedded Image Previews
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.
fridayfrontend  performance  images  progressive  lqip  jpg  ajax 
7 weeks ago by spaceninja
Why I have a problem with React the library and spend a lot of time talking to my therapist
So, #ReactGate has become a thing. I'm not going to try and describe the events that led to these particular events. Suffice to say it has raised serious issues about how the tech community tolerates and allows the far right and white supremacists within its ranks. But I do want to present my own particular reasons for not enjoying the principles and philosophy behind React and how I do not therefore find the React community a pleasant place. These reasons are partially related to the events above. But not totally.
fridayfrontend  react  javascript  reactgate  performance  facebook  codeofconduct  culture  sexism  racism 
7 weeks ago by spaceninja
Minify Your SVGs
How I optimize SVGs for this blog and why you probably should, too.
fridayfrontend  svg  cssbasics  svgo  optimization  performance 
9 weeks ago by spaceninja
Accessibility and web performance are not features, they’re the baseline
Instead we must start to see inaccessible and slow websites for what they are: a form of cruelty. And if we want to build a web that is truly a World Wide Web, a place for all and everyone, a web that is accessible and fast for as many people as possible, and one that will outlive us all, then first we must make our websites something else altogether; we must make them kind.
fridayfrontend  accessibility  performance  cssbasics 
9 weeks ago by spaceninja
Making Cloud.typography Fast(er)
What issues does Hoefler&Co’s Cloud.typography introduce, and how can we mitigate them?
fridayfrontend  performance  typography  webfonts 
9 weeks ago by spaceninja
Handling Unused CSS In Sass To Improve Performance
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, we’ll explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation.
fridayfrontend  css  performance  sass  unused 
9 weeks ago by spaceninja
Lazy load embedded YouTube videos
So I thought what if instead of the actual video I showed just its cover linked to the video? It would still kinda look like an embedded video but it would require only a single image upfront. Thankfully YouTube has an URL schema for video thumbnails.
fridayfrontend  cssbasics  iframes  html  performance  youtube 
10 weeks ago by spaceninja
Time to First Byte: What It Is and Why It Matters
One metric I feel that front-end developers overlook all too quickly is Time to First Byte (TTFB). This is understandable—forgivable, almost—when you consider that TTFB begins to move into back-end territory, but if I was to sum up the problem as succinctly as possible, I’d say: While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one.
fridayfrontend  performance  ttfb  analytics 
10 weeks ago by spaceninja
Native lazy-loading for the web
Browser-level native lazy-loading is finally here! Starting with Chrome 76, you'll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library. Let's dive into the details.
fridayfrontend  html  performance  lazyload  loading  chrome 
10 weeks ago by spaceninja
How Privilege Defines Performance, by Tatiana Mac
In theory, performance, accessibility, and inclusive design all have similar goals: Provide the best, most consistent experience to all people using the minimal amount of resources.

In practice, this often falls apart.

Product creators define what it means to be performant from where they stand, which is typically from places of privilege with unseen biases, struggling to find true empathy with their users.

Through this talk, we'll examine how to build conscientiously, looking within to resist systematic problems in order to create more truly performant, accessible, and inclusive systems for our users.
fridayfrontend  video  performance  accessibility  privilege  culture  racism  sexism  feminism  inclusive  diversity 
10 weeks ago by spaceninja
How to Reduce Your Vue.JS Bundle Size With Webpack
I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing plants worldwide. Factories can visit the marketplace and select what applications they need based on the products they are producing at that location. This will create a custom build that bundles all of these applications together for the plant to run. Due to the bundling of such a large number of applications our Vue build for production resulted in multiple warnings about excess size.
vue  javascript  webpack  performance 
10 weeks ago by spaceninja
How performant are data attributes as selectors
The results varied quite a bit each time I ran the test. Sometimes classes were faster. Sometimes data attributes were faster. Sometimes both took a long time, and sometimes both ran really quickly. On average, they both took about half a millisecond to run each. In other words: no difference whatsoever.
html  performance  data  attributes  selectors 
12 weeks ago by spaceninja
The Simplest Way to Load CSS Asynchronously
One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays. Of course, at least a portion of a site’s CSS should be loaded before the page should be allowed to start rendering, and to get that initial CSS to the browser immediately, we recommend inlining (or HTTP2 server-pushing) the CSS. For sites with a small amount of overall, that alone might be enough, but if the CSS is large (say, bigger than 15 to 20kb), it can help performance to split it up by priority. Once split, less-critical CSS should be loaded in the background—AKA asynchronously. In this post, I aim to describe up our preferred way to do that these days, which has actually been around for years.
fridayfrontend  cssbasics  css  javascript  performance  async 
july 2019 by spaceninja
Tips for rolling your own lazy loading
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page has been parsed. It can reduce the initial page weight, and help us hit our performance budgets by requesting images when they're needed. In this post, we’ll look at an implementation you can add to your site as I’ve done on this little demo site.
fridayfrontend  images  lazyload  performance  intersection-observer  responsive  javascript 
july 2019 by spaceninja
Developing a Robust Font Loading Strategy for CSS-Tricks
When Chris Coyier asked me to look at the font loading behavior for the new redesign of CSS-Tricks, I’ll admit that I was excited. A new case study on a web site with an intimidating, exhaustive, encyclopedic amount of existing web development content!
fridayfrontend  webfonts  typography  performance  font-display 
july 2019 by spaceninja
When should you be using Web Workers? —
You should always use Web Workers. And in our current landscape of frameworks it’s virtually impossible. Did I get your attention with that? Good. Of course, as with any topic, there is nuance and I will lay that all out. But I have opinions, and they are important. Buckle up.
javascript  webworkers  performance 
june 2019 by spaceninja
Optimizing Google Fonts Performance
Google Fonts are easy to implement, but they can have a big impact on your page load times. Let’s explore how we can load them in the most optimal way.
fridayfrontend  cssbasics  performance  google  fonts  font-display 
june 2019 by spaceninja
How to Increase Your Page Size by 1,500% with webpack and Vue
You know, there are a lot of articles out there telling you how to make your page smaller: optimize your images, remove extraneous CSS rules, re-write the whole thing in Dreamweaver using framesets. What we don’t have are enough articles showing you how to increase your page size. In fact, the only article I could find was this one from the Geek Squad which ended up being about making the font size bigger. This is a good start, but I think we can do better.
fridayfrontend  webpack  bundlers  vue  bulma  css  sass  performance 
june 2019 by spaceninja
Self-Host Your Static Assets
One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin.
fridayfrontend  performance  security  hosting  myths 
june 2019 by spaceninja
Image Optimization In WordPress
Are you using many full-sized images on your WordPress site? Take note that this is causing your pages to load slowly. A slow website affects your SEO, increases the bounce rates, and keeps your audience at a distance. This article will help you learn how to easily optimize all the images on your site (manually or on autopilot) in order to gain better loading times.
fridayfrontend  performance  images  wordpress 
june 2019 by spaceninja
The CSS background-image property as an anti-pattern
The CSS back­ground-image prop­er­ty allowed us to do some amaz­ing things, but in most cas­es, it’s time to leave it behind.
fridayfrontend  css  cssbasics  backgrounds  images  performance  accessibility  responsive 
june 2019 by spaceninja
Your first performance budget with Lighthouse
I asked on Twitter the other day how many people had created and enforced a performance budget for a website they were working on. Not surprisingly, the vast majority of people hadn't. This is why I was really excited when, at Google I/O this year, the Lighthouse team announced support for performance budgets that can be integrated with Lighthouse. We can now define a simple performance budget in a JSON file, which will be tested as part of the lighthouse audit!
fridayfrontend  performance  performancebudget  automation  lighthouse 
june 2019 by spaceninja
Performance as User Experience by Aaron Gustafson
In this intensely practical 60-minute live presentation recorded at An Event Apart Denver 2017, Adaptive Web Design author Aaron Gustafson explores the ins and outs of page load performance by showing how he made the website of the 10K Apart meet its own contest rules—creating a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll finish watching the video with a better understanding of the page load process as well as numerous ways you can improve the projects you’re working on right now.
fridayfrontend  video  performance  ux  design 
june 2019 by spaceninja
Timing out
In some ways, the offline experience is relatively easy to handle. It’s a binary situation; either you’re online or you’re offline. What’s more challenging—and probably more common—is the situation that Jake calls Lie-Fi. That’s when technically you’ve got a network connection …but it’s a shitty connection, like one bar of mobile signal. In that situation, because there’s technically a connection, the user gets a slow frustrating experience. Whatever code you’ve got in your service worker for handling offline situations will never get triggered. When you’re handling fetch events inside a service worker, there’s no automatic time-out. But you can make one.
fridayfrontend  pwa  offline  timeout  serviceworkers  javascript  performance 
may 2019 by spaceninja
The intersection of accessibility and performance, by Eric Bailey
Accessibility is a holistic practice, essential to some but useful to all. It is a practice that touches on many aspects of good web design and development, especially performance. This talk will highlight opportunities and techniques to improve your website or web app's performance by embracing an accessible, inclusive mindset.
fridayfrontend  video  accessibility  performance 
may 2019 by spaceninja
Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading
Native lazy loading is coming to the web. Since it doesn’t depend on JavaScript, it will revolutionize the way we lazy load content today, making it easier for developers to lazy load images and iframes. But it’s not a feature we can polyfill, and it will take some time before it becomes usable across all browsers. In this article, you’ll learn how it works and how you can progressively replace your JavaScript-driven lazy loading with its native alternative, thanks to hybrid lazy loading.
fridayfrontend  javascript  html  lazyload  performance 
may 2019 by spaceninja
Why we focus on frontend performance
We’ve recently updated the Service Manual guidance to help developers across government identify and test performance issues before they become a problem for users.

It’s part of an ongoing effort to make sure GOV.UK is as inclusive as possible. Research by Google in 2016 found 53% of users abandoned a mobile site if it took more than 3 seconds to load. For government, GOV.UK is often the only place a user can get information. If the website were to perform badly, we become a single point of failure.
fridayfrontend  cssbasics  performance 
april 2019 by spaceninja
Preload, prefetch and other <link> tags: what they do and when to use them
One way to improve web performance is to preload content you’ll need later in advance. Prefetch a CSS file, prerender a full page, or resolve a domain ahead of time – and you won’t have to wait for it when it’s actually needed! Browsers have a simple built-in way to do all these things. There’re five `<link rel>` tags that instruct the browser to preload something. Here’s what they each of them does and when to use them.
fridayfrontend  performance  prefetch  preload  preconnect  dns-prefetch  prerender  html 
april 2019 by spaceninja
CSS for the next billion users, by Ire Aderinokun
There’s been a lot of talk lately about developing for the “next billion users”, which essentially means targeting users who are coming online for the first time in developing countries. This talk will be about different ways we can write CSS for the “next billion users”. I will talk about my experience developing websites for users in Nigeria and cover areas such as performance, accessibility, and progressive enhancement.
fridayfrontend  video  css  performance  accessibility  progressive  enhancement 
april 2019 by spaceninja
Native image lazy-loading for the web!
What if the browser could avoid loading these offscreen images for you? This would help content in the view-port load quicker, reduce overall network data usage and on lower-end devices, reduce memory usage. Well, I'm happy to share that this will soon be possible with the new loading attribute for images and iframes.
fridayfrontend  html  lazyload  loading  images  iframes  performance 
april 2019 by spaceninja
Animation Performance 101: Browser Under the Hood
Your ultimate guide to animation performance — starting from the ground up.
performance  animation 
april 2019 by spaceninja
Responsible JavaScript: Part I
By the numbers, JavaScript is a performance liability. If the trend persists, the median page will be shipping at least 400 KB of it before too long, and that’s merely what’s transferred. Like other text-based resources, JavaScript is almost always served compressed—but that might be the only thing we’re getting consistently right in its delivery.
fridayfrontend  javascript  performance 
march 2019 by spaceninja
Things nobody ever taught me about CSS
However, in the community, a lot of what we learn comes from knowledge sharing with peers and, as a result, I sometimes realise that there are essential things about CSS I’ve never been told before because other people never spent time trying to learn more. To try to fix this, I decided to do some personal research and put together a small list of concepts I think are interesting and useful to better understand and write CSS.
fridayfrontend  css  cssbasics  learning  performance  order 
march 2019 by spaceninja
Planning for Responsive Images
This article aims at affording simple yet effective guidelines for setting up responsive images and layouts in light of the many—and potentially confusing—options available. Do familiarize yourself with CSS grid, art direction, and resolution switching and you’ll be a ninja in short order. Keep practicing!
fridayfrontend  cssbasics  html  images  responsive  performance 
march 2019 by spaceninja
How we built the fastest conference website in the world
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 completely unreasonable amount of time trying to make it be the fastest conference website in the world. I’m also the creator of AMP, a web component library for making reliably fast websites, and this website is my playground to try out new techniques for future optimizations that I can apply to my day job. Also, fast websites have better conversion rates, which in our case means: sell more tickets.
fridayfrontend  performance  fonts  css  tachyons  atomic  pwa  serviceworkers  animation 
march 2019 by spaceninja
Improving Perceived Performance With the Link Rel=preconnect HTTP Header
The impact on the waterfall is pretty dramatic – Chrome starts establishing the connection as soon as it receives the initial chunk of the response for the page. This removes the connection overhead from the critical path for the image, and even though the request for the image still isn’t made until 900ms has elapsed, it completes at 1.2s, a whole 500ms improvement!
performance  preconnect  images 
march 2019 by spaceninja
The Carbon Dioxide in a Crowded Room Can Make You Dumber
When researchers from SUNY Upstate Medical University and the Lawrence Berkeley National Laboratory put 24 healthy young adults in an enclosed room and tested their decision-making ability at different levels of carbon dioxide concentration routinely experienced in crowded rooms, they found that the participants' performance declined significantly.
science  carbondioxide  air  quality  health  pollution  performance  meetings 
march 2019 by spaceninja
Cache-Control for Civilians
What does Cache-Control really do? In basic terms? Let’s find out!
cache-control  caching  performance  headers 
march 2019 by spaceninja
The State of JavaScript, with Addy Osmani
Rick speaks with Addy Osmani about the state of JavaScript. Addy is an Engineering Manager on the Google Chrome team, and he has been a web developer for 17 years. He has a deep understanding of JavaScript, as it is today and how it’s changed over the years, and he shares his insights in this episode of The State of the Web.
fridayfrontend  video  javascript  performance  lighthouse  ci  webpagetest  codesplitting  treeshaking 
march 2019 by spaceninja
A Bit of Performance
I was digging into some of the performance issues during my work for a few weeks, and I thought that it can be interesting to see how those could be applied to my site. I was already quite happy with how it performed (being just a small static site) but managed to find a few areas to improve.
fridayfrontend  cssbasics  performance 
march 2019 by spaceninja
Should I Use Source Maps in Production?
Shipping source maps to production is a nice middle ground. There's no hit on performance (source maps don't get loaded unless you have DevTools open, which is, IMO, irrelevant to a real performance discussion) with the benefit of delivering debugging and learning benefits.
fridayfrontend  css  cssbasics  javascript  performance  sourcemaps 
march 2019 by spaceninja
Tuning Performance for New and “Old” Friends
For performance reasons, we often configure our sites to deliver their code in slightly different ways for new and returning visitors. However, for subsequent visits to other pages on our site, many of the resources that pages require will already be in the browser’s cache, so we would not want to inline or push files unnecessarily. Recently, I learned that Service Workers might be a better tool for this job than cookies are.
fridayfrontend  performance  serviceworkers  caching  cookies  javascript 
march 2019 by spaceninja
Get Your Priorities Straight, by Heydon Pickering
We are not blessed with infinite resources, so when we make things for the web we have to decide what gets done and what doesn't. But what we choose to prioritize isn't always what deserves to be a priority. This talk explores the spurious thinking, the privileges and the prejudices, behind our faulty prioritizations and defends inclusive design as the ultimate priority when building interfaces.
fridayfrontend  video  accessibility  performance  inclusive  prioritization 
february 2019 by spaceninja
JavaScript Dominates Browser CPU
as browser CPU time grows the percentage used by JavaScript also increases. Ten years ago the network was the main bottleneck. Today, the main bottleneck is JavaScript.
javascript  performance 
february 2019 by spaceninja
Limiting JavaScript?
Yesterday there was a bit of a heated discussion around a WebKit issue that suggested putting a limit on the amount of JavaScript a website can load. In the issue, Craig Hockenberry makes the case that enforcing a limit on the amount of JavaScript would provide a sort of “meet me in the middle” solution for users currently using content blockers.
fridayfrontend  performance  javascript  browsers 
february 2019 by spaceninja
It’s My (Third) Party and I’ll Cry If I Want To, by Harry Roberts
Like it or not, a huge part of modern web development involves the use of third-party providers: fonts, analytics, ads, tracking, and more all have an impact of performance, and can leave us (or, more worryingly, our visitors) susceptible to performance degradation.

In this talk, we'll take a look at unruly or uninvited (third-)party guests: how to detect them, how to audit them, and how to manage them. We'll also look at the different tools available to help us stress-test and quantify the overhead these third parties bring, and what that means for users and businesses alike.
fridayfrontend  performance  video  javascript  analytics  devtools 
february 2019 by spaceninja
Using Lighthouse CI to set a performance budget
You’ve done hard work to get fast so let’s make sure you stay fast! Let’s automate performance testing with Lighthouse CI.
lighthouse  performance  ci  travis  accessibility  github 
january 2019 by spaceninja
An introduction to CSS Containment
Despite how simple is each of the items in this example, we’re getting a big improvement by using CSS Containment in layout time going down from ~4ms to ~0.04ms which is a huge difference. Imagine what would happen if the DOM tree has very complex structures and contents but only a small part of the page gets modified, if you can isolate that from the rest of the page you could get similar benefits.
fridayfrontend  css  contain  performance  layout 
january 2019 by spaceninja
Responsive Images Using SVG Instead of Srcset
In conclusion, if your images can be exported to SVG, use SVG instead, and save a ton of bandwidth and your users will thank you for it. Thanks for reading!
fridayfrontend  cssbasics  svg  images  performance  srcset  responsive 
january 2019 by spaceninja
The Ethics of Web Performance
One question I’ve seen posed a few times in the past several months is whether performance really is a moral or ethical concern, or if that’s all heavy-handed exaggeration. When you stop to consider all the implications of poor performance, it’s hard not to come to the conclusion that poor performance is an ethical issue.
fridayfrontend  performance  ethics 
january 2019 by spaceninja
Front-End Performance Checklist 2019
Let’s make 2019… fast! An annual front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences today. Updated since 2016.
fridayfrontend  accessibility  performance  checklist 
january 2019 by spaceninja
“The Joy of Optimizing Images” by Una Kravets
Images are by far the greatest bottleneck to performance on the web. What’s a web designer or developer to do? In this engaging talk recorded live at An Event Apart Denver 2017, Una Kravets surveys new image formats and dives deeply into image rendering and performance optimization techniques, demonstrating practical approaches to making your web projects noticeably faster.
fridayfrontend  video  images  performance 
january 2019 by spaceninja
Getting started with web performance: 2019 beginner’s guide
There are many very good articles out there on how to use new feature X or technique Y or tool Z to improve the performance of your websites. Navigating the labyrinth of modern web performance might be hard though if you’re new to the topic. In this article I will try to come up with a guide to getting started your performance journey.
fridayfrontend  cssbasics  performance 
december 2018 by spaceninja
Minimal Google Analytics Snippet
A simple snippet for tracking page views on your website without having to add external libraries. Also works for single page applications made with the likes of react and vue.js.
google  analytics  minimum  javascript  performance 
december 2018 by spaceninja
SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.
svg  optimization  performance  tools  quickreference 
december 2018 by spaceninja
JavaScript growth and third parties
JavaScript is the main cause for making websites slow. Ten years ago it was network bottlenecks, but the growth of JavaScript has outpaced network and CPU improvements on today's devices. In the chart below, based on an analysis from the HTTP Archive, we see the number of requests has increased for both first and third party JavaScript since 2011.
javascript  performance 
december 2018 by spaceninja
Progressive Web Apps: The Case for PWAs
In this excerpt from Progressive Web Apps, Jason Grigsby covers the business case for going PWA.
fridayfrontend  performance  pwa 
december 2018 by spaceninja
Should I Use JavaScript to Load My Web Fonts?
As you can see, the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s performance profile to suit a user’s network conditions, user preferences, improving the general loading behavior of self hosted fonts and third party hosting providers.
fridayfrontend  javascript  webfonts  typography  performance  css 
december 2018 by spaceninja
Front-End Developers Have to Manage the Loading Experience
Web performance is a huge complicated topic. There are metrics like total requests, page weight, time to glass, time to interactive, first input delay, etc. There are things to think about like asynchronous requests, render blocking, and priority downloading. We often talk about performance budgets and performance culture. Front-end developers already have a ton of stuff we're responsible for regarding performance. We now have another major concern: handling the loading experience.
fridayfrontend  javascript  css  performance  loaders  spinners 
december 2018 by spaceninja
It’s not about the device.
"Is anyone actually going to use the browser on a watch, though?" Sometimes the question’s asked sincerely; more often than not, it seems to be asked skeptically. (And perhaps a little derisively.) But each time I share a link to an article about browsing on the Watch, it’s always, always asked.
fridayfrontend  images  applewatch  ios  accessibility  performance  responsive 
december 2018 by spaceninja
« earlier      
per page:    204080120160

related tags

5g  60fps  accessibility  actions  adblockers  adobe  ads  advertising  advice  air  ajax  amazon  amp  analytics  animation  antipatterns  applewatch  apps  architecture  aria  async  atomic  attributes  audits  automation  babel  backgrounds  bem  bestpractices  bloat  blocks  blur  bookmarklets  books  border-image  box-shadow  box-sizing  breakpoints  broadband  browser  browsers  bullshit  bulma  bundlers  cache-control  caching  carbondioxide  casestudies  casper  charts  checklist  chrome  ci  clienthints  code  codeofconduct  codesplitting  complexity  components  compositing  compression  contain  cookies  critical  css  css-in-js  cssbasics  cssom  culture  customproperties  data  data-url  date  dead  debounce  debugging  defer  design  designsystem  development  devops  devtools  discrimination  diversity  dns-prefetch  dom  dropdown  drupal  efficiency  enhancement  environmental  ethics  extends  facebook  falsehoods  features  feminism  flexbox  flip  foft  foit  font-display  fontawesome  fonts  fout  frameworks  fridayfrontend  frontend  functional  functions  gestures  github  google  gpu  gradients  grids  grunt  gzip  haml  harryroberts  headers  health  heroimages  hints  hosting  howto  html  http2  https  icons  idle  ie  iframes  illustrator  images  import  inception  inclusive  inheritance  inline  intersection-observer  intrinsic  ios  itcss  javascript  jenkins  jpg  jpl  jquery  layout  lazyload  learning  less  library  ligatures  lighthouse  linkedin  lint  loaders  loading  localoverrides  lqip  maintainability  malware  mediaqueries  meetings  megamenu  memory  metrics  minimum  mixins  mobile  modular  moment  myths  nasa  nesting  netflix  normalize  noscript  notifications  offline  onboarding  opacity  optimization  optimizelegibility  order  pagespeed  parallax  patterns  performance  performancebudget  phantom  photoshop  picture  placeholders  plugins  pollution  polyfills  popups  porn  pornhub  pornography  position  preconnect  prefetch  preload  preprocessors  prerender  presentation  priorities  prioritization  priority  privacy  privilege  process  profile  progressive  pwa  qa  quality  quickreference  racism  react  reactgate  redlining  refactoring  reference  reflow  regression  reliability  repaint  reports  reset  responsive  retina  rotation  rwd  sass  save-data  scale  science  scm  security  selectors  semantics  sequential  serviceworkers  sexism  sharing  sizes  skeleton  slides  social  sourcecode  sourcemaps  speed  speedindex  spinners  sprites  srcset  standards  statistics  stats  styleguide  support  sustainability  svg  svgo  system  tachyons  testing  text-rendering  themes  throttle  throttling  time  timelines  timeout  tools  touch  trackers  transforms  transitions  travis  treeshaking  triggers  troubleshooting  ttfb  twitter  typography  unused  urgent  ux  variables  video  visualization  vue  waterfall  webfonts  webpack  webpagetest  webworkers  will-change  wordpress  workflow  wraith  youdontneed  youmightnotneed  youtube 

Copy this bookmark: