6 answers
Gregory
Student
Niles, Illinois
1
Question
Updated
639 views
What are some best practices for optimizing code performance in a web application?
..........
Login to comment
6 answers
david kirk
Retired Computing Manager
478
Answers
Syracuse, New York
Updated
david’s Answer
My experience has been to avoid use of generic modules that 'do everything', as they add lots of code and most of it just slows you down. An example of this are Wordpress plugins. Use the ones that do a useful function and avoid those that do many functions of which you use few. Ensure that all graphics are as small as necessary, preferably in web-friendly formats, such as webp. Minimize reliance on scripts that must be preloaded for the website, as well as use of font packages that just delay web page presentation. Also, use cache and a content delivery system to reduce server overhead. Doing these will at least keep performance reasonable. On the whole, it would take a book to describe the many techniques. Good luck to you. I suggest you build a website and then use one of the many available websites that assess performance. These are excellent tools in pointing out where improvements can be made.
Thank you!
Gregory
Rihem Ben Khaled
software engineering student
25
Answers
Sousse, Tunisia
Updated
Rihem’s Answer
Hello Gregory,
Optimizing code performance in a web application is crucial for providing a fast and responsive user experience. Here are some unique professional best practices to achieve this:
Profiling and Benchmarking: Start by profiling your code to identify performance bottlenecks and then benchmark to measure improvements.
Minimize Render-Blocking Resources: Ensure critical rendering path optimization by minimizing render-blocking resources, using async/defer attributes for non-essential scripts.
Lazy Loading: Implement lazy loading for non-essential assets, such as images, scripts, and styles.
Compression: Compress assets like HTML, CSS, JavaScript, and images to reduce file sizes.
CDNs: Use Content Delivery Networks (CDNs) to deliver static assets closer to users, reducing server load and latency.
HTTP/2 or HTTP/3: Enable modern HTTP protocols to improve data transfer efficiency.
Service Workers: Implement service workers to enable offline access and resource caching.
Client-Side Caching: Leverage client-side caching strategies, like browser caching and local storage.
Database Optimization: Optimize database queries and indices for faster data retrieval.
Continuous Monitoring: Set up performance monitoring and alerting systems to detect and address issues promptly.
These essential practices will help you make significant improvements in your web application's performance.
Optimizing code performance in a web application is crucial for providing a fast and responsive user experience. Here are some unique professional best practices to achieve this:
Profiling and Benchmarking: Start by profiling your code to identify performance bottlenecks and then benchmark to measure improvements.
Minimize Render-Blocking Resources: Ensure critical rendering path optimization by minimizing render-blocking resources, using async/defer attributes for non-essential scripts.
Lazy Loading: Implement lazy loading for non-essential assets, such as images, scripts, and styles.
Compression: Compress assets like HTML, CSS, JavaScript, and images to reduce file sizes.
CDNs: Use Content Delivery Networks (CDNs) to deliver static assets closer to users, reducing server load and latency.
HTTP/2 or HTTP/3: Enable modern HTTP protocols to improve data transfer efficiency.
Service Workers: Implement service workers to enable offline access and resource caching.
Client-Side Caching: Leverage client-side caching strategies, like browser caching and local storage.
Database Optimization: Optimize database queries and indices for faster data retrieval.
Continuous Monitoring: Set up performance monitoring and alerting systems to detect and address issues promptly.
These essential practices will help you make significant improvements in your web application's performance.
Fred Rosenberger
Data Analyst
462
Answers
St. Louis, MO
Updated
Fred’s Answer
"Premature optimization is the root of all evil" - Donald Knuth
What he meant was that humans are really bad at guessing what will be slow and what will be fast. Write your code so that it is neat, clean, and easy to understand. Then, and ONLY then, start looking at performance, but ONLY if it is an issue. That means you have documented requirements on what the performance should be.
Consider your options carefully. Sometimes, it's faster and cheaper to buy updated hardware than to try and squeeze every drop of speed out of what you have. A team of coders working for a week may not find s much improvement as spending $5k on a new server with a faster CPU and having more memory.
What he meant was that humans are really bad at guessing what will be slow and what will be fast. Write your code so that it is neat, clean, and easy to understand. Then, and ONLY then, start looking at performance, but ONLY if it is an issue. That means you have documented requirements on what the performance should be.
Consider your options carefully. Sometimes, it's faster and cheaper to buy updated hardware than to try and squeeze every drop of speed out of what you have. A team of coders working for a week may not find s much improvement as spending $5k on a new server with a faster CPU and having more memory.
This is the same advice I came to give. The best answer is to not until you need to
Matt Fehskens
Andrew Schwartz
EdTech - Operations
7
Answers
Charlottesville, Virginia
Updated
Andrew’s Answer
Excellent inquiry! There are numerous effective strategies for enhancing code to boost performance. Here are a few key ones to begin with:
Reduce HTTP requests - Lessening the amount of requests is an efficient method to enhance front-end performance. Simplify and merge CSS and Javascript files, and think about utilizing a content delivery network (CDN) to distribute static components such as images.
Implement caching - Apply both client-side and server-side caching to lessen the traffic to your web server, thereby reducing load times.
Compress images - By compressing images, you can significantly decrease their file size.
Employ lazy loading - This technique allows assets that aren't immediately needed to be loaded later after scrolling (for example, images below the fold).
Regularly review and test - Consistently examine your web applications' performance and use tools that can help identify issues. There are numerous tools available that can assist in identifying problems. I've found tools like GTMtrix and Pingdom to be particularly useful in the past!
Reduce HTTP requests - Lessening the amount of requests is an efficient method to enhance front-end performance. Simplify and merge CSS and Javascript files, and think about utilizing a content delivery network (CDN) to distribute static components such as images.
Implement caching - Apply both client-side and server-side caching to lessen the traffic to your web server, thereby reducing load times.
Compress images - By compressing images, you can significantly decrease their file size.
Employ lazy loading - This technique allows assets that aren't immediately needed to be loaded later after scrolling (for example, images below the fold).
Regularly review and test - Consistently examine your web applications' performance and use tools that can help identify issues. There are numerous tools available that can assist in identifying problems. I've found tools like GTMtrix and Pingdom to be particularly useful in the past!
Thays Moia Ribeiro
Aupair
24
Answers
Yucca Valley, California
Updated
Thays’s Answer
The best practice to optimizing code performance in a web application start reducing the number of HTTP requests by combining CSS and JavaScript files and using image sprites. Other thing it’s enable GZIP or Brotli compression to reduce the size of files sent from the server to the client, improving load times. Set appropriate cache-control headers to cache static resources on the client-side it’s other step, reducing server load and improving page load times for returning visitors. If you can compress images without compromising quality using tools like ImageMagick, TinyPNG, or Squoosh will be helpful also. Use responsive images to deliver different sizes based on the device. Optimize server-side code, database queries, and configurations to minimize the time it takes for the server to respond to requests. Implement lazy loading for images and other non-critical resources, so they load only when they are about to come into the user’s view. Try also Minify JavaScript, CSS, and HTML files to remove unnecessary characters and whitespace. Concatenate multiple files to reduce the number of HTTP requests. Utilize Content Delivery Networks (CDNs) to distribute static files closer to users, improving load times and reducing server. Ensure your database queries are optimized, use appropriate indexing, and avoid unnecessary queries or data retrieval. Other way it’s using caching mechanisms, such as in-memory caching or Redis, to store frequently accessed data and avoid repeated computations. Minimize the use of global variables, as they can cause conflicts and memory leaks. With regularly monitor your web application’s performance using tools like Google Lighthouse, PageSpeed Insights, or New Relic to identify bottlenecks and areas for improvement. And for last and no less important optimize CSS and JavaScript: Place CSS at the top of the HTML document and JavaScript at the bottom to allow progressive rendering and avoid render-blocking.
By following these best practices and continuously monitoring and optimizing your web application’s performance, you can ensure it runs efficiently and provides an excellent user experience.
By following these best practices and continuously monitoring and optimizing your web application’s performance, you can ensure it runs efficiently and provides an excellent user experience.
Matt Fehskens
Front-end web developer
5
Answers
Washington Township, New Jersey
Updated
Matt’s Answer
I wholeheartedly agree with Fred Rosenberger's advice - there's no need to rush into anything until it's necessary.
So, what happens when the time comes and you do need to take action? If we're discussing web development, I presume you're working with applications that utilize HTML/CSS/Javascript. In that case, it's beneficial to acquaint yourself with the resources that web browsers offer in advance. Contemporary browsers are equipped with an abundance of top-notch performance tools to assess your application.
In the Chrome devtools, you'll find "Performance" and "Memory" tabs. These two sections are incredibly powerful and can greatly assist in evaluating your application.
- Here's a helpful tutorial on using the Performance profiler in Chrome: https://developer.chrome.com/docs/devtools/performance/
- Check out this informative article on Chrome memory tools: https://developer.chrome.com/docs/devtools/memory-problems/
Firefox also has these same two tabs, although their functionality differs slightly.
- This article provides a great overview of Firefox's performance profiler: https://profiler.firefox.com/docs/#/
- For more on the memory tools, this wiki entry is a good resource: https://firefox-source-docs.mozilla.org/devtools-user/memory/index.html
Read https://developer.chrome.com/docs/devtools/performance/
Read https://developer.chrome.com/docs/devtools/memory-problems/
Read https://profiler.firefox.com/docs/#/
Read https://firefox-source-docs.mozilla.org/devtools-user/memory/index.html
So, what happens when the time comes and you do need to take action? If we're discussing web development, I presume you're working with applications that utilize HTML/CSS/Javascript. In that case, it's beneficial to acquaint yourself with the resources that web browsers offer in advance. Contemporary browsers are equipped with an abundance of top-notch performance tools to assess your application.
In the Chrome devtools, you'll find "Performance" and "Memory" tabs. These two sections are incredibly powerful and can greatly assist in evaluating your application.
- Here's a helpful tutorial on using the Performance profiler in Chrome: https://developer.chrome.com/docs/devtools/performance/
- Check out this informative article on Chrome memory tools: https://developer.chrome.com/docs/devtools/memory-problems/
Firefox also has these same two tabs, although their functionality differs slightly.
- This article provides a great overview of Firefox's performance profiler: https://profiler.firefox.com/docs/#/
- For more on the memory tools, this wiki entry is a good resource: https://firefox-source-docs.mozilla.org/devtools-user/memory/index.html
Matt recommends the following next steps: