1. A website is loaded by a browser through a multi-step process involving DNS lookups, TCP connections, downloading resources like HTML, CSS, JS, and images. This process can be slow due to the number of individual requests and dependencies between resources.
2. Ways to optimize the loading process include making the server fast, inlining critical resources, gzip compression, an optimized caching strategy, optimizing file delivery through techniques like CDNs and HTTP/2, bundling resources, optimizing images, avoiding unnecessary domains, minimizing web fonts, and JavaScript techniques like PJAX. Minifying assets can also speed up loading.
As we build richer, more complex web applications it’s easy to forget that speed is the cornerstone of user experience. Bing have found that a 2 second delay reduces revenue by 4%. Google know that half a second delay drops traffic by 20%. AOL have shown that users with a speedy experience stay 50% longer than users who have to wait. The evidence is clear – speed matters.
What’s more, most latency comes from the front-end, not the backend so the fixes are not specific to a particular platform. This session will examine a range of techniques from DOM & CSS tricks to web server and HTTP tweaks that can help improve front-end performance by 25-50%.
Whether you’re looking to save bandwidth, increase your conversion rate, retain visitors, save time or just make your users happy – the speed of your site matters.
Why your slow loading website is costing you sales and how to fix itRobert Flournoy
Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.
My talking points for the presentation on optimization of modern web applications. It is a huge topic, and I concentrated mostly on technical aspects of it.
Front End Optimization [Cloud Connect 2012]Strangeloop
From Hooman's presentation at the Cloud Performance Summit at Cloud Connect 2012:
Accelerating applications can mean different things to different people. In web applications, performance is impacted by everything from infrastructure to code to back-end processing to browser capabilities. This can get even more complicated in cloud environments. In this discussion, we'll focus on the issues surrounding the "front-end" performance of the application which includes all interactions between the browser and the app after the dynamic content (the base HTML) has been generated and delivered to the browser. We will discuss the major front-end performance pain points and some strategies for mitigating them (including hidden complications and gotchas), ultimately leading to a better perceived user experience.
As we build richer, more complex web applications it’s easy to forget that speed is the cornerstone of user experience. Bing have found that a 2 second delay reduces revenue by 4%. Google know that half a second delay drops traffic by 20%. AOL have shown that users with a speedy experience stay 50% longer than users who have to wait. The evidence is clear – speed matters.
What’s more, most latency comes from the front-end, not the backend so the fixes are not specific to a particular platform. This session will examine a range of techniques from DOM & CSS tricks to web server and HTTP tweaks that can help improve front-end performance by 25-50%.
Whether you’re looking to save bandwidth, increase your conversion rate, retain visitors, save time or just make your users happy – the speed of your site matters.
Why your slow loading website is costing you sales and how to fix itRobert Flournoy
Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.
My talking points for the presentation on optimization of modern web applications. It is a huge topic, and I concentrated mostly on technical aspects of it.
Front End Optimization [Cloud Connect 2012]Strangeloop
From Hooman's presentation at the Cloud Performance Summit at Cloud Connect 2012:
Accelerating applications can mean different things to different people. In web applications, performance is impacted by everything from infrastructure to code to back-end processing to browser capabilities. This can get even more complicated in cloud environments. In this discussion, we'll focus on the issues surrounding the "front-end" performance of the application which includes all interactions between the browser and the app after the dynamic content (the base HTML) has been generated and delivered to the browser. We will discuss the major front-end performance pain points and some strategies for mitigating them (including hidden complications and gotchas), ultimately leading to a better perceived user experience.
Did you know that 80% to 90% of the user's page-load time comes from components outside the firewall? Optimizing performance on the front end (e.g. from the client side) can enhance the user experience by reducing the response times of your web pages and making them load and render much faster.
Mobile & Desktop Cache 2.0: How To Create A Scriptable CacheBlaze Software Inc.
In this webinar, we’ll describe how you can build your own Scriptable Cache based on HTML5 localStorage, making Mobile cache work and giving Desktop Cache a boost. We’ll discuss the value of a Scriptable Cache, show the key elements you’ll need to create, and mention some of the pitfalls you need to beware of.
There are many ways to optimize your website, and it’s hard to know where to start. In this webinar we’ll show you five top performance optimizations and explain how each will impact your load time and order. We’ll also share tips and tricks on how to apply each, since the devil’s in the details. We’ll focus on the following five optimizations:
* Domain Sharding
* Consolidation
* Inlining
* Predict Head
* Asynchronous Javascript Loading
HTTP 1.1, which is the backbone of pretty much everything we’ve been using on the Internet, has been around for over 15 years. Recently the HTTP 2.0 specification has been completed and gradually application servers will start supporting it. It does make one wonder though: why change if something has been working for so long. In this talk we’ll examine the shortcomings of HTTP 1.1 and how 2.0 intends to address those. We’ll see what we need to know and how it’s going to affect our existing applications, and future ones.
This is my latest version of my client side performance presentations. This has been presented at TechEd NZ 2009 & to a couple of .NET user groups around NZ. This presentation focuses on the basics of client-side performance tuning.
SPA2015: Hooman Beheshti – The Future of CDNsFastly
Fastly VP of Technology Hooman Beheshti gives a keynote on The Future of CDNs at Software Practice Advancement Conference 2015.
More resources: http://spaconference.org/spa2015/uploads/resources/SPA%202015%20KEYNOTE%20AND%20DIVERSIONS.pdf
Reverse proxy & web cache with NGINX, HAProxy and VarnishEl Mahdi Benzekri
Discover the very wide world of web servers, in addition to the basic web deliverance fonctionnality, we will cover the reverse proxy, the resource caching and the load balancing.
Nginx and apache HTTPD will be used as web server and reverse proxy, and to illustrate some caching features we will also present varnish a powerful caching server.
To introduce load balancers we will compare between Nginx and Haproxy.
80% of the time it takes for a web page to load is on the client side.
Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.
Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists.Get firebug first.
Did you know that 80% to 90% of the user's page-load time comes from components outside the firewall? Optimizing performance on the front end (e.g. from the client side) can enhance the user experience by reducing the response times of your web pages and making them load and render much faster.
Mobile & Desktop Cache 2.0: How To Create A Scriptable CacheBlaze Software Inc.
In this webinar, we’ll describe how you can build your own Scriptable Cache based on HTML5 localStorage, making Mobile cache work and giving Desktop Cache a boost. We’ll discuss the value of a Scriptable Cache, show the key elements you’ll need to create, and mention some of the pitfalls you need to beware of.
There are many ways to optimize your website, and it’s hard to know where to start. In this webinar we’ll show you five top performance optimizations and explain how each will impact your load time and order. We’ll also share tips and tricks on how to apply each, since the devil’s in the details. We’ll focus on the following five optimizations:
* Domain Sharding
* Consolidation
* Inlining
* Predict Head
* Asynchronous Javascript Loading
HTTP 1.1, which is the backbone of pretty much everything we’ve been using on the Internet, has been around for over 15 years. Recently the HTTP 2.0 specification has been completed and gradually application servers will start supporting it. It does make one wonder though: why change if something has been working for so long. In this talk we’ll examine the shortcomings of HTTP 1.1 and how 2.0 intends to address those. We’ll see what we need to know and how it’s going to affect our existing applications, and future ones.
This is my latest version of my client side performance presentations. This has been presented at TechEd NZ 2009 & to a couple of .NET user groups around NZ. This presentation focuses on the basics of client-side performance tuning.
SPA2015: Hooman Beheshti – The Future of CDNsFastly
Fastly VP of Technology Hooman Beheshti gives a keynote on The Future of CDNs at Software Practice Advancement Conference 2015.
More resources: http://spaconference.org/spa2015/uploads/resources/SPA%202015%20KEYNOTE%20AND%20DIVERSIONS.pdf
Reverse proxy & web cache with NGINX, HAProxy and VarnishEl Mahdi Benzekri
Discover the very wide world of web servers, in addition to the basic web deliverance fonctionnality, we will cover the reverse proxy, the resource caching and the load balancing.
Nginx and apache HTTPD will be used as web server and reverse proxy, and to illustrate some caching features we will also present varnish a powerful caching server.
To introduce load balancers we will compare between Nginx and Haproxy.
80% of the time it takes for a web page to load is on the client side.
Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.
Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists.Get firebug first.
ИНФОРМАЦИОННАЯ ПОДДЕРЖКА КАК ЧАСТЬ ПОВЫШЕНИЯ КУЛЬТУРЫ ПРИМЕНЕНИЯ ДСИЗElenaKurilenko
ИНФОРМАЦИОННАЯ ПОДДЕРЖКА КАК ЧАСТЬ ПОВЫШЕНИЯ КУЛЬТУРЫ ПРИМЕНЕНИЯ ДСИЗ
Докладчик: Руководитель отдела корпоративных продаж
ЗАО «Скинкеа» Рылова Елена Владимировна
SULUR instrument and Tumba Craft of ChhattisgarhMadhulika Sanyal
The instrument is made from the traditional indigenous craft of Chhattisgarh, Bastar called 'Tumba craft'.
This is a short documentation of its background, making process, and future prospects of this craft in our archtecture
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.
Boost the Performance of SharePoint Today!Brian Culver
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.
JavaScript Service Worker Design Patterns for Better User Experiencereeder29
Not just for offline, JavaScript Service Workers give your web app a snappy response and predictable behavior. Your web app “feels like an app” to your more-satisfied users and stakeholders.
Configuring Apache Servers for Better Web PerormanceSpark::red
Apache is the most popular web server in the world, yet its default configuration can't handle high traffic. Learn how to setup Apache for high performance sites and leverage many of its available modules to deliver a faster web experience for your users. Discover how Apache can max out a 1 Gbps NIC and how to serve over 140,000 pages per minute with a small Apache cluster. This presentation was given by Spark::red's founding partner Devon Hillard in March 2012 at the Boston Web Performance Meetup.
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?
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.
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...Amazon Web Services
Traditionally, content delivery networks (CDNs) were known to accelerate static content. Amazon CloudFront has come a long way and now supports delivery of entire websites that include dynamic and static content. In this session, we introduce you to CloudFront’s dynamic delivery features that help improve the performance, scalability, and availability of your website while helping you lower your costs. We talk about architectural patterns such as SSL termination, close proximity connection termination, origin offload with keep-alive connections, and last-mile latency improvement. Also learn how to take advantage of Amazon Route 53's health check, automatic failover, and latency-based routing to build highly available web apps on AWS.
My Site is slow - Drupal Camp London 2013hernanibf
Drupal is a powerful and flexible tool to create web applications without building everything from scratch. This ability can drive developers to build complex websites without understanding what is Drupal doing behind the scenes.
The majority of Drupal performance talks mostly focus in aspects like infrastructure changes, caching strategies or comparisons between modules and architectures. Unfortunately when performance problems occur, development teams also follow strategies to replace different aspects of the platform looking only to standard aspects like slow queries without understanding and profiling the real problem.
The majority of times it is fundamental to measure and analyze what is the application is actually doing to understand te real problems. Drupal is a platform used by million of websites worlwide and its performance can in most cases be compared after measured.
In Acquia we do dozens of performance assessments per year, and even in most clients we find the same problems, often we find situations that only can be detected when measured and analized when looking to a profiler report.
In this session, I will explain how to detect performance problems looking to simple data, from logs to profiler data and providing some nice targets that can be analyzed to understand what is causing the uncommon bad performance of a site.
SharePoint Saturday San Antonio: SharePoint 2010 PerformanceBrian Culver
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.
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.
Similar to Building Lightning Fast Websites (for Twin Cities .NET User Group) (20)
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Your Digital Assistant.
Making complex approach simple. Straightforward process saves time. No more waiting to connect with people that matter to you. Safety first is not a cliché - Securely protect information in cloud storage to prevent any third party from accessing data.
Would you rather make your visitors feel burdened by making them wait? Or choose VizMan for a stress-free experience? VizMan is an automated visitor management system that works for any industries not limited to factories, societies, government institutes, and warehouses. A new age contactless way of logging information of visitors, employees, packages, and vehicles. VizMan is a digital logbook so it deters unnecessary use of paper or space since there is no requirement of bundles of registers that is left to collect dust in a corner of a room. Visitor’s essential details, helps in scheduling meetings for visitors and employees, and assists in supervising the attendance of the employees. With VizMan, visitors don’t need to wait for hours in long queues. VizMan handles visitors with the value they deserve because we know time is important to you.
Feasible Features
One Subscription, Four Modules – Admin, Employee, Receptionist, and Gatekeeper ensures confidentiality and prevents data from being manipulated
User Friendly – can be easily used on Android, iOS, and Web Interface
Multiple Accessibility – Log in through any device from any place at any time
One app for all industries – a Visitor Management System that works for any organisation.
Stress-free Sign-up
Visitor is registered and checked-in by the Receptionist
Host gets a notification, where they opt to Approve the meeting
Host notifies the Receptionist of the end of the meeting
Visitor is checked-out by the Receptionist
Host enters notes and remarks of the meeting
Customizable Components
Scheduling Meetings – Host can invite visitors for meetings and also approve, reject and reschedule meetings
Single/Bulk invites – Invitations can be sent individually to a visitor or collectively to many visitors
VIP Visitors – Additional security of data for VIP visitors to avoid misuse of information
Courier Management – Keeps a check on deliveries like commodities being delivered in and out of establishments
Alerts & Notifications – Get notified on SMS, email, and application
Parking Management – Manage availability of parking space
Individual log-in – Every user has their own log-in id
Visitor/Meeting Analytics – Evaluate notes and remarks of the meeting stored in the system
Visitor Management System is a secure and user friendly database manager that records, filters, tracks the visitors to your organization.
"Secure Your Premises with VizMan (VMS) – Get It Now"
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Strategies for Successful Data Migration Tools.pptxvarshanayak241
Data migration is a complex but essential task for organizations aiming to modernize their IT infrastructure and leverage new technologies. By understanding common challenges and implementing these strategies, businesses can achieve a successful migration with minimal disruption. Data Migration Tool like Ask On Data play a pivotal role in this journey, offering features that streamline the process, ensure data integrity, and maintain security. With the right approach and tools, organizations can turn the challenge of data migration into an opportunity for growth and innovation.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Modern design is crucial in today's digital environment, and this is especially true for SharePoint intranets. The design of these digital hubs is critical to user engagement and productivity enhancement. They are the cornerstone of internal collaboration and interaction within enterprises.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
A Comprehensive Look at Generative AI in Retail App Testing.pdfkalichargn70th171
Traditional software testing methods are being challenged in retail, where customer expectations and technological advancements continually shape the landscape. Enter generative AI—a transformative subset of artificial intelligence technologies poised to revolutionize software testing.
2. Introductions
• Former Principal Consultant @ ILM
• Apr 2014, founded fasterweb.io
• Automatically bundle, minify, gzip
• Then…automatically cache static parts of dynamic pages
• Then…backburner (for now)
• Web Perf Consulting
3. 1 second & 100 milliseconds
• Round numbers
• Nielsen usability study (1993)
• 0.1 second is reacting instantaneously
• 1 second is uninterrupted flow
• Achievable in 2015!
• …kinda…
4. 1 second before…what exactly?
• DOMContentLoaded event
• onload event
• Page rendered on client
• Before end-of-<body> scripts
• Page interactive on client
• After <body> & DOMContentLoaded scripts
5. Building Lightning-Fast Websites
1. How exactly is a website loaded by a browser?
• What makes it slow?
• Single download
• Page full of resources
2. How can we optimize the process?
6. Optimizing Website Load Time – Why?
• Speeding up a fundraising site by 60% increased donations by 14%.
Kyle Rush, Obama Campaign (2012)
• Speeding up advertising load times by roughly 1.5 seconds increased click-through rates by 12%.
DoubleClick (2011)
• Cutting 2.2 seconds off loading time increased conversions by 15%.
Blake Cutler, Mozilla (2010)
• A 400ms increase in load time caused a 5-9% increase in site abandonment.
Nicole Sullivan, Yahoo (2008)
15. Page Loading Process (server-rendered)
HTML Received
CSS/JS Requested
<head> JS/CSS
Received
<body> JS Received
HTML Requested
DOMContentLoaded
Waiting for
HTML…
Waiting for <head>
JS/CSS files…
Layout Complete
Page Rendered
No JavaScript
Waiting for
<body> JS files…
<head>
JavaScript
(no DOM)
<body>
JavaScript
DOMContentLoaded
JavaScript
Page is
Ready!
• DOM is parsed as bytes are received
• Parsing waits for JS Execution
• JS execution waits for CSS
• Rendering waits for CSS
• Rendering might wait for post-body JS
16. Waterfall Diagram
• Visualization of page HTTP requests
• Generated by Fiddler (Windows)
• HTTP only
• HAR format (HTTP Archive)
• Includes DNS, TCP, SSL
• Browser debug tools, plugins
• webpagetest.org
• tools.pingdom.com Load Sequence for jsfiddle.net
17. perfViewer.js
• In-page waterfall diagram
• Add <script> to your page
• Show for any page w/ bookmarklet
• Shows latency & download for all resources
• Uses HTML5 Resource Timing API
• (no latency info for cross-domain requests)
• www.joestrommen.com/perf-viewer-js
18. Building Lightning-Fast Websites
1. How exactly is a website loaded by a browser?
• What makes it slow?
• Single download
• Page full of resources
2. How can we optimize the process?
19. 1. Make your Server Fast
• Target 100ms
• Move expensive operations to AJAX calls
• Flush <head> immediately
• Put scripts in <head> with “defer” attribute
• Make HTML server-cacheable
21. 3. GZip Compression for Static Content
• Reduces text file size by ≈70%
• Not useful for images
• Use it!
• Please, please use it
• Be careful with GZip + secure dynamic content
• “Breach” attack - breachattack.com
• Attacker matches content to secret, GZip size shrinks
23. Versioned URLs in .NET
• BundleConfig ALL THE THINGS
• I’m working on a simpler way…
• github.com/strommen/WebPerfLib.NET
24. Caching != Fast Webpages
• Caching helps:
• Returning visitors
• Intra-site navigation
• Caching does not help for:
• New visitors
• Frequent updates
• Yahoo cache miss rate:
• Users: 40-60%
• Page Views: 20%
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
25. 5. Optimize File Delivery
• nginx – faster file server than Apache, IIS
• Also, caching reverse proxy
• Content Delivery Network (CDN)
• Geo-distributed file servers
• Really, really good at serving files
• Most support same-domain
• Downsides: low DNS TTL, purging
26. 6. Use HTTP/2 (or SPDY)
• “Multiplexing” – multiple downloads, one connection
• Caveats:
• Limited server support for HTTP/2
• Only supporting CDN is Akamai
• Not supported on IE <= 10 (or IE11 for Win7)
• Requires HTTPS
• Perf benefit…in theory
• Rumors of 10-30% improvement
• Concrete studies…?
27. 7. Bundle Resources
• One file, multiple scripts
• JavaScript or CSS
• Reduce request quantity
• Consider cacheability
• Useless (harmful!) for HTTP/2
28. 8. Optimize Images
• Choose appropriate format
• JPEG – lots of colors, fuzzy edges
• PNG – line art, few colors
• GIF – animated
• BMP – NEVER
• Choose appropriate size
• Optimize them!
• Save up to 75%
• Imageoptim (command-line)
• Kraken.io (web-based)
29. 9. Avoid Multiple Domains (sharding)
Pros
• More parallel downloads
• Avoid cookie uploads
Cons
• 6 per host is already a lot…
• TCP congestion – see Cloudshark
• Extra DNS lookups
• Extra TLS negotiations
• Extra complexity
• Obsolete with HTTP/2, SPDY
https://insouciant.org/tech/network-congestion-and-web-browsing/
30. 10. Minimize Web Fonts
• Incompatible with #2 “Eliminate first-render dependencies”
• While loading…
• Use websafe font? (Firefox)
• Show no text? (Chrome)
• Streamline font weights
• Bold font vs. CSS font-weight: bold;
• Common subset: 50% smaller
• http://www.fontsquirrel.com/tools/webfont-generator
31. 11. JavaScript tricks
• PJAX (github.com/defunkt/jquery-pjax)
• Link target is fetched with AJAX, pushed into DOM & history API
• No DOMContentLoaded
• Example: www.mprnews.org
• InstantClick (instantclick.io)
• PJAX, but fetch on mouseover/touchstart
• Example: www.joestrommen.com
32. 12. Minify JavaScript
• Reduce JS size by 20-60%
• Renames local vars to short names
• Removes whitespace & comments
• Including license comment! Be careful…
• Source Maps (.js.map file)
• Example: Grunt + Uglify
jquery-1.11.2 GZipped Text
Minified 32kB (-88%) 94kB (-66%)
Readable 80kB (-71%) 278kB
33. SPA Horror Stories…
• 1 MB of JavaScript, takes 2s
• Empty space @ 2.5-4s:
JavaScript execution (Core i5)
• 3 separate API calls
8 separate HTML templates
• Loading GIF @ 4.5s!!!
34. Recap
1. How exactly is a website loaded by a browser?
• What makes it slow?
2. How can we optimize the process?
35. Further Reading
• VelocityConf slides –
velocityconf.com/devops-web-performance-2015/public/schedule/grid/public
• Steve Souders – www.stevesouders.com
• PerfPlanet Calendar – calendar.perfplanet.com
• Twitter: #perfmatters
• My Github: github.com/strommen
• I’m always happy to discuss this stuff! joe@joestrommen.com
Audience poll:
Developer, Leader/Manager, Entrepreneur
Front-end, back-end – what technologies?
Nielsen study is at http://www.nngroup.com/articles/response-times-3-important-limits/
(before showing stats) As computer experts, we are bold, confident, and determined.
That’s unusual
Most internet users are scared, impatient, confused. Not just grandma!
Adding friction is going to make them less likely to succeed
Nice thing about web perf is that we can measure it
(stats)
Wide range of sites have reported stuff like this
Key point
Typical wired-network latency is speed of light to the server + 10ms. It’s not going to improve much
Bandwidth can be improved – it’s just building bigger pipes.
Unless your file is >100kB, it causes more overhead due to latency than bandwidth
Caveats: bandwidth #s are theoretical, latency #s are practical. is lost due to overhead…but
Still though, 100kB is massive – jQuery is only 33kB
Keep this in mind, and we’ll come back to it later
The first 4 of these are out of our control for the most part.
The first 4 of these are out of our control for the most part.
Key point
Let’s assume the page has some CSS & script references in the head, and a few more script references at the end of the body
The faster we download JavaScript, the faster the page is ready
What impacts the download speed?
X-Axis = time
Y-Axis = HTTP requests
Black bar is TTFB
Requests with nothing after the black bar are tiny – download is instantaneous
Node tool to help with critical CSS: https://github.com/addyosmani/critical
SPDY is basically a beta version of HTTP/2
I haven’t seen a single thing published along the lines of “We enabled SPDY and saw improvements of X%”
The polar bear images are 50kB and 18kB respectively. I don’t even remember which is which.
Web fonts are reasonably heavy – 20-100kB
Another thing to consider is that fonts can cause reflows when they load if they’re wider than the browser is going to guess.
Personal website – I hide the entire content while the font downloads
Bonus points – failed API call.
And all of this happens on mobile as well.
Using AngularJS doesn’t have to cause you 4s of overhead…but if you’re not careful, it will.
Be cognizant of page load