recentpopularlog in

piperh : load   61

Native lazy-loading for the web  |  web.dev
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
webdesign  web  design  webdev  development  speed  performance  image  img  lazy  load  loading  css  lazyload 
15 days ago by piperh
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
about splitting css loading and how to load css asynchronously. I think not worth implementing unless css is very large overall
webdesign  web  design  webdev  css  load  loading  asynchronous  performance 
29 days ago by piperh
AddyOsmani.com - Native image lazy-loading for the web!
look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web.
Is it css or an image attribute?
webdesign  web  design  image  img  lazy  load  lazy-load  lazyload  css  loading  attribute 
april 2019 by piperh
Making Google Fonts Faster⚡ – Clio + Calliope – Medium
explains some steps worth considering for loading google fonts faster and/or with more control
webdesign  web  design  font  webfont  google  speed  load  loading  time  self-host  cdn  performance  webdev 
march 2019 by piperh
The Complete Guide to Lazy Loading Images | CSS-Tricks
Various methods for implementing lazy - js, intersection observer API. Some resource links at end
webdesign  web  design  images  lazy  load  loading  speed  performance  js  javascript  script  api 
october 2018 by piperh
✅ UX Animation Principles: Duration | @keyframers 1.22.1
possibly useful code for stepped fade-ins of divs, a la typical app behaviour, via css keyframes
webdesign  web  design  keyframe  animation  animate  fadein  fade  load  enter  css  duration  time 
october 2018 by piperh
GitHub - Paul-Browne/lazyestload.js: load images only when they are in (and remain in) the viewport
load images only when they are in the viewport or 100px beneath. There's also a version that waits until user has stopped scrolling
lazyload  lazy  images  js  javascript  load  speed  performance  scroll  viewport 
october 2018 by piperh
The Font Loading Checklist—zachleat.com
distilled view of loading strategies for web fonts, primarily for speed.
A 4-point checklist
webdesign  web  design  font  load  loading  speed  checklist  performance  webfont  foit  fout  @font-face 
september 2018 by piperh
Five Techniques to Lazy Load Images for Website Performance — SitePoint
Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport.
webdesign  web  design  image  photo  lazyload  lazy  load  ux  optimise  optimisation  performance  speed 
may 2018 by piperh
Peekaboo
they say: Fires a one-time event whenever elements of your choice are about to scroll into the viewport. Perfect for triggering animations or for just-in-time asset loading
webdesign  web  design  js  javascript  script  scroll  viewport  animation  jit  load  loading  just-in-time  lazy  window 
april 2018 by piperh
Loading Third-Party JavaScript  |  Web Fundamentals  |  Google Developers
developers.google article about loading 3rd party js.
examples: social sharing buttons, video embeds, ad iframes, analytics, a/b testing scripts, helper libraries
webdesign  web  design  js  javascript  script  external  load  security  performance  privacy  tracking 
march 2018 by piperh
How to Build Your Own Progressive Image Loader — SitePoint
a css html js technique for progressive image loading - to show a lo-res placeholder first before full image loads
webdesign  web  design  progressive  image  loading  load  placeholder  lo-res 
january 2018 by piperh
Lazy Load Images
a technique for lazy loading blurry lo-res images before the hi-res are loaded
webdesign  web  design  lazy  load  loading  speed  performance  image 
january 2018 by piperh
The "Blur Up" Technique for Loading Background Images | CSS-Tricks
article describing a technique to show first a blurry bg image while whole final image loads. Makes perceived loading time faster. Could be useful for page with large bg image
webdesign  web  design  image  load  loading  blur  blurred  technique  background  bg  performance 
january 2018 by piperh
The ”blur-up” technique
a codepen demo of a loading technique for bg images. See blurred image before final
webdesign  web  design  image  load  loading  blur  technique  codepen  blurred 
january 2018 by piperh
CodePen - Image loading effects [background-size: 0, :before, :after]
Michal Niewitala says: Image loading effects [background-size: 0, :before, :after]
webdesign  web  design  effect  image  background  load  loading 
december 2017 by piperh
Lazy loading with inline SVG
idea for lazy loading: use svg outlines of images that show before the whole photographic image has loaded. Possibly, maybe useful in some circumstance though it's a lot of work just for a few miliseconds of user benefit
webdesign  web  design  lazy  loading  load  image  svg 
october 2017 by piperh
Performance Calendar » Loading web fonts asynchronously
nerdy article showing how to provide system fonts fallback for webfonts. Avoids the Flash of Invisible Text on browsers that show nothing until webfont has loaded (Explorer and Edge automatically show a system font first)
webdesign  web  design  webfont  load  loading  asynchronous  foic  fouc  fallback  font  performance 
january 2017 by piperh
GitHub - typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. ... is able to load fonts from Google, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.
webdesign  web  design  font  load  loading  speed  performance  google  typekit  host  self-host 
december 2016 by piperh
text-spinners – tawian
code for applying rather retro loading animations (spinners, he calls them)
webdesign  web  design  spinner  load  loading  indicator  animation  animated  css  html  motion 
october 2016 by piperh
font-display for the Masses | CSS-Tricks
article about new css feature "font-display", conceived to deal with FOIC. But also has incidental handy explanation of js "Font Face Observer" and link to stuff about "Font Loading API"
webdesign  web  design  css  font  @font-face  font-display  code  coding  typography  webfont  performance  foic  fouc  load  loading  browser  face 
august 2016 by piperh
FOUT, FOIT, FOFT | CSS-Tricks
explanation and a few comments about fout, foit and foft, and font loading
webdesign  web  design  font  fout  foft  foit  performance  load  speed  @font-face  webfont  type  face  typeface 
july 2016 by piperh
A Comprehensive Guide to Font Loading Strategies—zachleat.com
thorough article describing different strategies for using web fonts, depending what you think the site situation is
webdesign  web  design  webfont  font  load  speed  performance  @font-face  typography  display  fout  foit 
july 2016 by piperh
Picturefill
polyfill to make picture element work in all browsers
webdesign  web  design  script  js  javascript  html5  html  polyfill  picturefill  picture  element  css  image  load  lazy  lazyloading  responsive  img  srcset  attribute  1x  2x  3x 
july 2016 by piperh
Lazy-Loading Images: How Not to Really Annoy Your Users
tutorial about setting up lazy loading. A jQuery method and a vanilla method using 'Blazy'.
webdesign  web  design  lazy  loading  load  image  speed  performance  optimise  optimisation  js  javascript  jquery 
july 2016 by piperh
The Web Fonts: Preloaded—zachleat.com
suggestions and howto about preloading fonts
webdesign  web  design  font  preload  speed  fouc  fout  foit  render  load  code  webdev 
april 2016 by piperh
Lazy Loading Images on the Web -Telerik Developer Network
roundup of a few lazy loading options, some with jQuery, some vanilla, but all look fairly easy to implement
webdesign  web  design  image  lazy  loading  size  time  weight  page  webpage  load  javascript  jquery  vanilla  howto  comparison 
october 2015 by piperh
Lazyload - a fast, lightweight and flexible script for loading images when they enter the viewport
vanilla js version of lazyload. Looks v interesting - could be good for Tria mobile pages with lots of images. Supports 'srcset'. Takes advantage of progressive jpeg. 12k and 5k minified.
webdesign  web  design  lazyload  js  javascript  image  loading  webdev  speed  load  mobile  viewport  scroll  srcset 
august 2015 by piperh
Is jQuery Too Big For Mobile? | Flippin' Awesome
article about load times for jquery on mobiles. Inconclusive though makes me think jquery is OK. At least, better than the checkbox hack.
jquery  js  mobile  javascript  performance  rtt  speed  load  time  responsive  rwd  webdesign  web  design  latency  http  request 
may 2014 by piperh

Copy this bookmark:





to read