Front end-performance

•

0 likes•799 views

This document discusses front-end performance optimization. It notes that 80-90% of end-user response time is spent on the frontend. It provides tips for optimizing load time such as minimizing files, gzipping, concatenating scripts, and loading scripts last. It also discusses optimizing runtime performance by reducing DOM interactions and designing single page applications carefully. Finally, it emphasizes the importance of perception and not blocking the user interface.

Technology

@byrichardpowell
byrichardpowell.co.uk
Front-End Performance
Thursday, 8 August 13

“80-90% of the end-user
response time is spent on the
frontend. Start there”
Steve Souders,
Head Performance Engineer at Google
Thursday, 8 August 13

Optimise, Miniﬁmise,
Obsfucate, GZip
Loadtime: Filesize
Thursday, 8 August 13

Loadtime: Filesize
Be Defensive
Thursday, 8 August 13

CSS Sprites, Icon Fonts,
Base64 Encoding images
Loadtime: Requests
Thursday, 8 August 13

Loadtime: Requests
Concatenate
Thursday, 8 August 13

Load Scripts Last
and
Only Load when needed
Loadtime: Order
Thursday, 8 August 13

Loadtime: Order
http://bit.ly/12NkgEi
Thursday, 8 August 13

Reduce DOM Interaction
Runtime: DOM Interaction
Thursday, 8 August 13

Runtime: DOM Interaction
http://jsbin.com/ohumon/1/edit
Thursday, 8 August 13

Runtime: DOM Interaction
http://jsbin.com/omeyac/2/edit
Thursday, 8 August 13

Runtime: DOM Interaction
http://jsbin.com/acetul/1/edit
Thursday, 8 August 13

CSS can be expensive
Or it can be an optimisation
Runtime: DOM Interaction
Thursday, 8 August 13

Design API’s Carefully
Runtime: Single Page Application
Thursday, 8 August 13

Perception
http://bit.ly/1bxLxDI
Thursday, 8 August 13

Don’t block the UI
Perception
Thursday, 8 August 13

Load Time
PerceptionRun Time
Thursday, 8 August 13

What's hot

EmberJS

ryanstout

Bkbiet day1

mihirio

O'Reilly Fluent, Web Components Enterprise

MediaMath

Backups - Saving all the Bacon

Matthew Pritchett

WordPress Speed Optimisation

Peter Bui

Wordpress database

Keith Levi Lumanog

What's hot (6)

EmberJS

Bkbiet day1

O'Reilly Fluent, Web Components Enterprise

Backups - Saving all the Bacon

WordPress Speed Optimisation

Wordpress database

Viewers also liked

Web Page Performance

Marco Vignaroli

Angular js, Yeomon & Grunt

Richard Powell

Ted yu：h base and hoya

hdhappy001

Lithuania

UNDP Eurasia

Real-time collaborative drawing

Richard Powell

Draw stuff at @jsnortheast

Richard Powell

För börsbolagen överensstämde utvecklingen av lönsamhet och omsättning under åren 2006-2009 väl med utvecklingen för hela det privata näringslivet. Prognoserna för de ca 250 börsbolagen för åren 2011-2012 antas därför fungera som goda indikatorer för hela näringslivets utveckling dessa år. Utvecklingen med stigande utdelningar och sjunkande investeringar är oroande. Den långsiktiga utvecklingskraften och förmågan att skapa fler och bättre jobb i näringslivet är beroende av investeringarna. Att prioritera utdelningar till ägarna framför hållbar lönsamhet gynnar på sikt varken ägare eller anställda.

Unionens bolagsindikator mars 2011

Unionen

Viewers also liked (7)

Web Page Performance

Angular js, Yeomon & Grunt

Ted yu：h base and hoya

Lithuania

Real-time collaborative drawing

Draw stuff at @jsnortheast

Unionens bolagsindikator mars 2011

Similar to Front end-performance

JSDay 2013 - Practical Responsive Web Design

Jonathan Klein

Scaling PHP to 40 Million Uniques

Jonathan Klein

UberFire Quick Intro and Overview (early beta Aug 2013)

Mark Proctor

Node Tools For Your Grails Toolbox - Gr8Conf 2013

zanthrash

Performance & Responsive Web Design

Zach Leatherman

Front-End: O que é e o que faz

Eduardo Rabelo

Performance and optimization

markstory

jQuery Mobile Deep Dive

Troy Miles

The “Making the Switch to Drupal series” will provide an overview of what you need to know when considering and adopting Drupal. In Part 1, we will guide busy managers through what they need to consider when evaluating Drupal. We know that choosing any web development technology represents a significant investment of resources. Decision makers can spend weeks and months comparing options and deliberating about the best direction. We will use a combination of case studies and demonstrations to explain how Drupal works, so you can see first hand how it powers some of the most visited websites online. In Part 1 of this webinar series, you will learn: • Benefits of the open source community • Comparison of Drupal to other systems • Ease of Customization of branding and functionality • Managing content layout and design in Drupal • About common features and functionality of Drupal

Making the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal

Acquia

[jqconatx] Adaptive Images for Responsive Web Design

Christopher Schmitt

Lone StarPHP 2013 - Building Web Apps from a New Angle

Pablo Godel

Building a platform with Django, Docker and Salt | Djangocon lightning talk

dotCloud

Building a Platform with Django, Docker and Salt

Docker, Inc.

Oxente on Rails 2009

Fabio Akita

Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?

Andy Davies

Being a developer for years its very easy to get type-cast. You become "The CodeIgniter Guy", the one dev in the office that knows how FooCMS works or just end up farming out CRUD day after day. Well I decided to say "nope" to that & accepted a job where I'd need to know how to do…everything. This talk aims to give you an overview of what you should be looking to learn next if you want to stop being "just a developer" & move into the devops/architecture arena.

Become Master of Your Own Universe - DIBI 2013

Phil Sturgeon

As anyone using AWS will be able to tell you, there are good parts, and there are the bad ones. If you come from a datacenter background, you are most definitely not in Kansas anymore, and we had our share of learning experiences as a result. This is the story of all the pitfalls we encountered, and how, through architecture, convention and common sense, we managed to build an infrastructure that is "Always Up" from the end user perspective and incredibly economical to build, scale and operate. The talk will focus on leveraging the strong/economical points of AWS, while avoiding the weak/expensive ones. I'll give a break down of the pain points, how we managed them and how we avoided painting ourselves in a corner accidentally. For many companies starting today, success is defined by large traffic or user numbers; if you are one of those companies, these lessons will very likely save you significant operational headaches.

AWS: Architecting for resilience & cost at scale

Jos Boumans

"Architecting for Failure in AWS" by Jos Boumans, VP of Operations, Krux Digital. Presentation Overview: Krux is an infrastructure provider for many of the websites you use online today, like NYTimes.com, WSJ.com, Wikia and NBCU. For every request on those properties, Krux will get one or more as well. We grew from zero traffic to several billion requests per day in the span of 2 years, and we did so exclusively in AWS. As anyone using AWS will be able to tell you, there's good parts, and there's the bad ones. This is the story of all the pitfalls we encountered, and how, through architecture, convention and common sense, we managed to build an infrastructure that is "Always Up" from the end user perspective and incredibly economical to build, scale & operate. Speaker Bio: Jos is the VP of Operations at Krux, supporting a platform with over 4 billion requests per day with a tiny Ops team. Every bit of the AWS stack is automated, monitored & graphed, with maximized resilience and minimized cost. In a previous life I ran the Ubuntu Server group at Canonical and the Database group at RIPE, which is responsible for all the authoritative IP address data in Europe, the Middle East & Asia. Jos is a regular speaker at conferences like OSCON, Devoxx, Puppetconf, etc where he mostly speaks on dealing with AWS Operations from all angles.

Architecting for Failure in AWS - PuppetConf 2013

Puppet

Lessons learned from Node.js - Callbacks / Promises

Jason K Yau

Coscup 2013 : Continuous Integration on top of hadoop

Wisely chen

Similar to Front end-performance (20)

JSDay 2013 - Practical Responsive Web Design

Scaling PHP to 40 Million Uniques

UberFire Quick Intro and Overview (early beta Aug 2013)

Node Tools For Your Grails Toolbox - Gr8Conf 2013

Performance & Responsive Web Design

Front-End: O que é e o que faz

Performance and optimization

jQuery Mobile Deep Dive

Making the Switch, Part 1: Top 5 Things to Consider When Evaluating Drupal

[jqconatx] Adaptive Images for Responsive Web Design

Lone StarPHP 2013 - Building Web Apps from a New Angle

Building a platform with Django, Docker and Salt | Djangocon lightning talk

Building a Platform with Django, Docker and Salt

Oxente on Rails 2009

Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?

Become Master of Your Own Universe - DIBI 2013

AWS: Architecting for resilience & cost at scale

Architecting for Failure in AWS - PuppetConf 2013

Lessons learned from Node.js - Callbacks / Promises

Coscup 2013 : Continuous Integration on top of hadoop

More from Richard Powell

Why is writing React.JS code so simple? Why had writing Backbone.JS code become difficult for us at Server Density. What does this say us about good code vs great code? In this presentation I cover 3 important concepts: * Code simplicity vs complexity * Code predictability * Composability Using real-world example I'll share what our 16 month journey migrating a large Backbone codebase, to a large React codebase has taught us.

Backbone to React. What it says about awesome UI Code.

Richard Powell

Designing user on-boarding

Richard Powell

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Richard Powell

Time-Series Monitoring Graphs with D3 & Rickshaw

Richard Powell

D3 Rickshaw and Backbone in 50 minutes

Richard Powell

Angular.js, Yeomon & Grunt

Richard Powell

HTML5 Canvas @SuperMondays, Newcastle

Richard Powell

More from Richard Powell (7)

Backbone to React. What it says about awesome UI Code.

Designing user on-boarding

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Time-Series Monitoring Graphs with D3 & Rickshaw

D3 Rickshaw and Backbone in 50 minutes

Angular.js, Yeomon & Grunt

HTML5 Canvas @SuperMondays, Newcastle

Recently uploaded

The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more. Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/ Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

BookNet Canada

Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”. All of this illustrated with link prediction over knowledge graphs, but the argument is general.

Neuro-symbolic is not enough, we need neuro-*semantic*

Frank van Harmelen

Designing Great Products: The Power of Design and Leadership by Chief Designe...

Product School

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Sri Ambati

As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other? Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024

Tobias Schneck

Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place. Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects. Here’s what you’ll gain: - Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows. - Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy. - Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency. - Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity. We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic. Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.

Essentials of Automations: Optimizing FME Workflows with Parameters

Safe Software

Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf

91mobiles

FIDO Alliance Osaka Seminar: Overview.pdf

FIDO Alliance

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx

Abida Shariff

I'm excited to share my latest predictions on how AI, robotics, and other technological advancements will reshape industries in the coming years. The slides explore the exponential growth of computational power, the future of AI and robotics, and their profound impact on various sectors. Why this matters: The success of new products and investments hinges on precise timing and foresight into emerging categories. This deck equips founders, VCs, and industry leaders with insights to align future products with upcoming tech developments. These insights enhance the ability to forecast industry trends, improve market timing, and predict competitor actions. Highlights: ▪ Exponential Growth in Compute: How $1000 will soon buy the computational power of a human brain ▪ Scaling of AI Models: The journey towards beyond human-scale models and intelligent edge computing ▪ Transformative Technologies: From advanced robotics and brain interfaces to automated healthcare and beyond ▪ Future of Work: How automation will redefine jobs and economic structures by 2040 With so many predictions presented here, some will inevitably be wrong or mistimed, especially with potential external disruptions. For instance, a conflict in Taiwan could severely impact global semiconductor production, affecting compute costs and related advancements. Nonetheless, these slides are intended to guide intuition on future technological trends.

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl

Peter Udo Diehl

💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™: See how to accelerate model training and optimize model performance with active learning Learn about the latest enhancements to out-of-the-box document processing – with little to no training required Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath. Speakers: 👨‍🏫 Andras Palfi, Senior Product Manager, UiPath 👩‍🏫 Lenka Dulovicova, Product Program Manager, UiPath

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

UiPathCommunity

I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.

"Impact of front-end architecture on development cost", Viktor Turskyi

Fwdays

IoT Analytics Company Presentation May 2024

IoTAnalytics

When stars align: studies in data quality, knowledge graphs, and machine lear...

Elena Simperl

How world-class product teams are winning in the AI era by CEO and Founder, P...

Product School

In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.

Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...

Ramesh Iyer

Speed Wins: From Kafka to APIs in Minutes

confluent

Join us as we dive into the latest updates to the UiPath Orchestrator API, including new limits and features for 2024. Discover how these changes can enhance your automation projects and streamline your workflows. 📚 Overview of UiPath Orchestrator API 🔧 Recent changes to API limits 🛠️ How to adapt to new limits 📋 Best practices for using the Orchestrator API efficiently ❓ Q&A session

Exploring UiPath Orchestrator API: updates and limits in 2024 🚀

DianaGray10

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance

НАДІЯ ФЕДЮШКО БАЦ «Професійне зростання QA спеціаліста»

QADay

Recently uploaded (20)

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

Neuro-symbolic is not enough, we need neuro-*semantic*

Designing Great Products: The Power of Design and Leadership by Chief Designe...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024

Essentials of Automations: Optimizing FME Workflows with Parameters

Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf

FIDO Alliance Osaka Seminar: Overview.pdf

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

"Impact of front-end architecture on development cost", Viktor Turskyi

IoT Analytics Company Presentation May 2024

When stars align: studies in data quality, knowledge graphs, and machine lear...

How world-class product teams are winning in the AI era by CEO and Founder, P...

Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...

Speed Wins: From Kafka to APIs in Minutes

Exploring UiPath Orchestrator API: updates and limits in 2024 🚀

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

НАДІЯ ФЕДЮШКО БАЦ «Професійне зростання QA спеціаліста»

Front end-performance

1. @byrichardpowell byrichardpowell.co.uk Front-End Performance Thursday, 8 August 13

2. “80-90% of the end-user response time is spent on the frontend. Start there” Steve Souders, Head Performance Engineer at Google Thursday, 8 August 13

3. Backend Frontend Thursday, 8 August 13

4. Load Time Thursday, 8 August 13

5. Optimise, Miniﬁmise, Obsfucate, GZip Loadtime: Filesize Thursday, 8 August 13

6. Loadtime: Filesize Be Defensive Thursday, 8 August 13

7. CSS Sprites, Icon Fonts, Base64 Encoding images Loadtime: Requests Thursday, 8 August 13

8. Loadtime: Requests Concatenate Thursday, 8 August 13

9. Load Scripts Last and Only Load when needed Loadtime: Order Thursday, 8 August 13

10. Loadtime: Order http://bit.ly/12NkgEi Thursday, 8 August 13

11. Run Time Thursday, 8 August 13

12. Reduce DOM Interaction Runtime: DOM Interaction Thursday, 8 August 13

13. Runtime: DOM Interaction http://jsbin.com/ohumon/1/edit Thursday, 8 August 13

14. Runtime: DOM Interaction http://jsbin.com/omeyac/2/edit Thursday, 8 August 13