Searching around I found this tool called PageSpeed Insights which gives you a full overview about how to improve your website. This tool goes beyond just tips such as compressing your JS and CSS. But also how to improve the server response time tackling your server’s settings.  Below I’ve written how I’ve improved the performance of this blog you’re reading.

Blog’s Server

Just to give you some background, I’m running this blog on the top of Nginx, PHP-FPM,  MySQL and Ubuntu. Most of them on their latest versions.

If you using Magento, also check how to speed up your index management.

Compression

One of the first recommendations was to install the compression module into Nginx. It’s the ngx_http_gzip_module. So, if you’re using the latest version  you don’t need to install anything extra. Just enable it by adding into your virtual host config file the content below:

server {
...
        gzip             on;
        #gzip_min_length  1000;
        gzip_http_version 1.1;
        gzip_vary on;
        gzip_comp_level 6;
        gzip_proxied any;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+xml;
        #it was gzip_buffers 16 8k;
        gzip_buffers 128 4k; #my pagesize is 4
        gzip_disable "MSIE [1-6]\.(?!.*SV1)";

It’s the full list of parameters you can play around to match your server/website.  Below is the analyses before and after adding them content above and restarting the server:

nginx_compression_total

Leverage Browser Caching

Moving into the next issue, browser caching for static resources can save a user time if they visit your site more than once. Caching headers should apply to all cacheable static resources, not just a small subset (such as images). Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDFs, etc.). In general, HTML is not static and shouldn’t be considered cacheable by default. You should consider what caching policy would work well for your site’s HTML. To get it applied in Nginx add the code below into your virtual host conf file: location ~* .(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; } Don’t forget to restart Nginx. In my case, after implement this I run again the PageSpeed analyses:

nginx_headers

More optimizations

Avoid landing page redirects, optimize images, minify HTML and CSS are also a good way to make your website server response time even faster. Please, keep them all in mind.

Improve Server Response Time

Server response time measures how long it takes to load the necessary HTML to begin rendering the page from the server, subtracting out the network latency between the original point and the server. There may be variance from one run to the next, but the differences should not be too large. In fact, highly variable server response time may indicate an underlying performance issue.

To-do List

The server response time should be under 200ms. There are dozens of potential factors which may slow down the response of the server: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation. We need to consider all of these factors to improve your server’s response time. The first step to uncovering why server response time is high is to measure. Then, with data in hand, consult the appropriate guides for how to address the problem. Once the issues are resolved, we must continue measuring your server response times and address any future performance bottlenecks.

  1. Gather and inspect existing performance and data. If none is available, evaluate using an automated web application monitoring solution (there are hosted and open source versions available for most platforms), or add custom instrumentation.
  2. Identify and fix top performance bottlenecks. If you are using a popular web framework, or content management platform, consult the documentation for performance optimization best practices.
  3. Monitor and alert for any future performance regressions!

Wrapping up

By doing just a few steps here, as you can see above, I’ve already improved heaps the server response time for my blog. Making easier for my user to load the content on they mobiles, desktops or tablets. There is no simple equation to sort out server issues. Tools as the one mentioned above can help. Although, in the end of the day, is up to you prevent, detect and troubleshot those kind of issues. Keep an eye on either the sites final response (e.g. HTML, CSS, JS) and server response time. This way your site can always delivery the content to your users as fast as possible.

References

https://developers.google.com/speed/pagespeed/insights/ http://nginx.org/en/docs/http/ngx_http_gzip_module.html https://developers.google.com/speed/docs/insights/LeverageBrowserCaching