I've been working on a project where I want to convey the idea of pages spread out on a table or post-it notes pasted randomly against a wall or another surface. It took me a while to reason through it but I ended happy with the result. It also shows the interaction between stylesheets and inline styles generated with JavaScript. The HTML for the project is fairly simple. It doesn't matter what's inside the story elements... for the purpose of the movement we only care about the story elements. html The first block of CSS provides styles for the container,...
Lazy loading allows you to delay loading images until the user actually scrolls the page to where the image or video is visible to the user. This post will describe why lazy loading is important, one way to lazy load images and videos and alternatives for browsers that don't support intersection observers. > This is a more polished version of Intersection Observers: Making it easier to lazy load contenthttps://publishing-project.rivendellweb.net/intersection-observers-making-it-easier-to-lazy-load-content/ Why is lazyloading important Images are the largest part of a web page, whether site or app. The median number of images requested per page, according to the HTTP Archive is...
I posted this as an answer to this questionhttps://www.quora.com/What-are-the-best-practices-for-optimizing-resources-JavaScript-CSS-images-used-by-an-HTML-page/ in Quora and I thought I would post it here and expand on it a little bit with things I thought about after I wrote the answer. This is not an exhaustive list of performance best practices. It's what I use and how I use them. You may have others and some of these may not apply to you. I'd love to hear what works for you... you can contact me via Twitter elrond25https://twitter.com/elrond25. The question: What are the best practices for optimizing resources JavaScript, CSS, images used by an HTML...
When working with Javascript we can add default values to our function parameters so they will work if we forget to pass them when declaring the function. In this post, we'll discuss why we should and how to give default values to our function parameters. Why give defaults to function parameters The simplest reason, for me, is that I tend to forget to do so when using the function I just declared. Take the function below that, in theory, should just fetch the file at the given URL and display it inside the body of the page js async function...
Most of the time, starting a Node project involves a lot of typing, copying and pasting and typing data into your repository. This post lists some ways to automate the process in the command line and via scripts. Thanks to Phil Nashhttps://twitter.com/philnash and Tienery Cyrenhttps://twitter.com/bitandbang for the information. : How to start any new Node.js project:$ npx license mit > LICENSE$ npx gitignore node$ npx covgen YOUREMAILADDRESS$ npm init -yYou're ready to start coding.— Tierney Cyren @bitandbang January 7, 2019 npx license mit uses the license packagehttps://www.npmjs.com/package/license to download a license of your choice for the project, in this case,...
Because of their size fonts tend to be some of the largest components of any web pages. According to the HTTP Archive, the sum of the transfer size of all fonts eot, ttf, woff, woff2, or otf requested by the page is 98KB for Desktop and 83.4KB for mobile. There are several CSS and Javascript techniques to help browsers control and speed up font display and how it swaps when the web font is loaded. The idea is to load the page as quickly as possible using fallback fonts and then swap the web font in when it's ready. Use...
If you're using a third party font service like Google Fonts or Typekit you should work on mitigating potential latency. Say you have a typical Google Font embed code in your <head>. You could minimize the amount of time it takes to connect with that server using the preconnecthttps://w3c.github.io/resource-hints/preconnect resource hint. These hints will not load the resource but will do a DNS lookup for the host, TCP handshake, and optional TLS negotiation, all before the resource is actually requested. html A more widely compatible alternative to preconnect is dns-prefetch. It won’t establish a connection to the server, but it...
Serve through a Specialized CDN Serving content through a CDN has always been a key to improve performance. The edge servers are in diverse geographical locations and they will route users to the closest server to their location. Serving fonts through a CDN is no different. Sites like Adobe Fontshttps://fonts.adobe.com/ formally known as Typekit and Google Fontshttps://fonts.google.com/ provide a faster experience downloading the fonts to your devices. Combine the CDN service with preconnect or dns-fetch resource hints for an even faster experience. Cache fonts using a service worker Most of the time when we hear about Service Workers we hear...
Glyphhangerhttps://github.com/filamentgroup/glyphhanger is a Node application that will help you reduce the size of your fonts by subsetting them. There are times when we use just a few characters from a given font. For example, if we use a font just for headings there are many characters that you will not use, a subset will get rid of these unnecessary characters making the fonts smaller and providing a faster download. Another example is when the font supports multiple languages that you know you won't need for your project like Cyrillic when you know you will be working with English, Spanish, and...
Talking about web font performance is more than just talking about adding the fonts to a page using @font-face. That's just the beginning of our quest for performant fonts. Because of their size fonts tend to be some of the largest components of any web pages. According to the HTTP Archive, the median of requested fonts is 98KB for Desktop and 83.4KB for mobile. !Comparison of median font sizes from 2010 to todayhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/font-bytes Making our fonts performant is particularly important when working with large variable fonts; Roboto VFhttps://github.com/TypeNetwork/Roboto is 976KB when compressed with WOFF2 and, if not cached, can significantly...
