Frontend performance metrics

Jun 12, 20163 likes985 views

This document discusses Javascript performance metrics and optimization. It covers: 1. Measuring performance is important and should be done often. 2. There are many frontend frameworks and Javascript is the most popular language, leading to performance being critical. 3. Several studies show that even small improvements to page speed can significantly increase user engagement and conversions. 4. The document provides various tools and techniques for measuring and improving performance, including RAIL principles, Lighthouse, WebPageTest, and analyzing network requests, rendering, and computation.

Javascript performance
metrics * Measure first. Measure often.
@blackrabbit99

Who am I ?
● Gameloft
● WebSpellChecker
● DevPro
● Pics.io
● Epam
● KharkivJS organizer
● Community member
@blackrabbit99

Where are we now?
1) Desktop pattern
2) Incredibly fast development of technology
3) Frontend adopt backend responsibility
4) Enormous market that need it

What do we have?
1) More than 1000 frontend frameworks
2) Javascript is the most popular language
3) Frontend developers are over in-demand developers
4) Hipsta but rudimentary infrastructure

Why is it matter?
● Google: 2% slower = 2% less searching per user
● Yahoo: 400 milliseconds faster = 9% more traffic
● AOL: Faster pages = more page views
● Amazon: 100 milliseconds faster = 1% more revenue
● Aberdeen Group: 1 second slower = 11% fewer page
views, 7% less conversion
● Google uses website speed in search ranking.

Dev Tools Audit
● Network requests
● Browser caching
● Cookies size
● Ordering of your styles and scripts
● Unused css

Page Speed Insight
https://developers.google.com/speed/pagespeed/insights/

Page Speed Insight
● Enable compression
● Minify CSS
● Minify JavaScript
● Prioritize visible content
● Reduce server response time
● Configure the viewport
● Avoid app install interstitials that hide content
● Avoid plugins
● Size content to viewport

PSI
● strategy mobile|desktop
● format cli|json|tap
● locale
● threshold

Web Page test
npm install webpagetest
The API key is limited to 200 page loads per day

Phantomas
phantom or slimmer
modular approach
python or node
wait for selectors
run locally
export to elastic search
Request monitor
Assets time
Dom Complexity
Window performance
Error
Console alerts

Browser Perf env
● SauceLab
● Selenium
● BrowserStack

Browser Perf
● Cordova/Phonegap
● Hybrid Mobile Application

Browser Perf
Custom behavior scripts !!!

https://github.
com/blackrabbit99/browser-
performance-testing-tools

Thank you for being with me
@blackrabbit99

This document discusses front-end performance measurement. It recommends measuring performance at every stage of a project's lifecycle using both synthetic and real user monitoring tools. Key metrics to measure include time to first byte, speed index, user timings. Both types of tools provide valuable but different insights and should be used together. Performance data should be reported visually through dashboards to make it relevant and actionable. The goal is to establish a "culture of performance" and catch problems early.

17 Web Performance Metrics You Should Care AboutEvgeny Tsarkov

This document discusses 17 key web performance metrics across four categories: front-end user experience metrics, backend performance metrics, content complexity metrics, and advanced monitoring tips. It provides descriptions and average metrics for each, including time to title, time to start render, DNS time, connection time, asset weights, counts, and number of domains. The document emphasizes that measuring these metrics through continuous monitoring provides knowledge to optimize performance and improve the user experience. Advanced monitoring tips include setting service level agreements, defining performance issues, and automating alerts.

Making Facebook Fasterguest1240e7c

The PRPL PatternRed Pill Now

Performance.now() fast but not furiousAnna Migas

Gatsby introBen McCormick

This document introduces Gatsby.js, a static site generator built with React, Webpack, and GraphQL. It discusses static site generators and their benefits like fast load times, simplicity, and reliability. Gatsby allows building lightning fast websites, especially for content that doesn't change frequently, like blogs, business sites, and ecommerce sites. The document explains key concepts behind Gatsby like React, Webpack, and GraphQL and demonstrates Gatsby by reviewing the author's blog built with it. While Gatsby is still early, its benefits include optimized loading, best practices out of the box, and flexibility of a React application.

M is for modernizationRed Pill Now

Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman

HTML5: what's new?Chris Mills

Migration Best-Practices: Successfully re-launching your website - SMX New Yo...Bastian Grimm

This document provides best practices for successfully migrating a website from HTTP to HTTPS. It recommends a granular, multi-step approach including thorough planning, documentation, testing, and preparation work. Key steps include updating internal and external links, XML sitemaps, structured data, headers, and more to reference the new HTTPS URLs. It also covers monitoring rankings, using search console tools, and redirecting URLs with 301 redirects after all changes are made before the official migration go-live. The goal is to minimize any potential negative SEO impacts from the migration.

Modern Static Site with GatsbyJSRiza Fahmi

GatsbyJS is a site generator that allows you to build modern, fast and secure apps and websites using React, GraphQL, and other tools. It focuses on developer experience with batteries included and features like hot reloading. Popular sites using Gatsby include reactjs.org, airbnb.io, and figma.com. Gatsby gets data from various sources and delivers sites via services like S3, Netlify, and GitHub Pages. Developers can install Gatsby globally, generate a new Gatsby site, and develop locally while previewing changes in real time.

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

A Modern Approach to Performance MonitoringCliff Crocker

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller

Raiders of the Fast Start: Frontend Performance Archeology There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging! Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code: What tools and metrics we used to diagnose issues and track progress. How we went beyond server-driven best practices to focus on the client. Which fixes successfully increased conversion, and which didn’t. Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.

Super speed around the globe - SearchLeeds 2018Bastian Grimm

Welcome to a new reality - DeepCrawl Webinar 2018Bastian Grimm

10 things you can do to speed up your web app today 2016Chris Love

Build your own analytics power toolsAlban Gérôme

Measuring the visual experience of website performancePatrick Meenan

Moving From Angular to ReactIlya Gurevich

This document summarizes a company's transition from using Angular to React for their frontend framework. It discusses why they wanted to change frameworks, the research they did into Angular 2, VueJS and React, and why they ultimately chose React. It also addresses some immediate roadblocks they faced and improvements they noticed. While the transition was time-consuming, they believe it was worth it to use a framework that is faster, simpler and has a larger community in React.

Improving frontend performanceSagar Desarda

Spring insight what just happenedBoulder Java User's Group

Web 3.0Karthikeyan A K

Web 3.0 extends Web 2.0 with technologies like machine-to-machine communication, IPv6, artificial intelligence, 5G networks, fiber internet connections at home, and a peer-to-peer internet. It is predicted that every home will have computing power equivalent to Google today and people will have personalized web experiences. Google may go bankrupt as people gain this power and the company needs to explore new business models. Technologies like smart pencils, real-time handwriting recognition, and plagiarism detection could enable new forms of education and learning tracking.

Web Components at Scale, HTML5DevConf 2014-10-21Chris Danford

Hacking Web Performance Maximiliano Firtman

This document discusses ways to improve web performance for mobile users. It outlines goals like achieving a speed index between 1,100-2,500 and first meaningful paint within 1-3 seconds. Various techniques are presented for hacking first load times, data transfer, resource loading, images and user experience. These include avoiding redirects, using HTTP/2 and service workers, modern cache controls, responsive images, preloading resources, and ensuring consistent frame rates. The overall message is that mobile performance needs more attention given average load times and high bounce rates on slow mobile sites.

Making the web fasterPatrick Meenan

Selecting and deploying automated optimization solutionsPatrick Meenan

This document discusses various methods for automating front-end optimization. It describes how HTML rewriting solutions can optimize HTML through proxies or in-app plugins. It also discusses when certain optimizations are best done by machines versus humans. The document outlines different architectures for front-end optimization solutions, including cloud-based and on-premises options, and considers when each is most appropriate. It emphasizes the importance of testing solutions before deploying and of monitoring performance after deployment.

Measuring what mattersCliff Crocker

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman

This document summarizes key points about optimizing performance for mobile web: 1. Mobile platforms are dominated by iOS and Android, with different browsers on each (Safari, Chrome). Understanding the ecosystem is important for testing and optimization. 2. Perception of speed is critical - aim for responses within 1 second. Mobile hardware is less powerful so optimization is needed. Tools like emulators, remote inspectors, and APIs help measure performance. 3. For initial loading, focus on getting above-the-fold content within 1 second using techniques like avoiding redirects, gzipping files, separating critical CSS, and deferring non-essential assets.

State of jQuery - AspDotNetStorefront Conferencedmethvin

The document discusses the state of jQuery and the jQuery Foundation. It provides an overview of the non-profit jQuery Foundation organization and its projects. It also summarizes the jQuery team's initiatives and contributors from around the world. The document outlines the plans for future versions of jQuery, including jQuery 1.11/2.1, and discusses strategies and tools for web performance and browser compatibility.

More Related Content

What's hot (20)

HTML5: what's new?Chris Mills

Migration Best-Practices: Successfully re-launching your website - SMX New Yo...Bastian Grimm

Modern Static Site with GatsbyJSRiza Fahmi

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

A Modern Approach to Performance MonitoringCliff Crocker

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller

Super speed around the globe - SearchLeeds 2018Bastian Grimm

Welcome to a new reality - DeepCrawl Webinar 2018Bastian Grimm

10 things you can do to speed up your web app today 2016Chris Love

Build your own analytics power toolsAlban Gérôme

Measuring the visual experience of website performancePatrick Meenan

Moving From Angular to ReactIlya Gurevich

Improving frontend performanceSagar Desarda

Spring insight what just happenedBoulder Java User's Group

Web 3.0Karthikeyan A K

Web Components at Scale, HTML5DevConf 2014-10-21Chris Danford

Hacking Web Performance Maximiliano Firtman

Making the web fasterPatrick Meenan

Selecting and deploying automated optimization solutionsPatrick Meenan

Measuring what mattersCliff Crocker

HTML5: what's new?Chris Mills

Migration Best-Practices: Successfully re-launching your website - SMX New Yo...Bastian Grimm

Modern Static Site with GatsbyJSRiza Fahmi

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

A Modern Approach to Performance MonitoringCliff Crocker

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller

Super speed around the globe - SearchLeeds 2018Bastian Grimm

Welcome to a new reality - DeepCrawl Webinar 2018Bastian Grimm

10 things you can do to speed up your web app today 2016Chris Love

Build your own analytics power toolsAlban Gérôme

Measuring the visual experience of website performancePatrick Meenan

Moving From Angular to ReactIlya Gurevich

Improving frontend performanceSagar Desarda

Spring insight what just happenedBoulder Java User's Group

Web 3.0Karthikeyan A K

Web Components at Scale, HTML5DevConf 2014-10-21Chris Danford

Hacking Web Performance Maximiliano Firtman

Making the web fasterPatrick Meenan

Selecting and deploying automated optimization solutionsPatrick Meenan

Measuring what mattersCliff Crocker

Similar to Frontend performance metrics (20)

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman

State of jQuery - AspDotNetStorefront Conferencedmethvin

Single Page Applications in DrupalChris Tankersley

It's no denying that rich Javascript applications (sometimes called One Page Applications) are a big thing, but what if you want to leverage Drupal on the backend, or have an existing site? Tools like Angular.JS and EmberJS are great when you have an API, but Drupal 7 doesn't really have an API layer. I'll explore the parts of a one page application and how to integrate it into either an existing or a new Drupal site, and the pitfalls that one must watch out for. Sample code for the demos are available at https://github.com/dragonmantank/spa-drupal

Cvcc performance tuningJohn McCaffrey

Extreme Web Performance for Mobile DevicesMaximiliano Firtman

Maximiliano Firtman gave a presentation on extreme web performance for mobile devices. He covered: 1. The current state of the mobile web including platforms, browsers and web apps 2. Factors affecting mobile performance like perception, hardware differences, and network speeds 3. Tools for measuring performance like emulators, online tools, and HTML5 APIs 4. Optimizing initial loading and the above-the-fold content in the first second 5. Ensuring responsiveness through consistent frame rates, immediate feedback, and smooth scrolling.

20 tips for website performanceAndrew Siemer

Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve

Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman

This document discusses optimizing web performance for mobile devices. It covers the current mobile web ecosystem, importance of performance, tools for measuring performance, optimizing initial loading and perception, and responsiveness. The key points discussed are understanding the diversity of mobile browsers and platforms, keeping content above the fold loading within 1 second, using tools like navigation timing API to measure performance, avoiding redirects and unnecessary resources, and ensuring smooth scrolling and responsiveness.

Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Jason Strimpel

Often business needs and developer needs are at odds when developing public facing web applications, sites that need to be indexed by search engines. Business is primarily concerned with factors such as search engine optimization, SEO, improving visitor retention and reducing bounce rates, while engineering is more concerned with improving developer ergonomics, code re-usage, separation of concerns, and code maintenance. This talk aims to describe a solution that satisfies both business and engineering requirements.

Feature driven agile oriented web applicationsRam G Athreya

The document provides an overview of feature driven agile oriented web applications. It discusses why web development is important as more businesses move online. It also covers challenges in web development and provides an agenda for covering the full spectrum of web app development, including current technologies. The document proposes developing a stock market app as an example project to demonstrate concepts. It includes wireframes and diagrams of the backend and frontend architecture for web apps.

Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman

The document discusses optimizing web performance for mobile devices. It covers mobile web platforms and browsers, the importance of performance on mobile, tools for measuring performance, optimizing initial loading and above-the-fold content within 1 second, and maintaining responsiveness. The key recommendations are to measure on real devices, avoid redirects, reduce requests, load above-the-fold content quickly and defer the rest, and prioritize simplicity over complex designs and frameworks.

Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Sacha Leprêtre

Griffon for the EnterpriseJames Williams

The document discusses Griffon, an open source desktop rapid development framework that leverages Java Swing and the Groovy language. It provides an overview of Griffon and its key features, including its MVC structure, plugins/addons, application packaging, competitors like Apache Pivot and Eclipse RCP, and sample applications. The agenda includes discussing Griffon's MVC, plugins, packaging, competitors, demos, and a summary. Sample code is provided for building a MongoDB database viewer application in Griffon.

Silverlight vs HTML5 - Lessons learned from the real world...Peter Gfader

High Performance Web DesignKoji Ishimoto

The document discusses high performance web design. It covers measuring performance using tools like YSlow and PageSpeed, as well as techniques to improve performance such as reducing HTTP requests by combining scripts and stylesheets, using CSS sprites, and inline images. The document also discusses how performance impacts businesses and provides examples of component weights and grades for different websites according to YSlow rules. It emphasizes the importance of clear objectives, consistent design, and clean code for building high performance sites.

What is Software Development by Thesys Tech Head of DevelopmentProduct School

Final year internship presentationNischal0101

The document summarizes an internship at a leading software company in Nepal. The internship's objectives were to gain real-world experience, learn advanced techniques, and develop applicable skills. Over a 2 month period, the intern was assigned to an Android team of 5 members. They received training in Android development and were assigned a project to build a news app that scraped and displayed data from websites using Jsoup. The intern tested the app on various Android devices and concluded the internship gained skills in areas like design, threads, fragments, and using external libraries.

Html5 storage suggestions for challenges.pptxdeepmoteria

This document discusses various client-side storage options in HTML5, including web storage, web SQL database, and IndexedDB. It explains that web storage allows storing data locally within the browser, provides better performance than cookies, and includes localStorage for persistent data and sessionStorage for temporary data. While sufficient for simple storage needs, complex data manipulation is better handled by structured databases like IndexedDB, which stores data as JavaScript objects for fast access. The document also covers application caching to enable offline browsing and compares browser support for different storage technologies.

2020-03-05 Custard - SEO vs PWAsChris Smith

This document discusses the potential risks of progressive web apps (PWAs) to search engine optimization (SEO). It notes that while PWAs aim to provide a native app-like experience, they can negatively impact SEO if not implemented properly. Specifically, over-reliance on JavaScript redirects and client-side rendering makes it difficult for search engines to understand the site structure. The document outlines the steps taken to recover SEO performance for a client whose organic traffic dropped by 47% after deploying a PWA, including implementing proper 301 redirects, full page caching, and ensuring the site works without JavaScript. The key lessons are that PWAs and SEO can be compatible if search engine crawlers can understand the site

Recap of the google io 2017Karan Trehan

Getting started with Scrapy in PythonViren Rajput

This document summarizes web scraping and introduces the Scrapy framework. It defines web scraping as extracting information from websites when APIs are not available or data needs periodic extraction. The speaker then discusses experiments with scraping in Python using libraries like BeautifulSoup and lxml. Scrapy is introduced as a fast, high-level scraping framework that allows defining spiders to extract needed data from websites and run scraping jobs. Key benefits of Scrapy like simplicity, speed, extensibility and documentation are highlighted.

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman

State of jQuery - AspDotNetStorefront Conferencedmethvin

Single Page Applications in DrupalChris Tankersley

Cvcc performance tuningJohn McCaffrey

Extreme Web Performance for Mobile DevicesMaximiliano Firtman

20 tips for website performanceAndrew Siemer

Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman

Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Jason Strimpel

Feature driven agile oriented web applicationsRam G Athreya

Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman

Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Sacha Leprêtre

Griffon for the EnterpriseJames Williams

Silverlight vs HTML5 - Lessons learned from the real world...Peter Gfader

High Performance Web DesignKoji Ishimoto

What is Software Development by Thesys Tech Head of DevelopmentProduct School

Final year internship presentationNischal0101

Html5 storage suggestions for challenges.pptxdeepmoteria

2020-03-05 Custard - SEO vs PWAsChris Smith

Recap of the google io 2017Karan Trehan

Getting started with Scrapy in PythonViren Rajput

More from Артем Захарченко (8)

dataflow.pptxАртем Захарченко

Background jsАртем Захарченко

Fullstack javascript. Isomorphic appsАртем Захарченко

Performance optimisation in javascriptАртем Захарченко

Build your own multistack JS startupАртем Захарченко

WebRTC in productionАртем Захарченко

Js tacktalk team dev js testing performanceАртем Захарченко

This document provides an overview of using Gradle to automate JavaScript application assembly, minification, and deployment tasks. It discusses installing Gradle and relevant plugins, writing a Gradle script to define tasks for combining JS files, minifying with Closure Compiler, and deploying the minified file to FTP. Examples are given for setting up the Gradle script with the necessary inputs, outputs, and dependencies between tasks. The benefits of automating these repetitive tasks with Gradle are highlighted.

Cloud computingАртем Захарченко

dataflow.pptxАртем Захарченко

Background jsАртем Захарченко

Fullstack javascript. Isomorphic appsАртем Захарченко

Performance optimisation in javascriptАртем Захарченко

Build your own multistack JS startupАртем Захарченко

WebRTC in productionАртем Захарченко

Js tacktalk team dev js testing performanceАртем Захарченко

Cloud computingАртем Захарченко

Recently uploaded (16)

Determining Glass is mechanical textileAzizul Hakim

Seminar.MAJor presentation for final project vivadaditya2501

Breaching The Perimeter - Our Most Impactful Bug Bounty Findings.pdfNirmalthapa24

Best web hosting Vancouver 2025 for you businesssteve198109

Vancouver in 2025 is more than scenic views, yoga studios, and oat milk lattes—it’s a thriving hub for eco-conscious entrepreneurs looking to make a real difference. If you’ve ever dreamed of launching a purpose-driven business, now is the time. Whether it’s urban mushroom farming, upcycled furniture sales, or vegan skincare sold online, your green idea deserves a strong digital foundation. The 2025 Canadian eCommerce landscape is being shaped by trends like sustainability, local innovation, and consumer trust. To stay ahead, eco-startups need reliable hosting that aligns with their values. That’s where 4GoodHosting.com comes in—one of the top-rated Vancouver web hosting providers of 2025. Offering secure, sustainable, and Canadian-based hosting solutions, they help green entrepreneurs build their brand with confidence and conscience. As eCommerce in Canada embraces localism and environmental responsibility, choosing a hosting provider that shares your vision is essential. 4GoodHosting goes beyond just hosting websites—they champion Canadian businesses, sustainable practices, and meaningful growth. So go ahead—start that eco-friendly venture. With Vancouver web hosting from 4GoodHosting, your green business and your values are in perfect sync.

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Looking for powerful and affordable web hosting in Vancouver? 4GoodHosting offers premium Canadian web hosting solutions designed specifically for individuals, startups, and businesses across British Columbia. With local data centers in Vancouver and Toronto, we ensure blazing-fast website speeds, superior uptime, and enhanced data privacy—all critical for your business success in today’s competitive digital landscape. Our Vancouver web hosting plans are packed with value—starting as low as $2.95/month—and include secure cPanel management, free domain transfer, one-click WordPress installs, and robust email support with anti-spam protection. Whether you're hosting a personal blog, business website, or eCommerce store, our scalable cloud hosting packages are built to grow with you. Enjoy enterprise-grade features like daily backups, DDoS protection, free SSL certificates, and unlimited bandwidth on select plans. Plus, our expert Canadian support team is available 24/7 to help you every step of the way. At 4GoodHosting, we understand the needs of local Vancouver businesses. That’s why we focus on speed, security, and service—all hosted on Canadian soil. Start your online journey today with a reliable hosting partner trusted by thousands across Canada.

Grade 7 Google_Sites_Lesson creating website.pptxAllanGuevarra1

cxbcxfzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz7.pdfssuser060b2e1

Organizing_Data_Grade4 how to organize.pptxAllanGuevarra1

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

OSI TCP IP Protocol Layers description fcbr49917

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

AI Days 2025_GM1 : Interface in theage of AIPrashant Singh

Cyber Safety: security measure about navegating on internet.manugodinhogentil

5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdfAndrHenrique77

Determining Glass is mechanical textileAzizul Hakim

Seminar.MAJor presentation for final project vivadaditya2501

Breaching The Perimeter - Our Most Impactful Bug Bounty Findings.pdfNirmalthapa24

Best web hosting Vancouver 2025 for you businesssteve198109

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Grade 7 Google_Sites_Lesson creating website.pptxAllanGuevarra1

cxbcxfzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz7.pdfssuser060b2e1

Organizing_Data_Grade4 how to organize.pptxAllanGuevarra1

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

OSI TCP IP Protocol Layers description fcbr49917

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

AI Days 2025_GM1 : Interface in theage of AIPrashant Singh

Cyber Safety: security measure about navegating on internet.manugodinhogentil

5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdfAndrHenrique77

Frontend performance metrics

1. Javascript performance metrics * Measure first. Measure often. @blackrabbit99

2. Who am I ? ● Gameloft ● WebSpellChecker ● DevPro ● Pics.io ● Epam ● KharkivJS organizer ● Community member @blackrabbit99

3. Where are we now? 1) Desktop pattern 2) Incredibly fast development of technology 3) Frontend adopt backend responsibility 4) Enormous market that need it

4. What do we have? 1) More than 1000 frontend frameworks 2) Javascript is the most popular language 3) Frontend developers are over in-demand developers 4) Hipsta but rudimentary infrastructure

5. Why is it matter? ● Google: 2% slower = 2% less searching per user ● Yahoo: 400 milliseconds faster = 9% more traffic ● AOL: Faster pages = more page views ● Amazon: 100 milliseconds faster = 1% more revenue ● Aberdeen Group: 1 second slower = 11% fewer page views, 7% less conversion ● Google uses website speed in search ranking.

6. Move to performance

7. Networking

8. Rendering performance

9. Rendering performance

10. Rendering performance

11. CSS Triggers

12. Computation

13. Computation

14. Computation

15. Computation

16. Garbage collection

17. … and More CSS Images Fonts HTML

18. RAIL?

20. Goals

21. Principles Measure first

22. Dev Tools Audit

23. Dev Tools Audit ● Network requests ● Browser caching ● Cookies size ● Ordering of your styles and scripts ● Unused css

24. Page Speed Insight https://developers.google.com/speed/pagespeed/insights/

25. Page Speed Insight ● Enable compression ● Minify CSS ● Minify JavaScript ● Prioritize visible content ● Reduce server response time ● Configure the viewport ● Avoid app install interstitials that hide content ● Avoid plugins ● Size content to viewport

26. WebPage Test

27. WebPage Test

28. WebPage Test

29. Something went wrong

30. We need automation

31. PSI npm install psi

32. PSI

33. PSI ● strategy mobile|desktop ● format cli|json|tap ● locale ● threshold

34. Web Page test npm install webpagetest The API key is limited to 200 page loads per day

37. Localhost? ngrok http-tunnel

38. Phantomas phantom or slimmer modular approach python or node wait for selectors run locally export to elastic search Request monitor Assets time Dom Complexity Window performance Error Console alerts

39. SPA?

40. Browser Perf More than 100 metrics

41. Browser Perf env ● SauceLab ● Selenium ● BrowserStack

42. Browser Perf ● Cordova/Phonegap ● Hybrid Mobile Application

43. Browser Perf ● Wait ● Scroll

44. Browser Perf Custom behavior scripts !!!

45. https://github. com/blackrabbit99/browser- performance-testing-tools

46. Thank you for being with me @blackrabbit99

Frontend performance metrics

Recommended

More Related Content

What's hot (20)

Similar to Frontend performance metrics (20)

More from Артем Захарченко (8)

Recently uploaded (16)

Frontend performance metrics