Web Performance Optimization

Web performance optimization is crucial for ensuring fast loading times and enhancing user experience. This article covers various aspects of web performance, including the definition, importance, how a webpage loads, the differences between HTTP 1.1 and HTTP 2.0, and the dual aspects of back-end and front-end optimization. It also emphasizes the impact of performance issues on user satisfaction and provides insights into improving web performance for optimal results.

• Web Performance
• Optimization
• HTTP Protocol
• Front-End Development
• Back-End Processing

legacy Follow

Uploaded on Aug 04, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

Presentation Transcript

1. Yale Digital Conference 2019 Harry Shyket Front-End Developer

2. Is my website or application slow? Harry Shyket Front-End Developer

3. What is Web Performance? Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser.1 Web performance is the objective measurement and the perceived user experience of load time and runtime.2

4. Why is Web Performance Important? Performance issues vary. At best, they create small delays that are only briefly annoying to your users. At worst, they make your site completely inaccessible, unresponsive to user input, or both.3 You are building your site for your end-users. You want to make sure that it is not inconvenient or frustrating to use it. For some users, with pay by MB data plans, there may be a cost associated to viewing your website.

5. How a Webpage Loads Browser request(s) goes to a server(s). The server processes the request and then sends a response back to the user. The browser then begins processing the data and rendering it to the window.

6. HTTP 1.1 vs. HTTP 2.0 In HTTP 1.1 each file requires a separate connection. So if you have 3 CSS files, 2 JS files and 1 image file, you need 7 connections. Most browsers may allow for only 2-6 connections at one time (per domain). HTTP 2.0 allows multiplexing which means it can deliver the same files over 1 connection.

7. Two Aspects There are two parts to think about in performance. Back-End: Server processing Database queries Network calls Front-End: HTML, CSS, JS and images Interactive Elements

8. Back-End This is what does the application processing. Usually consists of an applications, databases, servers, etc. Takes in input requests, saves the data and sends back responses. Applications tend to be powered by programming languages such as Ruby, PHP, Python or a CMS like Drupal and WordPress.

9. Back-End Optimizations Application Caching Application/Database level caching Server tools (Varnish) CDN Scaling Vertical: Increase hardware of server(s). Add more memory, CPU, disk space. Horizontal: Add more servers.

10. Back-End Tips Watch out for N+1 queries. Cache frequently run queries. Cache the output of the data (where possible). Look at servers and hosting providers. Send asset files to a CDN.

11. Front-End This is what gets displayed to the user. This usually contains your themes, layouts and interactive JavaScript files. Content displays, loading times other factors may be different based on a user s device and browser.

12. Front-End Optimizations Caching Cache headers File Sizes Minified Concatenated (only if HTTP 1.1) Gzip Optimize images CSS & JS

13. Front-End Tips Remove unnecessary HTML, CSS, JS and images. Remove 404 requests. Smaller images. Lazy loading of images. Front-End Frameworks (React, Vue, Angular). Split up loadable code by routes. Try to limit re-rendering of components.

14. Load Process Time to first byte When you receive the first piece of data from the server. Time to first paint When the first items come on screen. Time to first meaningful paint When the first items that the user may be interested come on screen. https://developers.google.com/web/fundamentals/perform ance/rail#load

15. RAIL Model Response 2 Process events in under 50ms Animation 2 Produce frame in under 10 seconds Idle 2 Maximize idle time Load 2 Deliver content and become interactive in under 5 seconds

16. Optimization Techniques Make sure file sizes are no too large. Optimize images (use SVGs where possible). Minify your CSS and JavaScript files. For HTTP 1.1 minify and concatenate all the files For HTTP 2 only minify the files Use a CDN for files.

17. Drupal Tips Don t upload images directly from the camera. Be careful with enabling too many modules. Don t disable caching unless necessary. Look at configuration for your Views. The issues may come from joining data or not paginating items.

18. Tools Network inspect tab! Lighthouse WebPageTest

19. Some other ideas Prefetch Local Storage PWA (Progressive Web Apps) - Service Workers AMP (Accelerated Mobile Pages)

20. Progressive Web Apps Can give your application native like feel Has features to work offline

21. AMP Project Launched initially by Google. Goal is to make websites load faster on mobile devices. Subset of allowable HTML tags, CSS and JS. Google serves and AMP page from its own domain.

22. Demos!

23. Citations 1. Wikipedia contributors. (2019, May 28). Web performance. In Wikipedia, The Free Encyclopedia. Retrieved from https://en.wikipedia.org/w/index.php?title=Web_performance&oldid=899140031 2. Basques, Kearney, Miller and Osmani. (2019, May 29). Measure Performance with the RAIL Model. Retrieved from https://developers.google.com/web/fundamentals/performance/rail 3. Wagner, Jeremy. (2019, May 29). Why Performance Matters. Retrieved from https://developers.google.com/web/fundamentals/performance/why-performance-matters/