1. ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ
ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ
ΥΠΟΛΟΓΙΣΤΩΝ
ΤΟΜΕΑΣ ΗΛΕΚΤΡΟΝΙΚΗΣ ΥΠΟΛΟΓΙΣΤΩΝ
ΕΡΓΑΣΤΗΡΙΟ ΕΠΕΞΕΡΓΑΣΙΑΣ ΠΛΗΡΟΦΟΡΙΑΣ & ΥΠΟΛΟΓΙΣΜΩΝ
Ανάλυση Σημαντικότητας Χαρακτηριστικών
Απόδοσης του Λογισμικού Google Lighthouse
Εκπονητής | Παναγιώτης Σιάτος
Αριθμός Μητρώου (ΑΕΜ) | 6744
Επιβλέπων Αναπληρωτής Καθηγητής | Ανδρέας Συμεωνίδης
Θεσσαλονίκη, Μάρτιος 2021

2. Κίνητρο (1/2)
• Μόλις 100 χιλιοστά του δευτερολέπτου περισσότερη
καθυστέρηση στη φόρτωση ενός ιστότοπου είχε
αποτέλεσμα μείωσης του ποσοστού μετατροπών αγοράς
κατά 7%.
• Κατά μέσο όρο ιστοσελίδες μέσω κινητού που φορτώνουν
σε 700 χιλιοστά του δευτερολέπτου είχαν το χαμηλότερο
ποσοστό εγκατάλειψης. Στον αντίποδα, 2 δευτερόλεπτα
καθυστέρησης αύξησε το ποσοστό αναπήδησης κατά
103%.
• Ιστοσελίδες με το χαμηλότερα ποσοστά αναπήδησης είχαν
χρόνο εκκίνησης απεικόνισης ιστότοπου (start render time)
μεταξύ 0.9 και 1.5 δευτερολέπτων.
Akamai Online Retail Performance Report: Milliseconds Are
Critical (2017)
2

3. Κίνητρο (2/2)
Ποσοστό χρήσης έξυπνων συσκευών για την περιηγήση στο
διαδίκτυο περίοδος 2013-2019 (Statista).
3

4. Σκοπός Διπλωματικής (1/6)
Google Lighthouse Report
• Αυτοματοποιημένο πρόγραμμα ανοιχτού κώδικα
μέτρησης ποιότητας ιστοσελίδων
• Version 5.XX
• Βαθμολογίες από HTTP Archive
4

5. Σκοπός Διπλωματικής (2/6)
Google Lighthouse Performance Metrics
Μετρικές Απόδοσης
• First Contentful Paint
• First Meaningful Paint
• First CPU Idle
• Time to Interactive
• Speed Index
• Max Potential First Input Delay
• Estimated Input Latency
• Total Blocking Time
5

6. Σκοπός Διπλωματικής (3/6)
Google Lighthouse Performance Metrics
Μετρικές Απόδοσης
• First Contentful Paint
• First Meaningful Paint
• First CPU Idle
• Time to Interactive
• Speed Index
• Max Potential First Input Delay
• Estimated Input Latency
• Total Blocking Time
6

7. Σκοπός Διπλωματικής (4/6)
Google Lighthouse Performance Metrics
Μετρικές Απόδοσης
• First Contentful Paint
• First Meaningful Paint
• First CPU Idle
• Time to Interactive
• Speed Index
• Max Potential First Input Delay
• Estimated Input Latency
• Total Blocking Time
7

8. Σκοπός Διπλωματικής (5/6)
Google Lighthouse Performance Metrics
Μετρικές Απόδοσης
• First Contentful Paint
• First Meaningful Paint
• First CPU Idle
• Time to Interactive
• Speed Index
• Max Potential First Input Delay
• Estimated Input Latency
• Total Blocking Time
8

9. Σκοπός Διπλωματικής (6/6)
Google Lighthouse Performance Metrics
Μετρικές Απόδοσης
• First Contentful Paint
• First Meaningful Paint
• First CPU Idle
• Time to Interactive
• Speed Index
• Max Potential First Input Delay
• Estimated Input Latency
• Total Blocking Time
• Επέκταση των λειτουργιών
Google Lighthouse
• Ιεράρχηση των προτάσεων
βελτίωσης
• Εξειδίκευση προτάσεων
9

10. Μεθοδολογία (1/9)
• 240 χιλιάδες json αναφορές από HTTP Archive
• Εξήχθησαν 85 χαρακτηριστικά για την πρόβλεψη των μετρικών
απόδοσης
• Διαχωρισμός του σετ Δεδομένων
• Πρόβλεψη μετρικών απόδοσης με αλγόριθμο παλινδρόμησης
• Ανάλυση σημαντικότητας χαρακτηριστικών για την εκάστοτε
μετρική απόδοσης
Γενική Περιγραφή
10

11. Μεθοδολογία (2/9)
• Εξήχθησαν 85 χαρακτηριστικά για την πρόβλεψη
των μετρικών απόδοσης
Γενική Περιγραφή
Resource_dom.csv documentsize imagesize
requestedUrl fontreq mediareq
dom_elements fontsize mediasize
totalreq otherreq third-partyreq
totalsize othersize third-partysize
scriptreq stylesheetreq
scriptsize stylesheetsize
documentreq imagereq
Response_timings.csv interactive first-cpu-idle
requestedUrl speed-index max-potential-fid
first-contentful-paint estimated-input-latency total-blocking-time
first-meaningful-paint
server_metrics.csv serverResponseTime
requestedUrl rtt
time-to-first-byte total_serverResponseTime
time-to-first-byte_score total_rtt
best_practices.csv uses-rel-preload_score uses-text-compression_score
requestedUrl uses-rel-preload_SavingsMs uses-text-
compression_no_items
redirects_SavingsMs unused-css-rules-SavingsMs offscreen-images_SavingsMs
unminified-css_SavingsMs unused-css-rules-SavingsBytes offscreen-images_SavingsBytes
unminified-css_SavingsBytes unused-css-rules_score offscreen-images_score
unminified-css_score uses-responsive-
images_SAvingsMs
offscreen-images_no_items
unminified-css_no_items uses-responsive-
images_SavingsBytes
render-blocking-
resources_SavingsMs
unminified-js_SavingsMs uses-responsive-images_score render-blocking-
resources_score
unminified-js_SavingsBytes uses-responsive-
images_no_items
render-blocking-
resources_no_items
unminified-js_score uses-text-
compression_SavingsMs
uses-passive-event-
listeners_score
unminified-js_no_items uses-text-
compression_SavingsBytes
uses-passive-event-
listeners_no_items
…
…
11

12. • 240 χιλιάδες json αναφορές από HTTP Archive
• Εξήχθησαν 85 χαρακτηριστικά για την πρόβλεψη των μετρικών
απόδοσης
• Διαχωρισμός του σετ Δεδομένων
• Πρόβλεψη μετρικών απόδοσης με αλγόριθμο παλινδρόμησης
• Ανάλυση σημαντικότητας χαρακτηριστικών για την εκάστοτε
μετρική απόδοσης
Μεθοδολογία (3/9)
Γενική Περιγραφή
12

13. Μεθοδολογία (4/9)
Διαχωρισμός Σετ Δεδομένων K-MEANS
Πόροι documentsize scriptsize fontsize imagesize stylesheetsize othersize
third-
partysize
Αρ.Αιτήσεων documentreq scriptreq fontreq imagereq stylesheetreq otherreq
third-
partyreq
• Τα χαρακτηριστικά μετατράπηκαν σε ποσοστά επί των
συνολικών πόρων και αριθμών αιτήσεων αντίστοιχα
• Χρησιμοποιήθηκαν επιπλέον δύο χαρακτηριστικά, συνολικοί
πόροι και συνολικός αριθμός αιτήσεων, κανονικοποιημένα
σύμφωνα με τη συνάρτηση MinMaxScaler
13

14. Μεθοδολογία (5/9)
Διαχωρισμός Σετ Δεδομένων K-MEANS
Πόροι documentsize scriptsize fontsize imagesize stylesheetsize othersize
third-
partysize
Αρ.Αιτήσεων documentreq scriptreq fontreq imagereq stylesheetreq otherreq
third-
partyreq
• Αριθμός συστάδων [2-6]
• Βάρη στα χαρακτηριστικά συνολικοί πόροι, συνολικός αριθμός
αιτήσεων (1, 2, 4, 8, 10)
14

15. Μεθοδολογία (6/9)
Random Forest Regressor
• Αναζήτηση βέλτιστων παραμέτρων
επί του συνολικού σετ δεδομένων
• Συντελεστής προσδιορισμού (coefficient
of determination) 𝑅2
 Αριθμός δένδρων: 400
 Κριτήριο ποιότητας διαχωρισμού: Mean
Square Error (MSE)
 Μέγιστο βάθος: το μέγιστο δυνατό
 Ελάχιστος αριθμός δειγμάτων για
διαχωρισμό εσωτερικού κόμβου: 2
 Ελάχιστος αριθμός δειγμάτων για τα
“φύλλα” του δένδρου: 1
15

16. Μεθοδολογία (7/9)
Random Forest Regressor
• Αναζήτηση βέλτιστων παραμέτρων επί
του συνολικού σετ δεδομένων
• Συντελεστής προσδιορισμού
(coefficient of determination) 𝑹𝟐
𝑅2
=
𝑦̂𝑖−𝑦̂
2
𝑛
𝑖=1
𝑦̂𝑖−𝑦̂ 2
𝑛
𝑖=1
• Λόγος διακύμανσης των εκτιμώμενων τιμών
προς τη διακύμανση των πραγματικών τιμών
• Οι τιμές του συντελεστή προσδιορισμού 𝑅2
κυμαίνονται από το 0 ως το 1
Perf Metrics FCP FMP
Max
Potential
FID
First
CPU
IDLE
Interactive
Speed
Index
Estimated
Input
Latency
Total
Blocking
Time
𝑹𝟐
επί
συνολικού 0.76 0.65 0.67 0.67 0.87 0.56 0.59 0.88
𝑹𝟐
συστάδων 0.75 0.64 0.64 0.66 0.87 0.57 0.59 0.86
16

17. Μεθοδολογία (8/9)
Permutation Feature Importance
• Τεχνική επιθεώρησης μοντέλου που χρησιμοποιείται για την
ανάλυση-εξαγωγή σημαντικότητας χαρακτηριστικών πρόβλεψης
• Οι παρατηρήσεις του εκάστοτε χαρακτηριστικού μετατίθενται
τυχαία και ο αλγόριθμος συγκρίνει την ακρίβεια του μοντέλου με
μία αρχική βαθμολογία αναφοράς του σετ δεδομένων
17

18. Μεθοδολογία (9/9)
Αρχιτεκτονική Συστήματος
K-MEANS
Permutation
FI
Dataset
Μετρική
Απόδοσης
cluster n
cluster 1
cluster 0
RFR
RFR
Permutation
FI
Permutation
FI
…
…
…
…
Ανάλυση
Σημαντικότητας
Χαρακτηριστικών
Αλγόριθμος
Παλινδρομησης
Αλγόριθμος
Ομαδοποίησης
18

19. Αποτελέσματα (1/11)
Κριτήριο Διαχωρισμού Σετ δεδομένων
19

20. Αποτελέσματα (2/11)
Κριτήριο Διαχωρισμού Σετ δεδομένων
20

21. Αποτελέσματα (3/11)
First Contentful Paint +
First Cpu Idle
21

22. Αποτελέσματα (4/11)
First Contentful Paint +
First Cpu Idle
22

23. Αποτελέσματα (5/11)
First Contentful Paint +
First Cpu Idle
23

24. Αποτελέσματα (6/11)
Max Potential FID +
Estimated Input Latency +
Total Blocking Time
24

25. Αποτελέσματα (7/11)
Time to Interactive
25

26. Αποτελέσματα (8/11)
Time to Interactive
26

27. Αποτελέσματα (9/11)
Speed Index
27

28. Αποτελέσματα (10/11)
Speed Index
28

29. Αποτελέσματα (11/11)
First Meaningful Paint
29

30. Συμπεράσματα (1/2)
• Χαμηλός συντελεστής προσδιορισμού
• Επιβεβαίωση αποτελεσμάτων
Perf
Metrics
FCP FMP
Max
Potential
FID
First
CPU
IDLE
Interactive
Speed
Index
Estimated
Input
Latency
Total
Blocking
Time
𝑹𝟐 0.75 0.64 0.64 0.66 0.87 0.57 0.59 0.86
30

31. Συμπεράσματα (2/2)
• Χαμηλός συντελεστής προσδιορισμού
• Επιβεβαίωση αποτελεσμάτων
Google Lighthouse report
In general, only metrics contribute to your Lighthouse Performance
score, not the results of Opportunities or Diagnostics. That said,
improving the opportunities and diagnostics likely improve the
metric values, so there is an indirect relationship.
31

32. Μελλοντική Εργασία (1/5)
• Το σετ δεδομένων αποτελείται από 85 χαρακτηριστικά
• Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες ιστοσελίδων
(business/economy, entertainment sites κτλ.) ή τεχνολογιών λογισμικού
• Εξερεύνηση άλλων τεχνικών επιθέωρηση μοντέλων (Relief Based Feature
Selection)
• Αισθητική ιστοσελίδας (η αναφορά περιλαμβάνει εικόνα, κωδικοποίησης
base64, της τελικής ιστοσελίδας μεγέθους έξυπνης συσκευής)
32

33. Μελλοντική Εργασία (2/5)
• Το Σετ δεδομένων αποτελείται από 85 χαρακτηριστικά
• Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες
ιστοσελίδων (business/economy, entertainment sites κτλ.) ή
τεχνολογιών λογισμικού
33

34. Μελλοντική Εργασία (3/5)
• Το σετ δεδομένων αποτελείται από 85 χαρακτηριστικά
• Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες
ιστοσελίδων (business/economy, entertainment sites κτλ) ή
τεχνολογιών λογισμικού
34

35. Μελλοντική Εργασία (4/5)
• Το σετ δεδομένων αποτελείται από 85 χαρακτηριστικά
• Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες ιστοσελίδων
(business/economy, entertainment sites κτλ.) ή τεχνολογιών λογισμικού
• Εξερεύνηση άλλων τεχνικών επιθέωρηση μοντέλων (Relief Based
Feature Selection)
• Αισθητική ιστοσελίδας (η αναφορά περιλαμβάνει εικόνα, κωδικοποίησης
base64, της τελικής ιστοσελίδας μεγέθους έξυπνης συσκευής)
35

36. Μελλοντική Εργασία (5/5)
• Αισθητική ιστοσελίδας (η αναφορά περιλαμβάνει εικόνα, κωδικοποίησης
base64, της τελικής ιστοσελίδας μεγέθους έξυπνης συσκευής)
36

37. Βιβλιογραφία
Akamai, Online Retail Performance Report (2017):
https://www.akamai.com/uk/en/about/news/press/2017-press/akamai-releases-spring-
2017-state-of-online-retail-performance-report.jsp
Statista, number of smartphones users worldwide:
https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/
Λογισμικό Google Lighthouse: https://developers.google.com/web/tools/lighthouse
Phil Simon, (2013). Too Big to Ignore: The business Case for Big Data. Wiley. σελ. 89. ISBN
978-1-118-63817-0.
Breiman L., (2001). Random Forests. Machine Learning, 45(1), 5-32.
Sklearn machine learning library: https://scikit-learn.org/stable/
MacQueen, J. B. (1967). Some Methods for classification and Analysis of Multivariate
Observations. Proceedings of 5th Berkeley Symposium on Mathematical Statistics and
Probability. 1. University of California Press. pp. 281–297. MR 0214227. Zbl 0214.46201.
Retrieved 2009-04-07.
37

38. Ευχαριστίες
Σας ευχαριστώ για την προσοχή σας
Παναγιώτης Σιάτος 6744
38