This document discusses responsive web design for an Italian brand's old website. It involves: 1) Completely migrating the CMS and redesigning the site while meeting commercial and emotional constraints. 2) Reducing server costs from €290/month to €35/month through database redesign, caching, and using Apache and Nginx. 3) Ensuring stability and preventing instability through measures like security firewalls, synthetic testing, and real user monitoring.

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 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

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.36AVERAGE TTI
DESKTOP
2.37AVERAGE 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