[CASE STUDY] Responsive Web Design at the speed of light

With a lot of work we were able to become very fast...so you can be fast too.

Transcript

1. RESPONSIVE WEB DESIGN AT 299 792 458 m / s a 15 minutes story of an Italian top brand
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
22. THINGS CAN GO WRONG
23. WE MUST WE CAN’T CONTROL EVERYTHING, BUT ACHIEVE STABILITY PREVENT INSTABILITY
24. WE MUST WE CAN’T CONTROL EVERYTHING, BUT ACHIEVE STABILITY PREVENT 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 WHY Source - 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
33. THE CRITICAL MISSION
36. YOU TOLD ME 200ms
38. WE’RE ONLY LOSING WHERE WE CAN’T DO ANYTHING ABOUT BUT THERE IS STILL ROOM FOR IMPROVEMENT
39. 1.36 AVERAGE TTI DESKTOP 2.37 AVERAGE TTI MOBILE RUM DATA
40. NOT BAD CONSIDERING ALSO THE PERCENTILE
41. NOT BAD CONSIDERING 1. THE WEBSITE IS IMAGE HEAVY. 2. CONTENTS MANAGED BY NON-TECHNICAL STAFF.
42. WE’RE SAVING 3.060 € /year
43. SOME TRICKS 1. DELIVER CORE CONTENT FIRST 2. PROGRESSIVELY ENHANCE EXTRAS
44. 3. MAKE SURE FEATURES FAIL GRACEFULLY 4. AVOID SINGLE POINT OF FAILURE SOME TRICKS
45. 5. CRITICAL CSS FOR NEW VISITORS 6. CACHED CSS FOR RETURNING VISITORS SOME TRICKS
46. 7. SYNTHETIC TESTING AND MONITORING 8. REAL USER MONITORING SOME TRICKS
47. 9. USE SERVER SIDE TOOLS FOR ANOMALY DETECTION AND AUTOMATION SOME TRICKS
48. BUILD A PERFORMANCE CULTURE IN YOUR ORGANIZATION
49. PERFORMANCE {A LOT LIKE SEO} IS A REQUIREMENT NOT AN ADD-ON