#performance (330 links)
- How to use SVG as a Placeholder, and Other Image Loading Techniques medium.freecodecamp.org
Generating SVGs from images can be used for placeholders. Keep reading! I’m passionate about image performance optimisation and making images load fast on the…
- Resource Hints w3c.github.io
This specification defines the , , , and relationships of the HTML Link Element (``). These primitives enable the developer, and the server generating or…
- Web Performance & Security: how to master Third Party Content impacts | DareBoost Blog blog.dareboost.com · Archived on
Third-party content are parasites. Friendly ones, with – most of the time – good intentions. But parasites anyway. Let’s discover some useful tips and…
- The Front-End Performance Challenge: Make Your Site Blazingly Fast And Win Some Smashing Prizes – Smashing Magazine smashingmagazine.com
Not too long ago, front-end performance was a mere afterthought. Something that was postponed to the end of a project and that didn’t go much beyond…
Managing Font Loading CSS Was Painful—Not Anymore 01 November 2017 Read in about 1 minute One of the most painful pieces of maintaining a web font loading…
A Bone to Pick with Skeleton Screens , Senior User Experience Designer , and User Experience Designer Article Categories: #Design & Content , #User Experience ,…
*TL;DR*: performance budgets are an essential but under-appreciated part of product success and team health. Most partners we work with are not aware of the…
- Lazy loading with inline SVG codepen.io
A Pen By 18,449 Lazy loading with inline SVGs. Using inline SVGs to create lightweight thumbnails that creates a better before experience compared to blurred…
- Rebuilding slack.com – Several People Are Coding slack.engineering
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
Introducing Treo ! A cloud infrastructure for Lighthouse that provides end-to-end testing, geographical regions, scalable API, and integrations with Github &…
- summary_large_image images.guide
We should all be automating our image compression. In 2017, image optimization should be automated. It's easy to forget, best practices change, and content that…
- Introducing Cloudflare Workers: Run Javascript Service Workers at the Edge blog.cloudflare.com
TL;DR: You'll soon be able to deploy Javascript to Cloudflare's edge, written against an API similar to Service Workers. Try writing a Worker in the playground…
- Performance Budget gist.github.com
Front-end Performance The Case for FED Performance Optimisation A fast website is essential for a good user experience (UX), conversion and findability.…
HTTP/1 vs HTTP/2 by LoadImpact Loadimpact gathers all resources from your URL, fetches those resources from their own server using HTTP/2 and give you some neat…
- Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS vuejsdevelopers.com
“Eliminate render-blocking JavaScript and CSS” . It’s the one Google Page Speed Insights suggestion that I always get stuck with. When a web page is accessed,…
- The Critical Request | CSS-Tricks css-tricks.com
Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready.…
- Code github.com
GitHub - siddharthkp/bundlesize: Keep your bundle size in check Code Issues 9 Pull requests 1 Pulse Keep your bundle size in check Latest commit by Sedighian 33…
- Building m.uber: Engineering a High-Performance Web App for the Global Market eng.uber.com · Archived on
As Uber expands to new markets, we want to enable all users to quickly request a ride, regardless of location, network speed, and device. With this in mind, we…
- lightcrawler npmjs.com
Crawl a website and run it through Google lighthouse npm install --save lightcrawlerlightcrawler --url https://atom.io/ --config lightcrawler-config.json where…
- Lighthouse CI github.com
This repo contains the frontend and backend for the Lighthouse CI server. Auditing Github Pull Requests Please note: This drop in service is considered Beta .…
- Modern DevTools - A video based web performance course moderndevtools.com
Modern DevTools A video based course to develop, debug & performance audit your websites. Level-up your web development skills and create blazing fast…
- WebAssembly cut Figma’s load time by 3x – Figma Design blog.figma.com
WebAssembly was just released this past March but has already generated a lot of excitement in the web community. It’s a new binary format for machine code that…
- https://traintimes.org.uk/notes/performance traintimes.org.uk
- Combining fonts jakearchibald.com
Posted 28 April 2017 I love the font Just Another Hand , I use it a lot in diagrams during my talks: Here it is! Yay! The thing is, I don't like the positioning…
- Implementing system fonts on Booking.com — A lesson learned. booking.design
Inspired by the recent work that Github and Medium have done to improve their fonts and thus the reading experience on their sites, we at Booking.com got to…
- How we assemble web pages at BBC News | Wildly Inaccurate wildlyinaccurate.com
This post is about the Web Application Framework in use by some teams at the BBC. It is not strictly a framework in that it specifies the contracts between…
- Introducing a faster BBC News front page | Wildly Inaccurate wildlyinaccurate.com
Web performance is something I care deeply about both as a developer whose work affects millions of people around the world, and as a user who often accesses…
Twitter Lite and High Performance React Progressive Web Apps at Scale A look into removing common and uncommon performance bottlenecks in one of the worlds…
Designing for the Appearance of Speed T he jury has spoken: performance, conversion, and brand engagement are inextricably connected. Amazon has shown that each…
- Google reduces JPEG file size by 35% arstechnica.co.uk
Enlarge / This image has not been run through Google's new JPEG encoder. But that doesn't make it any less magical. Harry Langdon/Getty Images Share this story…
Thursday, 16 March 2017 The State of Browser Caching, Revisited Filed under: HTTP Caching A long, long time ago, I wrote some tests using XmlHttpRequest to…
- World Wide Web, Not Wealthy Western Web (Part 1) – Smashing Magazine smashingmagazine.com
“There are more things in heaven and earth, Horatio, than are dreamt of in your philosophy,” said Shakespeare’s Hamlet, in the famous scene in which Hamlet…
- Accessibility and Performance marcysutton.com
- Using Immutable Caching To Speed Up The Web hacks.mozilla.org
When Firefox 49 shipped it contained the Cache-Control: Immutable feature to allow websites to hint which HTTP resources would never change. At almost the same…
- The technology behind preview photos code.facebook.com
First impressions matter, whether you're on a first date, in a job interview, or just choosing new decorations for your house. Some of the first things you see…
- Dominant Colors for Lazy-Loading Images manu.ninja
Pinterest, Google Images and lots of image-heavy sites lazy-load their content. They also calculate the dominant color of each image to use as a placeholder.…
Dean Hume 15 Dec ember 2016 Published in Code Being a web developer today is exciting! The web has come a long way since its early days and there are so many…
- Google's AMP is a gilded cage shkspr.mobi
AMP is Google's attempt to re-fight the transcoding wars of the early 2000s . It is actively dangerous to the web ecosystem, helps disseminate propaganda , and…
- webpack-bundle-analyzer npmjs.com
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap Webpack plugin and CLI utility that represents bundle…
phantom underlines . isn't this amaaaaaazing. i love waiting for 8 seconds and seeing this. look at it. srsly. looooook at it. I spent a week traveling around…
- Optimizing Webpack for Faster React Builds · InVision Engineering Blog engineering.invisionapp.com · Archived on
- Request Map Generator requestmap.webperf.tools
Submit a URL to generate a node map of all of the requests on the page. Rapidly identify what third-parties are on your site, where your transmitted bytes are…
Part 2 of a new series walking through tips for shipping mobile web apps optimized using Lighthouse. This issue, we’ll be looking at page load performance.…
- SpeedCurve | PWA Performance speedcurve.com
PWA Performance Progressive Web Apps (PWAs) combine the best and newest features of the Web to deliver an experience that rivals native applications on mobile.…
- Intervening against document.write() | Web Updates - Google Developers developers.google.com
- `font-display` for the Masses | CSS-Tricks css-tricks.com
The following is a guest post by Jeremy Wagner , a web developer, author, and speaker living in the Twin Cities. He's got a new book on web performance . Here…
- The cost of small modules nolanlawson.com
The now–finalized HTTP/2 specification has rightfully garnered a lot of interest from the web performance community. The new protocol is aimed at addressing…