RESPONSIVE WEB DESIGN AT

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

@andreapernici

THIS IS THE STORY OF A

VERY VERYOLD WEBSITE

I’M A DALMATIAN PELICAN LIVING NEAR

THE IRON GATESAND I WILL TAKE CARE OF YOUR HOMEWORK

OK, BUT…WHY AM I TELLING YOU THIS?

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.

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.

FROM A 290€/month

TO A 35€/month

SERVER

1. COMPLETE DB REDESIGN

2. VARIOUS LEVELS OF CACHINGsome in memory

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

BUT THE SERVER WAS

TOO STRESSED

…AND AFTER A LOG AUDIT

MORE THAN

OF ACCESSES WERE FROM FAKE/MALICIOUS SOURCES

CSF (ConfigServer Security & Firewall) SETUP TO PREVENT

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

MOD_SECURITYTO IDENTIFY BAD BOT ACCESS

HARD NUMBERSANNOTATE EVERY SINGLE THING YOURDEVS TEAM CHANGE

THINGS CAN GO

WRONG

WE MUST

WE CAN’T CONTROL EVERYTHING, BUT

ACHIEVE STABILITYPREVENT INSTABILITY

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

THIS IS TRUE & VALID

FOR ANY WEBSITEIN ANY CONTEXT, BUT

MORE IMPORTANT

THAN EVER IN AMOBILE WORLD

LET SEE WHYSource - Google PageSpeed Insight

LET SEE WHY

ASSUMING WE ARE IN AN IDEAL CONDITION

LET SEE WHY

YOU CANNOT DO ANYTHING ABOUT

LET SEE WHY

THE PATH TO STABILITY

ON THE FRONTEND WE CAN MAKE A DIFFERENCE

THE CRITICAL

MISSION

YOU TOLD ME

200ms

WE’RE ONLY LOSING WHERE WECAN’T DO ANYTHING ABOUT

BUT THERE IS STILL ROOM FOR IMPROVEMENT

1.36AVERAGE TTI

DESKTOP

2.37AVERAGE TTI

MOBILE

RUMDATA

NOT BAD CONSIDERING ALSO THE PERCENTILE

NOT BADCONSIDERING

1. THE WEBSITE IS IMAGE HEAVY.

2. CONTENTS MANAGED BYNON-TECHNICAL STAFF.

WE’RE SAVING

3.060 €/year

SOME TRICK

1. DELIVER CORE CONTENT FIRST

2. PROGRESSIVELY ENHANCE EXTRAS

SOME TRICK

3. MAKE SURE FEATURES FAIL GRACEFULLY

4. AVOID SINGLE POINT OF FAILURE

SOME TRICK

5. CRITICAL CSS FOR NEW VISITORS

6. CACHED CSS FOR RETURNING VISITORS

SOME TRICK

7. SYNTHETIC TESTING AND MONITORING

8. REAL USER MONITORING

SOME TRICK

9. USE SERVER SIDE TOOLS FOR ANOMALY DETECTION AND AUTOMATION

BUILD A PERFORMANCE

CULTURE IN YOUR

ORGANIZATION

PERFORMANCE{A LOT LIKE SEO}IS A REQUIREMENT

NOT AN ADD-ON