Антон Серпутько “Testing and optimization of client-side performance”

•

1 like•179 views

The document discusses testing and optimizing client-side performance. It provides an overview of performance testing metrics like response times, throughput, and error rates. Load testing helps determine backend bottlenecks, capacity issues, and response times under load. Tips for performance optimization include using content delivery networks and caching, minimizing content sizes through techniques like image optimization, and reducing the critical rendering path by prioritizing static resource requests. Various tools for performance testing and analysis are also mentioned, including PageSpeed Insights, WebPageTest, and the Chrome DevTools Performance panel.

Testing and optimization of
client-side performance

Anton Serputko
Performance QA Engineer
Coach of qastart/performance courses

https://wpostats.com/
Case studies and experiments demonstrating the impact of web
performance optimization (WPO) on user experience and business metrics.

Client
Server
Client-server applications
Web server
Application server
Performance testing

Client
Server
Performance testing metrics:
● Response times
○ average
○ median
○ percentiles(90/95/99)
○ standart deviation
● Throughput
● Error rate
● Server-side metrics
○ cpu utilization
○ RAM usage
○ I/O opera
○ Network
○ ...
Load testing helps to determine:
- backend code bottlenecks
- cluster configuration issues
- system capacity/throughput/response
times/endurance
- ...

Real case
Login transaction - 2s under the load
Login transaction - 9s under the load

Client
Server
Send request
Receive response/ content
Process content on client

Send request
Keep in mind requests priority on client basing on
resource type(css, js, png..) and it attribute
Use deffer/async to load unnecesary scripts asynchronously
and not to block page rendering
link for
this_example

Host
static
resources
Content Delivery Network aka CDN usage
Send request

CDN resources download parallelization
max 10 download threads per host(~6) CDN subdomains
styles-cdn.example.com/1.css
styles-cdn.example.com/2.css
scripts-cdn.example.com/1.js
scripts-cdn.example.com/2.js
images-cdn.example.com/1.png
images-cdn.example.com/2.jpeg

Caching
https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Receive response/content
Tips for backend load testing
scenarios:
- Download static resouces(if
not using CDN)
- Do not record them
- Use caching controllers
Reduce content download
time:
- minification(css/js)
- use compression
- reduce quality/optimize
images(https://tinypng.com/)

Process content on client
Send request GET
/index.html
Receive first byte of
html
Starts parsing HTML
(aim to find all
necessary resources
to display page)
find static content
and send requests for
it (css, js, img, fonts..)
Update layer
tree
Composite
layers
Critical rendering path

Антон Серпутько “Testing and optimization of client-side performance”

Google page speed insights
Webpagetest
Sitespeed.io
Performance tab in Chrome
dev tools
Tools

Page speed insights
Gives suggestions:
- optimize images
- remove render blocking css
- laverage browser caching
- compression
- minify css/js
Performance tab in dev tools
- Network
- Detailed CRP events
- events type distribution
- JS functions execution time
- view layers
- frames per second
- paint frashing layout borders
Webpagetest
- features from page speed
insights
- view network waterfall
- run tests from different
locations
- execute scripts
Sitespeed.io
- features from page speed
insights
- pretty report with a lot of
performance metrics
- execute selenium scripts

Website Performance Optimization
https://www.udacity.com/course/website-performance-optimization--ud88
4
Browser Rendering Optimization
https://www.udacity.com/course/browser-rendering-optimization--ud860
Awesome courses

What's hot

Performance Engineering

Kumar Gupta

Isha Training Solutions Presents "Performance Engineering" course. For Course content and other information, pls follow below link http://ishatrainingsolutions.org/performance-engineering/ Live project support is provided on any performance testing tools and also any protocols under the roof -- Call me or Whatsapp me on +91-8019952427 ----------------------------------------------------------------------------------------------------------------------------------- Other Courses Offered by ISHA 1) Performance Engineering Course http://ishatrainingsolutions.org/performance-engineering/ 2) Cloud Performance Engineering in DevOps - Core to Master Level http://ishatrainingsolutions.org/cloud-performance-engineering-devops-the-complete-course/ 3) AppDynamics http://ishatrainingsolutions.org/app-dynamics/ 4) Dynatrace http://ishatrainingsolutions.org/dynatrace-training/ 5) Jmeter Core to Master Level http://ishatrainingsolutions.org/jmeter-core-to-master-level-course/ 6) Performance Testing using LoadRunner http://ishatrainingsolutions.org/microfocus-loadrunner/ 7) Advanced LoadRunner http://ishatrainingsolutions.org/advanced-scripting/ 8) Web Services Performance Testing using LoadRunner http://ishatrainingsolutions.org/performance-testing-of-webservices-using-loadrunner-recorded-videos/ 9) SAPGUI protocol - Performance Testing for SAP applications Using LoadRunner http://ishatrainingsolutions.org/loadrunner-sap-web-protocol/ 10) TruClient Protocol Using LoadRunner http://ishatrainingsolutions.org/true-client-protocol/ 11) Mobile Performance Testing using LoadRunner and JMeter http://ishatrainingsolutions.org/mobile-performance-testing-using-loadrunner/ 12) Performance Testing using NeoLoad http://ishatrainingsolutions.org/performance-testing-using-neoload/ 13) Splunk http://ishatrainingsolutions.org/splunk-training/ 14)Selenium http://ishatrainingsolutions.org/2792-2/ ********************************* For further details, pls contact me. Contact : Kumar Gupta Call : +91-8019952427/ Whatsapp : +91-8019952427 kgupta.testingtraining@gmail.com

Application performance monitoring with Applications Manager

ManageEngine, Zoho Corporation

HTTP/2 Prioritization

Patrick Meenan

This document discusses HTTP/2 prioritization and how resources are prioritized during loading. It begins by explaining how browsers prioritize different resource types during parsing and rendering. It then covers how HTTP/2 allows all requests to be sent immediately to the server with priority specifications, as opposed to HTTP/1.x which limits connections. The document concludes by discussing challenges with prioritization across connections and various tools for testing prioritization.

UC4 SCHEDULING

roelspi

UC4:global is an enterprise automation platform that provides: 1) A centralized database and server architecture to schedule and manage jobs across all platforms from a single solution. 2) High availability with active/active servers and little downtime for client reconnects during failures or maintenance. 3) Separate environments like development, QA, and production each with their own client but controlled changes between them.

Http2 in practice

Patrick Meenan

SAP LVM Integration with SAP BPA

Aliter Consulting

This document provides instructions for integrating SAP Business Process Automation (BPA) with SAP Landscape Virtualization Management (LVM). It involves creating a custom operation in LVM that allows controlling BPA queues. This is done by creating a provider implementation and custom operation in LVM along with a process definition and web service in BPA. It also requires registering a script with the host agent to connect the LVM and BPA configurations. The custom operation then allows holding or releasing BPA queues from the LVM interface.

Streamline your processes with jBPM 6

jsvitak

jBPM 6 is a flexible business process management suite written in Java that allows organizations to streamline processes. It addresses common process management challenges like inefficient manual processes and lack of visibility. Using jBPM, one customer automated key processes like benefit authorization and reduced customer service time from manual processes. They saw benefits like business users managing rules themselves and policies being consistently interpreted. jBPM 6 is open source and supported in Red Hat JBoss BPM Suite 6.

How fast is it?

Patrick Meenan

This document discusses various metrics for measuring website speed and performance. It outlines different technical, visual, and interactive metrics and explains considerations for synthetic versus real-user measurement. Key recommendations include using First Contentful Paint, Speed Index from synthetic tests and First Interactive for real-user measurement to track progress towards performance goals. Effective connection type distribution from real-user data should also be considered to ensure optimizations work for all users.

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]

Ortus Solutions, Corp

Client Side Measurement & Performance With Rails

Eric Falcao

This document discusses client-side performance measurement and optimization techniques for Rails applications. It recommends measuring performance using the clientperf gem to identify opportunities for improvement. Specific techniques mentioned include making fewer HTTP requests by combining components, gzipping components to reduce file sizes, adding expires headers to eliminate unnecessary requests, placing stylesheets at the top of pages to allow earlier rendering, and placing scripts at the bottom to avoid blocking other downloads. The document notes this is just a starting point and provides additional resources for further optimization.

SAP Post Copy Automation

Aliter Consulting

Optimizing performance

Zend by Rogue Wave Software

This is episode 4 of the building the perfect PHP app for the enterprise webinar series. Nothing is faster than a frustrated user clicking away from your site or abandoning your service. Avoid attrition by learning how to tune your applications towards lightning-fast page loads and response times. Learn: the basic principles behind enterprise PHP performance management; How to optimize workloads through background jobs and caching; How to measure performance and make data-driven decisions.

Wicket Live on Stage

Martijn Dashorst

Wicket Live on Stage features a Wicket project that has been in production use for over a year. The application is a web application for dutch highschools for administration of students' data for funding, guidance, graduation, attendance and financial purposes. The presentation describes the road to choosing Wicket as the core framework, and includes screenshots of the live demo (which isn't captured in this presentation) of Vocus (http://www.vocuslis.nl).

What's hot (13)

Performance Engineering

Application performance monitoring with Applications Manager

HTTP/2 Prioritization

UC4 SCHEDULING

Http2 in practice

SAP LVM Integration with SAP BPA

Streamline your processes with jBPM 6

How fast is it?

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]

Client Side Measurement & Performance With Rails

SAP Post Copy Automation

Optimizing performance

Wicket Live on Stage

Similar to Антон Серпутько “Testing and optimization of client-side performance”

Web Performance Optimization (WPO)

Betclic Everest Group Tech Team

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.

Tool it Up! - Session #2 - NetPanel

toolitup

This document provides an overview of the tools available in Chrome Dev Tools for web development and performance analysis. It describes the Elements, Styles, and Resources panels for inspecting and editing pages. It also covers the Network panel for analyzing resource loading, the Timeline for performance profiling, and the Audits and PageSpeed panels for optimization suggestions. Tips are provided on using these various Dev Tools to debug issues, optimize pages, and remotely debug on devices.

Metrics, metrics everywhere (but where the heck do you start?)

SOASTA

This document discusses various metrics for measuring website performance and user experience. It outlines different types of metrics including: - Network metrics like DNS resolution, TCP connection times, and time to first byte. - Browser metrics like start render time, DOM loading/ready times, and page load times. - Resource-level metrics obtained from the Resource Timing API like individual asset load times and response sizes. - User-centric metrics like Speed Index, time to visible content, and metrics for single-page applications without traditional page loads. It emphasizes the importance of measuring real user monitoring data alongside synthetic tests, and looking at higher percentiles rather than just averages due to variability in user environments and network conditions

Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)

Cliff Crocker

This document discusses various metrics for measuring website performance. It begins by noting that there are many metrics to consider and no single metric tells the whole story. It then discusses several key metrics for measuring different aspects of performance, including: - Front-end metrics like start render, DOM loading/ready, and page load that can isolate front-end from back-end performance. - Network metrics like DNS and TCP timings that provide insight into connectivity issues. - Resource timing metrics that measure individual assets to understand impacts of third parties and CDNs. - User timing metrics like measuring above-the-fold content that capture user experience. It emphasizes the importance of considering real user monitoring data alongside

Metrics, metrics everywhere (but where the heck do you start?)

Tammy Everts

Presentation Tier optimizations

Anup Hariharan Nair

The document discusses optimization of the presentation tier of web applications. It notes that the presentation tier is often overlooked despite being responsible for over 30% of client/server performance. Some key optimizations discussed include reducing HTTP requests, optimizing response objects by reducing size and load pattern, JavaScript minification and placement, image sprites, caching, and ensuring valid HTML markup.

QSpiders - Installation and Brief Dose of Load Runner

Qspiders - Software Testing Training Institute

The document provides information on performance testing processes and tools. It outlines 8 key steps: 1) create scripts, 2) create test scenarios, 3) execute load testing, 4) analyze results, 5) test reporting, 6) performance tuning, 7) communication planning, and 8) troubleshooting. It also discusses tools like LoadRunner, Controller, and Analysis for executing and analyzing tests. The document emphasizes having a thorough test process and communication plan to ensure performance testing is done correctly.

Monitoring web application response times, a new approach

Mark Friedman

Introduction to ASP.NET

Peter Gfader

Browser Based Performance Testing and Tuning

Bala Murali Krishna Kanchukambala

The document discusses client side performance testing. It defines client side performance as how fast a page loads for a single user on a browser or mobile device. Good client side performance is important for user experience and business metrics like sales. It recommends rules for faster loading websites, and introduces the WebPageTest tool for measuring client side performance metrics from multiple locations. WebPageTest provides waterfall views, filmstrip views, packet captures and reports to analyze page load times and identify optimization opportunities.

Tooling for Machine Learning: AWS Products, Open Source Tools, and DevOps Pra...

SQUADEX

This document provides an overview of machine learning tooling on AWS, including data pipelines, modeling and training, and deployment. It discusses AWS products for streaming and batch data ingestion, machine learning services like Amazon Machine Learning, Amazon SageMaker, and AWS Deep Learning AMIs. It also provides best practices for notebooks, model maintenance, and ML lifecycle management using tools like MLFlow and KubeFlow. The document concludes that while AWS provides a strong foundation, operations require additional layers for successful and reproducible machine learning.

Modelling Web Performance Optimization - FFSUx

Haribabu Nandyal Padmanaban

Graphing for Security

mr_secure

This document discusses integrating metrics collection and graphing into application frameworks to provide security-focused dashboards. It outlines collecting data from operating systems, services, frameworks and applications. Integration would make measurements frictionless for developers. Suggested dashboards focus on system health, application behaviors and errant behaviors to identify security issues. Metrics can detect problems like long queries, errors and abnormal page loads.

Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...

Nicholas Jansma

Boomerang is an open-source Real User Monitoring (RUM) JavaScript library used by thousands of websites to measure their visitor's experiences. The developers behind Boomerang take pride in building a reliable and performant third-party library that everyone can use without being concerned about its measurements affecting their site. We recently performed and shared an audit of Boomerang's performance, to help communicate its "cost of doing business", and in doing so we found several areas of code that we wanted to improve. We'll discuss how we performed the audit, some of the improvements we've made, how we're testing and validating our changes, and the real-time telemetry we capture for our library to ensure we're having as little of an impact as possible on the sites we're included on. Boomerang is an open-source Real User Monitoring (RUM) JavaScript library used by thousands of websites to measure their visitor's experiences. Boomerang runs on billions of page loads a day, either via the open-source library or as part of Akamai's mPulse RUM service. The developers behind Boomerang take pride in building a reliable and performant third-party library that everyone can use without being concerned about its measurements affecting their site. Recently, we performed and shared an audit of Boomerang's performance, to help communicate the "cost of doing business" of including Boomerang on a page while it takes its measurements. In doing the audit, we found several areas of code that we wanted to improve and have been making continuous improvements ever since. We've taken ideas and contributions from the OSS community, and have built a Performance Lab that helps "lock in" our improvements by continuously measuring the metrics that are important to us. We'll discuss how we performed the audit, some of the improvements we've made, how we're testing and validating our changes, and the real-time telemetry we capture on our library to ensure we're having as little of an impact as possible on the sites we're included on.

Salesforce Performance hacks - Client Side

Paris Salesforce Developer Group

Frontend performance

sacred 8

Performance on a budget

Dimitry Ushakov

This document summarizes a presentation on performance optimization on a budget. It discusses measuring and improving performance at the front-end through asset optimization, latency reduction, and client-side rendering. It also discusses measuring and optimizing performance at the backend through caching, databases, and server-side architecture. The document lists several free and paid tools for profiling, testing, and analyzing performance. It concludes with best practices for performance including establishing goals, architecture, testing, and an SDLC approach.

Presemtation Tier Optimizations

Anup Hariharan Nair

Performance is the most important attribute for success of any commercial and Enterprise Software. In a client server environment, developers focus a lot on optimizing the Data and Logical Tiers. Optimization of Presentation Tier which is responsible for more than 30 % of performance is usually ignored. The document is developed with the intension to teach the technical staff on Optimizing the Presentation Tier which significantly improves the performance of the Client Server applications.

Monitoring web application response times^lj a hybrid approach for windows

Mark Friedman

This document discusses web application performance monitoring and summarization. It covers tools like YSlow for analyzing page load times, and introduces an approach using Event Tracing for Windows (ETW) to capture performance data from web applications. This includes intercepting Yahoo Boomerang beacon requests to generate ETW events with page load time measurements and other data for analysis. A Web Application Trace Explorer is demonstrated to filter and report on these events to help explore server-side event streams and web application performance.

Benchmarking for HTTP/2

Kit Chan

This document discusses benchmarking HTTP/2 using the h2load tool. It provides examples of using h2load to test various HTTP/2 configurations and protocols. The document also summarizes several experiments comparing performance of HTTP/2 with different settings, such as with or without domain sharding, combo handling, and different servers like ATS and nghttpx. It concludes that we need to consider server capacity for HTTP/2 deployments and that h2load is not perfect, providing opportunities for contribution.

Similar to Антон Серпутько “Testing and optimization of client-side performance” (20)

Web Performance Optimization (WPO)

Tool it Up! - Session #2 - NetPanel

Metrics, metrics everywhere (but where the heck do you start?)

Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)

Metrics, metrics everywhere (but where the heck do you start?)

Presentation Tier optimizations

QSpiders - Installation and Brief Dose of Load Runner

Monitoring web application response times, a new approach

Introduction to ASP.NET

Browser Based Performance Testing and Tuning

Tooling for Machine Learning: AWS Products, Open Source Tools, and DevOps Pra...

Modelling Web Performance Optimization - FFSUx

Graphing for Security

Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...

Salesforce Performance hacks - Client Side

Frontend performance

Performance on a budget

Presemtation Tier Optimizations

Monitoring web application response times^lj a hybrid approach for windows

Benchmarking for HTTP/2

More from Dakiry

НАРЦИСИЗМ ЯК ПАСИВНЕ КУРІННЯ

Антон Серпутько “Testing and optimization of client-side performance”

More Related Content

What's hot

What's hot (13)

Similar to Антон Серпутько “Testing and optimization of client-side performance”

Similar to Антон Серпутько “Testing and optimization of client-side performance” (20)

More from Dakiry

More from Dakiry (20)

Recently uploaded

Recently uploaded (20)

Антон Серпутько “Testing and optimization of client-side performance”