recentpopularlog in

piperh : loading   58

CSSWAND
a few button transformations with quick code copy. Nothing unusual here but could be handy for speed. Some hover transitions and a few loading spinners
webdesign  web  design  button  hover  loading  snippets  css  gallery  animation  code  copy 
7 days ago by piperh
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
Pure CSS Loader - Optimized Spinners for Web · Loading.io
they say: Pure CSS Loaders. Open sourced css loading animations dedicated for speed, simplicity and dev-friendly. 1KB per icon before minimized.
webdesign  web  design  css  spinner  loader  spinning  loading  css-only 
february 2019 by piperh
Should I Use JavaScript to Load My Web Fonts? | Filament Group, Inc., Boston, MA
dec 2018 article comparing current font loading with css-only and with js. Seems like css only is good but js can enhance it a bit.
webdesign  web  design  font  loading  js  javascript  script  css  foit  fout  webfont 
december 2018 by piperh
UI Movement - The best UI design inspiration, every day
UI effects, free. Interesting page loading effects and loads of other components and layouts
webdesign  web  design  ux  ui  inspiration  code  loading  effects  page  animations 
november 2018 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
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
Assessing Loading Performance in Real Life with Navigation and Resource Timing  |  Web Fundamentals  |  Google Developers
Google developers article about using 2 APIs to assess RUM (Real User Monitoring) - they say better than measuring synthetic performance. If I could understand it, probably useful for improving speed
webdesign  web  design  webdev  performance  speed  loading  api  rum  navigation  timing  resource  testing 
july 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
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
Font-display playground
about css 'font-display' attribute, to use with @font-face. Describes the values and their effect.
webdesign  web  design  font  display  css  loading  strategy  fallback  block  performance  speed  delay  @font-face 
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
Lozad.js | lozad.js
they say: Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
webdesign  web  design  js  javascript  script  lazy  loading  image  element 
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
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
Typography Handbook
They say: "A concise, referential guide on best web typographic practices". Has diff subject heads with a paragraph or two for each. Lots of it is elementary but contains good resource links.
webdesign  web  design  typography  reference  resource  usage  webfont  @font-face  loading  fout 
june 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

Copy this bookmark:





to read