Day 10-12: Advanced Functionality and Integrations
Day 12 Hours 5-6
Day 11 Hour 5-6: Performance Optimisation
Introduction to performance optimisation and why it's important
In this part of the course, we will be focusing on performance optimisation for web applications. Performance optimisation refers to the process of making your web application run more efficiently and provide a better user experience. This can involve many different strategies, such as reducing load times, improving code efficiency, optimising images and assets, and improving server response times.
Performance optimisation is critical for several reasons. Firstly, it improves user experience. Users typically abandon websites that take more than a few seconds to load, and a slow site can also make navigation frustrating. Secondly, it can significantly impact your site's visibility on search engines. Search engines like Google consider site speed as one of the ranking factors in their algorithms. Thus, a faster site can help improve your search engine rankings and ultimately drive more traffic to your site.
Tips and techniques for optimising web application performance
Several techniques can be used to optimise the performance of your web application:
Minimise HTTP Requests
HTTP requests are made every time a browser fetches a file, page, or picture from a web server. The more HTTP requests a page makes to load, the slower that page will load. This can be improved by simplifying the design of your site, using CSS instead of images where possible, reducing scripts and putting them at the bottom of the page, and combining multiple style sheets into one.
Use a Content Delivery Network (CDN)
A CDN is a network of servers distributed geographically. The purpose of a CDN is to deliver content to a user from the nearest server. CDNs are used to speed up the delivery of content of websites with high traffic and global reach. As the content is replicated over multiple servers located in different areas, CDNs prevent bottle-necking that can occur when all traffic is sent to one main server.
Optimise Images
Large and unoptimised images are one of the most common speed issues on websites. Optimize your images by resizing them or compressing them before uploading them online. Various tools exist online for image compression. Also, make sure to use the correct file type. For example, JPEG is usually a better option than PNG for larger images and photographs.
Minify CSS, JavaScript, and HTML
Minification is the process of removing unnecessary characters (like spaces and line breaks) and rewriting code to reduce its size, thereby improving load times. When a page is requested, it's faster for the server to send a smaller, minified file. Tools like CSSNano and UglifyJS can automate the minification process.
Use Browser Caching
When a user visits a webpage, the elements on the page they visit are stored on their hard drive in a cache, or a temporary storage space. That way, when they visit the page again, their browser can load the page without needing to send another HTTP request to the server. The server can instruct the browser on how long to store these files, instructing it to check for a newer version after a certain period. This can significantly increase the loading speed of your site for regular visitors.
Hands-on exercise: Optimising the performance of a web application
In the hands-on exercise, participants will learn to apply these techniques to a sample web application. They will use tools like Google Lighthouse to measure the performance of the application before and after applying the optimisation techniques, helping to illustrate the impact of these improvements. This practical experience will give participants the skills they need to optimise their own web applications in the future.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (