Convincing an organization that performance matters and is worth investing in is often a tough thing to sell. This was no different at Intuit, who operated many sites built in the pre “web standards” era. Then, one day, one test changed everything – an A/B comparison successfully demonstrated that faster page loads increased conversion and SEO. And the conversation quickly changed from “Not interested” to “How quickly can you make the rest of our pages faster?”
A performance team was formed, and optimization began across multiple properties in a phased approach with each release delivering incremental performance gains. As we iterated through the core performance principles, the team introduced additional techniques that led us to exceed our original performance goals. Techniques such as lazyloading, prefetching, smarter image optimization/spriting, and module rewrites enabled us to successfully shave off additional time.
This session will cover the steps that we took, lessons learned including what worked well or didn’t work well, as well as the performance improvements that were realized, and their impact on business metrics. Some of the topics include:
* How we went from 15s web pages to 2s web pages
* How combining CSS/JS files and image sprites had both positive as well as negative impact
* How lazy loading of resources and JavaScript rewrites improved our page render times (including our experiments with Control.js)
* How we addressed blocking as well as high-latency third-party components
* How we solved for issues/constraints arising from shared code across multiple sites
* How we optimized for user flows spanning multiple pages with positive results
* How automated benchmarking enabled us to continuously monitor our performance health
* How we succeeded in making “performance” a common theme among developers, marketers, and stakeholders
James D Bloom is a mobile web expert who focuses on high performance, reliability, wide device support, and keeping things simple. In his talk, he discusses why performance is important for mobile websites and provides strategies to improve network performance through reducing requests and bytes, increasing bandwidth efficiency, and reducing latency. He also discusses ways to improve software performance through more parallelism, faster page rendering, and faster page interaction.
This document discusses techniques for improving the performance of mobile web applications. It addresses reducing the number of requests, reducing file sizes, and increasing parallelism. Specifically, it recommends bundling JavaScript and CSS files, inlining small resources, using adaptive images and JavaScript, minification, compression, and domain sharding. It also suggests techniques like parallelizing service calls and downloads, delaying unnecessary downloads, and eager loading of static assets. The overall goal is to reduce load times and improve the user experience on mobile networks.
The key to a successful mobile site is high performance and reliability across a wide range of device capabilities and network latencies. However, the mobile web is a hostile environment with support for HTML5, JavaScript and CSS varying widely across browsers and devices. This talk will explain best practices to build high performance mobile sites that work across a wide range of devices and capabilities. The focus will be on lessons learnt at Betfair while rewriting the entire mobile web stack and how we used techniques to maximise performance and reliability. After discussing the problems faced in mobile the talk will explain how adaptive techniques can be used to provide progressive enhancement. This will be followed by an explanation of why and where performance bottlenecks occur and how these can be solved.
Why your slow loading website is costing you sales and how to fix itRobert Flournoy
Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.
Why your slow loading website is costing you sales and how to fix itstrommen
This document discusses how slow loading websites can negatively impact business by reducing conversions and increasing abandonment. It covers:
1. Research showing websites that load faster increase donations, click-through rates, and conversions while decreasing abandonment.
2. How browsers load pages over TCP and HTTP, including how objects like JavaScript, CSS, images are retrieved.
3. Methods for measuring page speed like load time, start render time, and speed index.
4. Techniques for speeding up websites like GZip compression, caching, optimizing images, bundling resources, and minimizing web fonts.
Front End page speed performance improvements for DrupalAndy Kucharski
If you are a developer or business manager with responsibilities over your website, then check out this deck..
What will you learn?
The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include:
What is slow site speed?
What tools to use to diagnose it.
Plus six key improvements to make Drupal “run fast!”
And if that’s not already enough, we will also share some best practices monitoring tips for making sure you know how the Drupal server is performing 24/7.
The document discusses front-end web performance analysis. It introduces several popular tools for front-end performance analysis such as Fiddler, IBM Page Detailer, FireBug, YSlow, and AOL PageTest. It then discusses Yahoo's 14 rules and 20 new best practices for high performance web pages. Finally, it discusses techniques for extending front-end analysis tools and principles of optimization.
James D Bloom is a mobile web expert who focuses on high performance, reliability, wide device support, and keeping things simple. In his talk, he discusses why performance is important for mobile websites and provides strategies to improve network performance through reducing requests and bytes, increasing bandwidth efficiency, and reducing latency. He also discusses ways to improve software performance through more parallelism, faster page rendering, and faster page interaction.
This document discusses techniques for improving the performance of mobile web applications. It addresses reducing the number of requests, reducing file sizes, and increasing parallelism. Specifically, it recommends bundling JavaScript and CSS files, inlining small resources, using adaptive images and JavaScript, minification, compression, and domain sharding. It also suggests techniques like parallelizing service calls and downloads, delaying unnecessary downloads, and eager loading of static assets. The overall goal is to reduce load times and improve the user experience on mobile networks.
The key to a successful mobile site is high performance and reliability across a wide range of device capabilities and network latencies. However, the mobile web is a hostile environment with support for HTML5, JavaScript and CSS varying widely across browsers and devices. This talk will explain best practices to build high performance mobile sites that work across a wide range of devices and capabilities. The focus will be on lessons learnt at Betfair while rewriting the entire mobile web stack and how we used techniques to maximise performance and reliability. After discussing the problems faced in mobile the talk will explain how adaptive techniques can be used to provide progressive enhancement. This will be followed by an explanation of why and where performance bottlenecks occur and how these can be solved.
Why your slow loading website is costing you sales and how to fix itRobert Flournoy
Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.
Why your slow loading website is costing you sales and how to fix itstrommen
This document discusses how slow loading websites can negatively impact business by reducing conversions and increasing abandonment. It covers:
1. Research showing websites that load faster increase donations, click-through rates, and conversions while decreasing abandonment.
2. How browsers load pages over TCP and HTTP, including how objects like JavaScript, CSS, images are retrieved.
3. Methods for measuring page speed like load time, start render time, and speed index.
4. Techniques for speeding up websites like GZip compression, caching, optimizing images, bundling resources, and minimizing web fonts.
Front End page speed performance improvements for DrupalAndy Kucharski
If you are a developer or business manager with responsibilities over your website, then check out this deck..
What will you learn?
The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include:
What is slow site speed?
What tools to use to diagnose it.
Plus six key improvements to make Drupal “run fast!”
And if that’s not already enough, we will also share some best practices monitoring tips for making sure you know how the Drupal server is performing 24/7.
The document discusses front-end web performance analysis. It introduces several popular tools for front-end performance analysis such as Fiddler, IBM Page Detailer, FireBug, YSlow, and AOL PageTest. It then discusses Yahoo's 14 rules and 20 new best practices for high performance web pages. Finally, it discusses techniques for extending front-end analysis tools and principles of optimization.
This document discusses decoupling a Drupal backend from a React frontend using JSONAPI. It provides an overview of the technology stack including Express, React, Redux and Drupal with JSONAPI. It discusses reasons for the decoupled approach including performance improvements. It also covers editorial workflows, structured vs unstructured content, and implementing a content preview feature between the decoupled systems.
If your web application runs slowly, your reputation and business could suffer. To restore confidence, you must improve performance immediately, because frustrated users might not return to give you a second chance. You need “Web Performance First Aid.”
In this talk, Alan will share "first aid" techniques that can improve web performance within minutes.
Once your site starts to run faster, positive word of mouth may be generated among users, restoring confidence in your efforts and giving you breathing room to examine your application for further improvements.
Particular focus will be given to free tools that help diagnose performance bottlenecks, how to configure the Apache web server for speed, and making best use of the unique characteristics of IBM i.
This document summarizes Doug Sillars' presentation on delivering fast and beautiful images and video for mobile. It discusses 4 simple image optimizations: quality, format, sizing, and lazy loading. It also covers optimizing video delivery by reducing file sizes, only downloading video that will be displayed, and being mindful of data costs and network conditions for mobile users. The presentation provided examples and metrics on how these optimizations can significantly improve page load speeds and reduce data usage.
According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate.
- Why has the web become obese?
- What actions can developers and stakeholders do to combat their morbid obesity?
- Are these actions expensive or hard to implement?
This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.
Shopzilla redesigned their architecture to improve performance and scalability. The new design simplified layers, utilized caching extensively, and applied best practices for front-end performance. This led to significant business benefits including a 7-12% increase in conversion rates, 8-120% increase in search engine sessions, and a 225% increase in development velocity. Performance testing was a key part of the new approach.
Looking at historic, current and evolving approaches, I will take you through from how we used to 'live' edit on one server with HTML in the code; to implementing Template Toolkit and 'front end / back end' servers; to the addition of version control; all the way through to distributed caching, file systems and processing (aka Six Apart worship) with 15+ servers.
This document discusses mobile application performance testing. It begins by explaining how fast is perceived by humans, with 100ms seen as instant, 1s as an acceptable delay, and 10s as the limit to maintain focus. It then discusses various performance studies showing user frustration and abandonment rates related to load speeds. The document goes on to describe benchmarking applications, identifying fixes, optimizing through various techniques, and retesting. Specific areas covered in more depth include optimizing images through size, quality, format, caching and lazy loading. Other topics include content delivery networks, animating GIFs, and network information.
XPages and Java (DanNotes 50th conference, November 2013)Per Henrik Lausten
This document provides an introduction to using Java and beans in XPages. It discusses the differences between POJOs and beans, examples of scoped beans, how to call Java methods from XPages, and debugging techniques. It recommends using Java for as much logic as possible for performance benefits and access to libraries. The presenter is an experienced XPages developer who provides consulting and mentoring.
An overview of web performance automation in the Production environment - "faster ways to make your website faster". Covers things like sample .htaccess files through to performance accelerators like mod_pagespeed and Aptimize through to DSA's like Cotendo.
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014Kathy Brown
IBM Connect 2014
XPages: Still No Experience Necessary
Step by Step see how to create an XPages application. Create a help desk ticket app, including CRUD (Create, Read, Update, Delete)
London Web Performance Meetup: Performance for mortal companiesStrangeloop
You're probably familiar with the well-known performance success stories from companies like Amazon, Google, Microsoft and Shopzilla. But how relevant are these megasites to "mortal companies" that don't make billions of dollars per year or have teams of in-house performance engineers to do their bidding?
Strangeloop president Joshua Bixby walks through case studies of Strangeloop customers like AutoAnything.com and Artbeads.com to show how mortal companies have improved performance and achieved measurable success, including:
· Increased revenue by 13%
· Increased cart size by 6%
· Increased conversions by 9%
Joshua offers practical tips for successfully evangelizing performance within your organization. He also gives a snapshot of the current performance landscape in North America, as well as a sense of where the industry is headed.
jQuery - the world's most popular java script library comes to XPagesMark Roden
This document discusses using jQuery with XPages. It begins with an introduction to jQuery, explaining that it is a popular JavaScript library that simplifies document manipulation, events, animation, and AJAX. It then compares jQuery to Dojo and provides guidance on when each should be used. The document demonstrates how jQuery works via its API and methods. It also explains how to add jQuery to an XPages application either directly in code or via a theme. Finally, it discusses jQuery plugins and how they can provide ready-made functionality to solve requirements.
<SUMMARY>
The document provides tips for optimizing images and other content to improve performance on mobile devices. It discusses how humans perceive speed and common performance benchmarks. It then gives recommendations around profiling and benchmarking sites, optimizing image size, quality, format, caching, and lazy loading. Specific techniques include resizing images, adjusting quality levels, using responsive images, leveraging formats like WebP and SVG, image previews, and avoiding animated GIFs. The goal is to deliver content as fast as possible on slower mobile networks and devices.
</SUMMARY>
Move Your XPages Applications to the Fast LaneTeamstudio
Are your XPages applications performing like a Florida senior citizen driving in the left lane at 55 mph? A key to speeding up your XPages applications is knowledge of the:
-JSF lifecycle
-partial refresh
-and partial execution.
In this webinar, TLCC's Howard Greenberg covers these concepts and then applies them to optimizing an XPages application. Learn how to dramatically increase your XPages performance and make your users happy.
This document discusses strategies for improving the performance of a Drupal 7 site. It begins by identifying common problems that can cause performance issues, such as server bottlenecks or inefficient database queries. When the problem is too many page requests, solutions like caching and the Cache Control module are proposed. For sites with frequently updating user-generated content, pulling content into a new fast cache layer with JSON and front-end theming is suggested. The document acknowledges that Drupal 7 requires extensions like these to achieve high performance and looks forward to performance improvements in Drupal 8.
This document discusses WordPress development environments. It recommends setting up separate local, staging, and live environments. The local environment is for development on one's own machine. The staging environment resembles the live site for testing purposes. The live environment is the actual public site. It provides tips for setting up servers, configuring domains and files, syncing databases, and using version control across the different environments.
Practical solutions for connections administrators liteSharon James
A shorter version of our session given at Connect 14 - this version for the Engage by BLUG conference includes new features such as the community re-parenting script and an improved menu.
Please see - https://github.com/stoeps13/ibmcnxscripting - for examples of all the scripts written mainly by Christoph Stoettner and collated in this repository
IBM Connect 2016 - 60+ in 60 - Admin Tips Power HourChris Miller
See the full slides at http://idonot.es/60in60for2016
With a guaranteed minimum of 60 administration tips in 60 minutes you will walk out with a list of items to immediately help you tune your collaboration environment. Covering IBM Domino, Sametime, Connections, Traveler and more will have you eager to get back and implement some of the ideas. We will take best practices from the my SocialBizUg Admin Tips newsletter, customer case stories and other best practices. Have no fear, we will move faster that you can write so everything will be available for you to download. This is an ode to the hundreds of tips brought to you by the letters M and G (Mooney and Gab) over the years.
This document provides an overview of Web 2.0 concepts including:
- A brief history of the evolution of the World Wide Web and how websites have adapted.
- Design patterns that characterize Web 2.0 such as users adding value, network effects, and perpetual beta features.
- Common Web 2.0 technologies like AJAX, APIs, and mashups which combine multiple sources of data.
- Examples of mashups using different types of data like lists, maps, and tag clouds.
This document provides practical strategies for improving front-end performance of websites. It discusses specific techniques like making fewer HTTP requests by combining files, leveraging browser caching with far-future expires headers, gzipping components, using CSS sprites, and deploying assets on a content delivery network. It also summarizes key rules from tools like YSlow and PageSpeed for optimizing front-end performance.
Web Performance tuning presentation given at http://www.chippewavalleycodecamp.com/
Covers basic http flow, measuring performance, common changes to improve performance now, and several tools and techniques you can use now.
This document discusses decoupling a Drupal backend from a React frontend using JSONAPI. It provides an overview of the technology stack including Express, React, Redux and Drupal with JSONAPI. It discusses reasons for the decoupled approach including performance improvements. It also covers editorial workflows, structured vs unstructured content, and implementing a content preview feature between the decoupled systems.
If your web application runs slowly, your reputation and business could suffer. To restore confidence, you must improve performance immediately, because frustrated users might not return to give you a second chance. You need “Web Performance First Aid.”
In this talk, Alan will share "first aid" techniques that can improve web performance within minutes.
Once your site starts to run faster, positive word of mouth may be generated among users, restoring confidence in your efforts and giving you breathing room to examine your application for further improvements.
Particular focus will be given to free tools that help diagnose performance bottlenecks, how to configure the Apache web server for speed, and making best use of the unique characteristics of IBM i.
This document summarizes Doug Sillars' presentation on delivering fast and beautiful images and video for mobile. It discusses 4 simple image optimizations: quality, format, sizing, and lazy loading. It also covers optimizing video delivery by reducing file sizes, only downloading video that will be displayed, and being mindful of data costs and network conditions for mobile users. The presentation provided examples and metrics on how these optimizations can significantly improve page load speeds and reduce data usage.
According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate.
- Why has the web become obese?
- What actions can developers and stakeholders do to combat their morbid obesity?
- Are these actions expensive or hard to implement?
This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.
Shopzilla redesigned their architecture to improve performance and scalability. The new design simplified layers, utilized caching extensively, and applied best practices for front-end performance. This led to significant business benefits including a 7-12% increase in conversion rates, 8-120% increase in search engine sessions, and a 225% increase in development velocity. Performance testing was a key part of the new approach.
Looking at historic, current and evolving approaches, I will take you through from how we used to 'live' edit on one server with HTML in the code; to implementing Template Toolkit and 'front end / back end' servers; to the addition of version control; all the way through to distributed caching, file systems and processing (aka Six Apart worship) with 15+ servers.
This document discusses mobile application performance testing. It begins by explaining how fast is perceived by humans, with 100ms seen as instant, 1s as an acceptable delay, and 10s as the limit to maintain focus. It then discusses various performance studies showing user frustration and abandonment rates related to load speeds. The document goes on to describe benchmarking applications, identifying fixes, optimizing through various techniques, and retesting. Specific areas covered in more depth include optimizing images through size, quality, format, caching and lazy loading. Other topics include content delivery networks, animating GIFs, and network information.
XPages and Java (DanNotes 50th conference, November 2013)Per Henrik Lausten
This document provides an introduction to using Java and beans in XPages. It discusses the differences between POJOs and beans, examples of scoped beans, how to call Java methods from XPages, and debugging techniques. It recommends using Java for as much logic as possible for performance benefits and access to libraries. The presenter is an experienced XPages developer who provides consulting and mentoring.
An overview of web performance automation in the Production environment - "faster ways to make your website faster". Covers things like sample .htaccess files through to performance accelerators like mod_pagespeed and Aptimize through to DSA's like Cotendo.
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014Kathy Brown
IBM Connect 2014
XPages: Still No Experience Necessary
Step by Step see how to create an XPages application. Create a help desk ticket app, including CRUD (Create, Read, Update, Delete)
London Web Performance Meetup: Performance for mortal companiesStrangeloop
You're probably familiar with the well-known performance success stories from companies like Amazon, Google, Microsoft and Shopzilla. But how relevant are these megasites to "mortal companies" that don't make billions of dollars per year or have teams of in-house performance engineers to do their bidding?
Strangeloop president Joshua Bixby walks through case studies of Strangeloop customers like AutoAnything.com and Artbeads.com to show how mortal companies have improved performance and achieved measurable success, including:
· Increased revenue by 13%
· Increased cart size by 6%
· Increased conversions by 9%
Joshua offers practical tips for successfully evangelizing performance within your organization. He also gives a snapshot of the current performance landscape in North America, as well as a sense of where the industry is headed.
jQuery - the world's most popular java script library comes to XPagesMark Roden
This document discusses using jQuery with XPages. It begins with an introduction to jQuery, explaining that it is a popular JavaScript library that simplifies document manipulation, events, animation, and AJAX. It then compares jQuery to Dojo and provides guidance on when each should be used. The document demonstrates how jQuery works via its API and methods. It also explains how to add jQuery to an XPages application either directly in code or via a theme. Finally, it discusses jQuery plugins and how they can provide ready-made functionality to solve requirements.
<SUMMARY>
The document provides tips for optimizing images and other content to improve performance on mobile devices. It discusses how humans perceive speed and common performance benchmarks. It then gives recommendations around profiling and benchmarking sites, optimizing image size, quality, format, caching, and lazy loading. Specific techniques include resizing images, adjusting quality levels, using responsive images, leveraging formats like WebP and SVG, image previews, and avoiding animated GIFs. The goal is to deliver content as fast as possible on slower mobile networks and devices.
</SUMMARY>
Move Your XPages Applications to the Fast LaneTeamstudio
Are your XPages applications performing like a Florida senior citizen driving in the left lane at 55 mph? A key to speeding up your XPages applications is knowledge of the:
-JSF lifecycle
-partial refresh
-and partial execution.
In this webinar, TLCC's Howard Greenberg covers these concepts and then applies them to optimizing an XPages application. Learn how to dramatically increase your XPages performance and make your users happy.
This document discusses strategies for improving the performance of a Drupal 7 site. It begins by identifying common problems that can cause performance issues, such as server bottlenecks or inefficient database queries. When the problem is too many page requests, solutions like caching and the Cache Control module are proposed. For sites with frequently updating user-generated content, pulling content into a new fast cache layer with JSON and front-end theming is suggested. The document acknowledges that Drupal 7 requires extensions like these to achieve high performance and looks forward to performance improvements in Drupal 8.
This document discusses WordPress development environments. It recommends setting up separate local, staging, and live environments. The local environment is for development on one's own machine. The staging environment resembles the live site for testing purposes. The live environment is the actual public site. It provides tips for setting up servers, configuring domains and files, syncing databases, and using version control across the different environments.
Practical solutions for connections administrators liteSharon James
A shorter version of our session given at Connect 14 - this version for the Engage by BLUG conference includes new features such as the community re-parenting script and an improved menu.
Please see - https://github.com/stoeps13/ibmcnxscripting - for examples of all the scripts written mainly by Christoph Stoettner and collated in this repository
IBM Connect 2016 - 60+ in 60 - Admin Tips Power HourChris Miller
See the full slides at http://idonot.es/60in60for2016
With a guaranteed minimum of 60 administration tips in 60 minutes you will walk out with a list of items to immediately help you tune your collaboration environment. Covering IBM Domino, Sametime, Connections, Traveler and more will have you eager to get back and implement some of the ideas. We will take best practices from the my SocialBizUg Admin Tips newsletter, customer case stories and other best practices. Have no fear, we will move faster that you can write so everything will be available for you to download. This is an ode to the hundreds of tips brought to you by the letters M and G (Mooney and Gab) over the years.
This document provides an overview of Web 2.0 concepts including:
- A brief history of the evolution of the World Wide Web and how websites have adapted.
- Design patterns that characterize Web 2.0 such as users adding value, network effects, and perpetual beta features.
- Common Web 2.0 technologies like AJAX, APIs, and mashups which combine multiple sources of data.
- Examples of mashups using different types of data like lists, maps, and tag clouds.
This document provides practical strategies for improving front-end performance of websites. It discusses specific techniques like making fewer HTTP requests by combining files, leveraging browser caching with far-future expires headers, gzipping components, using CSS sprites, and deploying assets on a content delivery network. It also summarizes key rules from tools like YSlow and PageSpeed for optimizing front-end performance.
Web Performance tuning presentation given at http://www.chippewavalleycodecamp.com/
Covers basic http flow, measuring performance, common changes to improve performance now, and several tools and techniques you can use now.
This document discusses web performance optimization techniques. It is a summary of rules for web performance by Mark Tomlinson, who has 27 years of experience in performance. Some of the key techniques discussed include reducing HTTP requests, optimizing file compression, minimizing code, improving web font and image performance, prefetching resources, avoiding unnecessary redirects, and optimizing infrastructure and databases. The document emphasizes measuring performance through load testing and monitoring to identify bottlenecks.
11 Amazing things I Learnt At Word Camp Sydney 2014WordPressBrisbane
The document summarizes key learnings from a WordPress conference. It covers topics like CSS naming conventions, best coding practices, localization, custom post types, SEO, hiring remote workers, writing simple plugins, and planning WordPress sites at scale. The last section highlights several lightning talks on project management, accessibility, grammar, unit testing, migrations, and big brands using WordPress.
Static Site Generators - Developing Websites in Low-resource ConditionIWMW
Paul Walk discusses static site generators as an alternative to content management systems for publishing websites. Static site generators allow content to be authored in simple text files using formats like Markdown and compiled into static HTML and CSS that can be hosted on basic web servers. They provide benefits like minimal infrastructure needs, easy preservation of content, and increased security compared to systems that rely on databases. However, they may not be as user-friendly for content authoring. In general, static site generators are best suited for smaller, simpler websites that don't require advanced user access controls or dynamic functionality.
Web Components at Scale, HTML5DevConf 2014-10-21Chris Danford
At Pinterest, we've begun experimenting in production with Web Components. This talk will discuss some challenges of implementing Web Components in a large scale production environment such as SEO concerns, reasonable fallbacks for browsers not supported by Platform.js, migrating a large code base component-by-component to mitigate risk, and optimizing page load and scroll performance.
This document provides an introduction to using developer tools in Chrome. It discusses how to open dev tools, use the various panels to edit HTML, CSS, and JavaScript in real-time, debug JavaScript issues, and analyze network performance. The key benefits of using dev tools are inspecting and updating the DOM, testing responsiveness, running JavaScript in the console, debugging JavaScript, and measuring performance. Live editing allows testing changes without refreshing the page. The document recommends Chrome as the standard browser for developers and provides tips, demonstrations, and challenges for using different dev tools features.
10 Things You Can Do to Speed Up Your Web App TodayChris Love
Web Performance is a serious issues these days. 80% of web performance issues are in the client. Many developers either do not realize what they are leaving on the table and how that affects the success of their application. These are 10 things any web developer can do in about 30-60 minutes to drastically increase page load times and thus increase the application's profitability.
This document discusses ways to improve web performance for mobile users. It outlines goals like achieving a speed index between 1,100-2,500 and first meaningful paint within 1-3 seconds. Various techniques are presented for hacking first load times, data transfer, resource loading, images and user experience. These include avoiding redirects, using HTTP/2 and service workers, modern cache controls, responsive images, preloading resources, and ensuring consistent frame rates. The overall message is that mobile performance needs more attention given average load times and high bounce rates on slow mobile sites.
Building Lightning Fast Websites (for Twin Cities .NET User Group)strommen
1. A website is loaded by a browser through a multi-step process involving DNS lookups, TCP connections, downloading resources like HTML, CSS, JS, and images. This process can be slow due to the number of individual requests and dependencies between resources.
2. Ways to optimize the loading process include making the server fast, inlining critical resources, gzip compression, an optimized caching strategy, optimizing file delivery through techniques like CDNs and HTTP/2, bundling resources, optimizing images, avoiding unnecessary domains, minimizing web fonts, and JavaScript techniques like PJAX. Minifying assets can also speed up loading.
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
While the principles of responsive web design can make sites look better on mobile devices, they don’t necessarily load faster than a site designed for desktops. And as more and more sophisticated WordPress themes emerge, with their multiple options and fancy sliders, websites just keep getting more and more bloated.
This presentation will help cut out the junk that’s larding up your sites so you can better meet the demand of users wanting fast-loading user experiences–no matter the device or connection.
Presented at WordCamp Salt Lake City 2013 (http://2013.slc.wordcamp.org/)
This document discusses lessons learned from building and growing a software startup. It describes how the company quickly built their initial product but ran into scaling issues. It outlines the technical infrastructure changes they made to improve stability, such as moving to the cloud, adding Redis, Resque, and MongoDB. The document also provides recommendations on performance testing, libraries, tools, and localization. Overall it advocates for just starting to build the product now rather than overplanning.
This document summarizes Wix's scaling efforts from 2006 to 2014 to support over 70 million users on its website building platform. It describes Wix's initial architecture and challenges with downtime from server updates. It outlines Wix's migration to managed hosting on Amazon and Google Cloud to address scalability issues. The document also discusses Wix's shift to microservices, continuous integration/delivery, test-driven development, and DevOps practices to improve development velocity and allow faster feature rollouts. It provides details on Wix's adoption of Scala, Angular, React, Node.js and establishment of technology guilds to further its engineering capabilities as it scaled its platform globally.
10 things you can do to speed up your web app today 2016Chris Love
Web Sites are to slow and this is costing businesses money. Most performance issues are easy to fix. In this session we review why web performance is important and 10 simple things you can do to make a faster user experience.
Minimize website page loading time – 20+ advanced SEO tipsCgColors
Website Page speed is a big ranking factor and we all know that. Google has already announced that they will give less priority to slow sites and even mark site with SLOW tag in SERPs.
Lets understand what makes your site slow and how can you make your site lightening fast..If your website is also struggling with slow page load time..checkout our tips here http://www.cgcolors.com/blog/minimize-website-page-loading-time-20-advanced-seo-tips/
You can contact our page load optimization experts - hi@cgcolors.com | 347-732-2736
This document discusses web performance optimization and provides tips to improve performance. It emphasizes that performance is important for user experience, search engine optimization, conversion rates, and costs. It outlines common causes of performance issues like round-trip times, payload sizes, browser rendering delays, and inefficient JavaScript. Specific recommendations are given to optimize images, stylesheets, scripts, and browser rendering through techniques like compression, caching, deferred loading, and efficient coding practices. A variety of tools for measuring and improving performance are also listed.
Topics covered:
1. Generating a new Remix project
2. Conventional files
3. Routes (including the nested variety)
4. Styling
5. Database interactions (via sqlite and prisma)
6. Mutations, Validation, and Authentication
7. Error handling
8. SEO with Meta Tags and much more
My talking points for the presentation on optimization of modern web applications. It is a huge topic, and I concentrated mostly on technical aspects of it.
Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve
Presentation from Perry Wirth on Joomla! speed optimization. This presentation covers concepts and methods behind speeding up the load time of your site. This covers what you can do within a base Joomla installation along with template parameters and extensions which can also help.
Similar to Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Websites by up to 5x (20)
Your One-Stop Shop for Python Success: Top 10 US Python Development Providersakankshawande
Simplify your search for a reliable Python development partner! This list presents the top 10 trusted US providers offering comprehensive Python development services, ensuring your project's success from conception to completion.
Driving Business Innovation: Latest Generative AI Advancements & Success StorySafe Software
Are you ready to revolutionize how you handle data? Join us for a webinar where we’ll bring you up to speed with the latest advancements in Generative AI technology and discover how leveraging FME with tools from giants like Google Gemini, Amazon, and Microsoft OpenAI can supercharge your workflow efficiency.
During the hour, we’ll take you through:
Guest Speaker Segment with Hannah Barrington: Dive into the world of dynamic real estate marketing with Hannah, the Marketing Manager at Workspace Group. Hear firsthand how their team generates engaging descriptions for thousands of office units by integrating diverse data sources—from PDF floorplans to web pages—using FME transformers, like OpenAIVisionConnector and AnthropicVisionConnector. This use case will show you how GenAI can streamline content creation for marketing across the board.
Ollama Use Case: Learn how Scenario Specialist Dmitri Bagh has utilized Ollama within FME to input data, create custom models, and enhance security protocols. This segment will include demos to illustrate the full capabilities of FME in AI-driven processes.
Custom AI Models: Discover how to leverage FME to build personalized AI models using your data. Whether it’s populating a model with local data for added security or integrating public AI tools, find out how FME facilitates a versatile and secure approach to AI.
We’ll wrap up with a live Q&A session where you can engage with our experts on your specific use cases, and learn more about optimizing your data workflows with AI.
This webinar is ideal for professionals seeking to harness the power of AI within their data management systems while ensuring high levels of customization and security. Whether you're a novice or an expert, gain actionable insights and strategies to elevate your data processes. Join us to see how FME and AI can revolutionize how you work with data!
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/temporal-event-neural-networks-a-more-efficient-alternative-to-the-transformer-a-presentation-from-brainchip/
Chris Jones, Director of Product Management at BrainChip , presents the “Temporal Event Neural Networks: A More Efficient Alternative to the Transformer” tutorial at the May 2024 Embedded Vision Summit.
The expansion of AI services necessitates enhanced computational capabilities on edge devices. Temporal Event Neural Networks (TENNs), developed by BrainChip, represent a novel and highly efficient state-space network. TENNs demonstrate exceptional proficiency in handling multi-dimensional streaming data, facilitating advancements in object detection, action recognition, speech enhancement and language model/sequence generation. Through the utilization of polynomial-based continuous convolutions, TENNs streamline models, expedite training processes and significantly diminish memory requirements, achieving notable reductions of up to 50x in parameters and 5,000x in energy consumption compared to prevailing methodologies like transformers.
Integration with BrainChip’s Akida neuromorphic hardware IP further enhances TENNs’ capabilities, enabling the realization of highly capable, portable and passively cooled edge devices. This presentation delves into the technical innovations underlying TENNs, presents real-world benchmarks, and elucidates how this cutting-edge approach is positioned to revolutionize edge AI across diverse applications.
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyScyllaDB
Freshworks creates AI-boosted business software that helps employees work more efficiently and effectively. Managing data across multiple RDBMS and NoSQL databases was already a challenge at their current scale. To prepare for 10X growth, they knew it was time to rethink their database strategy. Learn how they architected a solution that would simplify scaling while keeping costs under control.
HCL Notes and Domino License Cost Reduction in the World of DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Have you ever been confused by the myriad of choices offered by AWS for hosting a website or an API?
Lambda, Elastic Beanstalk, Lightsail, Amplify, S3 (and more!) can each host websites + APIs. But which one should we choose?
Which one is cheapest? Which one is fastest? Which one will scale to meet our needs?
Join me in this session as we dive into each AWS hosting service to determine which one is best for your scenario and explain why!
Building Production Ready Search Pipelines with Spark and MilvusZilliz
Spark is the widely used ETL tool for processing, indexing and ingesting data to serving stack for search. Milvus is the production-ready open-source vector database. In this talk we will show how to use Spark to process unstructured data to extract vector representations, and push the vectors to Milvus vector database for search serving.
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...alexjohnson7307
Predictive maintenance is a proactive approach that anticipates equipment failures before they happen. At the forefront of this innovative strategy is Artificial Intelligence (AI), which brings unprecedented precision and efficiency. AI in predictive maintenance is transforming industries by reducing downtime, minimizing costs, and enhancing productivity.
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
Skybuffer SAM4U tool for SAP license adoptionTatiana Kojar
Manage and optimize your license adoption and consumption with SAM4U, an SAP free customer software asset management tool.
SAM4U, an SAP complimentary software asset management tool for customers, delivers a detailed and well-structured overview of license inventory and usage with a user-friendly interface. We offer a hosted, cost-effective, and performance-optimized SAM4U setup in the Skybuffer Cloud environment. You retain ownership of the system and data, while we manage the ABAP 7.58 infrastructure, ensuring fixed Total Cost of Ownership (TCO) and exceptional services through the SAP Fiori interface.
Introduction of Cybersecurity with OSS at Code Europe 2024Hiroshi SHIBATA
I develop the Ruby programming language, RubyGems, and Bundler, which are package managers for Ruby. Today, I will introduce how to enhance the security of your application using open-source software (OSS) examples from Ruby and RubyGems.
The first topic is CVE (Common Vulnerabilities and Exposures). I have published CVEs many times. But what exactly is a CVE? I'll provide a basic understanding of CVEs and explain how to detect and handle vulnerabilities in OSS.
Next, let's discuss package managers. Package managers play a critical role in the OSS ecosystem. I'll explain how to manage library dependencies in your application.
I'll share insights into how the Ruby and RubyGems core team works to keep our ecosystem safe. By the end of this talk, you'll have a better understanding of how to safeguard your code.
Programming Foundation Models with DSPy - Meetup SlidesZilliz
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...Alex Pruden
Folding is a recent technique for building efficient recursive SNARKs. Several elegant folding protocols have been proposed, such as Nova, Supernova, Hypernova, Protostar, and others. However, all of them rely on an additively homomorphic commitment scheme based on discrete log, and are therefore not post-quantum secure. In this work we present LatticeFold, the first lattice-based folding protocol based on the Module SIS problem. This folding protocol naturally leads to an efficient recursive lattice-based SNARK and an efficient PCD scheme. LatticeFold supports folding low-degree relations, such as R1CS, as well as high-degree relations, such as CCS. The key challenge is to construct a secure folding protocol that works with the Ajtai commitment scheme. The difficulty, is ensuring that extracted witnesses are low norm through many rounds of folding. We present a novel technique using the sumcheck protocol to ensure that extracted witnesses are always low norm no matter how many rounds of folding are used. Our evaluation of the final proof system suggests that it is as performant as Hypernova, while providing post-quantum security.
Paper Link: https://eprint.iacr.org/2024/257
Azure API Management to expose backend services securely
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Websites by up to 5x
1. From Slow To Fast:
Improving Performance On Intuit
Web Sites By Up To 5x
Velocity Conference NY / Oct 16, 2013
Jay Hung (WebMocha) / Norberth Danson (Intuit)
3. Who we are
Jay Hung / @jayhung
Chief Architect, WebMocha LLC
- Ex-Yahoo engineer
- 16+ yrs in consumer web + digital media
- Performance consultant; frontend
optimization since 2007
Norberth Danson
Staff Software Engineer, Intuit Inc.
- Full stack engineer
- 9+ yrs web development
- Member of Intuit core performance team
12. Engineering presented a case:
• cited experts like Steve Souders
• research/examples from Google / Bing / Yahoo
• blog posts on performance lifting conversions
But people didn’t get it.
Couldn’t get buy-in.
Image source: DJ Octoon
13. Engineering presented a case:
• cited experts like Steve Souders
• research/examples from Google / Bing / Yahoo
• blog posts on performance lifting conversions
But people didn’t get it.
Couldn’t get buy-in.
Image source: DJ Octoon
15. A/B test showed a faster page
increased conversion, improved
SEO & lifted organic traffic.
people
16. Conversation went from “not interested”
to “how soon can we make
all of our pages faster?”
people
Image source: onlinemarketingwithvince.com
17. 80-90% of the enduser response time
is spent on the
frontend.
Start there.
people
Steve Souders - Performance Golden Rule
18. But before we could start, we needed:
Image source: selfmadefitness.com
19. Common Ground
• Pageload times are frontend (client-side) only
• Common tool (webpagetest.org)
• DSL connection speed
• Doc Complete load time
• Average from 9 iterations
Image source: selfmadefitness.com
25. Performance Rule #1
Minimize HTTP requests
General Problem:
–Each http request has overhead
• Connection setup/teardown
• DNS lookup times
Our Problem:
–Excessive
–Excessive
–Excessive
–Excessive
CSS files (10+)
JS files (30+)
images (50-70+)
beacons (20+)
26. Merge + Minify CSS/JS
NOT SO EASY!
– Many shared files & embedded snippets
– Numerous copy-n-paste variations
– document.write() statements around every corner
– Expensive DOM traversals
– Non-contained CSS
– Global JS vars & functions everywhere
Bleeding and collisions galore!
27. Merge + Minify CSS/JS
HOW SOLVED
• Cleaned & refactored all CSS/JS
• Optimized handful of JS DOM Traversals
• Created global-global mergeset (shared across all sites)
• Created site-global mergesets (shared across all pages of same-site)
A BIG WIN, BUT WITH SOME COST
• CSS + JS containment extremely tedious
• 2 uber mergesets == lots of unused code on most pages
• Other pages aside from our top-50 included these CSS/JS files
• Other sites (outside of our 6 sites) also included these CSS/JS files
– all hell broke loose
• Seems every commit, more things broke
Took FAR longer than expected, but we got it done.
28. Merge + Minify CSS/JS
HOW SOLVED
• Cleaned & refactored all CSS/JS
• Optimized JS DOM Traversals
• Created global-global mergeset (shared across all sites)
• Created site-global mergesets (shared across all pages of same-site)
A BIG WIN, BUT WITH SOME COST
• CSS + JS containment extremely tedious
• 2 uber mergesets == lots of unused code on most pages
• Other pages aside from our top-50 included these CSS/JS files
• Other sites (outside of our 6 sites) also included these CSS/JS files
– all hell broke loose
• Seems every commit, more things broke
Took FAR longer than expected, but we got it done.
30. Spriting Woes – Take 1
PROBLEM
• This image is a whopping 306k as a 24-bit PNG
alpha-transparent gradients
HOW SOLVED
• Worked with design, removed alpha-transparency
• Saved as a JPG (came in < 50K)
• Saved > 250k
31. Spriting Woes – Take 1
PROBLEM
• This image is a whopping 306k as a 24-bit PNG
alpha-transparent gradients
HOW SOLVED
• Worked with design, removed alpha-transparency
• Saved as a JPG (came in < 50K)
• Saved > 250k
32. Spriting Woes – Take 2
PROBLEM
• This image is 179K as a 24-bit PNG
HOW SOLVED
alpha-transparent
only used if no Flash
installed, < 1%!
• If get rid of third image, can save as JPG (< 50k)
• Instead, we rewrote player code to show play button as icon (< 20k)
• Saved > 150k
33. Spriting Woes – Take 3
Each screen: 1024x768
Dimensions: 4096x9216
Filesize: 5MB!
34. Spriting Woes – Take 3
Each screen: 1024x768
Dimensions: 4096x9216
Filesize: 5MB!
35. Spriting Woes – Take 3
Each screen: 1024x768
Dimensions: 4096x9216
Filesize: 5MB!
36. CDN (Content Delivery Network)
THE GOOD THING
• Already using Akamai
PROBLEM
• Wasn’t configured properly
– Gzip, Expires, etc.
• Assets loaded from multiple sources
– Some from CDN
– Others from app servers
• All sites shared same CDN domain
– images.smallbusiness.intuit.com
37. Angry Cookie Monster
PROBLEM
• Domain cookies are passed with every http request for that
domain
• CDN domain: images.smallbusiness.intuit.com
• Avg cookie size: ~800b-1k
• Total cookie bytes/page = ~100k+
– ~1k * ~100 reqs
Image source: cheezburger.com
38. Happy Cookie Monster
HOW SOLVED
• Reconfigured Akamai
• Load ALL static assets from CDN
• Cookie-less CDN domain:
– {sitename}-s{#}.intuitstatic.com
Image source: birdonacake.blogspot.com
39. Beacons + Redirects
PROBLEM
• Marketing sites (we tracked everything)
• Excessive beacons (20-30+)
• Many 302-redirects (adds http requests)
• Over the years, many beacons added
– but hardly any removed
Image credit: GunGodTheGreat via deviantart.com
40. Beacons + Redirects
HOW SOLVED
• Inventoried all beacons
• Benchmarked all beacons
• Asked marketers to review
– Removed many legacy beacons
• Pinged vendors for current beacons that
were sub-optimal
– replaced with faster versions
Image source: wikipedia.org
41. Beacons + Redirects
HOW SOLVED
• Inventoried all beacons
• Benchmarked all beacons
• Asked marketers to review
– Removed many legacy beacons
• Pinged vendors for current beacons that
were sub-optimal
– replaced with faster versions
Image source: wikipedia.org
42. Other Optimizations
• Recompressed all images
– low hanging fruit + a big win
• Lazyloaded images below fold
– another big win
• Removed custom fonts
• Removed duplicate code
• Removed more 30x redirects
• Remaining usual suspects
43. Eventually, we hit 6s… yay!
But then the
question came…
Can we go faster?
51. Blocking Calls
• Notice staircase pattern
• Milliseconds all add up
• These specific calls returned no content
– Calls w/ content take even longer
• These + 2 calls not shown == ~750ms
– Nearly 3/4 of a second to show nothing different
52. Redundant Content, Multiple Payloads
Default
content
Default
content
Test A
Default
content
Test B
• all users download default content
• test case users download both default + test content
53. Poor Performing Architecture
blocking call – if loads content,
traverses DOM and inserts here
• Inherent high latencies
• Code that blocks the UI thread
• Lots of these calls on a page
• All adds up!
54. A/B Testing Software
HOW SOLVED
✓ Seek & destroy
✓ Removed expired tests
✓ Comment out inactive tests
✓ Switched test software
59. New Global Header – aka QuickNav
✓ Full replacement
✓ Utilizes web standards HTML/CSS/JS
✓ Minimizes DOM traversals
✓ Minimizes image utilization
✓ Uses event delegation
✓ Across the board, every page had 1s-1.5s faster load time
60. JavaScript & Control.js
• created by Steve Souders
• designed to give control over how JS downloads and executes
• separates download and execution phases
• downloads scripts as either IMAGE or OBJECT elements
• scripts subsequently fetched from CACHE
Read more about Control.js:
http://stevesouders.com/controljs/
61. Prefetch assets
• prefetching assets across a flow of pages vs. single page
• examples: Sign-up flow or conversion funnel
– At start of flow, as user idles, reads or types in form fields, we
prefetch assets in the background
– As user hits subsequent page needing this asset, it’s already
available in the cache resulting in a speedier load time
62. Other Phase 2 Optimizations
• JavaScript rewrites
• Advanced lazyloading
– components, functionality, etc.
• Internal WebPageTest
– behind firewall testing
• Automated merge/minify
• Automated performance
monitoring
• Changed technology
infrastructure
– for some products (faster
stack)
• Performance Leaderboard
– glass half-full interpretation of
Wall-of-Shame
• Performance KPIs added to
Stakeholder dashboards
• Bunch of other stuff
71. Tough to measure!
• Lots of chatter about positive lifts in metrics
• Hard to credit results solely to performance
• Best if no other changes besides performance
• (Uh, good luck with that in fast-paced business!)
72. lookups
When
* 2012week14 (week/week improvement)
only change was performance
pageload
pageload
9-12s
3-4s
5-6s
+14%*
then
conversions
conversions
upgrade
Payroll In-product Purchase
73. Performance & Shop Cart Checkouts
Slow cart == more abandonment
Source: Intuit, Inc. (shopping cart completions)
74. Performance & Shop Cart Checkouts
Sped up cart == more completions
Source: Intuit, Inc. (shopping cart completions)
75. QuickBooks Online Signup Flow
-2s total pageload == +10% conversion*
~6s
QBO
Marketing Page
~6s
Signup:
Account Info
~6s
Signup:
Credit Card Info
Only change this period was performance
* FY2012Q4, Source: Jeremy Goodrich (Intuit, Inc.)
~8s
~8-10s
QBO
App Home
76. Generally
For every 1s of performance gain:
Pageload Time
Conversion
Pageload >= 7s
+3%
7s > Pageload > 5s
+2%
4s >= Pageload
+1%
(as long as final pageload time is 5s or faster)
Diminishing business ROI as pages get faster.
78. Getting Buy-in
• Stick with it!
• Evangelize
• Get a champion
• Do experiments
squeeky wheel gets the oil
Photo credit: Denis De Mesmaeker via flickr.com
79. Start with:
• It does work
• Measurable
improvements
• Code clean-up prior
is good idea
Photo credit: Gregory Mancuso
80. One size does not fit all
• Figure out your issues
• If you don’t know what’s
slow, you can’t fix it
• Deep analysis, find
bottlenecks, fix each one
• Learn to read waterfall
charts!
• Best results
Photo credit: spiritwomen.blogspot.com
81. Dedicated performance team?
• If you can afford it, YES!
• No competing priorities
• Highest chance of success
• (That’s what we did)
• (Steve Souders advocates
for this)
Image source: bearportpublishing.com
82. Maintaining Performance
• Many sites regress when stop
watching
• Pay attention!
• Setup monitoring/alerts
– Jenkins + WPT Private Instance
• Weekly dashboards
• Wall of Shame (or
Leaderboard Wall)
• Talk performance. Often.
stay on top of it!
Photo credit: Tobin Copley via flickr.com
83. Our Humble Opinion
(sample size of 2)
• 99% of web sites can be made faster
• Most of us are not in that
• Our chances for a faster web site
are very good!
84. Photo credit: Nathan Kowald via flickr.com
Questions?
people
Slides: webmocha.com/2013velocityny
jayhung@webmocha.com
@jayhung
norberth_danson@intuit.com
Editor's Notes
Hello, and welcome.Today, we’re really excited to share with you some of the successes we’ve had at Intuit around performance.
This is our story: We spent a year, optimizing the top 50 pages (by traffic) from 6 of our marketing web sites, and hit pageload speeds as fast as 2 seconds in some cases.There’s a lot we’ll be covering in a short amount of time, so we might talk a little fast. We’ll have time for questions at the end, or stop by our office hours immediately following this presentation.
This is what our web site looked like back in the day.The first version came online in mid 90s. This screenshot is from 1999.As you can see, it’s quite basic compared to what we’re used to today.
Any of you remember this phone?I’m probably dating myself, but I had one of these bad boys back then and thought it was the coolest thing ever.
It was built on dated technology.And it was built before web standards.
Over the years, lots of “stuff” was added or changed.Single site grew and became many sites.All on same codebase.
Codebase big and bloated.LOTS of stuff going on.Everything plugged into everything else.Tough to maintain.
Something had to be done.Engineering presented a case… People just didn’t get it. Nobody understood value.Everyone too busy and no time.
A frustrated engineer, in his own time, beganquietly doing performance optimizations.
It successfully showed improved metrics as a result of a faster loading page.
What? Higher conversions? Higher SEO rankings? Morepageviews?I get it now!
Everyone familiar with this quote?Steve first coined it back in 2006 or 2007. Still holds true today.
Apples to apples.So what do I mean?Get everyone on common ground.Lots of chatter about performance – a lot sounded the same - but not everyone was saying the same thing.Numbers cited from different tools (which had wide variances).Server response times unintentionally mixed with frontend render times.We just needed to get everyone comparing apples to apples.
We start with the usual suspects.
The usual suspects are the original rules of high performance from Steve Souder’s first book on high performing web sites.These are general rules, in order of priority, that applies to the majority of sites out there.We added a few bonus items of our own.We won’t have time to go over everything, but we’ll cover a number of our biggest wins (and mistakes).
So, we started out by merging and minifying our CSS and JS files.The codebase was not very clean, and had all of “this stuff” going on with it.Extremely difficult to combine everything together and still have the site working properly.
… we kind of went at this blindly and jumped in headfirst and started to combine files left and right.Knowing what we know now, we may have spent an initial period getting our files into shape for merging and minifying.
Pretty simple here.A good thing, right? Well, let’s take a look.
Describe problem. Then how solved:In our case, design was flexible, they modified the design to remove the alpha-transparency.Saved over 250k. Let’s think about that number for a second – 250k. That’s a lot of overhead, for a single image!
That’s over a quarter of a megabyte on one image alone.
3rd sprite on right uses alpha transparency which causes the entire image to be saved as 24-bit when sprited together.But this 3rd sprite is only used for users that do not have Flash installed – this is < 1% of Internet users!This 3rd image was incorrectly sprited with the other images.Between this image and the last image, we saved 400k – close to half a meg of payload size.The funny thing here is, it actually gets worse.
(image displays): I’m just going to pause here for a moment, to let you take in the full glory of this image - and let the absurdity sink in.(click for bullets)
Only thing I can say about this, is it’s 5 megs of wrong.
These examples just goes to show how we took something good likespriting images and reducing http requests – and executed wrong, even hurting our performance in the process.Anyways, we fixed all of this and moved on.
I’ll circle back to this shortly, but before I do, I want to talk about something we call “the angry cookie monster”.
Common for marketers to request pixels to be added when new campaigns began.Very rare to request pixels be removed once a campaign has finished.
After 6 months of work, we managed to get all 50 pages into that ~6s rangeBut it wasn’t enough. The company had tasted the forbidden fruit, and wanted more.Kept coming up:How can we go faster?Perhaps car images should be moved to next slide.Perhaps we don’t mention 2 seconds here, but just “can we go faster?” and we can talk about how we got rationale for 2s
Thank you Jay! Hello everyone, thank you for stopping by!My name is Norberth Danson and I’m a full stack engineer currently working on front end and performance at Intuit. ! I will take this opportunity to come out clean and confess that I do not have a Twitter account. ! Now that I’ve got that off my chest, let’s get straight to business.As Jay mentioned, it took us roughly six months of optimization effort to bring the top 50 URLs down to approximately 6 seconds.And then two things happened.At first, good times rolled in. We were rock stars. It was pretty awesome to be part of the performance team.
As I mentioned before, there were 3 video players, with various levels of inefficiency.Let’s look at one of them.In theory, a video player is supposed to play video.In practice, especially these days, when everyone wants analytics around every corner, most video players come with an Entourage.Allow me to introduce the cast members:SWF file (actual player) takes 6-8s on avg to downloadLoad of external calls for tracking, beacons, and 3rd party elements (23 requests, 9 domains, 7 swf files) – even the NSA would have trouble keeping track of everything that’s going on!!!Poster frame still image displayed on page load takes >3s on avg to loadPage BLOCKS until poster frame image loaded; rest of page elements have to wait before downloadingEntourages are expensive and this example is not different – the parent page has to pay the price for loading this video player.
To recap – not all video players are created equal – make sure that the one you are using is not accompanied by a vast entourage.When a video player does 19 redirects before playing its first byte of video, it’s time to look for alternatives.And that’s exactly what we did – we replaced the 3 video players with one player from a different vendor. If replacing the vendor is not an option, you may look into lazy loading the video player. If you have to pay the price, pay the price after the browser’s onload event fires.
Launched a new platform, pageload of landing page went from 3-4s to 9-12sConversions took a hit.After improving pages back to 5-6s, conversions improved by 14%In this case, conversion == # of new activations
In the summer during our year of optimization, we launched a new technology platform that the shopping cart was on.This version of the platform had forked before our phase 1 optimizations had launched, and performance immediately suffered.At launch, we had some irregular tracking that was over-counting our shopping cart completions, and we fixed that a month in.From then on, this section in red showed severely degraded performance, and we saw a reduced number of people completing their checkout flow.
When we finally fixed this and was able to re-optimize the shopping cart, we see the number of people completing their checkout improving significantly.Performance was the only thing changed on the cart.
Finally, we’d like to leave you with our humble opinion.Unfortunately, it’s a samplesize of 2.