This Friday, Albert Bellonch will speak about web performance optimization. We often hear engineers talking about strange topics: caching, CSS and Javascript optimization, loading time, deferred execution, expiration control headers… This next talk is focused on everyone understaning what web performance optimization is: which recurring problems there are, how are they solved, and why is important to solve them.
Who is Albert Bellonch?
Albert Bellonch is a Computer Engineer by the polytechnical universities of Catalonia and Turin. After finishing his Final Project in London, he returned to Barcelona in order to begin a new phase at Itnig, where he is the Chief Technological Officer and leads the development team.
From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.
Images seem simple - they're static, independent from each other, and don't mess up the DOM. However, images make up 60%-70% of page bytes, and their visual nature makes them critical for user experience. Investing in Image Optimization is a highly worthwhile investment.
This presentation covers 4 aspects of Image Optimization:
- Optimizing Image formats (including background on GIF, PNG, JPEG, WebP, JPEG XR and more)
- Optimizing image delivery
- Optimizing image loading in the page
- Responsive Images - optimizing images for mobile screens
From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.
Images seem simple - they're static, independent from each other, and don't mess up the DOM. However, images make up 60%-70% of page bytes, and their visual nature makes them critical for user experience. Investing in Image Optimization is a highly worthwhile investment.
This presentation covers 4 aspects of Image Optimization:
- Optimizing Image formats (including background on GIF, PNG, JPEG, WebP, JPEG XR and more)
- Optimizing image delivery
- Optimizing image loading in the page
- Responsive Images - optimizing images for mobile screens
JavaScript news and tips: browsers, front-end, Node.js, useful libs. Enjoy our latest JS digest!
Don't forget to subscribe not to miss next month JS digest.
Check our blog for more: https://www.eliftech.com/blog
Kyle goes over the difference between static and dynamic sites, how easy it is to use WordPress and ExpressionEngine, and goes over hypothetical situations.
Performance presentation given to our in-house interactive team on website performance, taking heart.co.uk as an example... Presentation delivered by Jon Topper and Gareth Senior
Powerpoint file(incl. animations!): http://db.tt/oQiXb9lq
This is the slides of the presentation "Wordpress optimization" who presented at WordCamp 2013.
How to improve your wordpress performance and speed up your website more than 700% faster!
Minimize website page loading time – 20+ advanced SEO tipsCgColors
Website Page speed is a big ranking factor and we all know that. Google has already announced that they will give less priority to slow sites and even mark site with SLOW tag in SERPs.
Lets understand what makes your site slow and how can you make your site lightening fast..If your website is also struggling with slow page load time..checkout our tips here http://www.cgcolors.com/blog/minimize-website-page-loading-time-20-advanced-seo-tips/
You can contact our page load optimization experts - hi@cgcolors.com | 347-732-2736
Site Performance Optimization for Joomla #jwc13Hans Kuijpers
It's easy to improve the speed of your Joomla website. Just follow the tips & tricks of this presentation about Site Performance Optimization. These are the slides used during the Joomla World Conference 2013 in Boston #jwc13
Presentation of the project "Startups Made in Spain" · On Friday, January 9 a...itnig
Last Friday, January 9 we had our 1st event of the year at itnig. The project “Startups Made in Spain” was presented at itnig by its co-founders Joaquin Muñoz and Tom Evans. Although it was a last-minute organized event, and it was on Friday, we had quite a lot of interesting entrepreneurs and curious minds attending.
For those of you who haven’t hear about this project yet and for those of you who couldn’t attend the presentation, here is a brief summary of what was explained that Friday evening at itnig:
Keep reading in our website > http://itnig.net/en/blog/presentation-of-the-project-startups-made-in-spain/
Web scraping is a core skill in the current technology context, but it is usually done by high skilled programmers. In this itnig talk our intention was to show that you - non programmer! - can also do web scraping to gather data easily from different sources. For this purpose, we invited a top data scientist with 9 years experience in data visualization, Alberto González Paje, data scientist at Bestiairo.
More Related Content
Similar to Web performance optimization for everyone
JavaScript news and tips: browsers, front-end, Node.js, useful libs. Enjoy our latest JS digest!
Don't forget to subscribe not to miss next month JS digest.
Check our blog for more: https://www.eliftech.com/blog
Kyle goes over the difference between static and dynamic sites, how easy it is to use WordPress and ExpressionEngine, and goes over hypothetical situations.
Performance presentation given to our in-house interactive team on website performance, taking heart.co.uk as an example... Presentation delivered by Jon Topper and Gareth Senior
Powerpoint file(incl. animations!): http://db.tt/oQiXb9lq
This is the slides of the presentation "Wordpress optimization" who presented at WordCamp 2013.
How to improve your wordpress performance and speed up your website more than 700% faster!
Minimize website page loading time – 20+ advanced SEO tipsCgColors
Website Page speed is a big ranking factor and we all know that. Google has already announced that they will give less priority to slow sites and even mark site with SLOW tag in SERPs.
Lets understand what makes your site slow and how can you make your site lightening fast..If your website is also struggling with slow page load time..checkout our tips here http://www.cgcolors.com/blog/minimize-website-page-loading-time-20-advanced-seo-tips/
You can contact our page load optimization experts - hi@cgcolors.com | 347-732-2736
Site Performance Optimization for Joomla #jwc13Hans Kuijpers
It's easy to improve the speed of your Joomla website. Just follow the tips & tricks of this presentation about Site Performance Optimization. These are the slides used during the Joomla World Conference 2013 in Boston #jwc13
Similar to Web performance optimization for everyone (20)
Presentation of the project "Startups Made in Spain" · On Friday, January 9 a...itnig
Last Friday, January 9 we had our 1st event of the year at itnig. The project “Startups Made in Spain” was presented at itnig by its co-founders Joaquin Muñoz and Tom Evans. Although it was a last-minute organized event, and it was on Friday, we had quite a lot of interesting entrepreneurs and curious minds attending.
For those of you who haven’t hear about this project yet and for those of you who couldn’t attend the presentation, here is a brief summary of what was explained that Friday evening at itnig:
Keep reading in our website > http://itnig.net/en/blog/presentation-of-the-project-startups-made-in-spain/
Web scraping is a core skill in the current technology context, but it is usually done by high skilled programmers. In this itnig talk our intention was to show that you - non programmer! - can also do web scraping to gather data easily from different sources. For this purpose, we invited a top data scientist with 9 years experience in data visualization, Alberto González Paje, data scientist at Bestiairo.
Essentials Every Non-Technical Person Need To Know To Build The Best Tech-Tea...itnig
In this talk, held at itnig the 8th of May 2014, Pau Ramon shared with us his mistakes and learnings as CTO at Redbooth. His insights can be really helpful for all of us, not only for people that want to build a technical team, but also for people who are actually part of one.
Die Another Day: Scaling from 0 to 4 million daily requests as a lone develop...itnig
Scaling an app includes many different skills: from writing good code to system administration and architecture.
This are the slides of Cristian Planas talk, that took place at itnig on February 20th. Cristian is co-founder & CTO at Playfulbet, and he explained some basic lessons taken from the case of Playfulbet, a social game with more than 150.000 registered users.
"El boom del Consumo Colaborativo" by Albert Cañigueralitnig
Internet ha facilitado el alquiler de cualquier cosa entre particulares (peer to peer), lo que ha propiciado el nacimiento y auge de lo que ya se conoce como el Consumo Colaborativo . El beneficio de este tipo de intercambios es mutuo, tanto para lo que obtienen dinero alquilando un bien infrautilizado (como por ejemplo un coche), como los que pagan por acceder a un bien que nunca podrían o querrían comprar. Para éstos últimos, este intercambio supone además un ahorro, ya que el precio de alquiler entre particulares será en todo caso inferior al precio de alquilarlo por la vía convencional, esto es, a cualquier empresa. El Consumo Colaborativo ha abierto la puerta a un cambio de paradigma: ya no importa tanto poseer uno bien (propiedad privada) sino poder acceder a él (accesibilidad). Aquí tienes las slides de la presentación sobre Consumo Colaborativo que Albert Cañigueral, autor del blog consumocolaborativo.com y conector de Ouishare en España, hizo en itnig el pasado 17 de mayo (#itnigfridays).
The key to hapiness is being able to make your own decisions. An it's also the key to productivity, health and better quality of life.
In a startup everybody makes important decisions not only about the company itself but also about their role in it. To understand this is key for a fast growing company and a team of happy and productive people.
These are the slides of Jordi Romero talk at itnig, where he shared his experiences through a lot of interesting stories that happened to him during his years in Teambox and itnig.
Analítica Ágil - De la Sobrecarga a la Evidencia de los Datositnig
Los datos nos invaden y por eso, en los últimos años, se ha producido una explosión de tecnologías encaminadas a sacar el máximo provecho de la gran cantidad de datos que pueblan el mundo digital. Empresas como Adobe, Google, Facebook, Twitter, Amazon, LinkedIn,... tienen en los datos su activo principal. Estas compañías son las más avanzadas de la era digital.
Sin embargo, si echamos un vistazo a otras empresas, prácticamente ninguna está sacando provecho de la recolección y análisis de datos. Cualquier empresa de cualquier tamaño tiene grandes cantidades de datos pero... ¿los están usando?, ¿cómo?, ¿poseen alguno realmente útil?
Estas slides corresponden a la charla sobre Analítica Ágil que Pere Rovira dio en itnig el 10 de mayo de 2013. Pere nos presentó sus ideas sobre “agile analytics”, una aproximación al uso de los datos de manera pragmática y útil. ¡Menos datos y pasemos a la acción!
El poder de la identidad digital está transformando las relaciones. La identidad digital nos fuerza a no escondernos y nos aboca a la exposición pública. Lejos de ser negativo, ser "público" en internet multiplica nuestras posibilidades de ser descubiertos y contactados , y con ello se multiplican las posibilidades de alcanzar nuestras metas.
En nuestra itnig friday del 22 de marzo, Silvia Cobo nos explicó como una buena estrategia de presencia en Internet debe incluir una identidad digital, un sitio web donde mostrar quiénes somos, qué hacemos y donde expresar nuestras necesidades o deseos. Además, Silvia habló de otro concepto a tener en cuenta en lo que respecta a la identidad digital: la marca personal. Ésta se construye con algo más de tiempo, pero no dependerá tanto de nosotros como de lo que los otros vean en nosotros.
En esta itnig friday Alfonso Moure nos explica qué factores debemos tener en cuenta a nivel de SEO en la fase de diseño de nuestro negocio online. Optimizar nuestro site para motores de búsqueda es clave para centrarnos en nuestro principal objetivo, que es vender, y conseguir ROI sin perder el tiempo.
Do you gather metrics from your application? Can you combine them and easily generate custom graphs out of them? Can your developers measure whatever they want at any point of your application without breaking it or making it slower?
In our next itnig friday, Víctor Martínez will show us how easy it is to roll on your own Graphite installation and how to use Etsy's statsd collector to flush your metrics. You will learn what Graphite is, how all of its components work, how to get your real time&historic metrics into Carbon, Graphite's database, and how to plot them in different manners. Víctor will show us some Graphite dashboards, alternative statds implementations, detailed common Graphite configuration gotchas, design limitations and how to deal with them.
<a>Visit details</a>
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
Visual Style and Aesthetics: Basics of Visual Design
Visual Design for Enterprise Applications
Range of Visual Styles.
Mobile Interfaces:
Challenges and Opportunities of Mobile Design
Approach to Mobile Design
Patterns
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
Connect Conference 2022: Passive House - Economic and Environmental Solution...TE Studio
Passive House: The Economic and Environmental Solution for Sustainable Real Estate. Lecture by Tim Eian of TE Studio Passive House Design in November 2022 in Minneapolis.
- The Built Environment
- Let's imagine the perfect building
- The Passive House standard
- Why Passive House targets
- Clean Energy Plans?!
- How does Passive House compare and fit in?
- The business case for Passive House real estate
- Tools to quantify the value of Passive House
- What can I do?
- Resources
2. Albert Bellonch
CTO
@abellonch
/albertbellonch
albert@itnig.net
3. What’s WPO?
Web performance optimization is the process by which
individual aspects of web pages are optimized,
in order to achieve greater overall performance
4. What’s WPO?
Web performance optimization is the process by which
individual aspects of web pages are optimized,
in order to achieve greater overall performance
“Make it faster”
17. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
18. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
Wine details CSS
19. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
Wine details CSS
...more CSS files
20. Combine it!
In HTTP requests, a considerable amount of time is used when asking
for the information, instead of transmitting this information.
21. The lazy-boy-in-the-sofa example
Imagine that you’re hungry, and you sit down to your couch, so you can
watch the last episode of your favourite TV show. At a certain point, you go
to the kitchen, you take some cheese, and get back to the couch.
Ten minutes later, you go to the kitchen again, make yourself a sandwhich,
and head to the couch. And when the episode is ending, you stand up again
in order to pick up an apple.
Man, pick it all at once!
29. Compress it!
Send only the essential information.
This way, less data is sent, and thus less time is spent transferring it.
30. The gibberish-conversation example
There are these people that talk a lot. Like, a lot. You talk to them for an hour,
and after all this time you realize that you end the conversation with a very tiny
amount of valuable information. You lost 59 minutes of your time!
Conclusion: make these people talk only about what you care.
38. Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images
•Load CSS stylesheets
•Show HTML structure
39. Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets
•Show HTML structure
40. Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets // nothing to style
•Show HTML structure
41. Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets // nothing to style
•Show HTML structure // should be shown first
42. Sort it properly!
Try your best to do things only when are needed,
but avoid losing quality. Timing is crucial.
43. The I-bought-a-parking-space example
Some people do things the other way round. Imagine someone who is
very excited because he’s about to buy a car. So excited, that he rents a
parking space where to put the car, even if he still has no car at all.
Please: buy the car, and then rent the parking space.
44. Improved scenario Best resource ordering
•Show HTML structure // all depends on it
•Load CSS stylesheets // give nice style to html
•Load images // fill the gaps
And after a while...
•Load Javascript // do the fireworks
51. Slim down the images!
The images should have the same size as they are shown as,
and should be optimized too.
52. The gigantic-field example
A farm entrepreneur is going to plant 5 tomatoes and 10 lettuces, so he
buys the whole Camp Nou in order to plant them. But he only needs a
minimal part of it, so he is wasting a lot of field!
Mr. Farmer: get what you need, the moment you need it.
60. Typical scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Browser Server
61. Typical scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
Browser Server
62. Typical scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
Browser Server
Picture of 1787’ Chateau d’Yquern
63. Typical scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
Browser Server
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
64. Ask only missing stuff!
If you know something won’t change for some time,
don’t ask for it until it does.
65. The I-wanna-know example
Supose there’s this big football game in a few days. You have a football freak
friend, who knows every match schedule for every league, so you go ask
him when this game is.
The second time you need this information, you keep asking him, even
though you know that, 99% of the times, this information won’t change.
Use your memory! Ask things only when you don’t know
them.
67. Improved scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Browser Server
68. Improved scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
OK, I have the picture of 1787’ Chateau Server
Browser
d’Yquern, so I’ll show it directly.
72. Use GET in Ajax requests Expiration headers
Use JSON in AJAX requests Reduce use of CNAME
Reduce DOM elements JPEG and PNG codification
Reduce iframes Lazy load for images
Prefer CSS over JS Content Delivery Networks
Activate deflate Avoid Flash files
Font optimizing Eager loading
Cache Control headers Mobile-specific optimisations
76. Page Speed
•Useful to detect our website performance
•Gives two scores: desktop and mobile
•Lists everything we can improve
•Extensive documentation on WPO
developers.google.com/speed/pagespeed
82. Be careful!
•There’s a lot of things to do
•Pick your critical weaknesses, and solve them first
•Go step by step
•Have your timing and resources into account