Bankruptcy

10 tips to optimize the performance of your website

 

The finding is well known: the performance of a website can deteriorate phenomenally. By always adding more features or application layers, the mille feuilles is gradually being established. Become a gas plant requiring a lot of resources to finally not much, your website becomes a major problem when your audience itself is impacted (chronic slowness, bugs, errors, crashes, etc.). Before you get there, it is necessary to maintain your daily production tool. The 10 tips that follow will allow you, if not to adjust, at least to plug the incipient haemorrhage.

1. Optimize your images

Image result for optimize images

The most common mistake is the management of images. It is imperative to start by reducing their weight to reduce the waiting time for loading pages. The other beneficial aspect is to see the side of your accommodation. Lighter images can also free up bandwidth and server load.

Many of you still do not optimize your images and display them in their original format. Even, and this is much more devious, not to create miniatures specific to each type of use. Indeed, a good image management first passes through a thoughtful use of these: a full size image does not have to be used as an insert of an article. For this, create a collection of miniatures of many sizes, and for each content, take the appropriate one.

The same goes for extensions and transparency. Unless you want an image of perfect sharpness in Bitmap (.bmp) or TIFF (.tiff), prefer the format JPEG (.jpg). Do you need transparency? You will then have the choice between the GIF (.gif) and PNG (.png) format . Always prefer PNG unless it’s a moving picture or a very small image (like a button). Because the compression of an image in PNG is on average 5 to 25% better than that of a GIF.

Finally, know that it is very rare to need a quality close to 100%. If you are in possession of image editing software such as Adobe Photoshop (paid and owner) or Gimp (free and free), you can easily lower the quality by playing on the compression . For the JPEG format, 75% compression is a good compromise between quality and weight. For GIF and PNG formats, you need to keep an eye on the number of colors. If your image does not require many colors, choose a smaller color table in the file export settings.

For more information on the subject, I suggest you read the excellent and very comprehensive Article Image Optimization , written by Ilya Grigorik, web performance engineer at Google.

2. Compress HTML, CSS and Javascript

Image result for compress html

Nowadays, most web pages are composed of 3 languages: HTML (for HyperText Markup Language ), CSS (for Cascading Style Sheets ) and Javascript interaction. Each language has its own files, which should be compressed to the maximum to reduce, once is not custom, their weight. In the jargon of the web, this act is called minification .

Minification consists of removing files:

  • Comments
  • Indentations
  • White spaces
  • Block delimiters

Here is a non-exhaustive list of sites to manually minify your files:

  • CSS Minifier (for CSS)
  • JSCompress (for Javascript)
  • Minify (for CSS and Javascript)

If you are on WordPress , use an external plugin. They will automatically qualify Javascript, CSS and HTML. Some cache modules include minification options like Cache Enabler . Others are added to the existing, this is the case of Autoptimize . The latter is able not only to minimize, but also to join all the files between them to reduce the number of HTTP requests. We will see in the next chapter the advantages of such a solution.

3. Reduce the number of HTTP requests

Image result for Reduce the number of HTTP requests

When a visitor requests a page, their browser is quick to fetch all the included content using Hypertext Transfer Protocol ( HTTP ). This is a ping pong game, for each request, a request to the server. And it works for everything: the page itself, images, scripts, videos, etc. In short, the more different files you have, the more queries you have. And the more requests there are, the more it consumes resources and time.

There are several simple solutions to implement:

  • When you can and where relevant, link the files together
  • Include Javascript directly in the page (if it’s a small script)
  • Minimize the number of plugins
  • Reduce the number of images (by CSS sprite technique )
  • Clean up your code (are all files needed?)

Finally, I advise you to pay close attention to where your files are hosted. If they are on your own hosting or on a CDN (for Content Delivery Network ), no problem. On the other hand, if it is about lambda sites, take care. Always have the habit of recovering files and using a trusted hosting. You are not immune to a problem with your neighbor, which could slow down your own website and impact you with a banal domino effect.

4. Improve the critical rendering path

Image result for Improve the critical rendering path

Behind this barbaric appellation hides something rather simple to understand. All information on a web page is not equal. And all the elements on this one do not load in the same way, nor occupy the same order of priority. It is important to understand that before displaying a page, the browser verifies that everything in it does exist. Assuming we have a web page with 1 CSS file, 1 Javascript file and 1 image, the process will be as follows:

  1. The browser requests the page
  2. The browser analyzes the HTML and discovers 1 CSS file, 1 Javascript file and 1 image
  3. The browser downloads the image
  4. The browser decides that it does not display the page without receiving CSS and Javascript
  5. The browser downloads the CSS and checks that nothing else is included
  6. The browser decides that it does not display the page without receiving Javascript
  7. The browser downloads Javascript and checks that nothing else is included
  8. Everything is OK. The browser displays the page.

Do you find this list grotesque? Wait a little, and imagine now the same list with the actual composition of a website, namely several CSS and Javascript files, dozens of images, videos, etc. Imagine the path of requests, the server – client responses … And that is not to mention the construction of the DOM ( Document Object Model ) and its modification by scripts at the very end of loading!

How to optimize the critical rendering path? By simple means:

For CSS

  • Always include CSS files at the top of the page (just before </ header>)
  • Call your CSS files correctly
  • Use fewer CSS files
  • Minify your CSS files
  • Delete what is obsolete

For Javascript

  • Always put Javascript files at the end of the page (just before </ body>)
  • Use the async or defer directives
  • Use less Javascript files
  • Minify your Javascript files
  • Delete what is obsolete

I will now want to talk about fonts . We, web developers , have all become addicted to using ” custom ” fonts on our websites. They are more and more beautiful, the choice can not be larger, in short, everything is fine. However, never forget that these are HTTP requests. Finally, that their weight is very far from being neutral. For each specificity (in italic, a bold 300, 400, 700), you retrieve all the symbols. Pay attention. Try to understand its usefulness and need, as it can cost you several extra megabytes! When you know that 80 to 90% of the waiting time is linked to downloading a page, it leaves you dreaming …

To find out how long your pages are displayed and where they are stuck, use:

  • YSlow , a plugin for your browser
  • Firebug (with the option Network enabled), another browser plugin
  • Google PageSpeed ​​Tools , an external Google tool that will analyze your website

At the end of this chapter, I recommend reading another article by Ilya Grigorik: Analyze the performance of the critical rendering path .

5. Use the cache

Image result for Use the cache

In the web environment, as soon as we talk about caching, we tend to think directly about the file cache. However, it is important to remember that there are two others and they can also optimize your site: browser cache and reverse proxy. Let’s find out what they serve.

The file cache

When a page is requested, your server processes the information by fetching the content from a database. This is the same process as the number of HTTP requests: the more requests there are, the more loads and waiting times. If your website has a lot of information to recover or it is poorly optimized, the number of queries can escalate. The file cache is there to tidy up. By caching the page for a fixed time, it will cut off the number of round trips to the database. There is an impressive number of file caching systems. Most notable:

For PHP

  • Smarty
  • PEAR
  • dwoo
  • Twig

For WordPress

  • WP Super Cache
  • W3 Total Cache
  • WP Rocket

To learn more, I invite you to read the article Understanding and using a PHP cache system .

The browser cache

The browser cache lets you specify how and when the browser cache needs to be updated. For this we have:

  • The Cache-Control HTTP header
  • The Expires HTTP header
  • The Pragma HTTP header
  • ETag validators

Let’s look at the first solution, the Cache-Control HTTP header and its max-age directive. This will allow us to specify an expiration date (for example 7 days). This means that for 7 days, the selected content will not be re-downloaded by the browser for any reason. Other directives exist (like no-cache). It will be necessary to define what will suit you best.

Have a look at Mark Nottingham. Its caching tutorial is very well documented.

The inverted proxy

An inverted proxy is a link server between the end user and internal servers. Its purpose is simple: by being placed at the bridgehead, it unloads and distributes all the information to the other servers that are left behind. In addition to enhanced security, the reverse proxy has a wide range of tools as load distribution (load balancing), caching ( HTTP acceleration ), data compression, encryption, etc. What interests us particularly here are the HTTP accelerators.

Among the main ones are:

  • Nginx
  • Squid
  • Varnish

Reading this article will explain in more detail the use of proxy and reverse proxy.

6. Enable Gzip compression

Gzip compression helps reduce bandwidth consumption. The process is simple: all content will be compressed on the server side and sent to the browser. The latter will then decompress, interpret and display. What is interesting here is the client – server path. By compressing the information, it traveled faster using fewer resources. Very simple to set up, Gzip can make a big difference on the display time.

To find out if Gzip is already activated and have information on what you can still improve, I invite you to use the site Check GZIP compression . If not, follow the instructions below.

If you have Apache

Add these lines to your .htaccess file:

<IfModule mod_deflate.c> 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 Mozilla BrowserMatch / 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 have Nginx

Add these lines to your nginx.conf file:

gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text / plain text / html text / css application / x-javascript text / xml application / xml application / xml + rss text / javascript; gzip_disable “MSIE [1-6]. (?!. * SV1)”; gzip_vary on;

7. Opt for a CDN

The use of a CDN ( Content Delivery Network ) provides access to a vast global network of servers connected to the Internet. By determining the visitor’s location, the CDN will reduce latency by using closer servers to route the content to the end user. Take the example of a person in Lyon who wants to display a website hosted in Toronto. The information will have to transit across the Atlantic. The CDN, it will prefer to use a server based in Paris. The path is shorter, saving time is considerable.

Depending on what you want to do and your CDN, you can do this for all or part of your content: CSS files, Javascript, images, and even the cache! Some CDNs can also temporarily replace your website in case it has a hard blow (slowdowns) or is unavailable (crash).

Do you use WordPress? The CDN article for Dummies – Speed ​​up your WPFormation site might interest you. In addition, this article by Antoine Augusti should direct you a little more in the way of using the CDN of OVH , leader of Internet hosting in Europe (and 100% Made in France , cocorico!).

8. Avoid 301 redirects

A 301 redirect is a permanent redirection from url A to url B. Although it can be very useful in some cases (referencing, mobile redirection), it is always harmful in terms of performance. When the browser requests the page, the redirection tells him to go elsewhere. This will generate roundtrips of information for nothing, increase the time needed to generate the HTML page on the final address and load the additional files related to it. That’s why I advise you to use them as little as possible.

9. Reduce your use of the database

To increase the page display speed, you must also optimize the way you use your database . Start by decreasing the number of SQL queries already. An SQL query is a round trip of information between the server and the database and therefore precious time lost to the generation of your page. Then, optimize your queries themselves, paying attention to the type and amount of information you request. Do you need all these columns? Do you process all the information obtained? Also check that your indexes are relevant and use them wisely. Finally, a quick cleaning in your tables never hurts, finish the job by removing what is obsolete.

I want to remind you that plugins are often big users of the database. Use them sparingly and wisely. Similarly, when you take a code somewhere, think twice before putting it into production. One, two or three small queries and more is not much, but if you stir a large number of visitors and have a very fair infrastructure, it can easily cause slowdowns and put you on the kneecaps.

Two useful links:

  • The MySQL optimization manual
  • Initiation to the optimization of SQL queries under ORACLE

10. Prevent hotlinking

Hotlinking is the act of stealing the bandwidth of another. Everyone has already done it, without realizing it. But if, remember, you found this picture of cat extremely funny and friendly. You then inserted it into the content of a site or a forum by keeping the source URL. Your gesture, innocuous in appearance, was not so much. By doing so, you are not using your bandwidth, but that of the person hosting the image. This has resulted in always increasing a little more the load of his server. For your site, a hotlinker could do the same thing. In order to overcome this problem, you can use a .htaccess file to redirect any request that does not come from you to an image or a warning page.

Add these lines to your .htaccess file:

RewriteEngine On RewriteCond% {HTTP_REFERER}! ^ Http: // (. + .)? Mydomain .com / [NC] RewriteCond% {HTTP_REFERER}! ^ $ RewriteRule. * . (Jpe? G | gif | bmp | png) $ /path/to/limage/desole.jpg [L]

To conclude

There is a thousand and one ways to optimize your website and this article is not intended to bring them all together. Nevertheless, I believe that the 10 tips mentioned above are undoubtedly the most important. They will allow you to dramatically increase the page loading speed while lowering the latency and load of your server. Some of these solutions are quick to implement, others may require work at any time. But all are part of a set of good practices that you will need to adopt.

 

You Might Also Like