Overview: How to Measure your WebApp
10 likes1,187 views
The document discusses performance measurement and optimization for web applications, emphasizing that optimization relies on accurate measurement. It covers various factors affecting rendering performance, page loading times, and offers tools and further readings for optimization techniques. Users are encouraged to utilize performance APIs and profiling tools to enhance their web app's efficiency.
1 of 52
Downloaded 20 times
![Further Readings
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Profiling JavaScript Performance (en)
ECMA-262-3 in detail [huns.me]
Static Memory Javascript with Object Pools
Performance Tips for JavaScript in V8
Writing Fast, Memory-Efficient JavaScript (en)
Faster JavaScript Memoization For Improved App. Perf. (en)
10 Javascript Performance Boosting Tips (OLD!, en)
Make the Web Faster Articles (en)
Optimizing JavaScript code
Canvas Inspection using Chrome DevTools
JavaScript Memory Profiling (en)](https://image.slidesharecdn.com/overview-how-to-measure-your-web-app-140220195548-phpapp02/85/Overview-How-to-Measure-your-WebApp-32-320.jpg)
![Dump
vries=wno.efrac.eEtisyye'esr';
a tm
idwpromnegtnreBTp(maue)
fr(a i=0 i<ieslnt(;+i {
o vr
;
tm.egh) +)
vrrq=iesi;
a e
tm[]
cnoelg'H '+rqnm +'to '+rqdrto +'s)
osl.o(XR
e.ae
ok
e.uain
m';
}](https://image.slidesharecdn.com/overview-how-to-measure-your-web-app-140220195548-phpapp02/85/Overview-How-to-Measure-your-WebApp-49-320.jpg)
Ad
Recommended
GruntJS + Wordpress
GruntJS + WordpressLeonardo Balter Grunt is a JavaScript task runner that can automate repetitive tasks like minifying files, running tests, linting code, and more. It allows setting up workflows to run tasks on file changes. Common Grunt tasks for WordPress theme development include concatenating and minifying CSS and JS, running Sass/LESS compilers, and live reloading. Templates are available to generate WordPress plugin and theme projects with recommended file structures and tasks preconfigured.
Continuous Integration for front-end JavaScript
Continuous Integration for front-end JavaScriptLars Thorup The document discusses continuous integration for front-end JavaScript, highlighting tools such as Grunt, JSHint, and Jasmine for testing and analysis. It includes example code for functions, testing strategies, and how to set up configurations in a Grunt file. Additionally, it covers code coverage metrics and integrates with Jenkins for reporting.
Nodejs web service for starters
Nodejs web service for startersBruce Li Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that allows JavaScript to run on the server. The document provides an introduction to Node.js including what Node.js is, its advantages like being non-blocking and using JavaScript on both the frontend and backend, and how to structure a basic Node.js application. It also demonstrates how to build a simple web service in Node.js that takes two numbers as input and returns their multiplied output.
Javascript fullstasck
Javascript fullstasckWilliam Bruno Moraes This document provides a summary of the history and evolution of JavaScript and Node.js technologies. It discusses the creation of JavaScript in 1995 and key events like the launch of Node.js in 2009. Technologies like AJAX, MongoDB, and frameworks like AngularJS and React are also mentioned. The document shares links and resources for learning more about JavaScript and Node.js communities and documentation.
Herramientas front
Herramientas frontborya09 The document discusses essential front-end development tools, highlighting Node.js for building network applications, Grunt as a JavaScript task runner for automation, and Bower as a package manager for web libraries. It includes code snippets for using package.json and bower.json for managing dependencies, as well as examples of using Jade for templating and Compass for CSS authoring. Overall, it serves as a resource for developers seeking to streamline their web development workflow.
Functional javascript
Functional javascriptWilliam Bruno Moraes This document discusses functional programming concepts in JavaScript including:
- Functional programming focuses on dividing problems into smaller subproblems and immutable data.
- Functional programming principles include transparency, purity, and immutability.
- Benefits include writing pure functions without side effects, avoiding state changes by using immutable data, declarative programming, reducing complexity, and composition.
- Common functional programming techniques in JavaScript include map, filter, reduce, some, every, and lazy evaluation.
Let s Enjoy Node.js
Let s Enjoy Node.jsFred Chien The document discusses the capabilities and features of Node.js, emphasizing its use in server-side development with JavaScript. It provides code examples for creating a simple HTTP server, supporting multiple connections, and integrating with MongoDB. Additionally, it highlights community resources in Taiwan and encourages JavaScript developers to explore back-end programming with Node.js.
Server side scripting smack down - Node.js vs PHP
Server side scripting smack down - Node.js vs PHPMarc Gear The document compares PHP and Node.js in server-side scripting, discussing the strengths and weaknesses of each alongside various frameworks and performance aspects. It highlights Node.js's event-driven I/O model and emphasizes its use cases, while also asserting PHP's continued relevance. The document ultimately advocates for using both technologies based on specific requirements and scenarios.
Npm: beyond 'npm i'
Npm: beyond 'npm i'Pieter Herroelen NPM scripts allow developers to run predefined scripts at different stages of installing, publishing, and interacting with packages. These scripts are defined in the package.json file under the "scripts" key. Common script names include preinstall, install, postinstall, prepublish, publish, and postpublish. NPM versioning follows semantic versioning principles where versions are denoted as MAJOR.MINOR.PATCH. Dependencies can specify version ranges like tilde (~), caret (^), and hyphen (-) to control updates. Private NPM repositories and shrinkwrapping help ensure reproducible builds across environments. Scoped packages allow publishing packages under a unique namespace.
Brig：Node.js + QML 華麗大冒險
Brig：Node.js + QML 華麗大冒險Fred Chien This document discusses using JavaScript and Node.js with QML (Qt Modeling Language) for building applications. It provides an example of creating a basic window in QML using only a few lines of code. It also demonstrates how to load a QML file and interact with it from Node.js by setting and getting properties, triggering signals, and listening for signals. The document encourages learning more QML syntax and provides examples for building an IRC client or countdown timer combining Node.js and QML. It notes that with this approach, C++ is no longer needed and over 300,000 NPM modules can be utilized. It concludes by mentioning packaging Qt libraries as an NPM module and asking if there are any questions.
CSS Regression Tests
CSS Regression TestsKaloyan Kosev The document outlines CSS regression testing methods, categorizing them into four types: syntax, project standards, visual reference, and regression post-actions. It discusses the use of headless browsers like PhantomJS and SlimerJS, alongside tools like CasperJS and BackstopJS for automated testing and image comparison. Additionally, it provides configuration examples, a case study from OneStudio, and insights into challenges and alternatives in CSS testing.
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsk88hudson This document discusses using npm scripts for front-end automation and builds. It argues that npm scripts provide a simple, cross-compatible way to automate tasks like bundling, transpiling, testing and deployment without additional build tools. Npm scripts take advantage of existing CLI tools and allow decomposing complex automation into simple, composable tasks through lifecycle scripts and npm-run-all. Some tradeoffs are less extensibility and ongoing challenges with cross-platform support, but the approach aims to provide simpler mental models than alternative build systems.
S&T What I know about Node 110817
S&T What I know about Node 110817Dan Dineen Node is a JavaScript runtime environment that allows JavaScript to run on the server. It uses Google's V8 JavaScript engine and allows developers to build fast and scalable network applications using JavaScript. Node installs with NPM (Node Package Manager), which is used to install dependencies and share JavaScript code as reusable modules. Many modern web development processes use Node and NPM together to compile assets, run tasks, and share code.
Windows Azure loves OSS
Windows Azure loves OSSKazumi Hirose This document contains information about various tools and frameworks for working with Microsoft Azure including: ASP.NET MVC, Web API, and Razor which are open source; the Project Kudu GitHub repository; installing Azure tools and libraries via Composer, Pear, NPM, Pip, Gem and Maven; and using the Azure cross-platform command line interface tool.
Node.js with Express
Node.js with ExpressGergely Németh This document provides an overview of creating a web application using Node.js with the Express framework, including setup instructions, routing, middlewares, and configuration for different environments. It highlights the use of Express for handling requests and managing sessions, as well as rendering views with template engines. The document outlines essential functions and structures for building a basic Express application.
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Hervé Vũ Roussel CasperJS is a navigation scripting and testing utility for PhantomJS that allows testing of web pages and user interactions. It provides functions for navigation, clicking elements, filling forms, taking screenshots, and assertions. CasperJS runs quickly without a browser UI and allows debugging through verbose mode, capturing screenshots, and monitoring network requests and console logs. Tests can be refactored and common functions extracted to improve maintainability.
CasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingX-Team The document discusses PhantomJS, a headless WebKit browser that can be programmed using JavaScript, and outlines how to install and utilize it for tasks like taking screenshots and performance monitoring. It also introduces CasperJS, which serves as a testing framework on top of PhantomJS, offering functionalities for simulating user interactions and assertions. Installation instructions and code examples for both tools are provided, along with references for further information.
Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)Tekno Paul Node.js is a server-side JavaScript platform for easily building fast, scalable network applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, especially for real-time web applications with long-running operations. Node.js applications are written in JavaScript and can be run within the Node.js runtime on different platforms. Common uses of Node.js include web development, real-time applications, IoT, and scripting or build tasks.
Testing MeteorJS using CasperJS
Testing MeteorJS using CasperJSStephan Hochhaus This document summarizes a presentation about using the CasperJS testing framework to test dynamic web applications built with Meteor. It discusses the challenges of testing dynamic apps, provides an overview of CasperJS and how it can be used to automate browser tasks and application testing. It also includes examples of using CasperJS to test simple Todo and party apps created with Meteor.
Javascript why what and how
Javascript why what and howsureshpraja1234 The document provides an overview of JavaScript, describing its high-level interpreted nature and functionalities like closures, event loops, and asynchronous programming. It highlights the architecture of Node.js, which leverages Google’s V8 engine for server-side execution and emphasizes non-blocking I/O for improved concurrency. Additionally, it contrasts the operational models of Apache and Nginx, noting Nginx's efficiency through an event loop instead of multiple threads.
Use Node.js to create a REST API
Use Node.js to create a REST APIFabien Vauchelles This document provides an introduction and overview of Node.js, including what Node.js is, its architecture and basics, how to write "Hello World" programs in Node.js and Express, how to use modules, errors, middleware, routers, Mongoose and MongoDB for databases, and the MEAN stack. It also describes a tutorial for building a backend API with Node.js, Express, Mongoose and MongoDB.
Pragmatic Functional Programming in the JS land with Clojurescript and Om
Pragmatic Functional Programming in the JS land with Clojurescript and OmVagmi Mudumbai This document discusses ClojureScript and Om, a functional programming approach to building user interfaces in JavaScript. It mentions Google Closure Compiler, Om, Reagent, and Quiescent as ClojureScript tools. React.js is described as a view library rather than an MVC framework. ClojureScript is said to make React faster through features like persistent data structures, request animation frame, and the shouldComponentUpdate method. Code examples are offered to demonstrate these concepts.
#2 Hanoi Magento Meetup - Part 2: Knockout JS
#2 Hanoi Magento Meetup - Part 2: Knockout JSHanoi MagentoMeetup The document discusses KnockoutJS in the context of Magento 2, highlighting its key features such as declarative bindings, automatic UI refresh, and dependency tracking. It outlines the strengths and weaknesses of KnockoutJS compared to other JavaScript frameworks like React and AngularJS, noting its limitation in data storage and performance issues. Additionally, it covers the integration of KnockoutJS in Magento 2 and its application in a web-based point-of-sale system.
Modern Development Tools
Modern Development ToolsYe Maw The document outlines a traditional development process and how modern tools like npm, bower, grunt, and yo streamline the workflow by managing packages and automating tasks. It details installation steps for these tools and provides examples of common tasks and plugins that enhance the development experience. Additionally, it touches on CSS preprocessors like Sass and Less as part of the modern development landscape.
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowRiccardo Coppola This document discusses using Bower and Grunt together to manage front-end dependencies and files in a workflow. Bower is used to declare and install dependencies, while Grunt plugins like grunt-bowercopy and grunt-contrib-clean are used to copy dependencies to consistent locations and clean files. Setting up this workflow with Bower, grunt-bowercopy, grunt-contrib-clean, and Git can help organize a project's dependencies, facilitate tracking without committing all files, and reduce build times.
Site Testing with CasperJS
Site Testing with CasperJSJoseph Scott This document discusses using CasperJS for site testing. It provides an overview of CasperJS and PhantomJS, how to install them, CasperJS features like navigation, form filling, screenshot capturing, and testing. It also shows a simple CasperJS script, explains CasperJS is scriptable in JavaScript and CoffeeScript, and provides contact information for the author.
Introduction to Express and Grunt
Introduction to Express and GruntPeter deHaan This document introduces Express, a web development framework for Node.js, and Grunt, a JavaScript task runner. It describes Express as fast, lightweight, and minimalist, noting that it includes only necessary features. Grunt is presented as a tool for automating tasks like minification, compilation, unit testing and linting. The document provides instructions on setting up projects with Express and Grunt, demonstrating how to define tasks in a Gruntfile and develop custom tasks.
appborg, coffeesurgeon, moof, logging-system
appborg, coffeesurgeon, moof, logging-systemendian7000 This document discusses a simple and cheap logging server that logs HTTP request fragments to S3. It saves batches to S3 every few seconds for low cost of around $17 per day. It also discusses building cross-platform desktop applications using JavaScript and libraries instead of frameworks, communicating between components using JSON message passing. The document outlines approaches for Mac, Windows, and Linux and mentions some TODO items and future plans.
Measuring User Experience
Measuring User ExperienceAlois Reitbauer This document discusses measuring user experience by capturing performance metrics from web applications. It outlines challenges in measurement due to lack of standards and introduces W3C specifications for Navigation Timing, Resource Timing, and User Timing that expose timing data from browsers. Examples are given for measuring page load, resource download, and custom timing events. Open issues remain around sending performance data to servers, full browser support, and efficiently measuring bandwidth.
The Truth About Your Web App's Performance
The Truth About Your Web App's PerformanceJohn Riviello The document presents insights from John Riviello's talk on web app performance, focusing on tools, important data, and methods for gathering and analyzing that data. It highlights existing performance monitoring tools and frameworks while emphasizing the importance of logging specific metrics like network latency and processing time. The talk advocates for measuring performance at the 99th percentile to improve overall user experience.
More Related Content
What's hot (20)
Npm: beyond 'npm i'
Npm: beyond 'npm i'Pieter Herroelen NPM scripts allow developers to run predefined scripts at different stages of installing, publishing, and interacting with packages. These scripts are defined in the package.json file under the "scripts" key. Common script names include preinstall, install, postinstall, prepublish, publish, and postpublish. NPM versioning follows semantic versioning principles where versions are denoted as MAJOR.MINOR.PATCH. Dependencies can specify version ranges like tilde (~), caret (^), and hyphen (-) to control updates. Private NPM repositories and shrinkwrapping help ensure reproducible builds across environments. Scoped packages allow publishing packages under a unique namespace.
Brig：Node.js + QML 華麗大冒險
Brig：Node.js + QML 華麗大冒險Fred Chien This document discusses using JavaScript and Node.js with QML (Qt Modeling Language) for building applications. It provides an example of creating a basic window in QML using only a few lines of code. It also demonstrates how to load a QML file and interact with it from Node.js by setting and getting properties, triggering signals, and listening for signals. The document encourages learning more QML syntax and provides examples for building an IRC client or countdown timer combining Node.js and QML. It notes that with this approach, C++ is no longer needed and over 300,000 NPM modules can be utilized. It concludes by mentioning packaging Qt libraries as an NPM module and asking if there are any questions.
CSS Regression Tests
CSS Regression TestsKaloyan Kosev The document outlines CSS regression testing methods, categorizing them into four types: syntax, project standards, visual reference, and regression post-actions. It discusses the use of headless browsers like PhantomJS and SlimerJS, alongside tools like CasperJS and BackstopJS for automated testing and image comparison. Additionally, it provides configuration examples, a case study from OneStudio, and insights into challenges and alternatives in CSS testing.
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsk88hudson This document discusses using npm scripts for front-end automation and builds. It argues that npm scripts provide a simple, cross-compatible way to automate tasks like bundling, transpiling, testing and deployment without additional build tools. Npm scripts take advantage of existing CLI tools and allow decomposing complex automation into simple, composable tasks through lifecycle scripts and npm-run-all. Some tradeoffs are less extensibility and ongoing challenges with cross-platform support, but the approach aims to provide simpler mental models than alternative build systems.
S&T What I know about Node 110817
S&T What I know about Node 110817Dan Dineen Node is a JavaScript runtime environment that allows JavaScript to run on the server. It uses Google's V8 JavaScript engine and allows developers to build fast and scalable network applications using JavaScript. Node installs with NPM (Node Package Manager), which is used to install dependencies and share JavaScript code as reusable modules. Many modern web development processes use Node and NPM together to compile assets, run tasks, and share code.
Windows Azure loves OSS
Windows Azure loves OSSKazumi Hirose This document contains information about various tools and frameworks for working with Microsoft Azure including: ASP.NET MVC, Web API, and Razor which are open source; the Project Kudu GitHub repository; installing Azure tools and libraries via Composer, Pear, NPM, Pip, Gem and Maven; and using the Azure cross-platform command line interface tool.
Node.js with Express
Node.js with ExpressGergely Németh This document provides an overview of creating a web application using Node.js with the Express framework, including setup instructions, routing, middlewares, and configuration for different environments. It highlights the use of Express for handling requests and managing sessions, as well as rendering views with template engines. The document outlines essential functions and structures for building a basic Express application.
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Hervé Vũ Roussel CasperJS is a navigation scripting and testing utility for PhantomJS that allows testing of web pages and user interactions. It provides functions for navigation, clicking elements, filling forms, taking screenshots, and assertions. CasperJS runs quickly without a browser UI and allows debugging through verbose mode, capturing screenshots, and monitoring network requests and console logs. Tests can be refactored and common functions extracted to improve maintainability.
CasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingX-Team The document discusses PhantomJS, a headless WebKit browser that can be programmed using JavaScript, and outlines how to install and utilize it for tasks like taking screenshots and performance monitoring. It also introduces CasperJS, which serves as a testing framework on top of PhantomJS, offering functionalities for simulating user interactions and assertions. Installation instructions and code examples for both tools are provided, along with references for further information.
Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)Tekno Paul Node.js is a server-side JavaScript platform for easily building fast, scalable network applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, especially for real-time web applications with long-running operations. Node.js applications are written in JavaScript and can be run within the Node.js runtime on different platforms. Common uses of Node.js include web development, real-time applications, IoT, and scripting or build tasks.
Testing MeteorJS using CasperJS
Testing MeteorJS using CasperJSStephan Hochhaus This document summarizes a presentation about using the CasperJS testing framework to test dynamic web applications built with Meteor. It discusses the challenges of testing dynamic apps, provides an overview of CasperJS and how it can be used to automate browser tasks and application testing. It also includes examples of using CasperJS to test simple Todo and party apps created with Meteor.
Javascript why what and how
Javascript why what and howsureshpraja1234 The document provides an overview of JavaScript, describing its high-level interpreted nature and functionalities like closures, event loops, and asynchronous programming. It highlights the architecture of Node.js, which leverages Google’s V8 engine for server-side execution and emphasizes non-blocking I/O for improved concurrency. Additionally, it contrasts the operational models of Apache and Nginx, noting Nginx's efficiency through an event loop instead of multiple threads.
Use Node.js to create a REST API
Use Node.js to create a REST APIFabien Vauchelles This document provides an introduction and overview of Node.js, including what Node.js is, its architecture and basics, how to write "Hello World" programs in Node.js and Express, how to use modules, errors, middleware, routers, Mongoose and MongoDB for databases, and the MEAN stack. It also describes a tutorial for building a backend API with Node.js, Express, Mongoose and MongoDB.
Pragmatic Functional Programming in the JS land with Clojurescript and Om
Pragmatic Functional Programming in the JS land with Clojurescript and OmVagmi Mudumbai This document discusses ClojureScript and Om, a functional programming approach to building user interfaces in JavaScript. It mentions Google Closure Compiler, Om, Reagent, and Quiescent as ClojureScript tools. React.js is described as a view library rather than an MVC framework. ClojureScript is said to make React faster through features like persistent data structures, request animation frame, and the shouldComponentUpdate method. Code examples are offered to demonstrate these concepts.
#2 Hanoi Magento Meetup - Part 2: Knockout JS
#2 Hanoi Magento Meetup - Part 2: Knockout JSHanoi MagentoMeetup The document discusses KnockoutJS in the context of Magento 2, highlighting its key features such as declarative bindings, automatic UI refresh, and dependency tracking. It outlines the strengths and weaknesses of KnockoutJS compared to other JavaScript frameworks like React and AngularJS, noting its limitation in data storage and performance issues. Additionally, it covers the integration of KnockoutJS in Magento 2 and its application in a web-based point-of-sale system.
Modern Development Tools
Modern Development ToolsYe Maw The document outlines a traditional development process and how modern tools like npm, bower, grunt, and yo streamline the workflow by managing packages and automating tasks. It details installation steps for these tools and provides examples of common tasks and plugins that enhance the development experience. Additionally, it touches on CSS preprocessors like Sass and Less as part of the modern development landscape.
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowRiccardo Coppola This document discusses using Bower and Grunt together to manage front-end dependencies and files in a workflow. Bower is used to declare and install dependencies, while Grunt plugins like grunt-bowercopy and grunt-contrib-clean are used to copy dependencies to consistent locations and clean files. Setting up this workflow with Bower, grunt-bowercopy, grunt-contrib-clean, and Git can help organize a project's dependencies, facilitate tracking without committing all files, and reduce build times.
Site Testing with CasperJS
Site Testing with CasperJSJoseph Scott This document discusses using CasperJS for site testing. It provides an overview of CasperJS and PhantomJS, how to install them, CasperJS features like navigation, form filling, screenshot capturing, and testing. It also shows a simple CasperJS script, explains CasperJS is scriptable in JavaScript and CoffeeScript, and provides contact information for the author.
Introduction to Express and Grunt
Introduction to Express and GruntPeter deHaan This document introduces Express, a web development framework for Node.js, and Grunt, a JavaScript task runner. It describes Express as fast, lightweight, and minimalist, noting that it includes only necessary features. Grunt is presented as a tool for automating tasks like minification, compilation, unit testing and linting. The document provides instructions on setting up projects with Express and Grunt, demonstrating how to define tasks in a Gruntfile and develop custom tasks.
appborg, coffeesurgeon, moof, logging-system
appborg, coffeesurgeon, moof, logging-systemendian7000 This document discusses a simple and cheap logging server that logs HTTP request fragments to S3. It saves batches to S3 every few seconds for low cost of around $17 per day. It also discusses building cross-platform desktop applications using JavaScript and libraries instead of frameworks, communicating between components using JSON message passing. The document outlines approaches for Mac, Windows, and Linux and mentions some TODO items and future plans.
Similar to Overview: How to Measure your WebApp (20)
Measuring User Experience
Measuring User ExperienceAlois Reitbauer This document discusses measuring user experience by capturing performance metrics from web applications. It outlines challenges in measurement due to lack of standards and introduces W3C specifications for Navigation Timing, Resource Timing, and User Timing that expose timing data from browsers. Examples are given for measuring page load, resource download, and custom timing events. Open issues remain around sending performance data to servers, full browser support, and efficiently measuring bandwidth.
The Truth About Your Web App's Performance
The Truth About Your Web App's PerformanceJohn Riviello The document presents insights from John Riviello's talk on web app performance, focusing on tools, important data, and methods for gathering and analyzing that data. It highlights existing performance monitoring tools and frameworks while emphasizing the importance of logging specific metrics like network latency and processing time. The talk advocates for measuring performance at the 99th percentile to improve overall user experience.
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Tammy Everts The document discusses the importance of measuring website performance and user experience through various metrics and monitoring techniques. It highlights the differences between Real User Monitoring (RUM) and synthetic monitoring, emphasizing their respective benefits and the questions each can answer about user experience and site performance. The document also covers the impact of performance on business KPIs, providing insights into how load times affect conversion rates and recommending the establishment of a performance budget for website optimization.
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
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?)
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
JS performance tools
JS performance toolsDmytro Ovcharenko This document discusses various tools for analyzing JavaScript performance. It introduces Kojak, a tool for measuring JavaScript function performance, and jsPro, a visualization tool that works with Kojak. It provides instructions on how to use Kojak to track function call times and counts. It also explains how Kojak can be integrated with jsPro for online visualization of profiling data. Other profiling tools mentioned include Chrome Dev Tools, Google Analytics, AppDynamics, and PageSpeed Insights.
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen Doris Chen is a senior developer evangelist at Microsoft who focuses on web technologies like JavaScript and HTML5. Her presentation covers optimizing Cordova app performance, including measuring startup cost and memory usage, using CSS for gradients instead of images, animating with translate3d instead of left/top, and handling events through bubbling instead of individual listeners. She provides tips like keeping the DOM simple, batching layout changes, and cleaning up unused objects to prevent memory leaks.
Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013
Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013Máté Nádasdi The document discusses the importance of Chrome DevTools for JavaScript debugging and performance optimization, particularly on mobile platforms. It covers rendering, memory profiling, and tips to enhance efficiency by minimizing reflows and repaints, as well as managing memory to avoid leaks. The document also highlights the functionality of tools available in Google Chrome Canary for in-depth performance analysis.
Dev tools rendering & memory profiling
Dev tools rendering & memory profilingOpen Academy Chrome DevTools provide tools for debugging, profiling, and optimizing web page performance. They allow developers to visualize the rendering process, debug issues, and find opportunities to reduce layout reflows and repaints. Key features include the timeline panel to show paint rectangles and composited layer borders, heap snapshots to analyze memory usage, and memory profiling to detect leaks and optimize memory management. Using DevTools, developers can diagnose performance bottlenecks and ensure smooth interactions at 60 frames per second.
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018Anton Shulke The document discusses advancements in web performance metrics and optimization techniques, emphasizing user expectations for fast loading times. Key strategies include optimizing critical rendering paths, measuring various performance indicators (like first paint and time to interactive), and implementing efficient image and font loading practices. Overall, it highlights the importance of enhancing user experience through better speed and responsiveness of web pages.
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De RosaPROIDEA This document discusses the impact of JavaScript on web development, emphasizing the importance of performance through the use of various APIs like High Resolution Time API, User Timing API, and more. It highlights testing methodologies, browser support, and examples of implementing these APIs to enhance user experience and resource management. The author encourages developers to focus on performance and user engagement while acknowledging that some browsers may not yet fully support the latest technologies.
Capturing speed of user experience using user timing api
Capturing speed of user experience using user timing apiSergeyChernyshev The document discusses the importance of measuring user experience speed using the User Timing API, backed by examples from various companies highlighting the correlation between speed improvements and business outcomes. It emphasizes the need to focus on meaningful metrics rather than just easy-to-measure technical data, while also detailing the methodology for capturing these measurements effectively. The document concludes with insights on how to use these metrics for better user experience optimization and business performance analysis.
Web Performance Part 4 "Client-side performance"
Web Performance Part 4 "Client-side performance"Binary Studio The document discusses various aspects of client-side performance optimization, covering areas like perceived performance, build systems, JavaScript efficiency, and image optimization techniques. It emphasizes the importance of caching, efficient coding practices, and leveraging modern web technologies such as Web Workers and asynchronous data handling. Additionally, it provides practical tips and strategies for enhancing web application performance through CSS and media query optimizations.
Run Node Run
Run Node RunKevin Swiber This document discusses optimizing JavaScript performance in Node.js. It covers benchmarking Node applications, tips for writing efficient JavaScript that avoids hidden classes and dictionary mode in the V8 engine, profiling Node to find hot spots, and how the V8 optimizing compiler works. The presenter emphasizes the importance of speed and provides resources for further optimizing Node applications.
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018Paul Calvano The document discusses key metrics for measuring web performance and identifies common traits of high performing websites. It analyzes data from sources like HTTP Archive, Google BigQuery, and Akamai mPulse to show correlations between page load times and various performance factors. Some best practices recommended are reducing page weight by optimizing images, compressing text assets, limiting third parties and custom web fonts, and ensuring resources in the critical rendering path are optimized.
Measuring User Experience in the Browser
Measuring User Experience in the BrowserAlois Reitbauer The document discusses user experience management and outlines various web performance metrics that can be captured from browsers such as time-to-first-byte, onload time, bandwidth, rendering time, and resource download times. It describes the W3C Navigation Timing and Resource Timing APIs that browsers expose to capture this performance data non-intrusively. Examples are provided of how this data could be used for real-world applications like identifying geo hotspots, page error monitoring, and performance profiling.
Improving user experience with real user measurements
Improving user experience with real user measurements Samar Panda The document discusses the importance of measuring user experience through Real User Monitoring (RUM) to improve website performance. It emphasizes various performance metrics such as page load time, time to interactive, and first input delay, along with code instrumentation for tailored measurement. Tools and strategies for enhancing web performance are also highlighted, including performance budgets and the use of Chrome DevTools.
Common Traits of High Performing Websites, BairesWeb - Argentina
Common Traits of High Performing Websites, BairesWeb - ArgentinaPaul Calvano The document discusses web performance measurement, highlighting key metrics such as load time and first contentful paint. It emphasizes the impact of front-end and back-end issues on user experience, recommends reducing content and optimizing images, and notes that slower sites often rely heavily on third-party scripts. Additionally, it provides insights into web traffic patterns and the significance of choosing effective performance metrics.
Measuring web performance with user-centric metrics
Measuring web performance with user-centric metricsGiorgos Bamparopoulos The document discusses web performance and its impact on user experience, highlighting that slow loading times can significantly increase abandonment rates and decrease user engagement. It debunks common myths about measuring performance, emphasizing the need for a comprehensive understanding of various metrics that influence user experience. It also presents tools and methods for evaluating performance, encouraging continuous monitoring and optimization.
Optimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 confMáté Nádasdi The document discusses optimizing browser experience with a focus on mobile performance. It notes that page load speed and frame rate affect user engagement. Some key challenges for mobile include higher latency, touch input latency, and limited battery life. It provides tips for faster initial rendering, such as inline critical resources and lazy loading others. It also recommends tools for measuring performance, such as Pagespeed Insights, Webpagetest, and the DevTools timeline. Maintaining 60 frames per second is important for smooth interactions, requiring optimizations like smaller DOM changes and using requestAnimationFrame. The document demonstrates DevTools frames and layers panels.
Ad
More from Chang W. Doh (20)
Exploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively appChang W. Doh The document discusses new features for web applications and their integration with native applications. It explores what's new for PWAs and how they can have more native-like features. It also covers tips for PWAs and how web applications can better integrate with native applications, providing an example JSON configuration to define related native applications. The author is Chang W. Doh, a Web GDE, and their email is provided for contact.
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Chang W. Doh The document discusses Kotlin coroutines and asynchronous programming. It demonstrates how to write asynchronous code using coroutines and covers topics like launching coroutines with different dispatchers, cancelling coroutines, and handling timeouts. Key functions and concepts discussed include launch, delay, runBlocking, withTimeout, and coroutine contexts/dispatchers.
Hey Kotlin, How it works?
Hey Kotlin, How it works?Chang W. Doh The document contains code examples showing how Kotlin code is compiled to Java bytecode. It demonstrates how Kotlin classes, functions, properties, and other language features are represented in the compiled Java code. Key aspects that are summarized include data classes, property delegates like lazy, extension functions, and overriding behavior.
Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요Chang W. Doh The document contains a Kotlin programming code demonstrating various class structures, including sessions, person classes, and data classes. It showcases inheritance, method overloading, and property delegation, including function definitions and initializations. Additionally, it highlights error handling and nullability checks within the Kotlin framework.
introduction to Web Assembly
introduction to Web Assembly Chang W. Doh The document discusses Web Assembly (WASM) and its ability to run JavaScript code. WASM code can access the same Web APIs as JavaScript, including the DOM, Web Audio, and Web GL. It also mentions that WASM acts as a compiler target and bytecode format for the web.
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynoteChang W. Doh This document discusses progressive web apps and their advantages over traditional apps. Some key points:
- Progressive web apps have seen significant growth and now account for 13% of mobile page views, up from 3.53% previously.
- Features like push notifications, service workers and app-like behaviors allow progressive web apps to mimic native apps while avoiding app stores.
- Adoption has increased engagement and time spent on sites with progressive web apps, with an average of 76% more time spent on iOS and 30% more on Android.
- Major companies have seen success with progressive web apps, with some seeing over 1 million installs and 60% of users engaging with push notifications. Progressive web apps are poised
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSChang W. Doh The document discusses the importance of adopting secure connections (HTTPS) for web applications to prevent attacks such as man-in-the-middle. It emphasizes features like service workers, push notifications, and geolocation that require secure origins for optimal performance. Additionally, it references various resources for developers regarding secure web practices and migration concerns.
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나Chang W. Doh Emocon 2017 S/S 발표: 개인 프로젝트였던 자바스크립트 기반의 CSS Parser를 왜 만들었는가에 대한 우문우답.
Project GitHub: https://goo.gl/mK6DTU
NPM Reg.: https://goo.gl/aEFYSI
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101Chang W. Doh 2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 소개 부분 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Service Worker 201 (en)
Service Worker 201 (en)Chang W. Doh 1. Service Workers enable persistent background processing and provide hooks to take advantage of offline capabilities and push notifications in web applications.
2. They behave similarly to web workers but provide features like installation, versioning and upgrades that make them suitable for background processing even when a page is unloaded.
3. The Service Worker lifecycle is independent of web pages and browsing sessions, making it well-suited for features like push notifications, background sync and remote notifications.
Service Worker 101 (en)
Service Worker 101 (en)Chang W. Doh Web workers allow running scripts in parallel to the main page thread using message passing. Service workers are a specific type of web worker that enable persistent background processing and features like push notifications and offline caching. They have a lifecycle that is independent of pages and provide event-driven processing and version management. While dedicated and shared workers are created and controlled at runtime, service workers are installed in the browser and provide persistent background processing capabilities even when pages aren't active.
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh The document discusses strategies for optimizing instant and offline applications using service workers, focusing on performance improvements through techniques like compression, caching, and efficient resource loading. It highlights the importance of minimizing user steps, using smaller asset sizes, and leveraging service workers for managing network requests and offline behavior. Key best practices include implementing lazy loading, prefetching resources, and dynamic caching strategies to enhance user experience and application efficiency.
Chrome enchanted 2015
Chrome enchanted 2015Chang W. Doh This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh Talk about H/W acc. and rendering performance of chrome, and one more short talk about ServiceWorker.
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh Overview of WebComponents before diving into Polymer codelab @GDG DevFair 2014
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
Ad
Recently uploaded (20)
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...Safe Software Utilities and water companies play a key role in the creation of clean drinking water. The creation and maintenance of clean drinking water is becoming a critical problem due to pollution and pressure on the environment. A lot of data is necessary to create clean drinking water. For fieldworkers, two types of data are key: Asset data in an asset management system (EAM for example) and Geographic data in a GIS (ArcGIS Utility Network ). Keeping this type of data up to date and in sync is a challenge for many organizations, leading to duplicating data and creating a bulk of extra attributes and data to keep everything in sync. Using FME, it is possible to synchronize Enterprise Asset Management (EAM) data with the ArcGIS Utility Network in real time. Changes (creation, modification, deletion) in ArcGIS Pro are relayed to EAM via FME, and vice versa. This ensures continuous synchronization of both systems without daily bulk updates, minimizes risks, and seamlessly integrates with ArcGIS Utility Network services. This presentation focuses on the use of FME at a Dutch water company, to create a sync between the asset management and GIS.
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdfICT Frame Magazine Pvt. Ltd. Artificial Intelligence (AI) is rapidly changing the face of cybersecurity across the globe. In Nepal, the shift is already underway. Vice President of the Information Security Response Team Nepal (npCERT) and Information Security Consultant at One Cover Pvt. Ltd., Sudan Jha, recently presented an in-depth workshop on how AI can strengthen national security and digital defenses.
OpenPOWER Foundation & Open-Source Core Innovations
OpenPOWER Foundation & Open-Source Core InnovationsIBM penPOWER offers a fully open, royalty-free CPU architecture for custom chip design.
It enables both lightweight FPGA cores (like Microwatt) and high-performance processors (like POWER10).
Developers have full access to source code, specs, and tools for end-to-end chip creation.
It supports AI, HPC, cloud, and embedded workloads with proven performance.
Backed by a global community, it fosters innovation, education, and collaboration.
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc AI VIDEO MAGAZINE - r/aivideo community newsletter – Exclusive Tutorials: How to make an AI VIDEO from scratch, PLUS: How to make AI MUSIC, Hottest ai videos of 2025, Exclusive Interviews, New Tools, Previews, and MORE - JUNE 2025 ISSUE -
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic Threat Model Library Launch at OWASP Barcelona 2025
https://owasp.org/www-project-threat-model-library/
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash Techniques for Automatic Device Identification and Network Assignment
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software In this presentation, we want to explore powerful data integration and preparation for Machine Learning. FME is known for its ability to manipulate and transform geospatial data, connecting diverse data sources into efficient and automated workflows. By integrating FME with Machine Learning techniques, it is possible to transform raw data into valuable insights faster and more accurately, enabling intelligent analysis and data-driven decision making.
Powering Multi-Page Web Applications Using Flow Apps and FME Data Streaming
Powering Multi-Page Web Applications Using Flow Apps and FME Data StreamingSafe Software Unleash the potential of FME Flow to build and deploy advanced multi-page web applications with ease. Discover how Flow Apps and FME’s data streaming capabilities empower you to create interactive web experiences directly within FME Platform. Without the need for dedicated web-hosting infrastructure, FME enhances both data accessibility and user experience. Join us to explore how to unlock the full potential of FME for your web projects and seamlessly integrate data-driven applications into your workflows.
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand IBM LTO10
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's SeatSafe Software Finding a specific car online can be a time-consuming task, especially when checking multiple dealer websites. A few years ago, I faced this exact problem while searching for a particular vehicle in New Zealand. The local classified platform, Trade Me (similar to eBay), wasn’t yielding any results, so I expanded my search to second-hand dealer sites—only to realise that periodically checking each one was going to be tedious. That’s when I noticed something interesting: many of these websites used the same platform to manage their inventories. Recognising this, I reverse-engineered the platform’s structure and built an FME workspace that automated the search process for me. By integrating API calls and setting up periodic checks, I received real-time email alerts when matching cars were listed. In this presentation, I’ll walk through how I used FME to save hours of manual searching by creating a custom car-finding automation system. While FME can’t buy a car for you—yet—it can certainly help you find the one you’re after!
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my billstijn40 VMware’s pricing changes have forced organizations to rethink their datacenter cost management strategies. While FinOps is commonly associated with cloud environments, the FinOps Foundation has recently expanded its framework to include Scopes—and Datacenter is now officially part of the equation. In this session, we’ll map the FinOps Framework to a VMware-based datacenter, focusing on cost visibility, optimization, and automation. You’ll learn how to track costs more effectively, rightsize workloads, optimize licensing, and drive efficiency—all without migrating to the cloud. We’ll also explore how to align IT teams, finance, and leadership around cost-aware decision-making for on-prem environments. If your VMware bill keeps increasing and you need a new approach to cost management, this session is for you!
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash Lessons Learned from Developing Secure AI Workflows
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/key-requirements-to-successfully-implement-generative-ai-in-edge-devices-optimized-mapping-to-the-enhanced-npx6-neural-processing-unit-ip-a-presentation-from-synopsys/
Gordon Cooper, Principal Product Manager at Synopsys, presents the “Key Requirements to Successfully Implement Generative AI in Edge Devices—Optimized Mapping to the Enhanced NPX6 Neural Processing Unit IP” tutorial at the May 2025 Embedded Vision Summit.
In this talk, Cooper discusses emerging trends in generative AI for edge devices and the key role of transformer-based neural networks. He reviews the distinct attributes of transformers, their advantages over conventional convolutional neural networks and how they enable generative AI.
Cooper then covers key requirements that must be met for neural processing units (NPU) to support transformers and generative AI in edge device applications. He uses transformer-based generative AI examples to illustrate the efficient mapping of these workloads onto the enhanced Synopsys ARC NPX NPU IP family.
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software Managing airport and airspace data is no small task, especially when you’re expected to deliver it in AIXM format without spending a fortune on specialized tools. But what if there was a smarter, more affordable way?
Join us for a behind-the-scenes look at how Sweco partnered with Swedavia, the Swedish airport operator, to solve this challenge using FME and Esri.
Learn how they built automated workflows to manage periodic updates, merge airspace data, and support data extracts – all while meeting strict government reporting requirements to the Civil Aviation Administration of Sweden.
Even better? Swedavia built custom services and applications that use the FME Flow REST API to trigger jobs and retrieve results – streamlining tasks like securing the quality of new surveyor data, creating permdelta and baseline representations in the AIS schema, and generating AIXM extracts from their AIS data.
To conclude, FME expert Dean Hintz will walk through a GeoBorders reading workflow and highlight recent enhancements to FME’s AIXM (Aeronautical Information Exchange Model) processing and interpretation capabilities.
Discover how airports like Swedavia are harnessing the power of FME to simplify aviation data management, and how you can too.
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptxFIDO Alliance FIDO Seminar: Authentication for a Billion Consumers - Amazon
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdfICT Frame Magazine Pvt. Ltd.
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance
Overview: How to Measure your WebApp
- 4. There are many Optimization Checklists on the web. You already know or Just check them.
- 11. What makes '> 16ms' Repaint Issues Heavy CSS3 Effects Animation or Transition using heavy property Manipulating DOM dynamically Insertion / Deletion or Too much hack! translateZ(0); ...
- 12. Example vrsyeah =dcmn.oysye a tlCce ouetbd.tl; syeah.adn ="0x;/ cueo lyu,rpit tlCcepdig 2p" / as f aot ean syeah.odr="0xsldrd;/ cueo lyu,rpit tlCcebre 1p oi e" / as f aot ean syeah.oo ="le;/ cueo rpit tlCceclr bu" / as f ean syeah.akrudoo ="fd;/ cueo rpit tlCcebcgonClr #a" / as f ean syeah.otie="e" / cueo lyu,rpit tlCcefnSz 2m; / as f aot ean / nwDMeeet-cueo lyu,rpit / e O lmn as f aot ean dcmn.oyapnCiddcmn.raeetoe'eIG!); ouetbd.pedhl(ouetcetTxNd(Ltto') Finally, <body> triggers layout & repaint.
- 13. Further Readings 1. 2. 3. 4. 5. 6. 7. 8. 9. How Browsers Works Accelerated Rendering in Chrome: The Layer Model CSS Paint Time and Page Render Weight Avoiding Unnecessary Paints Avoiding Unnecessary Paints: Animated GIF Edition High Performance Animation Antialiasing 101 HTML5 Techniques for Optimizing Mobile Performance (en) Performance profiling with the Timeline (en)
- 16. "Make everything less and smaller" Minimize HTTP/HTTPS Requests Minify Assets: HTML, CSS, Script, Image, ... Make HTML within ~14KB Reducing Cookie size Make AJAX Cacheable and Using GET Gzipped ...
- 17. "and avoid blocking..." Put CSS at the Top Script at the Bottom ...
- 21. YSlow
- 26. Image Optimizer SmushIt.com PunyPNG.com PNGGauntlet for Windows Image Optim for Mac Generate multi-resolution images for srcset with Grunt
- 27. Further Readings 1. 2. 3. 4. 5. Google Developer: Page Speed Tools YSlow.org (en) Text Compression for Web Developers Image Compression for Web Developers Deep dive into the murky waters of script loading (en)
- 30. Catch Peaks: Bottleneck Functions? Up to you! Memory Usage A way to Garbage Collection :) GC friendly code
- 31. When you're using Canvas, Canvas Profile will rescue you.
- 32. Further Readings 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Profiling JavaScript Performance (en) ECMA-262-3 in detail [huns.me] Static Memory Javascript with Object Pools Performance Tips for JavaScript in V8 Writing Fast, Memory-Efficient JavaScript (en) Faster JavaScript Memoization For Improved App. Perf. (en) 10 Javascript Performance Boosting Tips (OLD!, en) Make the Web Faster Articles (en) Optimizing JavaScript code Canvas Inspection using Chrome DevTools JavaScript Memory Profiling (en)
- 34. Scripting Profiler & Timeline Starting Profiling & Timeline Recording fnto satrfln( { ucin trPoiig) cnoetmln(; osl.ieie) cnoepoie) osl.rfl(; } Finishing fnto fnsPoiig){ ucin iihrfln( cnoetmlnEd) osl.ieien(; cnoepoien(; osl.rflEd) }
- 39. PerformanceTiming Representing the moment, in miliseconds !
- 40. window.performance.now() High Resolution Timestamp from 'NavigationStart' (ucin){ fnto( <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml cnoelg "oesat a "+sat) osl.o( Cd trs t tr ; <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml }(; ))
- 41. User Timing
- 43. performance.measure() Calculating measurements between marks wno.efrac.esr( idwpromnemaue 'jxLaig, Aa_odn' 'jxtr' aaSat, 'jxn' aaEd ) ;
- 44. removing Marks & Measurements Clearing marks & measurements wno.eomnecerak('aefak) idwpfrac.laMrs nmOMr'; wno.efrac.laMaue(nmOMaueet) idwpromneceresrs'aefesrmn'; <pnsye"otfml:mnsae fn-ie 1p;fn-tl:nra;fn-ain:n sa tl=fn-aiy oopc; otsz: 7x otsye oml otvrat wno.efrac.laMaue(; / ceral/pn<r idwpromneceresrs) / la l<sa>b>
- 45. Retrieving Marks & Measurements Getting entries / gt'ak etis / e mr' nre wno.efrac.eEtisyye'ak) idwpromnegtnreBTp(mr'; / gt'esr'etis / e maue nre wno.efrac.eEtisyye'esr'; idwpromnegtnreBTp(maue) / gtetisb nm / e nre y ae wno.efrac.eEtisyae'ae) idwpromnegtnreBNm(nm';
- 46. Sample Code
- 47. XMLHttpRequest Basic code: vrmRq=nwXLtpeus(; a ye e MHtRqet) <r b> mRqoe(GT,ul tu) ye.pn'E' r, re; <pnsye"otfml:mnsae"mRqola =fnto(){/pn sa tl=fn-aiy oopc;>ye.nod ucine <sa> d_oehn(.epneet; osmtigersosTx) } <pnsye"otfml:mnsae"mRqsn(;/pn sa tl=fn-aiy oopc;>ye.ed)<sa>
- 48. Adding User-timing vrrqon =0 a eCut ; vrmRq=nwXLtpeus(; a ye e MHtRqet) mRqoe(GT,ul tu) ye.pn'E' r, re; mRqola =fnto(){ ye.nod ucine wno.efrac.ak'akedxr) idwpromnemr(mr_n_h'; rqn+; eCt+ wno.efrac.esr(mauexr'+rqn,'aksatxr,'akedxr) idwpromnemaue'esr_h_ eCt mr_tr_h' mr_n_h'; d_oehn(.epneet; osmtigersosTx) } wno.efrac.ak'aksatxr) idwpromnemr(mr_tr_h'; mRqsn(; ye.ed)
- 49. Dump vries=wno.efrac.eEtisyye'esr'; a tm idwpromnegtnreBTp(maue) fr(a i=0 i<ieslnt(;+i { o vr ; tm.egh) +) vrrq=iesi; a e tm[] cnoelg'H '+rqnm +'to '+rqdrto +'s) osl.o(XR e.ae ok e.uain m'; }
- 50. Further Readings 1. W3C Spec.: Navigation Timing (en) 2. W3C Spec.: User Timing (en) 3. User Timing API: Understanding your Web App
- 51. Q&A
- 52. Thank you!