Responsive Web Design at the speed of light, by Andrea Pernici/ SEM Days 2015
•Als PPTX, PDF herunterladen•
0 gefällt mir•725 views
A 15 minutes story of an Italian top brand
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (12)
Ähnlich wie Responsive Web Design at the speed of light, by Andrea Pernici/ SEM Days 2015
Ähnlich wie Responsive Web Design at the speed of light, by Andrea Pernici/ SEM Days 2015 (20)
Mehr von SEO monitor
Mehr von SEO monitor (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Responsive Web Design at the speed of light, by Andrea Pernici/ SEM Days 2015
- 1. RESPONSIVE WEB DESIGN AT 299 792 458 m / s a 15 minutes story of an Italian top brand @andreapernici
- 3. THIS IS THE STORY OF A VERY VERY OLD WEBSITE
- 4. I’M A DALMATIAN PELICAN LIVING NEAR THE IRON GATES AND I WILL TAKE CARE OF YOUR HOMEWORK
- 6. OK, BUT… WHY AM I TELLING YOU THIS?
- 8. 1. COMPLETE MIGRATION OF THE CMS. Brand new one (url change, structure change, everything change, etc …) 2. REDESIGN WITH MANY CONSTRAINTS. Commercial and directly impacting the customer’s business. Emotional and intimate ones cause part of the customer’s life. 3. REDUCING SERVER (INFRASTRUCTURE) COSTS WHILE IMPROVING PERFOMANCE, CRAWL EFFICIENCY AND RELIABILITY. From a very costly infrastructure to a more simple one working on the full dev-stack.
- 9. 1. COMPLETE MIGRATION OF THE CMS. Brand new one (url change, structure change, everything change, etc …) 2. REDESIGN WITH MANY CONSTRAINTS. Commercial and directly impacting the customer’s business. Emotional and intimate ones cause part of the customer’s life. 3. REDUCING SERVER (INFRASTRUCTURE) COSTS WHILE IMPROVING PERFOMANCE, CRAWL EFFICIENCY AND RELIABILITY. From a very costly infrastructure to a more simple one working on the full dev-stack.
- 10. FROM A 290€/month TO A 35€/month SERVER
- 11. 1. COMPLETE DB REDESIGN 2. VARIOUS LEVELS OF CACHING some in memory 3. APACHE (+ NGINX AS A REVERSE PROXY FOR STATIC CONTENT)
- 14. BUT THE SERVER WAS TOO STRESSED
- 15. …AND AFTER A LOG AUDIT
- 16. MORE THAN OF ACCESSES WERE FROM FAKE/MALICIOUS SOURCES
- 18. CSF (ConfigServer Security & Firewall) SETUP TO PREVENT - PORT SCANNING, - BRUTE FORCE - SIMPLE DDOS ATTEMPS - ETC ETC…
- 19. MOD_SECURITY TO IDENTIFY BAD BOT ACCESS
- 21. HARD NUMBERS ANNOTATE EVERY SINGLE THING YOUR DEVS TEAM CHANGE
- 23. WE MUST WE CAN’T CONTROL EVERYTHING, BUT ACHIEVE STABILITYPREVENT INSTABILITY
- 24. WE MUST WE CAN’T CONTROL EVERYTHING, BUT ACHIEVE STABILITYPREVENT INSTABILITY aka you don’t know what you are doing aka you know what you are doing
- 25. THIS IS TRUE & VALID FOR ANY WEBSITE IN ANY CONTEXT, BUT MORE IMPORTANT THAN EVER IN A MOBILE WORLD
- 26. LET SEE WHYSource - Google PageSpeed Insight
- 27. LET SEE WHY ASSUMING WE ARE IN AN IDEAL CONDITION
- 28. LET SEE WHY YOU CANNOT DO ANYTHING ABOUT
- 29. LET SEE WHY THE PATH TO STABILITY
- 32. ON THE FRONTEND WE CAN MAKE A DIFFERENCE
- 38. WE’RE ONLY LOSING WHERE WE CAN’T DO ANYTHING ABOUT BUT THERE IS STILL ROOM FOR IMPROVEMENT
- 40. NOT BAD CONSIDERING ALSO THE PERCENTILE
- 41. NOT BAD CONSIDERING 1. THE WEBSITE IS IMAGE HEAVY. 2. CONTENTS MANAGED BY NON-TECHNICAL STAFF.
- 43. SOME TRICK 1. DELIVER CORE CONTENT FIRST 2. PROGRESSIVELY ENHANCE EXTRAS
- 44. SOME TRICK 3. MAKE SURE FEATURES FAIL GRACEFULLY 4. AVOID SINGLE POINT OF FAILURE
- 45. SOME TRICK 5. CRITICAL CSS FOR NEW VISITORS 6. CACHED CSS FOR RETURNING VISITORS
- 46. SOME TRICK 7. SYNTHETIC TESTING AND MONITORING 8. REAL USER MONITORING
- 47. SOME TRICK 9. USE SERVER SIDE TOOLS FOR ANOMALY DETECTION AND AUTOMATION
- 48. BUILD A PERFORMANCE CULTURE IN YOUR ORGANIZATION
- 49. PERFORMANCE {A LOT LIKE SEO} IS A REQUIREMENT NOT AN ADD-ON
Hinweis der Redaktion
- https://www.google.it/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=the%20speed%20of%20light Ok. Google told me that «the speed of light number» is the one you see. Who am I to say otherwise? --- Ok. Google mi ha detto che il numero che vedete è quello della velocità della luce. Chi sono io per dire il contrario.
- This is the subject of this case study. A top brand in the beauty & wellness travel industry in Italy, named Benessereviaggi. ------------------------------------------- Questo è il protagonist del case study. Un top brand italiano nel settore dei viaggi benessere di bome Benessereviaggi.
- Looks scary no?
- Yes looks scary. Google saw the lighe in 1998, the Booking we all know after 2005, Airbnb in 2009.
- And the Semrush data just to give you a little of context.
- Constraints. You can’t always do what you want as you want. There are many constraints to be respected and our role is to get the most out within the constraints that we have. ----------------------------------------------- Vincoli. Non puoi sempre fare quello che vuoi come vuoi. Ci sono tanti vincoli da rispettare e il nostro ruolo è quello di tirare fuori il massimo all’interno dei vincoli che abbiamo.
- Just to start I give you a bit of context on the project and the situation addressed in November 2013 planning to go live in July 2014 (then postponed to November 2014). It was a bloodbath. I admit. But we came out well. ---------------------------------------------------------- Giusto per iniziare vi fornisco un po’ di contesto sul progetto e sulla situazione affrontata a Novembre 2013 pianificando la messa online a Luglio 2014 (slittata poi a Novembre 2014). E’ stato un bagno di sangue. Lo ammetto. Ma ne siamo usciti bene.
- And now that you know the problems faced we can skip together to the point that most interested us. The number 3. ------------------- E ora che conoscete le problematiche affrontate passiamo al punto che più ci interessa. Il numero 3.
- Simple challenges are never exciting... and then as the first goal (without saying anything to the customer) we set out to reduce the cost of hardware / bandwidth from 290 Euros to 35 Euros per month. A job for Tony Stark - the Stark Industries, isn’t it?. --------------------- Le cose semplici non sono mai emozionanti….e quindi come primo obiettivo (senza dire nulla al cliente) ci siamo prefissati di ridurre il costo hardware/banda da 290 euro a 35 euro al mese. Un lavoro per Tony Stark.
- This is stuff for developers so I will be very brief and generic just to make you understand a little the depth of the work….and scare you even more. How many developer are here? Please your hands up while I’m going on, you are multitasking – I know. -------------------------- Questa è roba per sviluppatori quindi sarò molto breve e generico giusto per far capire un po’ la profondità del lavoro…e spaventarvi ancora di più. Quanti sviluppatori ci sono qui? Perfavore alzate le mani mentre io vado avanti, voi siete multitasking – lo so.
- After some problems solved in the early days of the go live (the long night of November 26) here is the deep crawl of Google with a bombproof reply of the website. ---------------------- Dopo qualche problemino risolto nei primi giorni dalla messa online (la lunga notte del 26 Novembre) ecco il deep crawl di Google con un risposta a prova di bomba dell’applicativo.
- Confirmed also by the Real User Monitoring Data of Google Analytics, concerning “Server Response Times” and “Page Download Times”. ------------ Confermato anche dai dati di Real User Monitoring di Google Analytics, per quanto concerne i «Tempi di risposta del server» e i «Tempi di download delle pagine».
- But even if all went well, there was something troubling. Servers were too stressed. --------------------------------- Ma anche se tutto andava bene, c’era qualcosa di preoccupante. I server erano troppo stressati.
- So we had to investigate…and the best way to do this is through the server logs. ----------------------------- Quindi abbiamo dovuto investigare…e il miglior modo per farlo è tramite i log del server.
- And this is what we found. -------------------------------------- E questo è quello che abbiamo scoperto.
- Yes. You know. A job for Captain America’s shield. --------------------- Sì lo so. Lo sapete anche voi . Un lavoro per lo scudo di capitan america.
- There is a nice and simple firewall to use on linux that can help you in solving easily a lot of common problems.
- Another nice addition is adding Mod_security with a very basic configuration without enabling too strict rules.
- And the most is out.
- One of the best thing you can do when working on Web Performance is to annotate every single deploy of your changes in production. It will help you a lot in identifing problems. This is the first rule to respect especially when you work on a project with a team of developers. You can also put reference to your project management tool in the GA annotation. It takes 30 seconds, but will let you save lot’s of ours in case something goes wrong.
- Benjamin "Ben" Grimm/la Cosa film
- All this work, all those things, are intended to achieve stability.
- Stability is the thing that can make you sleep soundly. Stability mean that you have control. Having control make a huge difference….is the little red line that separe success from failure.
- We can’t control network, we can’t control worst cases, but we can work on the things we can control to reduce the noise and the risks.
- We can’t control network, we can’t control worst cases, but we can work on the things we can control to reduce the noise and the risks.
- Be scared…cause this is a best case scenario.
- And you need to understand under which conditions we need to work when making a website.
- We need to concentrate our effort where we can make a difference. Got it.
- A syntethic testing with cable connection (aka fast one).
- A syntethic testing with a slow 3g simulation.
- Lot’s of work for 200ms and it’s not finished…but we are superhero. No?
- You probably already heard about it. It’s a must know for any frontend developer…and to me a must know for anybody involved in an online business. Being fast is about making people happy. Being fast is about user experience, cause it’s something we feel, perceive, live. Nobody like waiting. It’s a human being. People tend to got performance wrong cause they care about the non important things…the ones not critical for the human perception. The concept is pretty easy and is about making a website «usable» as soon as possible. Is a lot about illusion. Illusion of control. Why you need to make miles to reach the baggage claim at the airport. Why when you go to the restaurant clever chefs serve you a free «very small» entree. http://www.forbes.com/sites/anthonykosner/2013/07/13/how-mobile-experiences-can-shape-our-perception-through-illusions-of-speed/
- When the server side stuff finishes (and in this case it performs very poorly) we can make the magic happen.
- Thanks to the critical concept we can impress the user, making the website immediately interactive in a bunch of milliseconds.
- This is a synthetic test and I rarely rely on it for the server side metrics, but it is very powerfull in what concern the frontend optimization.
- Analytics data can show us what really happen in the real life. Looking at this number we can understand where we need to improve and compare the real impact and difference between different devices.
- Our analytics data for example are very stable and we can clearly see how the main impact is due to the side of things we can’t do anything about.
- And this data are related to a time range where we’re investigating in a issue derived from one of the deploy we’ve not yet completely solved.
- And another great part of insight can be given by the «distribution» tab in the Google Analytics Speed Reports. Here we can have a better vision of how good we are in the most important scenarios.
- Images can create lot’s of headache cause Browsers often change policys on how they manage the prioritization and there is a lot of discussion on the best way to manage images in a multi device world. Images are important…a little software error can transform you website from a grilled chicken breast to a chicken thigh fried with butter.
- Money has no smell.
- So what I can leave you with, are some important area to keep an eye on.
- And with a very important thing. A fundamental thing. Everyone must be involved by baking performance into your workflow from day one.
- Everyone must be involved by baking performance into your workflow from day one.