Ameliorate Performance And Security of Your Website

In today’s digital era, there is an immense rise in the tools and services in the web development arena. Content management system like Joomla, WordPress, Drupal and many others enable businesses to efficiently create an awesome online presence without any hassle. Their rich plugins, wide architectures, and modules have made it simpler to set up a website and run it successfully without the need of having immense knowledge of coding. But, when it comes to designing and handling a website, you need to take an array of things into consideration. However, today is the time when people wish to see quick results and needs the surety that their information are safe and secure online. For this purpose, webmasters should take care of these two things:

• How to enhance the performance of the website?
• How to boost the security of website?

Both of these aims are necessary for running a successful website. If you don’t know the importance of enhancing the security and performance of your website, then remember that Google loves speed and from last few years, it has been utilizing the speed of the website as a ranking factor. Apart from this, if you run a simple blog or an e-commerce shop with an opt-in form, a faster site will enhance your conversions.

The web is making a move towards SSL for providing users with good security and enhanced overall performance. In fact, it is vital to have an SSL-enabled website for several technology discussed in this article.

Before heading ahead, just keep in mind that even if you do not use all the suggestions mentioned here, your site will still profit from implementing any number of process outlined. Thus, try to figure out which part of your website require improvement and use the suggestions given below:

1. Let’s Encrypt (SSL):

If your website is still running on HTTP, then it’s the time to shift now. Google has now started taking into account HTTPS as a ranking signal and as per the Google’s Security blog, every non-secure web page eventually showcases “Not Secure” message within Chrome browser. For this purpose, we will tell you the method of finishing the migration process with a free of cost SSL certificate via Let’s Encrypt. It is a fully free and electronic method for getting a SSL certificate. Before the introduction of Let’s Encrypt, you need to buy an authentic certificate from a certificate-issuing authority if you wish to hand over your site over HTTPS. Because of several add on cost, various web developers decide not to buy the certificate and continue serving their site over HTTP.

However, Let’s Encrypt public beta was launched in late 2015, several free SSL certificates were issued. If facts are to be believed, more than 100 million certificates have been generated by late of June 2017. So, if you are still using HTTP, then migrate to HTTPS as soon as possible. Here are certain reasons why it is advantageous to move to HTTPS:

• HTTPS is considered as the ranking signal.
• Enhanced security.
• SSL-secured websites create visitor trust.
• Needed for Brotli and HTTPS/2 to work.

Process Of Getting Let’s Encrypt Certificate

You can get an SSL certificate in certain ways. Though there are several SSL certificates that Let’s Encrypt offers, still you need to have knowledge of certain things:

• Let’s Encrypt certificates come with a time duration of 90 days. Either get it renewed manually before expiry or set up a procedure for automatic renew.
• Presently, there are no option for wildcard certificates. However, it is expected to come in January 2018.

In case, one or both of these marks are deal-breaker, then obtaining a custom SSL certificate from a genuine certificate authority is the best deal. Irrespective of the fact which provider you choose, it is of utmost importance to have an HTTPS-enabled website.

In order to get Let’s Encrypt certificate, you can select any of the two methods:

• With Shell Access: Start the installation and get a certificate on your own.
• Without Shell Access: Receive a certificate by your CDN provider or hosting.

The second method is quite forthright. If your CDN provider or web host provides you Let’s Encrypt, then all you need to do is to enable it with the aim to start delivering assets over HTTPS.

However, if you are having a shell access and require to configure Let’s Encrypt yourself, then you will require to decide as to which operating system and web server you wish to use. Next, go to Certbot and choose the system and software from the dropdown menus for searching your specified installation instructions. Though the instruction for every blend of OS and software are distinct, Certbot offers easy setup details for an array of systems.

2. Brotli:

A confining algorithm designed by Google earlier in 2015, Brotli is gaining immense popularity and currently is being supported by all the major browsers excluding Internet Explorer. When compared to Gzip, Brotli still has some catching up for doing in global availability i.e. Server support, CMS plugins and many others.

As a matter of fact, Brotli has showcased some outstanding compression results in comparison to several other methods. For instance, as per the Google’s algorithm report, Brotli excelled Zopfli by around 20 to 25% in compression ration.

Enable To Happen

Based on the type of web server you are running, implementation of Brotli will vary. You will require to utilize the step that is best suited to your setup. In case, you are using Apache, nginx, or Microsoft IIS, then these modules can be used to enable Brotli.

• ngx_brotli, nginx module
• mod_brotli, Apache module
• IIS Brotli, Microsoft IIS community-contributed extension

Once you are done with the installing and downloading one of the modules above, you will require to setup the directives as per your requirements. At the time of doing this, pay attention to these three things:

Compression Quality:

The overall quality of compression totally relies on the amount of compression you wish to attain in return for time. The more is the compression level, the higher duration and resources will be needed. The compression level of Brotli can be anywhere between 1 to 11.

File Type:

The different kinds of files which can be compressed with Brotli include XML, CSS, HTML and JavaScript.

Dynamic Vs Static Compression:

The point at which you wish Brotli compression to take place will help you in deciding whether to implement dynamic or static compression.

Dynamic compression occurs quickly. In simpler words, if any visitor demand for a Brotli-compressible asset, then the asset is right away compressed on the spot and delivered afterward. This is beneficial for dynamic content that requires to be compressed on every request. But, the major drawback is that the user needs to wait for the asset to be compressed before getting delivered.

Static compression is a type of compression that compresses the assets even before the request made by the users. Thus, once the demand is made for compressed asset, Brotli not require to compress the asset as it will be compressed beforehand and served on immediate basis.

For nginx users, a Brotli configuration may look like the snippet given below. This illustration sets compression arise dynamically, states the trait level of 5 and specifies distinct file types.

In order to ensure that Brotli is enabled on your server, go to the Chrome’s Developer Tools, browse to “Network” tab, choose an asset, and analyze the Content-Encoding header. This should now be br. Note which Brotli needs HTTPS, so if you have rightly went through the installation and configuration process but still do not witness the br value, then you will require to move to HTTPS.

Or else, you can run easy cURL command like:

This will give a series of response headers where you can easily go through the Content-Encoding header value. If you are making use of WordPress and wish to take things a step ahead by delivering Brotli-compressed HTML docs, then have a look at my WordPress guide to Brotli to learn how.

3. HTTP/2:

One of the major improvements of HTTP/2 is that it enables browsers to parallelize multifarious downloads by making use of only one connection. With HTTP1.1, maximum browsers were able to manage only six simultaneous downloads on an average. HTTP/2 renders procedures like domain-sharding obsolete. In addition to the requirement of only one connection per origin and enabling numerous requests at similar time, HTTP/2 offers several other benefits:

Header compression: It minimizes the overall size of headers by making use of HPACK header compression.

Prioritize: Priority levels are linked with requests, thus enabling resources of top importance to be delivered first.

Server Push: Pushes add on resources which it thinks the client would need in near future.

Binary: Unlike HTTP 1.1, that was textual, binary minimizes the duration needed for converting text to binary and makes it simpler for server to parse.

Enable HTTP/2

Irrespective of the fact how you deliver maximum of your content either from your origin server or a CDN, most of the providers now support HTTP/2. Analyzing if a provider supports HTTP/2 should be comparatively simple by reviewing its feature page and checking around.

If you wish to review for yourself whether your website is using HTTP/2 or not, then you will require to attain the current version of cURL and run this command:

Alternately, if you are not willing to use command line, then you can unclose Chrome’s Developer Tools and browse to the “Network” tab. You can view the value h2 below the “Protocol” column.

Enable HTTP/2 ON NGINX:

If you are operating your own server and using out of date software version, then you require to upgrade it to a advanced version which supports HTTP/2. For nginx users, the procedure is quite clear. Just make sure that you are running nginx version 1.9.5 or higher, and include the following listen directive within the server block of the configuration file:

Enable HTTP/2 On Apache

In case of Apache users, there are few more steps involved. It is vital for Apache users to update their system to version 2.4.17 or higher for making use of HTTP/2. They will also need to create HTTPS with the mod_http2 Apache module, load the module and then state the correct server configuration. A summary of how to set up HTTP/2 on Apache server can be seen in the Apache HTTP/2 guide. Irrespective of the fact which web server you are utilizing, your site requires to be running on HTTPS for taking advantages of the traits of HTTP/2.

4. WebP Images:

Created by Google, WebP was designed for making images smaller. WebP is an image format just like PNG and JPEG. It can be said that savings of around 80% can be attained after translating PNG or JPEG to WebP.

The major drawback of WebP images format is that it is not supported by all browsers. During writing, only Opera and Chrome supports WebP images. However, with right configuration, you can easily deliver WebP pictures to supporting browsers and at the same time delivering a fallback image format like JPEG to the browsers that do not support.

WebP still needs to go a long way before becoming as popular as PNG and JPEG. However, all thanks to its outstanding savings in size that gives it a fair chance of continued growth. Overall, WebP minimizes total page size, fastens up the loading speed of site and protects bandwidth.

Procedure Of Converting And Delivering WebP

There are some alternatives of converting images to WebP format. If you make use of a popular CMS like Joomla, WordPress or Magento, then there are several plugins available that allow you to change images directly within the CMS’ dashboard.

Similarly, if you wish to take a manual approach, then there are several WebP image converters available online and some image-processing apps also come with a WebP format feature where you can export. This saves you from having to altering anything at all.

Finally, if you are looking for a more integrated approach, then there are some specified image-processing services that offer an API which can be utilized for integrating directly to your web project, allowing you to change images automatically.

As stated, all the browsers presently do not support WebP images. Thus, if you wish to serve an image on your site using only a .webp extension, then non-supporting browsers will give a broken image. As a result, fallback is essential. Let’s check out the ways how to attain this.

• Utilize picture Element

This procedure enables you to describe the path of WebP image along with the path of original JPEG within the site’s HTML. With this process, all the supporting browsers will showcase the WebP images and other browsers will display the default image described in the final nested child tag inside the picture block. Go through these illustrations:

The procedure implements WebP functionality widely, thereby making sure that a fallback mechanism is in right place. However, it may need a huge alteration to HTML, relying on the size of application.

• Alter The Server’s Config File

This procedure makes use of rewrite rules described in the server’s config file falling back to a backed image format if the search engine does not support WebP. Depending on your web server, utilize the right snippet for nginx or Apache and modify the path/images directory accordingly.

For nginx:

For Apache:

The drawback of this process is that it is not suggested if you are planning to use WebP images in conjunction with a CDN. The main reason being that the CDN would cache a WebP image if a WebP supported browser is the foremost one to demand for the asset. Thus, any consequent demand will return the WebP image even if the browser supports it or not.

• Use a WordPress Caching Plugin:

If you are using WordPress and require a answer that will deliver WebP images to supporting browsers, while falling back to PNGs and JPEGs for others, and being fully compatible with CDN, then you can make use of a caching plugin like Cache Enabler. If you describe within the plugin that you wish to build an add on cached version for WebP, then plugin will deliver a WebP-cached version to compatible browsers, while plunging back to HTML Gzio or HTML for other browsers.

5. Content Delivery Network

Finally, use content delivery network (CDN) as it accelerates web assets worldwide by caching them across collection of servers. When a website use of CDN, it will definitely offload maximum of its traffic to the CDN’s edge servers and take its viewers to the nearby CDN server.

Thanks to caching that CDNs store the resources of website for a predefined duration. Because of caching, CDN’s server designs a copy of the origin server’s web asset and stock it on its own server. This procedure makes web requests much more effective, given the fact that visitors can access your site from multifarious geographic regions.

In case no CDN is configured, then all the visitors’ demand will go back to the origin server’s location, no matter where they are. This builds add on latency specifically for those visitors who demand assets from a location away from the origin server. However, when a CDN is configured, viewers will be shown the path to the CDN provider’s nearest edge server for attaining the demanded resources, thus reducing response and request times.

Configuring A CDN

The procedure for setting up a CDN will differ depending on the framework or CMS being used. However on top level, the procedure is almost the same:

• Build a CDN zone that points to your origin URL (https://yourwebsite.com).
• Build a CNAME record for pointing a custom CDN URL (cdn.yourwebsite.com) to URL offered by CDN service.
• Go through your website’s HTML for validating that static assets are being called utilizing the CDN’s URL which you described and not the origin URL.

Once you are done with this, you can deliver your website’s static assets from CDN’s edge servers rather than your own. This will enhance not only your website speed but also security, boost redundancy and minimize the load of your origin server.

6. HHVM:

HHVM (HipHop Virtual Machine) was developed by Facebook in the year 2010 and announced in the following year publicly. It was designed for reducing server resources with the aim to provide faster web experience for Facebook users. With the help of Just in Time (JIT) compiler, HHVM can seamlessly change PHP code into machine code.

Benefits Of Using HHVM

• Dynamic translation enables the sites to run faster in several situations.
• For the purpose of executing requests, HHVM needs little memory space.
• As Facebook uses HHVM, they are working hard to improve it. As a result, developers get a dependable community support.
• HHVM is designed in a way that any developer can install and work with it.
• An internally created language known as Hack enables programmers to utilize static and dynamic typing in order to enhance the compilation speed in the future.
• The JIT compiler provides HHVM an extensive performance boost over PHP 5.

Ending Notes

The above discussed methods are the ultimate option if you are searching for ways to enhance your website’s performance and security. They are not only simple to implement but will also advance your entire stack. There are some techniques that are still in the process of being accepted worldwide. However, with the increase in demand, the compatibility will also increase. Luckily, there are some ways for implementing some of these technologies like WebP images or Brotli for supporting browsers while falling back to traditional methods for browsers that do not.

To sum up, if you haven’t shifted your site to HTTPS, then do it without any further delay. HTTPS is now standard and is needed for utilizing specified technology like Brotli and HTTP/2. Your website will be more safe overall, perform faster and will appear appealing in the eyes of Google.