SlideShare a Scribd company logo
StirTrek Edition
10 Things You Can Do
Today To Speed Up Your
Web Application & Make
More $$$$ Today!
Chris Love
@ChrisLove
Love2Dev.com
Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• Love2Dev.com
High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99 http://amzn.to/1a55L89
Slide Deck & Source Code
• Slide Deck – slidesha.re/15YTrTT
• Source Code – http://GitHub.com/docluv

Recommended for you

Building fast aspnet websites
Building fast aspnet websitesBuilding fast aspnet websites
Building fast aspnet websites

Changing a few settings in IIS, optimizing HTML, CSS and JavaScript layout, and applying simple C# rules can lead to increased ASP.NET website performance. Tools like Chrome Developer Tools, YSlow, Google PageSpeed Insights and Fiddler can help optimize aspects like compression, caching, headers and static/dynamic content. Optimizing content delivery includes techniques like putting CSS at the top, JavaScript at the bottom, bundling/minification, using CDNs and removing etags.

performanceasp.net
Core Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPressCore Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPress

How to optimize Core Web Vitals of your WordPress website? This is a presentation deck by Arya (ThinkWeb.dev) on Dewatalks event July 1, 2021.

core web vitalscwvwebsite optimization
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love

Do you want to leverage HTML, CSS and JavaScripts APIs to deliver rich user experiences that outlive the framework du jour? Do You want to understand good front-end application architecture and performance principles. Then you want to build applications in Vanilla JS. Despite popular belief Vanilla JS is not as difficult to master and implement as you might think. In this tutorial Chris Love will demonstrate how to apply many common web performance optimization, good architecture and tricks to build a fast, native-like application user experience customers desire without dependency on large, fast food frameworks. This tutorial will demonstrate the following concepts: - Applying the 14kb Rule for Instant Loading - Markup Management - Eliminating Excess AJAX Calls - Working With and Around Application Cache - Applying Service Workers and HTTP/2 For Even Better User Experiences - Leveraging common browser APIs & good architecture

html5javascriptweb performance
10 things you can do to speed up your web app today   stir trek edition
Annoying?
10 things you can do to speed up your web app today   stir trek edition
Web Performance Optimization
Web performance optimization, WPO, or website optimization involves
ongoing monitoring and testing of websites to achieve optimum
performance under given constraints. Usually optimization is restricted
due to lack of complete information and metrics to evaluate the
performance of a website.
http://bit.ly/SWEh6E

Recommended for you

Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites Win

Studies have identified speed as the single most critical factor for e-commerce conversion. There are lots of changes you could make to your website, but none of them are as risk-free as increasing speed. Some people like yellow, some like blue, but nobody likes slow. This talk will explain how to measure speed, and how to make your site much faster with minimal effort.

websiteseoweb design and development
Website performance optimization
Website performance optimizationWebsite performance optimization
Website performance optimization

This presentation is made for how to optimize the performance of the website, different tools used and future trends in website development

web designwebsiteweb2.0
Introduction core web vitals
Introduction core web vitalsIntroduction core web vitals
Introduction core web vitals

This document discusses Core Web Vitals, which are user-centric web performance metrics defined by Google. It introduces the three Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Thresholds for what is considered good, adequate, or needs improvement are provided for each metric. The document also outlines tools that can be used to measure Core Web Vitals and explains how real user monitoring is important for field testing Core Web Vitals performance.

#androidappdevelopmentservices#webandmobileappdevelopmentcompany#buildappsforiosandandroid
Matt Cutts
"Also take a step back for a minute and consider the intent of this
change: a faster web is great for everyone, but especially for users.
Lots of websites have demonstrated that speeding up the user
experience results in more usage. So speeding up your website isn’t
just something that can affect your search rankings–it’s a fantastic idea
for your users.“
http://bit.ly/SPPB4k
SEO & Web Performance
• Faster Sites Rank Higher
• Faster is Better User Experience
• http://bit.ly/1Ezmko6
• Mobile First Web Applications Rank Higher
• Call Mobilegeddon
• http://bit.ly/1JFpsmE
Time is Money
• Faster Sites Have Higher Conversion Rates
• WalMart - http://bit.ly/S1fHSZ
• Google – http://bit.ly/WajJbB
• Amazon – http://bit.ly/S3UoAj
• ShopZilla - http://bit.ly/RIQMDM
WalMart
Folks at Walmart knew their pages were slow. As a for instance, initial
measurement showed that an item page took about 24 seconds to load
for the slowest 5% of users. Why? The usual culprits: too many page
elements, slow third-party scripts, multiple hosts (25% of page content
is served by partners, affiliates, and Marketplace), and various best
practice no-nos
http://bit.ly/WajJbB

Recommended for you

Time is the enemy
Time is the enemyTime is the enemy
Time is the enemy

When it comes to E-commerce, time is one of the most important factors in leading your store to success. If you want customers to stay longer, you have to offer them a pleasant on-line shopping experience. Speed is the key to achieve this.

magentoecommerceperformance
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning

Performance tuning presentation for Chicago Rails Conference. Focusing on Front end page improvements

railsindexesrailstuning
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications

Progressive Web Applications (PWA) is a comprehensive term describing web applications that implement a base set of browser platform features like HTTPS, Web Manifest and Service Workers. But it bleeds beyond the scope of an application's code because browsers are enabling qualified web applications to offer the same user experiences native application enjoy. This includes prominent home screen placement, push notifications, eliminated browser chrome and app store placement. Become a Progressive Web App expert with my course: Progressive Web Apps (PWA) Beginner to Expert -> http://PWACourse.com

businesstechnologyprogressive web applications
Google’s ½ Second
Half a second delay caused a 20% drop in traffic. Half a second delay
killed user satisfaction.
The lesson, Marissa said, is that speed matters. People do not like to
wait. Do not make them.
http://bit.ly/TPPhUp
Fast Facts
• 57% Will Abandon a Slow Site After 3 Seconds
• We Have to Concentrate 50% Harder For Slow Sites
• 78% Have Felt Stress or Anger With Slow Sites
• 44% Say Slow Sites Make Them Anxious
• 4% Have Thrown Their Phone
http://bit.ly/SuBLDR
Web Sites Are Getting Fat and Out of Shape
http://httpArchive.org
99 Files Requests – 2+MB
18 JavaScript Files - 318KB
6.4 CSS Files – 61KB
53 Images – 1.3MB
38 TCP Connections
17 Domains
46% Cacheable
Web Sites Are Getting Larger

Recommended for you

Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedUsing Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - Updated

Devices are as unique as their users. Detecting the end user’s platform is a fruitless expenditure that often leads to wrong assumptions. Maintaining multiple web applications for different platforms is not cost effective and stressful. Responsive web design is a way to design your applications for devices of all shapes, sizes and resolutions. This session covers a definition, examples and how to execute a proper mobile first responsive design. We will also cover how to use responsive images to ensure your application performs well.

html5responsive imagesweb design and development
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications

This is an older slide deck I realized I never uploaded. It is a slightly longer deck than the Night at the SPA deck. This features many concepts that are forerunners to the modern progressive web application. There are slides related to web performance best practices, JavaScript architecture, responsive web design, touch and much more.

single page appresponsive web designweb performance
Link prefetching presentation
Link prefetching presentationLink prefetching presentation
Link prefetching presentation

Link prefetching - the good the bad and the ugly - Itay Friedman & Yarin Goldman When improving performance, people usually solely focus on their own area of responsibility, neglecting to see the rest of the user’s flow. Utilizing the big picture, zooming in/out when needed, will get you the most surprising and useful insights, to get the most significant improvements for your users. We will specifically talk about how we utilized: - Prerendering and other resource hints. - (POC) Prediction models. - Insights from in-house performance measurements.

natural intelligenceweb performancelink prefetching
http://bit.ly/1zXjWqB
That's Great But I Work
in the Enterprise
Performance IS Relevant
• Do you really want to waste $$$
• You want to make co-workers hate you?
• And Possibly Throw a Phone at You
• Remember the Physiological Stats?
• Slow Web Apps Have Higher Data Entry Error Rates
• Due to Increase Cognitive Load
• Oh And You Are Going Mobile
• And You Already Have, Even If You and Your Boss Does Not Acknowledge It
http://bit.ly/16zFCXL

Recommended for you

Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG

My kick-off talk for a webinar titled "Technical SEO vs. UI/UX" which featured a panel of speakers discussing if and how SEO should work (more closely) together with UX. Enjoy!

seotechnical seoui
Performance Test Analysis- Hotels
Performance Test Analysis- HotelsPerformance Test Analysis- Hotels
Performance Test Analysis- Hotels

The document provides a performance test analysis of the hotels.com website. It identifies several opportunities to improve performance, including: reducing the number of HTTP requests by combining files; using a content delivery network to improve response times; compressing components with gzip; avoiding redirects; using cookie-free domains; minifying JavaScript and CSS; not scaling images in HTML; and reducing cookie size. Implementing these recommendations could help speed up page loading.

WordPress Hosting Basics
WordPress Hosting BasicsWordPress Hosting Basics
WordPress Hosting Basics

These slides are from a talk given at the Melbourne WordPress Meetup in November 2018. The topic was WordPress Hosting Basics, although not all of the content is WordPress specific, covering general topics such as DNS, security and performance.

wordpresswordpress meetupwordpress hosting
Good Code Is Cheaper
•Performance Best Practices Lead To:
•Well Structured Code
•Smaller Code
• Easier Maintenance
• Fewer Bugs
•Encourages Development Best Practices
•Encourages Discipline
OK How Do I Figure
Out How to Fix
Things?
Measure
•Load Time
•Page Speed Index
•Rendering
•Run-Time Performance
Set A Performance Budget
•Tim Kadlec
•http://bit.ly/1CUAfGx
•Typically Load Time
• Shoot for < 2 Seconds Over Broadband
• < 1 Second My Standard
• Page Weight
• What Doe My Web Site Cost? - http://whatdoesmysitecost.com/
• HTTP Chattiness

Recommended for you

Page Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic LookPage Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic Look

Because of mobility and changes in Google’s search algorithms, a lot of emphasis has been placed on page performance. But what exactly does that mean? Is it page load time? Image optimization? Content strategy and keyword performance? It’s all this and more! In this presentation, we’ll take a no-holds barred, holistic look at what page performance is and how to deal with it. (Hint: It’s all about the user experience!)

googleseoweb design
Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEE

Web performance refers to how fast a website works for each user, not how many users it can serve. Slow websites can negatively impact user experience and conversion rates, costing companies money. Most web performance issues come from the front-end rather than the back-end. Areas to focus on for improvement include JavaScript deferral, utilizing browser caching, reducing payload size and number of requests, progressive enhancement, and back-end optimizations like caching, server configuration, and query optimization.

web performance
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix itWhy your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it

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.

optimizationweb performancehttp/2
webpagetest.org
• Online Tool
• Identifies Common Performance Issues
• Must be Public URL
http://bit.ly/1dibffr
http://bit.ly/1dibffr
webpagetest.org – film strip view
YSlow Rules
1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Avoid empty src or href
4. Add an Expires or a Cache-Control Header
5. Gzip Components
6. Put StyleSheets at the Top
7. Put Scripts at the Bottom
8. Avoid CSS Expressions
9. Make JavaScript and CSS External
10. Reduce DNS Lookups
11. Minify JavaScript and CSS
12. Avoid Redirects
13. Remove Duplicate Scripts
14. Configure ETags
15. Make AJAX Cacheable
16. Use GET for AJAX Requests
17. Reduce the Number of DOM Elements
18. No 404s
19. Reduce Cookie Size
20. Use Cookie-Free Domains for
Components
21. Avoid Filters
22. Do Not Scale Images in HTML
23. Make favicon.ico Small and Cacheable
http://yhoo.it/W7BFIw

Recommended for you

Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix itWhy your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it

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 .

conversion optimization
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning

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.

performancewebcvcc
Website Performance
Website PerformanceWebsite Performance
Website Performance

The document discusses website performance and optimization. It notes that nearly half of users expect a site to load within 2 seconds and will abandon a site taking longer than 3 seconds. Common issues causing poor performance are bloated templates, unnecessary code, and too many HTTP requests. Suggested optimizations include minimizing assets, prioritizing visible content, image optimization, caching, compression, and lazy loading. Case studies show significant speed improvements after implementing optimizations. Metrics like Speed Index measure how quickly visible content displays to influence perceived performance.

1. Add A Fav Icon – Eliminate 404s
“Most of your scaling
problems wont be
glamorous“
Mike Krieger
http://bit.ly/QeKZsO
Make FavIcon Small and Cacheable
• Don’t Return 404
• YSlow Rule #18
• Make Sure Its Compatible
• PNG/ICO
• It Carries Cookie Weight
• Instagram Lesson #1
http://bit.ly/RUXEiL
2.Use a CDN
• Globally Distributes Resources Closer to Client
• Was Expensive
• Amazon CloudFront & Azure cost pennies a month
3. Far Future Expires Header
• Lets the Browser Cache Resources Locally
• Eliminates Future Http Requests
• The Fastest Http Request is the one not made
• Only Updates Resource if Changed on Server

Recommended for you

Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)

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.

pagespeedyslowperformance
Web performance
Web performanceWeb performance
Web performance

Web performance optimization techniques include: - Choosing an optimal hosting provider - Combining and minifying files to reduce size - Implementing caching at multiple levels (e.g. frameworks, databases) - Using content delivery networks - Optimizing database and SQL queries The document provides best practices and examples for optimizing websites using techniques like caching plugins, query optimization, indexing databases, and monitoring tools.

friendly mobileweb testingweb performance
Page Performance
Page PerformancePage Performance
Page Performance

Points.com webdev lunch and learn #2: Page performance. What makes websites slow, how to make them faster.

points.comwebsite performancewebdev best practices
4. Use LocalStorage For Storage & Caching
• Allows You to Keep Data Locally in a Hash Table
• localStorage
• sessionStorage
• Approximately 5-10MB
• Replace Cookies
• Great For Caching
• Use IndexDB for Larger Data Sets
AJAX Caching
• Checks localStorage Before Making AJAX Call
• Stores Data in localStorage with Expiration Value
• Radically Reduces Http Requests
• Radically Improves Performance
• The Fastest AJAX Request is the One That is Never
Made.
5. No More Cookies
• Cookies Add Weight
• Place Resources (img/css/js) on
Cookieless Domains
• CDNs Are Great For No Cookies
• Consider Local Storage Instead
SWA & Cookies
36

Recommended for you

performance.ppt
performance.pptperformance.ppt
performance.ppt

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.

High performance website
High performance websiteHigh performance website
High performance website

The document provides 14 tips for optimizing website performance based on the 80/20 rule. The tips include minimizing HTTP requests by combining files, using a CDN, adding caching headers, gzipping files, optimizing CSS and JS placement, avoiding redirects and duplicate scripts, and making Ajax cacheable. Following these best practices can significantly improve page load times by reducing network requests and making better use of browser caching.

WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016

This document discusses WordPress theme performance. It provides data from testing over 3,800 themes on metrics like speed score, number of resources, file sizes, and response bytes. The median theme in 2016 had a mobile speed score of 53, 432KB in total assets, and response bytes of 125KB for HTML, 101KB for CSS, and 155KB for JavaScript. Recommendations include optimizing assets by consolidating and minifying files, deferring non-essential scripts, and conditionally loading resources. The document emphasizes including performance in designs from the start and selecting themes that meet defined performance budgets.

wordpressthemesperformance
Impact of Cookies on Response Time
Is 78ms A Big Deal???
• Remember 95 Files
• 95 * 78ms = 7410ms or 7+ Seconds
• 1248ms when considering 6 parallel connections
• Does Cause Delay
• Parallel Downloads Help Overall Time
• Don’t Use 95 Files, Duh
6. Optimize Images
• Images are Too Large
• PNGCrush, Kraken.io
• Image Sprites
• Glyph Fonts
• Data URIs
• CSS Rules
• CSS Sprites
• Consider Gyph/Icon Font
• CSS Gradients, Border Radius, Shadows
• Text
• This is a 30KB Image – Possible Change to 0KB*

Recommended for you

Web Performance First Aid
Web Performance First AidWeb Performance First Aid
Web Performance First Aid

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.

ibm iphpperformance
10 Tips for Optimising WordPress
10 Tips for Optimising WordPress10 Tips for Optimising WordPress
10 Tips for Optimising WordPress

10 Tips for Optimising WordPress (You Won't Believe What #6 Is!) Presented by Andrew Marks at the Brisbane Northside WordPress Meetup on 13th June 2018.

wordpressplugins
How_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_FarmHow_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_Farm

This document provides recommendations for optimizing performance of a SharePoint farm. It suggests architecting the farm with separate web, service application, and database servers. It also provides tips for SQL Server tuning, such as setting the maximum RAM, formatting disks, and configuring maintenance plans. Additionally, it recommends techniques like caching, minimizing page size, limiting navigation depth, and leveraging tools to identify bottlenecks. The overall message is to consider each layer of the farm and apply techniques like caching, SQL optimization, and network configuration to improve performance.

7. Bundle & Minify CSS & JavaScript
• Eliminate Excess HTTP Requests
• Reduces Data Footprint
• This is a Release or Production Version
• Shoot for a Single JS and a Single CSS file in Production
7a. Inline Critical CSS & Remove Unused CSS
• Inlining Critical CSS Enables Instant Rendering Experience
• Remove Unused CSS
• UNCSS Module
• Identify Critical CSS
• Example: Most Bootstrap Sites Use <10% of Bootstrap
• Bootstrap Adds up to 600kb to Page Weight
Use A Client Build System
• Bundling & Minification is OK
• Grunt Is Very Easy & Extensive
• Validate Scripts
• Combine & Minify Scripts
• Validate CSS
• Combine & Minify CSS
• Critical CSS
• UNCSS
• Many Other Tasks
• Gulp, Broccoli are also good tools
• http://bit.ly/1kcrpuo
Grunt.js

Recommended for you

High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications

Day 6 of 7-days "JavaScript and Rich User Interfaces" training for my colleagues. It covers ways how to speed up your application.

yahooperformancejs
Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!

Is your farm struggling to server your organization? How long is it taking between page requests? Where is your bottleneck in your farm? Is your SQL Server tuned properly? Worried about upgrading due to poor performance? We will look at various tools for analyzing and measuring performance of your farm. We will look at simple SharePoint and IIS configuration options to instantly improve performance. I will discuss advanced approaches for analyzing, measuring and implementing optimizations in your farm as well as Performance Improvements in SharePoint 2013.

farmnetworkinfrastructure
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...

Presentation given in WP Meetup in October 2019. Includes fresh new tips from summer/fall 2019! A Must read for all WordPress site owners and developers.

wordpresswebsite optimizationsoftware speed
8. Gzip Text Content
• Browsers Support Gzip & Deflate Algorithms
• Reduces Text Base Content Size
• Makes it Easier to Traverse Intertubes
• 14kb Critical Packet Size
• This is due to HTTP’s Slow Start
• This is the Goal for Optimal Mobile Performance
Configure Gzip in IIS
Configure Gzip in Amazon S3 | CloudFront
9. CSS @ Top – JavaScript @ Bottom
• CSS is Read & Evaluated to Build CSSOM
• Late CSS causes Browser to ‘Start All Over’
• JavaScript is a Blocking Action
• Browser Stops Everything
• Script Must Be Loaded
• Script Must Be Evaluated
• Use Async & Defer Attributes

Recommended for you

Optimizing your WordPress website
Optimizing your WordPress websiteOptimizing your WordPress website
Optimizing your WordPress website

Presenter - Mary White Mary is the owner of MW for Designs (MWforDesigns.com) and she teaches website design with Html, CSS , Dreamweaver and WordPress in the Johnson County Community College continuing education department. • Learn why you NEED to optimize your website • Learn how to check your website speed • Learn all the "small things" you can do to speed up your website • Discover the most useful WordPress plugins to optimize your website • Need more? Get some advanced tips to speed up your site • Learn basic maintenance techniques to KEEP your site running fast

oct meetup 2014wordpresskcwordpress optimization
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance

Site speed is a ranking factor in Google, and for good reason. Visitors have a short attention span, and will quickly navigate away from a slow website, especially on mobile. This presentation covers essential tools and techniques for improving your load times and PageSpeed score, such as caching, image optimization, and plugin performance.

wordpresspagespeedwp
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance

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

website performanceweb performance testingweb performance monitoring
10. External CSS & JavaScript
• Allows Resources to be Cached Independently of Markup
• Reduces Page Weight
• Reduces Chance of Duplicate Code
• Can Be Bundled & Minified
Critical Rendering Path
Bonus – Use AppCache
• <html lang="en-US" manifest="ie11WebSite.appcache">
• Stores Resources Locally in a Sandbox Cache for the Domain
• Available Offline
• Has an Event API
Bonus – Use AppCache
CACHE MANIFEST
# version 0.07
CACHE:
#images
favicon.ico
img/purple-bkg.jpg
#css
css/site.min.css
#js
js/applib.js
NETWORK:
#http://example.com/api/
#http://api.rottentomatoes.com/api/public/v1.0/
FALLBACK:
#http://content9.flixster.com/movie/*.jpg /img/offline-poster.png

Recommended for you

Making the web faster
Making the web fasterMaking the web faster
Making the web faster

Presentation from the June 28, 2011 National Capital Area Google Technology Users Group on some of Google's efforts to make the web faster.

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction

The Fetch API is a modern replacement of the XMLHTTPRequest object. It is based on promises and makes making AJAX/API calls easier to manage and code. This slide deck is a quick introduction to the API.

pwajavascriptweb design and development
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications

Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.

pwaprogressive web applicationsweb development

More Related Content

What's hot

Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...
Thomas Audunhus
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
Chris Love
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
Chris Love
 
Building fast aspnet websites
Building fast aspnet websitesBuilding fast aspnet websites
Building fast aspnet websites
Maarten Louage
 
Core Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPressCore Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPress
ClementYo
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
Chris Love
 
Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites Win
Jonathan Hochman
 
Website performance optimization
Website performance optimizationWebsite performance optimization
Website performance optimization
Shubham Shinde
 
Introduction core web vitals
Introduction core web vitalsIntroduction core web vitals
Introduction core web vitals
SortdMediology
 
Time is the enemy
Time is the enemyTime is the enemy
Time is the enemy
Leonidas Palaiokostas
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
John McCaffrey
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
Chris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedUsing Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Chris Love
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
Chris Love
 
Link prefetching presentation
Link prefetching presentationLink prefetching presentation
Link prefetching presentation
Natural Intelligence
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Bastian Grimm
 
Performance Test Analysis- Hotels
Performance Test Analysis- HotelsPerformance Test Analysis- Hotels
Performance Test Analysis- Hotels
yassine Alozade
 
WordPress Hosting Basics
WordPress Hosting BasicsWordPress Hosting Basics
WordPress Hosting Basics
Chris Burgess
 
Page Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic LookPage Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic Look
Jeff Whitfield
 
Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEE
SergeyChernyshev
 

What's hot (20)

Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
 
Building fast aspnet websites
Building fast aspnet websitesBuilding fast aspnet websites
Building fast aspnet websites
 
Core Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPressCore Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPress
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
 
Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites Win
 
Website performance optimization
Website performance optimizationWebsite performance optimization
Website performance optimization
 
Introduction core web vitals
Introduction core web vitalsIntroduction core web vitals
Introduction core web vitals
 
Time is the enemy
Time is the enemyTime is the enemy
Time is the enemy
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedUsing Responsive Web Design To Make Your Web Work Everywhere - Updated
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Link prefetching presentation
Link prefetching presentationLink prefetching presentation
Link prefetching presentation
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
 
Performance Test Analysis- Hotels
Performance Test Analysis- HotelsPerformance Test Analysis- Hotels
Performance Test Analysis- Hotels
 
WordPress Hosting Basics
WordPress Hosting BasicsWordPress Hosting Basics
WordPress Hosting Basics
 
Page Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic LookPage Performance: A No-Holds Barred, Holistic Look
Page Performance: A No-Holds Barred, Holistic Look
 
Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEE
 

Similar to 10 things you can do to speed up your web app today stir trek edition

Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix itWhy your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
strommen
 
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix itWhy your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
Robert Flournoy
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
John McCaffrey
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
Hugo Fonseca
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 
Web performance
Web performanceWeb performance
Web performance
kareem zock
 
Page Performance
Page PerformancePage Performance
Page Performance
atorreno
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
fakeaccount225095
 
High performance website
High performance websiteHigh performance website
High performance website
Chamnap Chhorn
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
jancbeck
 
Web Performance First Aid
Web Performance First AidWeb Performance First Aid
Web Performance First Aid
Alan Seiden
 
10 Tips for Optimising WordPress
10 Tips for Optimising WordPress10 Tips for Optimising WordPress
10 Tips for Optimising WordPress
Andrew Marks
 
How_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_FarmHow_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_Farm
Nigel Price
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Siarhei Barysiuk
 
Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!
Brian Culver
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
Otto Kekäläinen
 
Optimizing your WordPress website
Optimizing your WordPress websiteOptimizing your WordPress website
Optimizing your WordPress website
mwfordesigns
 
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance
Douglas Yuen
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
Andrew Siemer
 
Making the web faster
Making the web fasterMaking the web faster
Making the web faster
Patrick Meenan
 

Similar to 10 things you can do to speed up your web app today stir trek edition (20)

Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix itWhy your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
 
Why your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix itWhy your slow loading website is costing you sales and how to fix it
Why your slow loading website is costing you sales and how to fix it
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
Web performance
Web performanceWeb performance
Web performance
 
Page Performance
Page PerformancePage Performance
Page Performance
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
High performance website
High performance websiteHigh performance website
High performance website
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
 
Web Performance First Aid
Web Performance First AidWeb Performance First Aid
Web Performance First Aid
 
10 Tips for Optimising WordPress
10 Tips for Optimising WordPress10 Tips for Optimising WordPress
10 Tips for Optimising WordPress
 
How_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_FarmHow_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_Farm
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
 
Optimizing your WordPress website
Optimizing your WordPress websiteOptimizing your WordPress website
Optimizing your WordPress website
 
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
 
Making the web faster
Making the web fasterMaking the web faster
Making the web faster
 

More from Chris Love

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction
Chris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
Chris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
Chris Love
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
Chris Love
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...
Chris Love
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image Strategy
Chris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
Chris Love
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
Chris Love
 
Touch the web
Touch the webTouch the web
Touch the web
Chris Love
 
SPAs Are Easy
SPAs Are EasySPAs Are Easy
SPAs Are Easy
Chris Love
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
Chris Love
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Chris Love
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
Chris Love
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love
 

More from Chris Love (20)

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Implementing a Responsive Image Strategy
Implementing a Responsive Image StrategyImplementing a Responsive Image Strategy
Implementing a Responsive Image Strategy
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 
Touch the web
Touch the webTouch the web
Touch the web
 
SPAs Are Easy
SPAs Are EasySPAs Are Easy
SPAs Are Easy
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 

Recently uploaded

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 

Recently uploaded (20)

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 

10 things you can do to speed up your web app today stir trek edition

  • 1. StirTrek Edition 10 Things You Can Do Today To Speed Up Your Web Application & Make More $$$$ Today! Chris Love @ChrisLove Love2Dev.com
  • 2. Who Am I • ASP.NET MVP • ASP Insider • Internet Explorer User Agent • Author • Speaker • Tweaker, Lover of Web, JavaScript, CSS & HTML5 • @ChrisLove • Love2Dev.com
  • 3. High Performance Single Page Web Applications • Responsive Design • Touch • Mobile First • SPA • Extensible, Scalable Architecture • Web Build and Workflow • Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89
  • 4. Slide Deck & Source Code • Slide Deck – slidesha.re/15YTrTT • Source Code – http://GitHub.com/docluv
  • 8. Web Performance Optimization Web performance optimization, WPO, or website optimization involves ongoing monitoring and testing of websites to achieve optimum performance under given constraints. Usually optimization is restricted due to lack of complete information and metrics to evaluate the performance of a website. http://bit.ly/SWEh6E
  • 9. Matt Cutts "Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn’t just something that can affect your search rankings–it’s a fantastic idea for your users.“ http://bit.ly/SPPB4k
  • 10. SEO & Web Performance • Faster Sites Rank Higher • Faster is Better User Experience • http://bit.ly/1Ezmko6 • Mobile First Web Applications Rank Higher • Call Mobilegeddon • http://bit.ly/1JFpsmE
  • 11. Time is Money • Faster Sites Have Higher Conversion Rates • WalMart - http://bit.ly/S1fHSZ • Google – http://bit.ly/WajJbB • Amazon – http://bit.ly/S3UoAj • ShopZilla - http://bit.ly/RIQMDM
  • 12. WalMart Folks at Walmart knew their pages were slow. As a for instance, initial measurement showed that an item page took about 24 seconds to load for the slowest 5% of users. Why? The usual culprits: too many page elements, slow third-party scripts, multiple hosts (25% of page content is served by partners, affiliates, and Marketplace), and various best practice no-nos http://bit.ly/WajJbB
  • 13. Google’s ½ Second Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction. The lesson, Marissa said, is that speed matters. People do not like to wait. Do not make them. http://bit.ly/TPPhUp
  • 14. Fast Facts • 57% Will Abandon a Slow Site After 3 Seconds • We Have to Concentrate 50% Harder For Slow Sites • 78% Have Felt Stress or Anger With Slow Sites • 44% Say Slow Sites Make Them Anxious • 4% Have Thrown Their Phone http://bit.ly/SuBLDR
  • 15. Web Sites Are Getting Fat and Out of Shape http://httpArchive.org 99 Files Requests – 2+MB 18 JavaScript Files - 318KB 6.4 CSS Files – 61KB 53 Images – 1.3MB 38 TCP Connections 17 Domains 46% Cacheable
  • 16. Web Sites Are Getting Larger
  • 18. That's Great But I Work in the Enterprise
  • 19. Performance IS Relevant • Do you really want to waste $$$ • You want to make co-workers hate you? • And Possibly Throw a Phone at You • Remember the Physiological Stats? • Slow Web Apps Have Higher Data Entry Error Rates • Due to Increase Cognitive Load • Oh And You Are Going Mobile • And You Already Have, Even If You and Your Boss Does Not Acknowledge It
  • 21. Good Code Is Cheaper •Performance Best Practices Lead To: •Well Structured Code •Smaller Code • Easier Maintenance • Fewer Bugs •Encourages Development Best Practices •Encourages Discipline
  • 22. OK How Do I Figure Out How to Fix Things?
  • 23. Measure •Load Time •Page Speed Index •Rendering •Run-Time Performance
  • 24. Set A Performance Budget •Tim Kadlec •http://bit.ly/1CUAfGx •Typically Load Time • Shoot for < 2 Seconds Over Broadband • < 1 Second My Standard • Page Weight • What Doe My Web Site Cost? - http://whatdoesmysitecost.com/ • HTTP Chattiness
  • 25. webpagetest.org • Online Tool • Identifies Common Performance Issues • Must be Public URL http://bit.ly/1dibffr
  • 28. YSlow Rules 1. Minimize HTTP Requests 2. Use a Content Delivery Network 3. Avoid empty src or href 4. Add an Expires or a Cache-Control Header 5. Gzip Components 6. Put StyleSheets at the Top 7. Put Scripts at the Bottom 8. Avoid CSS Expressions 9. Make JavaScript and CSS External 10. Reduce DNS Lookups 11. Minify JavaScript and CSS 12. Avoid Redirects 13. Remove Duplicate Scripts 14. Configure ETags 15. Make AJAX Cacheable 16. Use GET for AJAX Requests 17. Reduce the Number of DOM Elements 18. No 404s 19. Reduce Cookie Size 20. Use Cookie-Free Domains for Components 21. Avoid Filters 22. Do Not Scale Images in HTML 23. Make favicon.ico Small and Cacheable http://yhoo.it/W7BFIw
  • 29. 1. Add A Fav Icon – Eliminate 404s “Most of your scaling problems wont be glamorous“ Mike Krieger http://bit.ly/QeKZsO
  • 30. Make FavIcon Small and Cacheable • Don’t Return 404 • YSlow Rule #18 • Make Sure Its Compatible • PNG/ICO • It Carries Cookie Weight • Instagram Lesson #1 http://bit.ly/RUXEiL
  • 31. 2.Use a CDN • Globally Distributes Resources Closer to Client • Was Expensive • Amazon CloudFront & Azure cost pennies a month
  • 32. 3. Far Future Expires Header • Lets the Browser Cache Resources Locally • Eliminates Future Http Requests • The Fastest Http Request is the one not made • Only Updates Resource if Changed on Server
  • 33. 4. Use LocalStorage For Storage & Caching • Allows You to Keep Data Locally in a Hash Table • localStorage • sessionStorage • Approximately 5-10MB • Replace Cookies • Great For Caching • Use IndexDB for Larger Data Sets
  • 34. AJAX Caching • Checks localStorage Before Making AJAX Call • Stores Data in localStorage with Expiration Value • Radically Reduces Http Requests • Radically Improves Performance • The Fastest AJAX Request is the One That is Never Made.
  • 35. 5. No More Cookies • Cookies Add Weight • Place Resources (img/css/js) on Cookieless Domains • CDNs Are Great For No Cookies • Consider Local Storage Instead
  • 37. Impact of Cookies on Response Time
  • 38. Is 78ms A Big Deal??? • Remember 95 Files • 95 * 78ms = 7410ms or 7+ Seconds • 1248ms when considering 6 parallel connections • Does Cause Delay • Parallel Downloads Help Overall Time • Don’t Use 95 Files, Duh
  • 39. 6. Optimize Images • Images are Too Large • PNGCrush, Kraken.io • Image Sprites • Glyph Fonts • Data URIs • CSS Rules
  • 40. • CSS Sprites • Consider Gyph/Icon Font • CSS Gradients, Border Radius, Shadows • Text • This is a 30KB Image – Possible Change to 0KB*
  • 41. 7. Bundle & Minify CSS & JavaScript • Eliminate Excess HTTP Requests • Reduces Data Footprint • This is a Release or Production Version • Shoot for a Single JS and a Single CSS file in Production
  • 42. 7a. Inline Critical CSS & Remove Unused CSS • Inlining Critical CSS Enables Instant Rendering Experience • Remove Unused CSS • UNCSS Module • Identify Critical CSS • Example: Most Bootstrap Sites Use <10% of Bootstrap • Bootstrap Adds up to 600kb to Page Weight
  • 43. Use A Client Build System • Bundling & Minification is OK • Grunt Is Very Easy & Extensive • Validate Scripts • Combine & Minify Scripts • Validate CSS • Combine & Minify CSS • Critical CSS • UNCSS • Many Other Tasks • Gulp, Broccoli are also good tools • http://bit.ly/1kcrpuo
  • 45. 8. Gzip Text Content • Browsers Support Gzip & Deflate Algorithms • Reduces Text Base Content Size • Makes it Easier to Traverse Intertubes • 14kb Critical Packet Size • This is due to HTTP’s Slow Start • This is the Goal for Optimal Mobile Performance
  • 47. Configure Gzip in Amazon S3 | CloudFront
  • 48. 9. CSS @ Top – JavaScript @ Bottom • CSS is Read & Evaluated to Build CSSOM • Late CSS causes Browser to ‘Start All Over’ • JavaScript is a Blocking Action • Browser Stops Everything • Script Must Be Loaded • Script Must Be Evaluated • Use Async & Defer Attributes
  • 49. 10. External CSS & JavaScript • Allows Resources to be Cached Independently of Markup • Reduces Page Weight • Reduces Chance of Duplicate Code • Can Be Bundled & Minified
  • 51. Bonus – Use AppCache • <html lang="en-US" manifest="ie11WebSite.appcache"> • Stores Resources Locally in a Sandbox Cache for the Domain • Available Offline • Has an Event API
  • 52. Bonus – Use AppCache CACHE MANIFEST # version 0.07 CACHE: #images favicon.ico img/purple-bkg.jpg #css css/site.min.css #js js/applib.js NETWORK: #http://example.com/api/ #http://api.rottentomatoes.com/api/public/v1.0/ FALLBACK: #http://content9.flixster.com/movie/*.jpg /img/offline-poster.png

Editor's Notes

  1. Update these #s before the presentation as they are always updating
  2. Update chart from latest httpArchive stats