recentpopularlog in

piperh : performance   96

« earlier  
Make your Google Fonts render faster · PerfPerfPerf
a script for immediate display - in fallback font - when you use google fonts, instead of foit
webdesign  web  design  font  google  webfont  foit  display  fallback  performance 
7 weeks ago 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 
10 weeks ago by piperh
instant.page
js that triggers preload of the html of a linked page when you hover the link. Seems dubious to me, but what do I know?
webdesign  web  design  webdev  development  js  javascript  script  speed  performance  instant  page  preload  preloading  html  hover  click 
11 weeks ago by piperh
LazyLoad (vanilla-lazyload) | LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images.
they say: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images
webdesign  web  design  js  javascript  script  lazyload  image  speed  performance 
december 2018 by piperh
CSS and Network Performance – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
techy article about structuring css to allow async drawing of page. Looks like a lot of bother for low-priority return in my case
webdesign  web  design  webdev  development  css  speed  performance  dom  cssom  render  critical 
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
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 Low Hanging Fruit of Web Performance - The Media Temple Blog
tips for performance improvements. Worth reading right through. Resources at end of article.
webdesign  web  design  performance  speed  optimisation  cacheing  caching  optimising 
october 2018 by piperh
Measure Performance with the RAIL Model  |  Web Fundamentals  |  Google Developers
they say: RAIL is a user-centric performance model that breaks down the user's experience into key actions.
It's a Google thing
webdesign  web  design  performance  speed  rail  ux  user  experience 
september 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
GitHub - RevillWeb/img-2: Replace <img /> elements with <img-2> to automatically pre-cache images and improve page performance.
they say: Img2 will automatically:
• Only render initial images which are visible to the user
• Pre-cache all other images off the main thread with a Web Worker
• Lazy load images as they enter the user's viewport instantly from the cache
• Display a blurred preview image while the user waits for initial images
webdesign  web  design  img  performance  speed  optimise  pre-load  cache  images  js  javascript  script 
july 2018 by piperh
What Are Service Workers and How They Help Improve Performance
they say: Service workers allow developers to manage resource caching more efficiently so that users don’t experience interruptions even if they disconnect from the internet. This guide will explain how a service worker can propel your web app’s performance to new heights.
webdesign  web  design  webdev  service  worker  performance  speed  pwa 
july 2018 by piperh
Performance Auditing: A Firefox Developer Tools Deep Dive — SitePoint
they say: we’ll cover Firefox Web Developer Tools (“DevTools”) — a set of tools designed to help developers inspect, debug, profile and optimize the performance of websites and web applications.
webdesign  web  design  performance  audit  auditing  speed  firefox  tools  developer  optimise 
july 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
15+ Experts Share Their Web Performance Advice for 2018
v useful performance advice on current best practice and dealing with legacy site structure
webdesign  web  design  performance  advice  tips  2018  speed  webdev  ux 
june 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
Hey hey `font-display` | CSS-Tricks
a quick look at css font-display properties and what they do, with some handy deeper resource links
webdesign  web  design  font  display  fout  foit  font-face  performance  speed  font-display 
may 2018 by piperh
GitHub - denar90/sloth: Sloth - an extension to make you suffer, browsing the web.
Chrome extension to throttle web connection for testing - see how ux is for slow connections
webdesign  web  design  webdev  speed  slow  throttle  throttling  chrome  extension  performance 
march 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
gifski — highest-quality GIF converter
converts video frames to gif. Author says: This is a GIF. It's hugely inefficient like any GIF, but now at least looks fine!
webdesign  web  design  video  motion  animation  animate  gif  performance  image  animated 
march 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
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
Latency | Apex Software
Global latency testing tool. Gives results from various cities worldwide. Handy for testing server location I suppose.
webdesign  web  design  webdev  performance  speed  latency  global  worldwide  network  test  ping 
september 2017 by piperh
Remove Unused CSS Rules – Falkus.co
only decent tip seemed to be to use 'Web page performance' in Chrome dev tools, then look for 'Remove unused CSS rules'
webdesign  web  design  webdev  developemtn  code  coding  css  rules  used  unused  remove  performance  chrome  developer  tools  audits 
september 2017 by piperh
Serving Static Content from a Cookieless Domain - Ravelrumba by Rob Flaherty
Article found after using pingdom and when searching for “Serve static content from a cookieless domain". Clear explanation of what it is. Article is 7 years old
webdesign  web  design  development  server  http  cookieless  domain  cname  static  content  serve  optimization  performance 
april 2017 by piperh
Building performant expand & collapse animations  |  Web  |  Google Developers
google article about performant and non-performant techniques for expand and collapse (eg, on Menu panels)
webdesign  web  design  expand  contract  animate  animation  effect  css  performant  transform  collapse  performance 
march 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
Front-End Performance Checklist 2017 (PDF, Apple Pages) – Smashing Magazine
not all relevant for me but good links to pshop webp plugins and articles about cacheing and a few other bits. Some points are seriously geeky and require a lot of other reading to understand, but the time might be well spent if you're working on a heavy complicated site.
webdesign  web  design  performance  speed  cache  cacheing  webp  development  checklist  list 
december 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
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
Website Grader
online grading tool for website performance giving results on different aspects like http requests, speed etc. Looks a bit schoolboyish but there may be some useful tips
webdesign  web  design  webdev  performance  analysis  grade  grading  website  development  seo  speed 
july 2016 by piperh
Patrick Sexton - Google+
geezer writes about web performance and speed issues
webdesign  web  design  speed  performance  google  mobile 
may 2016 by piperh
WDRL – Web Development Reading List | The Evergreen List
Anselm Hannemann who sends weekly newsletter, maintains web lists of resources
webdesign  web  design  resources  lists  links  tools  html  css  javascript  performance  security  svg  accessibility 
april 2016 by piperh
SVGOMG - SVGO's Missing GUI
Optimises svg files and code. After you upload an image you can see all the optimisation options.
Author says: based on SVGO and given a GUI.
webdesign  web  design  svg  cleanup  optimise  code  online  tool  performance  vector  image 
march 2016 by piperh
Boost Your CSS Animation Performance with the Repaintless.css Library | Lunar Logic Blog
short article explaining how to use economical css transforms that don't require the browser to repaint the whole layout. Gives faster frame rates and smoother-looking animation
webdesign  web  design  css  animation  transform  repaint  repaintless  performance 
march 2016 by piperh
Accelerated Mobile Pages Project
google's pages about AMP. It's for me, yet (6.3.16). Maybe in the future
webdesign  web  design  amp  google  about  code  css  html  coding  accelerated  mobile  pages  howto  tutorial  example  speed  performance 
march 2016 by piperh
Getting Ready For HTTP/2: A Guide For Web Designers And Developers – Smashing Magazine
article by Rachel Andrew about getting ready for http2. She says to set up https on your sites
webdesign  web  design  http2  performance  http  https  protocol  webdev 
february 2016 by piperh
How to animate "box-shadow" with silky smooth performance | Tobias Ahlin
a tip about smoother animation performance using opacity instead of css animation
webdesign  web  design  css  tips  performance  animation  transforem  opacity  box-shadow 
november 2015 by piperh
HTTP caching | Web Fundamentals - Google Developers
google developer page about http and cacheing. Page is returned in Spanish in Firefox but in English in Safari
http  cache  caching  header  request  performance  browser  google  webdev 
october 2015 by piperh
YSlow - Official Open Source Project Website
yahoo page about page speed, with advice and reference and browser plugins to test speed
webdesign  web  design  addon  extension  speed  webpage  website  measure  performance  size  yahoo  browser  recommendations  suggestions 
june 2015 by piperh
Compressive Images | Filament Group, Inc., Boston, MA
the article where I read about using responsive images quite large but with heavy compression
image  size  compression  webdesign  web  design  quality  img  performance 
april 2015 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read