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.
The document discusses the frontend single point of failure (SPOF) problem caused by blocking JavaScript and CSS files. It provides examples of popular websites, code libraries, widgets, and content management systems that contribute to frontend SPOFs. The document recommends solutions for browsers, widget owners, CMS developers, and site owners to address this issue through asynchronous loading of resources and better monitoring of frontend performance.
This document discusses various techniques for optimizing the frontend performance of web applications. It provides 5 rules: 1) Only optimize when it makes a meaningful difference. 2) Download resources in parallel to reduce page load time. 3) Eliminate unnecessary requests through techniques like merging, inlining, sprites and caching. 4) Defer parsing of JavaScripts when possible to improve perceived page load speeds. 5) Consider factors like server location and content delivery networks to improve global performance.
Building Atlassian Connect add-ons with client-server frameworks like Express.JS and Play produces powerful add-ons, but requires hosting and database consideration. In contrast, "static" Connect add-ons are easier to write and far simpler to deploy. A static Connect add-on is simply a set of files (including an atlassian-connect.json descriptor) that are web accessible, either through a web server or via deployment to a CDN. Static add-ons have several advantages. First, infinite scalability. Why pay for CPU when you can let the user agent do the work? Second, simple persistence. Why pay for disk when you have local storage and JIRA & Confluence's persistence REST APIs? Third, extreme performance. Let a worldwide CDN serve your files from the nearest edge - it's literally impossible to compete with a static add-on when it comes to performance! Finally, easy caching. Why bother serving requests when your unchanged static files can be cached indefinitely with simple HTTP caching? In this talk I'll highlight the benefits and restrictions of static add-on architecture, and discuss the nuts and bolts of implementing a static add-on. I'll also show off the static add-on skeleton that will get your static add-on development off to a flying start.
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
The document summarizes techniques for improving JavaScript performance in web applications. It discusses how JavaScript execution blocks the browser UI thread, leading to unresponsive user experiences if scripts run for too long. It then provides recommendations to limit JavaScript execution times to under 50ms and describes load time techniques like placing scripts at the bottom of the page, combining files, and loading scripts dynamically or deferring their execution to improve page load performance.
This document contains notes from a SQL Server 2008 for Developers course taught by Peter Gfader. The course covered topics such as high availability, online index operations, mirrored backups, and SQL CLR integration. SQL CLR integration allows writing database queries using .NET code. It provides benefits like complex calculations, custom types and aggregates, and leveraging .NET debugging. However, T-SQL is better suited for core data operations. The document provides examples of stored procedures, functions, triggers and other SQL CLR code.
Automated Web App Performance Testing Using WebDriverseleniumconf
This document discusses techniques for using WebDriver to perform web performance testing. It recommends measuring page load performance and interactive scenarios using tools like WebPageTest.org. It also suggests "marrying" WebDriver and WebPageTest by using functional tests to measure performance while test runs. Finally, it provides tips on how to instrument pages to measure load times around WebDriver calls and browser standards for performance metrics.
Altitude SF 2017: Granular, Precached, & Under BudgetFastly
New technologies like Service Workers and H/2 are making it possible to finally load code into our applications proportionate to what’s in view. These approaches require smarter frameworks and better tools, but enable us to once again write (roughly) what we send to users. Alex discusses the challenges and benefits of adopting these emerging approaches to app construction and delivery.
DeepCrawl Webinar: Performing SEO on the EdgeDan Taylor
Slides from my Edge SEO Deep Crawl webinar on February 27th 2019; in these slides I looked at what Edge SEO is, why we need it, and the conversations we need to have as Sapiens and organisations to prevent it's misuse.
Front End Development for Back End Developers - vJUG24 2017Matt Raible
Are you a backend developer that’s being pushed into front-end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools for frontend development and frameworks too!
Streamed live at 8pm MST on Oct 25, 2017! https://virtualjug.com/vjug24/
Enough with the javas cript already! de Nicholas ZakasKubide
The document discusses the growing prevalence and performance issues of JavaScript-heavy websites. It argues that much of the client-side logic in JavaScript libraries can be moved to the server by sharing code between server and client. Several companies that have done this, like Twitter and Airbnb, are cited as seeing significant improvements to initial page load times and a better user experience. The document also advocates for a progressive enhancement approach to JavaScript, loading scripts intelligently based on user needs and minimizing unused code.
WebPageTest is a great tool for testing and analysing how quickly web pages load.
Many people just use it as a simple testing tool, but it has advanced scripting capabilities for multi-page testing, completing forms etc.
It also has an API so performance testing can be integrated into Continuous Integration processes, used for monitoring and analysing how the web is built.
These slides explore some of these capabilities in more detail.
There are bonus slides after the "Thank You" slide
Looks at the challenge and opportunity of trying to adopt the JAMstack ("static app") model in a large enterprise based on the experience of PayPal. Talk was given at QCon London 2019.
Nowadays, there are many tips how start your project following the "Offline First" principle. But how add a support offline mode for applications that have already been released? What tactics and architectural approaches are used? What technologies and libraries are looking for? What storages are needed for implementation of pull/push strategies?
This document discusses integrating web performance testing into WebDriver by leveraging the WebDriver API. It proposes adding logging capabilities to WebDriver to collect performance metrics during tests without needing to integrate separate testing systems. This would allow performance data to be collected as a natural part of functional tests, improving the developer experience. The document includes examples of how to enable logging in WebDriver and access the performance log data after a test.
(WEB203) Building a Website That Costs Pennies to Operate | AWS re:Invent 2014Amazon Web Services
Amazon S3 gives you the ability to serve files from your Amazon S3 buckets. This session shows you how to set up a website with Amazon S3 to serve your static content. We show how you can use open source tools like Jekyll and Octopress to run a blog on your static site. Finally, you see how you can make that site more dynamic using other AWS products and the AWS SDK for JavaScript.
This document provides an overview of service workers and how they can be used. It begins with registering a service worker script and discussing the install and activate lifecycle events. It then covers using service workers to handle fetch events to provide offline functionality by precaching resources and serving cached responses when offline. Finally, it discusses several other potential uses of service workers like custom error pages, CDN failover, prefetching, and metrics collection.
AtlasCamp 2014: Building a Connect Add-on With Your Own StackAtlassian
Atlassian provides two easy-to-use frameworks for getting a Connect add-on up and running quickly – atlassian-connect-express and ac-play. But what if these frameworks don't quite fit your bill? What does it mean to build a Connect add-on with your own stack? What components do you need to write? And how does it all fit together? Attending this talk will give you enough background information to implement an add-on in the language and technology stack of your choice.
Web Components & Polymer 1.0 (Webinale Berlin)Hendrik Ebbers
This document discusses web components and Polymer 1.0. It begins with an introduction to web components and the different specifications that make them possible, including custom elements, HTML imports, shadow DOM, and templates. It then demonstrates how web components can be used to build reusable custom elements and templates for activities. Styles are kept encapsulated using shadow DOM. The document concludes by noting browser support for web components.
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.
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.
The document discusses techniques for optimizing website performance, including making fewer HTTP requests, leveraging browser caching with cache control headers, minimizing component sizes, optimizing asset delivery through techniques like sprites and concatenation, and following front-end performance best practices. It provides examples of how major sites implement various optimizations and shares results from experiments measuring the impact of optimizations on response times.
The document discusses techniques for improving website performance, including:
1. Focusing on front-end optimizations as they account for 80-90% of response time.
2. Following the 80/20 rule - optimizing the 20% of code that affects 80% of response time like assets on the front-end.
3. Using techniques like image sprites, combined scripts and stylesheets, CDNs, caching, gzip compression, and reducing cookie sizes and HTTP requests to improve response times.
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.
The document discusses techniques for optimizing front-end web performance. It provides examples of how much time is spent loading different parts of top websites, both with empty caches and full caches. The "performance golden rule" is that 80-90% of end-user response time is spent on the front-end. The document also outlines Yahoo's 14 rules for performance optimization, which include making fewer HTTP requests, using content delivery networks, adding Expires headers, gzipping components, script and CSS placement, and more.
This document discusses techniques for improving web performance. It begins with research on how caching and cookies impact performance. It then outlines 14 rules for optimizing performance, such as making fewer HTTP requests, using content delivery networks, gzipping components, placing scripts at the bottom of pages, and avoiding redirects. Case studies demonstrate how following these rules can significantly improve page load times. The document emphasizes starting performance improvements by focusing on front-end optimizations and advocates evangelizing best practices.
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
10 things you can do to speed up your web app today stir trek editionChris Love
Why is Web Performance Optimization Important and what are some things developers can do to ensure their applications perform well and please end users?
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersDistilled
We all know that site speed matters not only for users but also for search rankings. As marketers, how can we measure and improve the impact of site speed? Mat will cover a range of topics and tools, from the basic quick wins to some of the more surprising and cutting-edge techniques used by the largest websites in the world.
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.
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...Paul Calvano
Performance optimization is a cyclical process. We are constantly learning new ways to optimize, while simultaneously adopting new technologies and techniques that negatively impact performance. The HTTP Archive provides a great historical record of the technical side of the web, with almost 10 years of history and an ever growing dataset of sites.
During this session Paul will provide a brief overview of the HTTP Archive and then dive into some insights into the adoption of common web performance techniques and some of their measurable impacts.
The document provides best practices for optimizing frontend performance by reducing page load time. It discusses ways to reduce the number of HTTP requests, DNS lookups, redirects and duplicate scripts. It also recommends techniques like minifying assets, leveraging caching, prioritizing critical components, optimizing images and using content delivery networks.
Web performance optimization for modern web applicationsChris Love
Web Performance is extremely important to user experience and an important component of today's modern web applications. This session reviews why's and how's to make your modern web application perform better.
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
The 5 most common reasons for a slow WordPress site and how to fix them – ext...Otto Kekäl��inen
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.
The document discusses high performance web design. It covers measuring performance using tools like YSlow and PageSpeed, as well as techniques to improve performance such as reducing HTTP requests by combining scripts and stylesheets, using CSS sprites, and inline images. The document also discusses how performance impacts businesses and provides examples of component weights and grades for different websites according to YSlow rules. It emphasizes the importance of clear objectives, consistent design, and clean code for building high performance sites.
1.
Performance
Test
Analysis
Client
URL:
http://www.hotels.com/
Performed
by:
Yassine
Alozade
Date:
April
1,
2015
at
5:32:23
PM
EDT
Location:
New
York,
NY
USA
Browser:
Safari
Tools
used:
6.
6
1. Make fewer HTTP requests:
The page has 23 external Javascript scripts. Try combining them into one.��
The page has 7 external background images. Try combining them with CSS
sprites.
Note: Decreasing the number of components on a page reduces the
number of HTTP requests required to render the page, resulting in faster
page loads. Some ways to reduce the number of components include:
combine files, combine multiple scripts into one script, combine multiple
CSS files into one style sheet, and use CSS Sprites and image maps.
2. Use of Content Delivery Network (CDN)
There are 41 static components that are not on CDN.
• a1.cdn-hotels.com: 14 components, 814.4K (62.0K GZip)
• configusa.veinteractive.com: 2 components, 134.8K (41.3K GZip)
• nexus.ensighten.com: 8 components, 103.7K (100.1K GZip)
• survey.122.2o7.net: 1 component, 0.05K (0.06K GZip)
• i.spigtrmrjs.info: 2 components, 992.9K (992.9K GZip)
• c.spigtrmrjs.info: 1 component, 5.2K (5.2K GZip)
• cond01.etbxml.com: 1 component, 0.2K
• seal.verisign.com: 1 component, 3.0K
• www.hotels.com: 8 components, 473.3K
• www.ajaxcdn.org: 1 component, 48.4K
• 3057879.fls.doubleclick.net: 1 component, 2.2K
• 3399260.fls.doubleclick.net: 1 component, 9.4K
CDN's Used:
Www.hotels.com : Akamai
a1.cdn-hotels.com : Akamai
seal.verisign.com : Akamai
seal.websecurity.norton.com : Akamai
www.google-analytics.com : Google
survey.122.2o7.net : Akamai
media.expedia.com : Akamai
configusa.veinteractive.com : Akamai
s0.2mdn.net : Google
www.google.com : Google
www.gstatic.com : Google
Note: A CDN is necessary to achieve fast response times. The user's
proximity to your web server has an impact on response times. 80-90% of
the end-user response time is spent downloading all the components in
the page: images, stylesheets, scripts, Flash, etc.
7.
7
3. Compress components with gzip
There are 7 plain text components that should be sent compressed
• http://nexus.ensighten.com/hotelscom/prod/code/8ebd2b83716d09616
14c3698671458d9.js?...
• http://nexus.ensighten.com/hotelscom/prod/code/5036720379381174d
e00f0182a589ae4.js?...
• http://nexus.ensighten.com/hotelscom/prod/serverComponent.php?...
• http://www.google-analytics.com/ga.js
• https://seal.verisign.com/getseal?...
• http://www.hotels.com/__ssobj/core.js
• http://www.hotels.com/__ssobj/static/hrum-tracking-min.js
Note: Compression reduces response times by reducing the size of the
HTTP response. Gzip is the most popular and effective compression
method currently available and generally reduces the response size by
about 70%
4. Avoid URL redirects
There are 9 redirects
• https://seal.websecurity.norton.com/getseal?... redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://savingsslider-a.akamaihd.net/items/cb/img/9622c/dropdown-
logo.png redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://media.hotels.com/.../TPID=42&LOCATION=HOME&SUBLOCATION=
SEARCH&PLACEMENT=RIGHT1&LANGID=1033&ADSIZE=300X82
redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://media.hotels.com/.../TPID=42&LOCATION=HOME&SUBLOCATION=
SEARCH&PLACEMENT=CCOL1&LANGID=1033&ADSIZE=300X250
redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://fls.doubleclick.net/activityi;src=3057879;type=homep330;cat=ho
mep396;u1=US... redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://fls.doubleclick.net/activityi;src=3399260;type=nausc659;cat=naus
h340;u20=6... redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• https://foxi69.tlscdn.com/altHbHandler.html#opdom=spigtrmrjs.info&pa
rtner=spigtr&... redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://q.spigtrmrjs.info/dealdo/event-report?... redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
• http://q.nadijs.info/dealdo/event-report?... redirects to
http://3057879.fls.doubleclick.net/activityi;src=3057879;type...
Note: Inserting a redirect between the user and the final HTML document
delays everything on the page since nothing on the page can be rendered
and no components can be downloaded until the HTML document arrives.
8.
8
5. Use cookie-free domains
There are 8 components that are not cookie-free
• http://www.hotels.com/__ssobj/core.js
• http://www.hotels.com/__ssobj/static/hrum-tracking-min.js
• http://www.hotels.com/external/images/hermesContent-345d4612-
eeae-47c3-8647-f0c73cc96349-v1.0.jpg
• http://www.hotels.com/external/images/hermesContent-7861b54b-
9770-4af8-879b-3738c8166bcb-v1.0.png
• http://www.hotels.com/external/images/hermesContent-5ddc7ee1-
efdf-4546-bb02-15ee7cd172c6-v1.0.jpg
• http://www.hotels.com/external/images/hermesContent-a49b9b92-
f61f-444a-8359-66c1682d5cf0-v1.0.png
• http://www.hotels.com/external/images/hermesContent-a56aa8b7-
5275-436b-9f8a-0b158fe22f21-v1.0.png
• http://www.hotels.com/external/images/hermesContent-58945cf0-
746e-49be-925c-c2449c6b2a42-v1.0.jpg
Note: These cookies are unnecessary network traffic. To workaround this
problem, make sure that static components are requested with cookie-free
requests by creating a subdomain and hosting them there.
6. Minify JavaScript and CSS
There are 7 components that can be minified
• http://cond01.etbxml.com/api/web/hotels.php?...
• inline <style> tag #3
• inline <style> tag #5
• inline <style> tag #6
• inline <script> tag #13
• inline <script> tag #14
• inline <script> tag #15
Note: This improves response time since the size of the download files is
reduced.
9.
9
7. Do not scale images in HTML
• Total in images = 986.1 KB
• Target size = 306.2 KB
• Potential savings = 679.9 KB
There are 9 images that are scaled down
• http://www.hotels.com/external/images/hermesContent-7861b54b-
9770-4af8-879b-3738c8166bcb-v1.0.png
• http://www.hotels.com/external/images/hermesContent-5ddc7ee1-
efdf-4546-bb02-15ee7cd172c6-v1.0.jpg
• http://www.hotels.com/external/images/hermesContent-a49b9b92-
f61f-444a-8359-66c1682d5cf0-v1.0.png
• http://www.hotels.com/external/images/hermesContent-a56aa8b7-
5275-436b-9f8a-0b158fe22f21-v1.0.png
• http://www.hotels.com/external/images/hermesContent-58945cf0-
746e-49be-925c-c2449c6b2a42-v1.0.jpg
• http://a1.cdn-hotels.com/landing/images/97b61a86-56f7-4eb3-b62c-
74a8ab1929ff_20140723104715.jpg
• http://a1.cdn-hotels.com/landing/images/2ddeb5d1-8fa5-4d55-b78d-
62e5b0d208bf_20130621042935.jpg
• http://a1.cdn-hotels.com/landing/images/0004d096-68a2-4a59-8ea1-
e83dbdfca218_20130507102627.jpg
• http://a1.cdn-hotels.com/landing/images/2326e818-8707-451f-b8c7-
d3ecfbf13dc9_20130319101450.jpg
Note: Avoid setting image dimensions by using the width and height
attributes of the HTML image element. it can result in images being larger
than needed.
8. Reduce cookie size
There are 1916 bytes of cookies on this page
Note: Eliminate unnecessary cookies
Keep cookie sizes as low as possible to minimize the impact on the user
response time.
10.
10
Thank you for reading
Your Comments and suggestions are always welcome