Responsive Web Design at The Speed of light

50
RESPONSIVE WEB DESIGN AT 299 792 458 m / s a 15 minutes story of an Italian top brand

Transcript of Responsive Web Design at The Speed of light

Page 1: Responsive Web Design at The Speed of light

RESPONSIVE WEB DESIGN AT

299 792 458 m / sa 15 minutes story of an Italian top brand

Page 2: Responsive Web Design at The Speed of light
Page 3: Responsive Web Design at The Speed of light

THIS IS THE STORY OF A

VERY VERYOLD WEBSITE

Page 4: Responsive Web Design at The Speed of light

I’M A DALMATIAN PELICAN LIVING NEAR

THE IRON GATESAND I WILL TAKE CARE OF YOUR HOMEWORK

Page 5: Responsive Web Design at The Speed of light
Page 6: Responsive Web Design at The Speed of light

OK, BUT…WHY AM I TELLING YOU THIS?

Page 7: Responsive Web Design at The Speed of light
Page 8: Responsive Web Design at The Speed of light

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.

Page 9: Responsive Web Design at The Speed of light

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.

Page 10: Responsive Web Design at The Speed of light

FROM A 290€/month

TO A 35€/month

SERVER

Page 11: Responsive Web Design at The Speed of light

1. COMPLETE DB REDESIGN

2. VARIOUS LEVELS OF CACHINGsome in memory

3. APACHE (+ NGINX AS A REVERSE PROXY FOR STATIC CONTENT)

Page 12: Responsive Web Design at The Speed of light
Page 13: Responsive Web Design at The Speed of light
Page 14: Responsive Web Design at The Speed of light

BUT THE SERVER WAS

TOO STRESSED

Page 15: Responsive Web Design at The Speed of light

…AND AFTER A LOG AUDIT

Page 16: Responsive Web Design at The Speed of light

MORE THAN

OF ACCESSES WERE FROM FAKE/MALICIOUS SOURCES

Page 17: Responsive Web Design at The Speed of light
Page 18: Responsive Web Design at The Speed of light

CSF (ConfigServer Security & Firewall) SETUP TO PREVENT

- PORT SCANNING, - BRUTE FORCE- SIMPLE DDOS ATTEMPS- ETC ETC…

Page 19: Responsive Web Design at The Speed of light

MOD_SECURITYTO IDENTIFY BAD BOT ACCESS

Page 20: Responsive Web Design at The Speed of light
Page 21: Responsive Web Design at The Speed of light

HARD NUMBERSANNOTATE EVERYSINGLE THING YOURDEVS TEAM CHANGE

Page 22: Responsive Web Design at The Speed of light

THINGS CAN GO

WRONG

Page 23: Responsive Web Design at The Speed of light

WE MUST

WE CAN’T CONTROL EVERYTHING, BUT

ACHIEVE STABILITYPREVENT INSTABILITY

Page 24: Responsive Web Design at The Speed of light

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

Page 25: Responsive Web Design at The Speed of light

THIS IS TRUE & VALID

FOR ANY WEBSITEIN ANY CONTEXT, BUT

MORE IMPORTANT

THAN EVER IN AMOBILE WORLD

Page 26: Responsive Web Design at The Speed of light

LET SEE WHYSource - Google PageSpeed Insight

Page 27: Responsive Web Design at The Speed of light

LET SEE WHY

ASSUMING WE ARE IN AN IDEAL CONDITION

Page 28: Responsive Web Design at The Speed of light

LET SEE WHY

YOU CANNOT DO ANYTHING ABOUT

Page 29: Responsive Web Design at The Speed of light

LET SEE WHY

THE PATH TO STABILITY

Page 30: Responsive Web Design at The Speed of light
Page 31: Responsive Web Design at The Speed of light
Page 32: Responsive Web Design at The Speed of light

ON THE FRONTEND WE CAN MAKE A DIFFERENCE

Page 33: Responsive Web Design at The Speed of light

THE CRITICAL

MISSION

Page 34: Responsive Web Design at The Speed of light
Page 35: Responsive Web Design at The Speed of light
Page 36: Responsive Web Design at The Speed of light

YOU TOLD ME

200ms

Page 37: Responsive Web Design at The Speed of light
Page 38: Responsive Web Design at The Speed of light

WE’RE ONLY LOSING WHERE WECAN’T DO ANYTHING ABOUT BUT THERE IS STILL ROOM FOR IMPROVEMENT

Page 39: Responsive Web Design at The Speed of light

1.36AVERAGE TTI

DESKTOP

2.37AVERAGE TTI

MOBILE

RUMDATA

Page 40: Responsive Web Design at The Speed of light

NOT BAD CONSIDERING ALSO THE PERCENTILE

Page 41: Responsive Web Design at The Speed of light

NOT BADCONSIDERING

1. THE WEBSITE IS IMAGE HEAVY.

2. CONTENTS MANAGED BYNON-TECHNICAL STAFF.

Page 42: Responsive Web Design at The Speed of light

WE’RE SAVING

3.060 €/year

Page 43: Responsive Web Design at The Speed of light

SOME TRICKS

1. DELIVER CORE CONTENT FIRST

2. PROGRESSIVELY ENHANCE EXTRAS

Page 44: Responsive Web Design at The Speed of light

3. MAKE SURE FEATURES FAIL GRACEFULLY

4. AVOID SINGLE POINT OF FAILURE

SOME TRICKS

Page 45: Responsive Web Design at The Speed of light

5. CRITICAL CSS FOR NEW VISITORS

6. CACHED CSS FOR RETURNING VISITORS

SOME TRICKS

Page 46: Responsive Web Design at The Speed of light

7. SYNTHETIC TESTING AND MONITORING

8. REAL USER MONITORING

SOME TRICKS

Page 47: Responsive Web Design at The Speed of light

9. USE SERVER SIDE TOOLS FOR ANOMALY DETECTION AND AUTOMATION

SOME TRICKS

Page 48: Responsive Web Design at The Speed of light

BUILD A PERFORMANCE

CULTURE IN YOUR

ORGANIZATION

Page 49: Responsive Web Design at The Speed of light

PERFORMANCE{A LOT LIKE SEO}IS A REQUIREMENT

NOT AN ADD-ON