Everyone loves speedy websites and search engines love them as well. If your speedy website is an e-commerce site, you will likely have a better conversion rate. In this article, we will show you how to speed up a website on Ubuntu 16.04. Let’s get started with the guide.
Optimize Images
Eye-catching images on your website will grab the visitors’ attention. But, at the same time, your images might be too large, both in size or scale. There are many online tools to optimize your images, they can reduce the size but also maintain the quality.
Use HTTP/2
Why do we need to implement this? Because with http/2 all requests are downloaded in parallel, not in a queue as in http/1.1. The server can also push data without being requested, which eventually can improve the speed for visitors with high latency.
Support of the HTTP/2 protocol was introduced in Apache 2.4.26. Unfortunately, the default repository in Ubuntu 16.04 contains a version lower than this, so we need to add a third-party repository.
Apache
To make sure what Apache version you have, you can invoke this command:
apache2 -v
If it’s lower than 2.4.26, then we need to install the latest available version.
apt install software-properties-common add-apt-repository ppa:ondrej/apache2 apt update apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 4F4EA0AAE5267A6C apt install apache2
Add this line to your SSL enabled website virtual host, right after <VirtualHost *:443> tag.
Protocols h2 http/1.1
Now, you need to know that http2 is not compatible with mpm_prefork, so you need to disable it and use another mpm, like mpm_event
a2dismod mpm_prefork a2enmod mpm_event setenvif proxy_fcgi
Install PHP-FPM and disable Mod PHP
apt install php-fpm7.0 a2dismod php7.0 systemctl restart apache2
At this point, your website is running on http/2, your static assets will be delivered much faster.
Nginx:
If you are using nginx, enabling http/2 is much easier. You can simply add “http2” in your SSL enabled website’s server block.
It should be like this:
listen 443 ssl http2;
Support for http/2 was introduced in Nginx version 1.9.5, and with the default Nginx installation on Ubuntu 16.04, we have nginx version higher than that, so we don’t need to add a third party repository as we do when using Apache.
Use CDN
A Content Delivery Network can accelerate your websites, CDN works by caching your static assets in many servers around the globe. If you enabled CDN, and when a visitor from Europe is accessing your website which is hosted on a server located in the USA, the static assets delivered to him/her will be from a nearer location, not from your server. This will speed up your website loading time. There are many CDN providers nowadays, you can choose one of them.
Enable Compression
When you visit a website, your browser will check the website configuration whether it has gzip enabled and request the pages. If it’s enabled, your browser will receive the gzip files which are much smaller than the original one and if it isn’t, your browser will receive the files which usually are much larger. So, enabling compression is another option to take in order to speed up your website, visitors will receive the files faster because files are delivered in a smaller size.
To enable compression, you can add the following to your .htaccess file:
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
If you are using nginx, the gzip compression is enabled by default, you can check it in /etc/nginx/nginx.conf file.
Configure Expire Headers
With expire headers, your browser can check whether it should request the website assets from the server or fetch them from the browser cache. For example, we set an expire headers value for our logo.png file to one month, so the browser will cache the logo.png file and it doesn’t need to request the file as the browser already have it in the cache. Expire headers can reduce the HTTP connection and improve the site loading speed at the same time.
If you use apache, you can add the following lines to your .htaccess file:
<IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # CSS, JavaScript ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" # Others ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" </IfModule>
If you are using nginx, you can add this line to your location block:
if ($request_uri ~* ".(ico|css|js|gif|jpe?g|png)$") {
expires 30d;
access_log off;
add_header Pragma public;
add_header Cache-Control "public";
}
Enable Keep-Alive
HTTP keep-alive means that the browser is using a single TCP connection to send and receive multiple requests. This will speed up the website because your visitors’ browser only needs to open one persistent HTTP connection to the web server. The keep-alive option is enabled by default, but you will want to double check it. To enable keep-alive, you can do the following:
Apache:
nano /etc/apache2/apache2.conf
KeepAlive On
Nginx:
nano /etc/nginx/nginx.conf
keepalive_timeout 65;
The value higher than 0 will enable keepalive
Minify JS and CSS
Minification is a process to minimize our codes in order to reduce or remove all unnecessary characters from the code without changing its functionality. The unnecessary characters usually include comments, white spaces, new lines, and block delimiters. The characters are actually used to add readability, but we can remove them as they are not required. The code file size can be reduced if it’s minified. But, we have to be careful when minifying our codes because not all spaces can be removed.
Example of CSS minification:
Before:
.item_names p a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
After:
.item_names p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
As you can see, the minified version is hard to read. You can also see that not all spaces can be removed, so manually minifying the codes is not recommended.
You can use any online tools to minify your JS and CSS files.
That’s it, your website should be faster now. If your website is running on WordPress, you can use plugins to do some of the steps above.
Of course, you don’t have speed up your website on Ubuntu 16.04 yourself if you use one of our Ubuntu Cloud Hosting services, in which case you can simply ask our expert Linux admins to speed up your website on Ubuntu 16.04 for you. They are available 24×7 and will take care of your request immediately.
PS. If you liked this post on how to speed up your website on Ubuntu 16.04, please share it with your friends on the social networks using the buttons below or simply leave a reply in the comments sections. Thanks.
Great article. very informative and useful post.
Hallo… I am still learning configuratig server. I try this command: nano /etc/apache2/apache2.conf and seems like I still need other command after this.
Thanks for your help
after you execute the nano /etc/apache2/apache2.conf command, you need to locate the line with the KeepAlive setting and set it to On