diff --git a/docs/ArtGallery/Lighthouse Project/LighthouseReviewReport.md b/docs/ArtGallery/Lighthouse Project/LighthouseReviewReport.md new file mode 100644 index 000000000..a9385bf53 --- /dev/null +++ b/docs/ArtGallery/Lighthouse Project/LighthouseReviewReport.md @@ -0,0 +1,81 @@ +# Report on task: Review Research from T1 and create backlog + +I have reviewed two reports on the Lighthouse scores and identified the issues that needed to be +rectified. One report was a review on the desktop app and the other was a review on the mobile app. +Both had many errors so, I had to analyse both reports and did some research on finding +recommendations and solutions for the issue identified. + +## Desktop App + +For the desktop app, here are the problems/recommendations I have identified from the report: + +- Properly size images (add explicit width & height for images) +- Work on reducing network payloads +- Serve static assets with efficient cache policy +- Optimise the Largest Contentful Paint (make it faster): + - Eliminate resource load delay + - Eliminate element render delay + - Reduce resource load time + - Reduce time to first byte +- Reduce the impact of third-party code (identify slow third-party JavaScript) +- Reduce JavaScript execution time: + - Remove unused code + - Minify and compress code + - Implement code splitting + - Cache code with PRPL pattern +- Minimise main thread work: + - Evaluate the script (debounce input handlers, use web workers) + - Check style layout (reduce complexity of style calculations, avoid large, complex layouts). + - Rendering (manage layer count, simplify paint complexity, and reduce paint areas) + - Parse HTML and CSS (extract critical CSS, minify CSS, defer non-critical CSS) +- Reduce resource counts and transfer sizes (CSS & JavaScript, Images, Fonts, Documents, Media) +- Minify JavaScript +- Improve page loading speed: + - Using Preconnect to required origins + - Preload key requests +- Minimise critical request depth: + - Minimise number of critical resources (eliminate them, defer their download, etc) + - Optimize the number of critical bytes and reduce the download time + - Optimize the order for the remaining resources to be loaded (download all critical assets early + to shorten critical path length) + +## Mobile App + +For the mobile app, here are the problems/recommendations I have identified from the report: + +- Properly size images (add explicit width & height for images) +- Work on reducing network payloads +- Serve static assets with efficient cache policy +- Optimise the Largest Contentful Paint (make it faster): + - Eliminate resource load delay + - Eliminate element render delay + - Reduce resource load time + - Reduce time to first byte +- Improve mobile friendliness (appropriately size tap targets) +- Reduce the impact of third-party code (identify slow third-party JavaScript) +- Reduce JavaScript execution time: + - Remove unused code + - Minify and compress code + - Implement code splitting + - Cache code with PRPL pattern +- Minimise main thread work: + - Evaluate the script (debounce input handlers, use web workers) + - Check style layout (reduce complexity of style calculations, avoid large, complex layouts). + - Rendering (manage layer count, simplify paint complexity, and reduce paint areas) + - Parse HTML and CSS (extract critical CSS, minify CSS, defer non-critical CSS) +- Reduce resource counts and transfer sizes (CSS & JavaScript, Images, Fonts, Documents, Media) +- Minify JavaScript +- Improve page loading speed: + - Using Preconnect to required origins + - Preload key requests +- Minimise critical request depth: + - Minimise number of critical resources (eliminate them, defer their download, etc) + - Optimize the number of critical bytes and reduce the download time + - Optimize the order for the remaining resources to be loaded (download all critical assets early + to shorten critical path length) +- Shorten main-thread tasks +- Check and use discernible name for links +- Add meta description to document + +I have added cards and allocated story points for each of these problems and recommendations into +the Trello board under the ‘Lighthouse Project Implementation’ section. diff --git a/docs/ArtGallery/Lighthouse Project/SpikeUpskillingReport.md b/docs/ArtGallery/Lighthouse Project/SpikeUpskillingReport.md new file mode 100644 index 000000000..d20ddef73 --- /dev/null +++ b/docs/ArtGallery/Lighthouse Project/SpikeUpskillingReport.md @@ -0,0 +1,59 @@ +# Report on Upskilling + +## JavaScript basics with HTML and CSS + +I have spent some time upskilling to contribute to this project. So far, I have learnt the basics of +using JavaScript with HTML and CSS. I have completed a 7-hour course online and followed through +each chapter of the basics and I understand the basic concepts of working with these languages +together for web development. + +The online courses focused mainly on the fundamentals of JavaScript, HTML and CSS. I have learnt a +few important information from this course: + +- JavaScript basics +- Modifying text styles, text boxes and images using CSS +- Chrome DevTools – tool for debugging and inspecting code +- CSS Box Model – designing and positioning elements on a website. Structure of HTML + +### Courses for this upskilling + +- HTML to CSS Full Course (Beginner) +- JavaScript, HTML & CSS Basics + +## CSS and Javascript, vue.js upskilling + +I have learnt how to modify existing CSS code to remove unnecessary code without changing the +appearance of the website. I have also learnt how vue.js works and how to make changes to existing +code. This is to help with tasks related to improving network payloads, . Here is a list of what I +have learnt during this upskilling: + +- remove unused CSS code +- remove unused JavaScript code +- including webpacks to help with CSS & JS codes +- purpose of vue.js, and how it functions + +### Topics covered + +- Removing unused CSS, JavaScript and HTML code +- Learn webpacks to help minify CSS, JavaScript and HTML +- Vue.js for beginners + +## Lazy loading, TreeShaking and Ant Design upskilling + +I have learnt how to implement lazy routing and TreeShaking into the existing code to help with some +performance issues. I have also learnt about Ant Design, it's purpose and how it works. This +upskilling helps with tasks related to PRPL and modifying/reducing impact of thirs party code. I +have learnt the following: + +- What is lazy routing +- How to properly implement lazy loading +- What is TreeShaking and what does it to +- How to implement TreeShaking +- What is Ant Design and why is it used + +### Topics covered for this upskilling + +- Vue router tutorial +- Lazy routing and code splitting +- What is TreeShaking and how to implement +- Ant Design courses