{"id":14489,"date":"2017-12-06T08:02:16","date_gmt":"2017-12-06T08:02:16","guid":{"rendered":"https:\/\/stackify.com\/?p=14489"},"modified":"2024-05-15T06:24:00","modified_gmt":"2024-05-15T06:24:00","slug":"web-performance-optimization","status":"publish","type":"post","link":"https:\/\/stackify.com\/web-performance-optimization\/","title":{"rendered":"Web Performance Optimization: Top 3 Server and Client-Side Performance Tips"},"content":{"rendered":"

We live in a world where nobody is willing to wait for anything. We have become accustomed to websites and mobile apps working instantly. If I click on a search result from Google and it doesn\u2019t load within a couple seconds, I will no doubt just click on a different result. We have all been trained to expect websites to load blazingly fast.<\/p>\n

We all know that the performance of our software is important!<\/strong><\/p>\n

We also know that performance optimization<\/a> can be very time consuming and potentially expensive. We also know that premature optimization<\/a> is a bad thing.<\/p>\n

Web performance optimization is a never-ending job. In this article we will review some of the top server and client-side performance issues and how to resolve them.<\/p>\n

Also Read-https:\/\/stackify.com\/top-10-must-have-vs-code-extensions-for-javascript-developers\/<\/a><\/p><\/blockquote>\n

<\/a>What is web performance optimization?<\/h2>\n

Web performance optimization occurs by monitoring and analyzing the performance of your web application and identifying ways to improve it.<\/p>\n

Web applications are a mixture of server-side and client-side code. Your application can have performance problems on either side and both need to be optimized.<\/p>\n

The client side relates to performance as seen within the web browser. This includes initial page load time, downloading all of the resources, JavaScript that runs in the browser, and more.<\/p>\n

The server side relates to how long it takes to run on the server to execute requests. Optimizing the performance on the server generally revolves around optimizing things like database queries and other application dependencies.<\/p>\n

Let\u2019s take a deeper look at how to optimize performance for both the client and server sides.<\/p>\n

<\/a>Optimizing client performance<\/h3>\n

Client performance typically revolves around reducing the overall size of web pages. This includes the size of the files and perhaps more importantly, the number of them.<\/p>\n

It is common these days for a single web page to load 100+ files. You can quickly see this via your web browser with the dev tools. For Google Chrome, hit F12 (on Windows), go to the Network tab and then reload a page on your site.<\/p>\n

For example, here is what it looks like for the home page of CNN<\/a>.<\/p>\n

\"CNN<\/p>\n

As you can see, it took 11.04 seconds to download 188 files to load the page. Yikes!<\/p>\n

This gives you a basic understanding of how long it takes and how many files are being downloaded. Your goal is to optimize both of these.<\/p>\n

Here are some of the top strategies to optimize performance on the client side<\/p>\n

<\/a>1. Caching & content delivery networks<\/h4>\n

One of the smartest things you can do is leverage a content delivery network (CDN). Many of the files on your website, like JavaScript, CSS, and image files, are static and do not change.<\/p>\n

You can increase the performance of your website by caching these files on servers closer to where your users are. This offloads the traffic from your servers and makes your site load faster.<\/p>\n

I highly recommend Cloudflare<\/a> for this. It is extremely simple to setup and just works.<\/p>\n

<\/a>2. Bundle & minification<\/h4>\n

One of the most important things you want you to do is bundle your files together so there are fewer files. You can also optimize their contents to shrink the file size down through various minification<\/a> techniques.<\/p>\n

Unfortunately, bundling and minification typically require code changes to accomplish.<\/p>\n

The Cloudflare content delivery network offers a feature called Rocket Loader<\/a> that can automatically combine your JavaScript for you. I have also used a WordPress plugin called Fast Velocity<\/a> that is also pretty awesome.<\/p>\n

Also Read-https:\/\/stackify.com\/is-elasticsearch-the-ultimate-scalable-search-engine\/<\/a><\/p><\/blockquote>\n

<\/a>3. Optimizing image usage<\/h4>\n

I struggle with this problem a lot. My computer has a 4K monitor so I am always taking pretty large screenshots and inserting them into blog posts. This causes the image files to be large. Also, having multiple screenshots on a page can really slow it down.<\/p>\n

Most images can be optimized and made smaller. There are tools for jpeg and png files to help shrink the files. If you are using WordPress, there are plugins that can automatically do it.<\/p>\n

If you have a lot of small icons on your pages, you should consider switching to an icon font like Font Awesome or using image sprites<\/a>.<\/p>\n

Lastly, if you have pages that are long with a lot of images, you may want to consider lazy loading your images. This means that on page load, you only load the images that you can see on the screen. As your user scrolls down, you setup your site to load additional images.<\/p>\n

<\/a>Optimizing server performance<\/h3>\n

No matter which programming language you are using, there are several common issues that cause performance problems.<\/p>\n

Web performance optimization isn\u2019t just about optimizing the client. Many performance problems are due to slow SQL queries, hidden errors, and other issues.<\/p>\n

<\/a>1. Optimize usage of application dependencies<\/h4>\n

Most software applications use SQL databases, caching, external web services, and other application dependencies. These are things like SQL Server, Oracle, Redis, MongoDB, Elasticsearch and external HTTP web services.<\/p>\n

The best way to evaluate how your code is using application dependencies and how they perform is by code profiling. Products like Retrace<\/a> are safe to use on your servers and can instantly show you which dependencies are being used and how long they take.<\/p>\n

Below is an example of a typical web application with pretty consistent traffic and performance.<\/p>\n

\"an<\/p>\n

In this example below you can quickly identify that Redis is causing big performance spikes.<\/p>\n

\"In<\/p>\n

One of the common problems is identifying slow SQL queries and figuring out how to improve their performance. Another common issue is identifying SQL queries that are being called too often.<\/p>\n

\"<\/p>\n

<\/a>2. Identify top application errors<\/h4>\n

Your application is probably throwing all sorts of exceptions that you don\u2019t even know about. Exceptions are one of the best ways to identify bugs and even performance problems in your code.<\/p>\n

Retrace can collect and provide excellent reporting about all the exceptions that are being thrown within your code.<\/p>\n

\"Retrace<\/p>\n

Exceptions themselves cause a lot of performance overhead. An application that throws thousands of exceptions a minute will consume a lot more CPU than it should.<\/p>\n

This is a common problem in code that does a lot of data parsing in \u201ctry catch\u201d blocks and just ignores any exceptions being thrown.<\/p>\n

Learn more: How GWB Found Hidden Exceptions and Application Performance Problems<\/a><\/p>\n

[adinserter block=”33″]<\/p>\n

<\/a>3. Optimize your most-used web pages<\/h4>\n

If you don\u2019t know which pages on your site are used the most and which ones are the slowest, you definitely should.<\/p>\n

You could try and do this by parsing the logs from your web server. This is a nightmare if your web application uses REST URLs because most of the URLs will be unique.<\/p>\n

An easier way is using an application performance management<\/a> solution like Retrace.<\/p>\n

Your goal is to identify which requests are being used the most and which ones are taking up the most amount of time on your server. This helps you prioritize where to do performance tuning.<\/p>\n

\"You<\/p>\n

With Retrace, you can also view code-level performance to understand exactly what it is doing.<\/p>\n

\"With<\/p>\n

<\/a>Summary<\/h3>\n

Web performance optimization is a job that is never done. As you continue to make changes to your software and roll out new features, its usage and performance will continue to change.<\/p>\n

I recommend reviewing your application performance monitoring tools like Retrace<\/a> on a weekly basis, looking for things that could use some improvement. You can then prioritize these work items as part of your next sprint.<\/p>\n

Also be sure to check out some of our other guides about application performance.<\/p>\n