Web Accessibility & Web Performance ή πως να Κάνετε το Website σας Ταχύτερο και πιο Προσβάσιμο

ΠΑΝΟΣ ΚΟΥΤΣΟΔΗΜΗΤΡΟΠΟΥΛΟΣ
Product & UX Supervisor, XO.gr, Χρυσός Οδηγός Α.Ε.
GREEK GRAPHIC DESIGNERS ASSOCIATION, 6 Απριλίου 2016
WEB ACCESSIBILITY & WEB PERFORMANCE
Ή ΠΩΣ ΝΑ ΚΑΝΕΤΕ ΤΟ WEBSITE ΣΑΣ ΤΑΧΥΤΕΡΟ ΚΑΙ ΠΙΟ ΠΡΟΣΒΑΣΙΜΟ

ΣΤΟΧΟΙ ΠΑΡΟΥΣΙΑΣΗΣ
• Να σας δώσω μια σαφή και όσο πιο πλήρη εικόνα γίνεται για
το τι εστί Web Accessibility και Web Performance Optimization
με την ελπίδα πως αυτές οι τεχνολογίες θ’ αποτελέσουν μέρος
της «ρουτίνας» σας ως Σχεδιαστές Ιστοσελίδων.
• Να προσθέσω/προστεθεί ένα λιθαράκι στη βελτίωση
του ελληνικού WWW και ελληνικής οικονομίας.
Disclaimer: Θ’ ακούσετε πολλούς αγγλικούς όρους.
Συγνώμη εκ των προτέρων γι’ αυτό.


ΠΡΟΓΡΑΜΜΑ
• Ποιος είμαι
• Web Accessibility και Ερωτήσεις
• Διάλειμμα
• Web Performance και Ερωτήσεις
3-5’
50’ και 1’ έως 10’
5 έως 10’
50’ και 1 έως 10’

ΠΟΙΟΣ ΕΙΜΑΙ
 Timeline εργασιακής εμπειρίας
 Ο Πρωθυπουργός για τον Χρυσό Οδηγό (Χ.Ο.)
 Στενοί συνεργάτες στον X.O.

ΣΥΝΤΟΜΟ (ΕΡΓΑΣΙΑΚΟ) ΒΙΟΓΡΑΦΙΚΟ
1995 - 1998
1998 - 2000
2000 - 2005
2005 - 2008
2008 - 2015.8
2015.9 - ‘Έως σήμερα
Μαθητευόμενος Γραφίστας, Graphic Designer,
Junior Art Director
You ‘re in the army now (Τ/Φ, Λοχίας, Επιλοχίας)
Web Designer, Web Author, Δ.Σ. Ένωσης Γραφιστών,
Δελτίο Παροχής (2003)
Senior Web Designer, Design Consultant & Assistant
Product Manager
User Experience Manager
Product & User Experience Supervisor
LinkedIn: Panos Koutsodimitropoulos

Η ΩΡΑ ΤΟΥ ΠΡΩΘΥΠΟΥΡΓΟΥ
Είμαι Πρωθυπουργός της
χώρας. Δεν είμαι Χρυσός
Οδηγός…
youtu.be/XebnBj9lBOY (ΕΡΤ1, Δεκέμβριος 2015, για τα ονόματα διαπλεκόμενων)

Πάνος
(Product-
UX)
ΟΙ ΑΝΘΡΩΠΟΙ-ΡΟΛΟΙ ΠΙΣΩ ΑΠ’ ΤΟ XO.GR
Product
Manager
Content
Managers
Web
Designer
Front-End
Developer
Web
Developers
Web
Manager
Online
Products’
Leader
Marketing
Manager
IT
Manager
Comm.
Manager
MARKETING DEPT.IT DEPT.
SEO/SEM
Specialist

WEB ACCESSIBILITY
 Βασικοί όροι
 Άξονες
 Προσωπικά ερεθίσματα
 Συστατικά
 Γιατί web accessibility
 Επίσημες οδηγίες
 Εργαλεία
 Συμβουλές προς Designers (με σημείο αναφοράς
το ‘business profile’ του xo.gr)
 Προτεινόμενο εκπαιδευτικό υλικό (2-3 βιβλία +
video lesson)

ΔΙΑΚΡΙΣΗ ΜΕΤΑΞΥ ΦΥΣΙΚΗΣ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΗΣ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑΣ
ΦΥΣΙΚΗ
ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ
ΗΛΕΚΤΡΟΝΙΚΗ
ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ

ΕΝΑΣ ΟΡΙΣΜΟΣ ΓΙΑ WEB ACCESSIBILITY
Web accessibility refers to the inclusive practice of
removing barriers that prevent interaction with, or
access to websites, by people with disabilities. When
sites are correctly designed, developed and edited, all
users have equal access to information and
functionality.
en.wikipedia.org/wiki/Web_accessibility
“

ΜΙΑ ΑΛΛΗ ΟΠΤΙΚΗ ΓΩΝΙΑ ΤΟΥ ΤΙ ΕΣΤΙ DISABILITY (ΑΝΑΠΗΡΙΑ)
…disability is a conflict between someone’s functional
capability and the world we have constructed.
rosenfeldmedia.com/books/a-web-for-everyone/
“
— Sarah Horton & Whitney Quesenbery
‘A Web for Everyone’

ΤΙ ΠΙΣΤΕΥΕΙ Ο ΔΗΜΙΟΥΡΓΟΣ ΤΟΥ WWW ΓΙΑ ΤΗΝ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ
The power of the web is in its universality. Access by
everyone regardless of disability is an essential aspect.
w3.org/People/Berners-Lee/
“
— Tim Berners-Lee
W3C Director and inventor of the World Wide Web

ΑΞΟΝΕΣ (ΠΡΟΣΩΠΙΚΗ ΑΠΟΨΗ)
ΑΝΘΡΩΠΟΣ
ΗΘΙΚΗ
ΤΕΧΝΟΛΟΓΙΑ
ΟΙΚΟΝΟΜΙΑ
ΕΠΙΧΕΙΡΕΙΝ
Human-Centered Design (HCD)
W3C, WAI, WCAG

ΠΡΟΣΩΠΙΚΑ ΕΡΕΘΙΣΜΑΤΑ
1974 - 1994
Από τότε που θυμάμαι
τον αγαπημένο μου παππού
Παναγιώτη, είχε μόνο ένα μάτι.
Δεκαετία ‘50 του το είχαν
αντικαταστήσει με γυάλινο.

1983 - 84 (Ε’ Δημοτικού)
Ο συμμαθητής μου Στέλιος
συμμετέχει σε tv ad*
παριστάνοντας πως είναι
παιδί-ΑμεΑ.
*Ο μπαμπάς του Στέλιου
ήταν τηλεοπτικός παραγωγός.

Καλοκαίρι 1985
Για δύο μήνες έμενε δίπλα μας
η Κα Άννα (πούλαγε λαχεία
στην Ομόνοια), η οποία
μπορούσε να δει/διακρίνει
μόνο σκιές*.
*Μου ζήταγε να της περιγράφω
τι βλέπω.

1993-94, ΤΕΦΑΑ
Μάθημα επιλογής - Βιβλίο:
Ειδική Φυσική Αγωγή

1994-98, ΑΟΠ: ΑΕΤΟΙ (;)
Βλέποντας την προπόνηση τους
μετά ή πριν τη δική μου
προπόνηση.

2000 - 2005, Cyberce
Ευρωπαϊκά έργα
• HTML
• CSS
• WEB ACCESSIBILITY

Ολυμπιακοί ΑΘΗΝΑ 2004
Πρόγραμμα ‘ΕΡΜΗΣ’
για την ενίσχυση
της φυσικής προσβασιμότητας
σε επιχειρήσεις.

2012, Χ.Ο.
Φωνητική υποστήριξη
στο m.xo.gr
• Συνεργασία με
τον Σπύρο Ράπτη,
Research Director at the
Institute for Language
and Speech Processing /
Research Center
"Athena"
gr.linkedin.com/in/spyros-raptis-1277b7

ΣΥΣΤΑΤΙΚΑ ΤΟΥ WEB ACCESSIBILITY
w3.org/WAI/presentations/

ΠΟΙΟΥΣ ΑΝΘΡΩΠΟΥΣ ΑΦΟΡΑ
When your website is accessible, more people can use
it effectively in more situations.
w3.org/People/Shawn/
“
— Shawn Henry,
W3C Web Accessibility Initiative (WAI)

Πλειάδα
Ανθρώπων.
Ανάμεσα τους:
w3.org/WAI/intro/people-use-web/

Άνθρωποι, που δεν
μπορούν να κουνήσουν
τα χέρια τους καλά.
Σαν τον Michael J. Fox,
τον ηθοποιό, που έχει
Parkinson's.
michaeljfox.org/

Και ανθρώπους, που δεν
μπορούν να κουνήσουν
τα χέρια τους καθόλου.
Σαν τον Stephen Hawking,
τον διάσημο θεωρητικό
φυσικό, ο οποίος έχει ALS*.
* Amyotrophic Lateral
Sclerosis (Αμυοατροφική
πλευρική σκλήρυνση )
hawking.org.uk/

Ανθρώπους, που είτε έχουν
χαμηλή όραση είτε είναι
τυφλοί.
Σαν τον Stevie Wonder,
τον μουσικό.

Ανθρώπους, που είναι
βαρήκοοι.
Σαν τον Pete Townshend
της rock μπάντας ‘The Who’.

Ανθρώπους, που είναι
κωφοί.
Σαν την Linda Bove
την ηθοποιό.

Ανθρώπους με διανοητική
αναπηρία.
Σαν τον Henry Winkler
τον ηθοποιό.

Ανθρώπους με δυσλεξία.
Σαν την τραγουδίστρια Cher.

ΓΙΑΤΙ WEB ACCESSIBILITY: SHOW ME THE… NUMBERS
Of computer users age 18 to 64, 57%benefit from accessible technology due to mild or
severe impairments.
The Wide Range of Abilities and Its Impact on Computer Technology (.doc)
“
— Forrester Research, Inc.
A Research Study Commissioned by Microsoft Corporation
Περισσότερα στατιστικά στοιχεία: w3.org/WAI/bcase/soc#stats

ΣΤΗΝ ΕΛΛΑΔΑ
Απογραφή πληθυσμού 1991 [Εθνική Στατιστική Υπηρεσία της Ελλάδος (ΕΣΥΕ)]
Έρευνα Εργατικού Δυναμικού, Β’ τρίμηνο 2002 [Εθνική Στατιστική Υπηρεσία της Ελλάδος (ΕΣΥΕ)]
• 267.003 ΑμεΑ: Μισοί περίπου από τους οποίους είναι χρόνια
πάσχοντες (π.χ. καρδιοπαθείς, νεφροπαθείς, καρκινοπαθείς,
κλπ.).
• 18,2% είναι το ποσοστό του πληθυσμού της χώρας που
έχει κάποια αναπηρία ή αντιμετωπίζει κάποιο πρόβλημα, ενώ
περισσότερα από τα μισά άτομα βρίσκονται σε ηλικίες άνω
των 65 ετών.

WILLIAM, ΕΝΑΣ ΑΠΛΗΣΤΟΣ ΧΡΗΣΤΗΣ Η/Υ, 84 ΕΤΩΝ :-)
w3.org/WAI/older-users/Overview.php

ΓΗΡΑΝΣΗ ΠΛΗΘΥΣΜΟΥ, 65+
un.org/esa/population/publications/wpp2006/wpp2006.htm
Ο πληθυσμός της γης θα είναι κατά πολύ γηραιότερος το 2050.
Πρόβλεψη Ηνωμένων Εθνών (σε παγκόσμιο επίπεδο):
Αύξηση από 7,6% το 2010 σε 16,2% το 2050.
• Στην Ευρώπη σε 29%
• Στις ΗΠΑ σε 20%
• Στην Ιαπωνία σε 40%

WEB ACCESSIBILITY = SMART BUSINESS
* webaim.org/blog/web-accessibility-and-seo/
«Μ’ ένα σμπάρο, πολλά τρυγόνια»:
• Επηρεάζεται (θετικά) η «εικόνα» μιας εταιρείας/οργανισμού
• Αποτελεί μέρος της Εταιρικής Κοινωνικής Ευθύνης
• Μειώνεται ο κίνδυνος νομικής δράσης εναντίον του ιδιοκτήτη
(και των κατασκευαστών) ενός website
• Βελτιώνεται η SEO απόδοση ενός website*

ΩΡΑΙΑ ΜΑΣ ΤΑ ΛΕΣ, ΑΛΛΑ ΓΙΑ ΠΕΣ ΜΑΣ ΓΙΑ ΤΟ «ΜΑΛΛΙ»
w3.org/WAI/bcase/fin.html#invest
• Το μεγαλύτερο μέρος της επένδυσης γίνεται εκ των προτέρων, π.χ.:
– Εκπαίδευση προσωπικού
– Αναβάθμιση εργαλείων κατασκευής και αξιολόγησης
των websites
• Προστίθεται χρόνος στην υλοποίηση και στο testing. Όσο
οι άνθρωποι γίνονται πιο έμπειροι, τα κόστη θα χαμηλώνουν.

ΤΡΟΠΟΙ ΓΙΑ ΝΑ ΜΕΙΩΘΕΙ ΤΟ ΚΟΣΤΟΣ
w3.org/WAI/bcase/fin.html#decreasing
• Συμπεριλάβετε το web accessibility απ’ την αρχή των έργων
• Χρησιμοποιήστε εργαλεία, που υποστηρίζουν web
accessibility
• Μοιραστείτε σχετικά καλούδια μέσα
στην εταιρεία/οργανισμό
• Διαμοιρασμός κόστους με συναφή αντικείμενα

ΕΠΙΣΗΜΕΣ ΟΔΗΓΙΕΣ ΣΧΕΤΙΚΕΣ ΜΕ WEB ACCESSIBILITY (ΓΙΑ CONTENT) ΑΠ’ ΤΟ W3C
w3.org/TR/WCAG20/
• Web Content Accessibility Guidelines (WCAG) 2.0,
• Accessible Rich Internet Applications (WAI-ARIA) 1.0
w3.org/WAI/
w3.org/TR/wai-aria/

EC.EUROPA.EU - ΣΥΜΜΟΡΦΩΣΗ ΚΑΤΑ LEVEL AA
ec.europa.eu/ipg/standards/accessibility/index_en.htm

GOV.UK - ΣΥΜΜΟΡΦΩΣΗ ΚΑΤΑ LEVEL AA
gov.uk/service-manual/user-centred-design/accessibility.html

ΛΟΓΙΚΗ ΔΟΜΗΣΗΣ ΤΟΥ WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.0
• 4 ΑΡΧΕΣ (PRINCIPLES)
- Perceivable (αντιληπτό περιεχόμενο)
- Operable (λειτουργικό περιεχόμενο)
- Understandable (κατανοητό περιεχόμενο) και
- Robust (περιεχόμενο χωρίς σφάλματα)
• 12 GUIDELINES (ΟΔΗΓΙΕΣ)
Γενικότερο πλαίσιο και συνολικοί αντικειμενικοί στόχοι
(σε σχέση με τις διαφορετικές αναπηρίες)
• SUCCESS CRITERIA (ΚΡΙΤΗΡΙΑ ΕΠΙΤΥΧΙΑΣ)
3 επίπεδα συμμόρφωσης:
A (κατώτερο), AA και AAA (μέγιστο)
• ΕΠΑΡΚΕΙΣ ΚΑΙ ΣΥΜΒΟΥΛΕΥΤΙΚΕΣ
ΤΕΧΝΙΚΕΣ (TECHNIQUES) Tutorials

ΤΟ ΑΠΟΛΥΤΟ ΣΗΜΕΙΟ ΑΝΑΦΟΡΑΣ ΓΙΑ ΝΑ ΚΑΤΑΛΑΒΕΤΕ ΤΟ WCAG 2.0
w3.org/WAI/WCAG20/quickref/ Προσοχή:

ΕΡΓΑΛΕΙΑ: W3C EASY CHECKS (MANUALLY)
w3.org/WAI/eval/preliminary.html

ΕΡΓΑΛΕΙΑ: W3C MARKUP VALIDATION
validator.w3.org

ΕΡΓΑΛΕΙΑ: W3C CSS VALIDATION
jigsaw.w3.org/css-validator/

ΕΡΓΑΛΕΙΑ: SEARCH OPERATOR “CACHE:” ΤΗΣ GOOGLE (ΚΑΙ ΓΙΑ SEO)
cache:www.domain.gr > Έκδοση μόνο κειμένου (Text-only version)

ΕΡΓΑΛΕΙΑ: ACHECKER
achecker.ca/checker/

ΕΡΓΑΛΕΙΑ: WAVE AIM
wave.webaim.org/ (+add-on για Firefox)

ENA ΤΥΠΙΚΟ EVALUATION REPORT

ΜΕΡΙΚΕΣ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΓΙΑ ΠΡΟΣΒΑΣΙΜΟ ΣΧΕΔΙΑΣΜΟ (BY WebAIM)
webaim.org/resources/designers/

ΔΟΜΗΣΤΕ ΤΙΣ ΕΠΙΚΕΦΑΛΙΔΕΣ ΝΩΡΙΣ

ΥΠΟΛΟΓΙΣΤΕ ΤΗ ΣΕΙΡΑ ΑΝΑΓΝΩΣΗΣ

CONTRAST!

(ΕΠΙΛΕΞΙΜΟ) ΚΕΙΜΕΝΟ vs ΚΕΙΜΕΝΟ ΣΕ ΓΡΑΦΙΚΟ

ΠΡΟΣΟΧΗ ΣΤΗ ΧΡΗΣΗ ΤΩΝ ΚΕΦΑΛΑΙΩΝ (UPPERCASE)

MINIMUM FONT-SIZE

ΜΗΚΟΣ ΣΕΙΡΑΣ

ΤΑ LINKS ΝΑ ΞΕΧΩΡΙΖΟΥΝ

ΜΕΤΑΚΙΝΗΣΗ ΣΤΑ LINKS ΜΕΣΩ ΠΛΗΚΤΡΟΛΟΓΙΟΥ ΕΛΕΥΘΕΡΑ ΚΑΙ ΧΩΡΙΣ ΠΑΓΙΔΕΣ

SKIP TO MAIN CONTENT (ΒΟΗΘΗΜΑ ΕΣΩΤΕΡΙΚΗΣ ΠΛΟΗΓΗΣΗΣ)

TEXT LINK ΠΟΥ ΝΑ ΒΓΑΖΕΙ ΝΟΗΜΑ

VIDEO

ΜΗΝ ΣΤΗΡΙΖΕΣΤΕ ΣΤΟ ΧΡΩΜΑ ΜΟΝΟ, ΓΙΑ ΝΑ ΜΕΤΑΦΕΡΕΤΕ ΠΛΗΡΟΦΟΡΙΑ
Π.χ.:
• Αντί για:
Επιλέξτε το κόκκινο πεδίο
• Καλύτερα:
Επιλέξτε το κόκκινο πεδίο με το όνομα Τηλέφωνο

ΠΡΟΣΟΧΗ ΣΤΑ <LABEL>S, ΟΔΗΓΙΕΣ KAI ΜΗΝΥΜΑ ΕΠΙΒΕΒΑΙΩΣΗΣ/ΛΑΘΟΥΣ

ΕΚΠΑΙΔΕΥΤΙΚΟ ΥΛΙΚΟ (ΒΙΒΛΙΑ, VIDEO ΜΑΘΗΜΑΤΑ)
Free (EL) Paid (EN)
Paid (EN) Free (EN)
Paid (EN)

Κορώνη Μεσσηνίας

WEB PERFORMANCE
 Γιατί το web performance έχει σημασία για τους
Designers
 Γιατί οι Designers "παλεύουν" να κατασκευάσουν
γρήγορα websites
 Τα metrics-κλειδιά για το web performance
 Τι προκαλεί το "φτωχό" web performance;
 Πως να βελτιστοποιήσετε τα assets του website σας
 Πως να παρακολουθείτε το web performance

ΤΙ ΠΙΣΤΕΥΕΙ ΕΝΑΣ ΑΠ’ ΤΟΥΣ ΠΙΟ ΣΗΜΑΝΤΙΚΟΥΣ ΕΠΕΝΔΥΤΕΣ
Speed is the most important feature. If your
application is slow, people won’t use it.
usv.com/about/fred-wilson
“
— Fred Wilson
Managing Partner, Union Square Ventures (USV)

ΓΙΑΤΙ ΤΟ WEB PERFORMANCE ΕΧΕΙ ΣΗΜΑΣΙΑ
• Η ταχύτητα είναι μία απ' τις πτυχές που παραβλέπονται
• Σήμερα, οι χρήστες περιμένουν ένα website να φορτώσει
σε 2 δευτερόλεπτα ή λιγότερο.
• Στην πραγματικότητα, 1 δευτερόλεπτο καθυστέρηση
στο χρόνο φόρτωσης μιας σελίδας ισούται με:
• ένα 3% πτώση στα έσοδα ανά επισκέπτη,
• 7% λιγότερες μετατροπές (conversions), και
• μείωση 16% της ικανοποίησης πελάτη.
Yottaa

ΕΤΣΙ ΛΟΙΠΟΝ, ΓΙΑΤΙ ΟΙ DESIGNES ΘΑ ΕΠΡΕΠΕ ΝΑ ΕΝΔΙΑΦΕΡΟΝΤΑΙ;
• Επειδή, το 80%-90% της απόδοσης συμβαίνει στο front-end
των websites, εκεί, δηλαδή, που οι Designers λειτουργούν.
• Με άλλα λόγια, επειδή, όλα τα assets (HTML, CSS, images,
JavaScript), για τα οποία ένας Designer είναι υπεύθυνος,
αντιπροσωπεύουν σχεδόν όλο το loading time μιας σελίδας.

CASE STUDY #1: AMAZON.COM
100 ms
Καθυστέρηση
στο page load time
1%
Πτώση* στα
συνολικά έσοδα
=
*Προφανώς, μιλάμε για εκατομμύρια δολάρια
blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/

CASE STUDY #2: MOZILLA FIREFOX
2,2 sec
Εξοικονόμηση στο
page load time
60 εκατ.
Περισσότερα downloads
ανά χρόνο
=
blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/

ΓΙΑΤΙ ΟΙ DESIGNERS ΠΑΛΕΥΟΥΝ ΝΑ ΚΑΤΑΣΚΕΥΑΣΟΥΝ ΓΡΗΓΟΡΑ WEBSITES
1. Η δημιουργία περιεχομένου, by default, μειώνει την απόδοση.
Έτσι, στη θεωρία, ο καλύτερος τρόπος, για να
βελτιστοποιήσεις την απόδοση είναι να μην έχεις καθόλου
περιεχόμενο. Καλό, ε;
Χρειάζεται ισορροπία.

stevesouders.com
The fastest HTTP request is the one not made.
“ — Steve Souders
SpeedCurve

2. Πολλοί Designers αγνοούν τις συνέπειες, που τα assets τους
μπορεί να έχουν από πλευράς performance

ΟΙ ΠΕΡΙΟΧΕΣ-ΚΛΕΙΔΙΑ ΤΩΝ METRICS ΤΟΥ WEB PERFORMANCE
1. Back-end performance
2. Front-end performance
3. Content complexity

BACK-END PERFORMANCE
DNS Resolution time
Ο χρόνος σύνδεσης και διανομής του περιεχομένου μιας σελίδας.
Αποτελεί περίπου το 10%-20% του web performance και δεν είναι
ορατό στον τελικό χρήστη.
Time to Connect
Waiting Time
Receiving Time
Time to First Byte
Time to Last Byte

FRONT-END METRICS
Πόσο γρήγορα ο browser του επισκέπτη εκτελεί και εμφανίζει
(renders) το περιεχόμενο μια σελίδας.
Μετριέται απ’ τη στιγμή που ένα request γίνει στο website
Time to Title
Time to Start
Render
Time to Display Time to
Interact

CONTENT COMPLEXITY
Πόσο πολύπλοκη είναι η σύνθεση μιας ιστοσελίδας από πλευράς:
αριθμού και μεγέθους των requests και των assets.
Συνολικός αριθμός των Assets
• Requests
• Domains
• HTML
• JavaScript
• CSS
• Images
• Media (Video, Audio, etc.)
• Other
Συνολικό size (/KB)
• Page Size (Sum of All
Assets’ Sizes)
• HTML
• JavaScript
• CSS
• Images
• Media (Video, Audio, etc.)
• Other

ΤΙ ΠΡΟΚΑΛΕΙ ΤΟ ΦΤΩΧΟ WEB PERFROMANCE
christianheilmann.com
If your site is 15MB, it’s not HTML5 – it’s stupid.
“ — Christian Heilmann
Principal Developer Evangelist, Mozilla

ΠΩΣ ΝΑ ΒΕΛΤΙΣΤΟΠΟΙΗΣΕΤΕ ΤΑ ASSETS ΤΟΥ WEBSITE ΣΑΣ
The best strategy is to consider speed a feature just like
one of the other features on your site.“
— Christian Heilmann
Engineer, Facebook - Author
christianheilmann.com

ΣΕΙΡΑ ΕΚΤΕΛΕΣΗΣ
CSS πρώτα, τα JavaScripts μέσα στο <head>.
<head>
<link rel="stylesheet" type="text/css" href=”stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript">
document.write("Hello world!");
</script>
</head>

ΣΥΝΔΥΑΣΜΟΣ CSS ΑΡΧΕΙΩΝ
<link rel="stylesheet" type=“text/css” href=”stylesheet1.css">
<link rel="stylesheet" type=“text/css” href=”stylesheet2.css">
<link rel=“stylesheet” type=“text/css” href=“stylesheet3.css”>
<link rel=“stylesheet” type=“text/css” href=“combined.css”>

ΣΥΝΔΥΑΣΜΟΣ JAVASCRIPTS ΑΡΧΕΙΩΝ
<script type="text/javascript" src=“javascript1.js"></script>
<script type="text/javascript" src=“combined.js"></script>

OΤΙ ΠΑΙΖΕΙ ΔΙΑΚΟΣΜΗΤΙΚΟ ΡΟΛΟ, ΜΠΑΙΝΕΙ ΣΕ CSS SPRITES
Μερικά δωρεάν
CSS sprite εργαλεία:
• SpriteMe
• Compass
• SpritePad
• Spritebox

MINIFICATION
HTML minification:
• HTML Compressor
• Google HTML Compressor
and Minifier
• TextFixer
Αφαίρεση σχολίων, περιττού whitespace μεταξύ των tags και αναλόγως
το style του authoring: αφαίρεση των τελικών tags (</li>)
JavaScript minification:
• JavaScript Compressor
• JSCompress
• Refresh-SF
CSS minification:
• CSS Compressor
• CSS Drive
• Refresh-SF

ΣΥΜΠΙΕΣΗ ΤΩΝ IMAGES
Μερικά toolάκια:
• Kraken.io
• Tinypng.com
• Jpegmini.com
• Software tools (Photoshop
κ.α.)
Loseless:
Lossy:
Συμπίεση χωρίς απώλεια ποιότητας
Συμπίεση με πιθανή απώλεια στην ποιότητα

ΑΠΟΦΥΓΕΤΕ ΤΑ BAD REQUESTS
Αφαιρέστε broken links, εικόνες που λείπουν ή όποιο άλλο asset
καταλήγει σε 404 error.

ΦΟΡΤΩΣΤΕ ΤΑ 3RD PARTY ASSETS ΑΣΥΓΧΡΟΝΑ
Συνήθως, πρόκειται για social share widgets, tracking code για Analytics
(π.χ. Google Analytics).
<script>
var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script>

ΟΡΙΣΤΕ ΤΙΣ ΔΙΑΣΤΑΣΕΙΣ ΤΩΝ ΕΙΚΟΝΩΝ
<img src=“myimage.jpg” height=“500” width=“400”>

ΠΡΟΣΠΑΘΗΣΤΕ ΣΤΟ CSS ΝΑ ΕΙΣΤΕ ΟΣΟ ΠΙΟ SPECIFIC ΓΙΝΕΤΑΙ
ul li {color: blue;}
ol li {color: red;}
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

ΚΑΘΟΡΙΣΤΕ ΤΟ CHARACTER SET
<meta http-equiv="content-type" content="text/html;charset=utf-8">
Επιτρέπεται έτσι, στον browser να ξεκινήσει το parsing του HTML και
να εκτελέσει τα scripts αμέσως.

ΑΠΟΦΥΓΕΤΕ ΤΑ INLINE CSS
<p style=“font-size: 1.2em; font-weight: bold; font-family:
arial, helvetica;”>
<head>
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
</head>

ΠΩΣ ΝΑ ΠΑΡΑΚΟΛΟΥΘΕΙΤΕ ΤΟ WEB PERFORMANCE
en.wikipedia.org/wiki/William_Thomson,_1st_Baron_Kelvin
If you can’t measure it, you can’t improve it.
“ — Lord Kelvin
19th Century Physicist and Engineer

ΠΏΣ ΝΑ ΠΑΡΑΚΟΛΟΥΘΕΙΤΕ ΤΟ WEB PERFORMANCE
1. Να παρακολουθείτε συγκεκριμένα templates του website σας
(θετικό: free - αρνητικό: logistics)
2. Να εγκαταστήσετε στον server σας enterprise λογισμικό
(θετικό: automated logistics, workflow - αρνητικό: paid)
Δύο βασικοί τρόποι:

ΕΡΓΑΛΕΙΑ: GTMETRIX
gtmetrix.com

ΕΡΓΑΛΕΙΑ: WEB PAGE TEST
webpagetest.org

ΕΡΓΑΛΕΙΑ: PINGDOM WEBSITE SPEED TEST
tools.pingdom.com/

ΕΡΓΑΛΕΙΑ: WEB SITE TEST
websitetest.com/

Panos Koutsodimitropoulos
ΣΑΣ ΕΥΧΑΡΙΣΤΩ! :-)
pkoutsod
pkoutsod@gmail.com

Web Accessibility & Web Performance ή πως να Κάνετε το Website σας Ταχύτερο και πιο Προσβάσιμο

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Web Accessibility & Web Performance ή πως να Κάνετε το Website σας Ταχύτερο και πιο Προσβάσιμο

Similar to Web Accessibility & Web Performance ή πως να Κάνετε το Website σας Ταχύτερο και πιο Προσβάσιμο (17)

Web Accessibility & Web Performance ή πως να Κάνετε το Website σας Ταχύτερο και πιο Προσβάσιμο