Successfully reported this slideshow.
Your SlideShare is downloading. ×

On analyzing the importance of Google Lighthouse performace metrics

On analyzing the importance of Google Lighthouse performace metrics

Download to read offline

Ιnternet has become an integral part of humans’ everyday life, an indispensable part of information gathering, means of socialization, provision of services, purchasing and selling products. The plethora of available websites providing similar or even different services has created a new reality where each user can find sites that fulfill their needs. Therefore, sites of similar content and services focus on optimizing User Experience to attract more users. Particularly, User Experience refers to user interactions with a website and focuses on the overall experience a site provides. There are various factors that influence User Experience. This thesis employs Google Lighthouse, an automated tool for measuring the quality of web pages, and explores the very features that influence performance metrics pertaining to User Experience. Particularly, 85 features were extracted from a dataset of 200K websites, data resulting from Google Lighthouse reports. These features describe quantitatively the composition, structure and resources of each web page. After having used a regression model for predicting performance metrics scores, as defined by the simulation software, an analysis-extraction of the most important features used by the model was performed. The ultimate objective of the thesis is to enable a front-end website developer to prioritize and focus on those features that improve Google Lighthouse’s performance metrics scores, this way improving user experience.

Ιnternet has become an integral part of humans’ everyday life, an indispensable part of information gathering, means of socialization, provision of services, purchasing and selling products. The plethora of available websites providing similar or even different services has created a new reality where each user can find sites that fulfill their needs. Therefore, sites of similar content and services focus on optimizing User Experience to attract more users. Particularly, User Experience refers to user interactions with a website and focuses on the overall experience a site provides. There are various factors that influence User Experience. This thesis employs Google Lighthouse, an automated tool for measuring the quality of web pages, and explores the very features that influence performance metrics pertaining to User Experience. Particularly, 85 features were extracted from a dataset of 200K websites, data resulting from Google Lighthouse reports. These features describe quantitatively the composition, structure and resources of each web page. After having used a regression model for predicting performance metrics scores, as defined by the simulation software, an analysis-extraction of the most important features used by the model was performed. The ultimate objective of the thesis is to enable a front-end website developer to prioritize and focus on those features that improve Google Lighthouse’s performance metrics scores, this way improving user experience.

More Related Content

More from ISSEL

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

On analyzing the importance of Google Lighthouse performace metrics

  1. 1. ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΤΟΜΕΑΣ ΗΛΕΚΤΡΟΝΙΚΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΕΡΓΑΣΤΗΡΙΟ ΕΠΕΞΕΡΓΑΣΙΑΣ ΠΛΗΡΟΦΟΡΙΑΣ & ΥΠΟΛΟΓΙΣΜΩΝ Ανάλυση Σημαντικότητας Χαρακτηριστικών Απόδοσης του Λογισμικού Google Lighthouse Εκπονητής | Παναγιώτης Σιάτος Αριθμός Μητρώου (ΑΕΜ) | 6744 Επιβλέπων Αναπληρωτής Καθηγητής | Ανδρέας Συμεωνίδης Θεσσαλονίκη, Μάρτιος 2021
  2. 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. 3. Κίνητρο (2/2) Ποσοστό χρήσης έξυπνων συσκευών για την περιηγήση στο διαδίκτυο περίοδος 2013-2019 (Statista). 3
  4. 4. Σκοπός Διπλωματικής (1/6) Google Lighthouse Report • Αυτοματοποιημένο πρόγραμμα ανοιχτού κώδικα μέτρησης ποιότητας ιστοσελίδων • Version 5.XX • Βαθμολογίες από HTTP Archive 4
  5. 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. 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. 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. 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. 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. 10. Μεθοδολογία (1/9) • 240 χιλιάδες json αναφορές από HTTP Archive • Εξήχθησαν 85 χαρακτηριστικά για την πρόβλεψη των μετρικών απόδοσης • Διαχωρισμός του σετ Δεδομένων • Πρόβλεψη μετρικών απόδοσης με αλγόριθμο παλινδρόμησης • Ανάλυση σημαντικότητας χαρακτηριστικών για την εκάστοτε μετρική απόδοσης Γενική Περιγραφή 10
  11. 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. 12. • 240 χιλιάδες json αναφορές από HTTP Archive • Εξήχθησαν 85 χαρακτηριστικά για την πρόβλεψη των μετρικών απόδοσης • Διαχωρισμός του σετ Δεδομένων • Πρόβλεψη μετρικών απόδοσης με αλγόριθμο παλινδρόμησης • Ανάλυση σημαντικότητας χαρακτηριστικών για την εκάστοτε μετρική απόδοσης Μεθοδολογία (3/9) Γενική Περιγραφή 12
  13. 13. Μεθοδολογία (4/9) Διαχωρισμός Σετ Δεδομένων K-MEANS Πόροι documentsize scriptsize fontsize imagesize stylesheetsize othersize third- partysize Αρ.Αιτήσεων documentreq scriptreq fontreq imagereq stylesheetreq otherreq third- partyreq • Τα χαρακτηριστικά μετατράπηκαν σε ποσοστά επί των συνολικών πόρων και αριθμών αιτήσεων αντίστοιχα • Χρησιμοποιήθηκαν επιπλέον δύο χαρακτηριστικά, συνολικοί πόροι και συνολικός αριθμός αιτήσεων, κανονικοποιημένα σύμφωνα με τη συνάρτηση MinMaxScaler 13
  14. 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. 15. Μεθοδολογία (6/9) Random Forest Regressor • Αναζήτηση βέλτιστων παραμέτρων επί του συνολικού σετ δεδομένων • Συντελεστής προσδιορισμού (coefficient of determination) 𝑅2  Αριθμός δένδρων: 400  Κριτήριο ποιότητας διαχωρισμού: Mean Square Error (MSE)  Μέγιστο βάθος: το μέγιστο δυνατό  Ελάχιστος αριθμός δειγμάτων για διαχωρισμό εσωτερικού κόμβου: 2  Ελάχιστος αριθμός δειγμάτων για τα “φύλλα” του δένδρου: 1 15
  16. 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. 17. Μεθοδολογία (8/9) Permutation Feature Importance • Τεχνική επιθεώρησης μοντέλου που χρησιμοποιείται για την ανάλυση-εξαγωγή σημαντικότητας χαρακτηριστικών πρόβλεψης • Οι παρατηρήσεις του εκάστοτε χαρακτηριστικού μετατίθενται τυχαία και ο αλγόριθμος συγκρίνει την ακρίβεια του μοντέλου με μία αρχική βαθμολογία αναφοράς του σετ δεδομένων 17
  18. 18. Μεθοδολογία (9/9) Αρχιτεκτονική Συστήματος K-MEANS Permutation FI Dataset Μετρική Απόδοσης cluster n cluster 1 cluster 0 RFR RFR Permutation FI Permutation FI … … … … Ανάλυση Σημαντικότητας Χαρακτηριστικών Αλγόριθμος Παλινδρομησης Αλγόριθμος Ομαδοποίησης 18
  19. 19. Αποτελέσματα (1/11) Κριτήριο Διαχωρισμού Σετ δεδομένων 19
  20. 20. Αποτελέσματα (2/11) Κριτήριο Διαχωρισμού Σετ δεδομένων 20
  21. 21. Αποτελέσματα (3/11) First Contentful Paint + First Cpu Idle 21
  22. 22. Αποτελέσματα (4/11) First Contentful Paint + First Cpu Idle 22
  23. 23. Αποτελέσματα (5/11) First Contentful Paint + First Cpu Idle 23
  24. 24. Αποτελέσματα (6/11) Max Potential FID + Estimated Input Latency + Total Blocking Time 24
  25. 25. Αποτελέσματα (7/11) Time to Interactive 25
  26. 26. Αποτελέσματα (8/11) Time to Interactive 26
  27. 27. Αποτελέσματα (9/11) Speed Index 27
  28. 28. Αποτελέσματα (10/11) Speed Index 28
  29. 29. Αποτελέσματα (11/11) First Meaningful Paint 29
  30. 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. 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. 32. Μελλοντική Εργασία (1/5) • Το σετ δεδομένων αποτελείται από 85 χαρακτηριστικά • Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες ιστοσελίδων (business/economy, entertainment sites κτλ.) ή τεχνολογιών λογισμικού • Εξερεύνηση άλλων τεχνικών επιθέωρηση μοντέλων (Relief Based Feature Selection) • Αισθητική ιστοσελίδας (η αναφορά περιλαμβάνει εικόνα, κωδικοποίησης base64, της τελικής ιστοσελίδας μεγέθους έξυπνης συσκευής) 32
  33. 33. Μελλοντική Εργασία (2/5) • Το Σετ δεδομένων αποτελείται από 85 χαρακτηριστικά • Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες ιστοσελίδων (business/economy, entertainment sites κτλ.) ή τεχνολογιών λογισμικού 33
  34. 34. Μελλοντική Εργασία (3/5) • Το σετ δεδομένων αποτελείται από 85 χαρακτηριστικά • Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες ιστοσελίδων (business/economy, entertainment sites κτλ) ή τεχνολογιών λογισμικού 34
  35. 35. Μελλοντική Εργασία (4/5) • Το σετ δεδομένων αποτελείται από 85 χαρακτηριστικά • Ανάλυση χαρακτηριστικών σημαντικότητας σε κατηγορίες ιστοσελίδων (business/economy, entertainment sites κτλ.) ή τεχνολογιών λογισμικού • Εξερεύνηση άλλων τεχνικών επιθέωρηση μοντέλων (Relief Based Feature Selection) • Αισθητική ιστοσελίδας (η αναφορά περιλαμβάνει εικόνα, κωδικοποίησης base64, της τελικής ιστοσελίδας μεγέθους έξυπνης συσκευής) 35
  36. 36. Μελλοντική Εργασία (5/5) • Αισθητική ιστοσελίδας (η αναφορά περιλαμβάνει εικόνα, κωδικοποίησης base64, της τελικής ιστοσελίδας μεγέθους έξυπνης συσκευής) 36
  37. 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. 38. Ευχαριστίες Σας ευχαριστώ για την προσοχή σας Παναγιώτης Σιάτος 6744 38

×