How to Speed Up Website

Fast website load is the result of on integrated approach to the website development. As a rule, it starts from the correct settings of the server. Here are some useful tips to help you save your customers’ time and make them happy. Happy customers - good reputation and high sales!

Perhaps you are lucky enough to have good and stable internet connection, which is not the case with 57% of internet users. Most regional mobile operators have low and unstable internet connection, which unfortunately affects your product. Save your clients’ time and they will be with you for a long time!

1. Setup caches on the server’s side

We strongly recommend that you configure static data on server’s side. Static data include files with the following formats: jpg, jpeg, png, gif, svg, css, js, swf, txt, pdf, rtf, docx, xlsx, ico.

If your server uses Nginx and you are not a specialist in this sphere, bellow are examples of cache setup.

server {|=RN=||=TAB=|listen 80;|=RN=||=TAB=|server_name mysite.com;|=RN=||=TAB=|...|=RN=||=TAB=|location ~* ^.+.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js|svg)$ {|=RN=||=TAB=||=TAB=|root /path/to/document/root/; # path to website|=RN=||=TAB=||=TAB=|access_log off; # disable logging|=RN=||=TAB=||=TAB=|expires 3d; # caching for 3 days|=RN=||=TAB=|}|=RN=|}

Internet provides many tutorials on configuring static caching on Nginx, so we are not going to describe in details how to setup a server, but will only describe the basic principles.

2. Use browsers cache

Write the following instructions into your .htaccess file after the line “RewriteEngineOn”. Most likely, this is an additional point to the first one. Next to each format you will find the caching time, e.g. "accessplus 7 days", where you can change the timing for each format. Below is an example with optimal values.

	|=RN=|ExpiresActive On|=RN=|ExpiresDefault "access 7 days"|=RN=|ExpiresByType application/javascript "access plus 1 year"|=RN=|ExpiresByType text/javascript "access plus 1 year"|=RN=|ExpiresByType text/css "access plus 1 year"|=RN=|ExpiresByType text/html "access plus 7 day"|=RN=|ExpiresByType text/x-javascript "access 1 year"|=RN=|ExpiresByType image/gif "access plus 1 year"|=RN=|ExpiresByType image/jpeg "access plus 1 year"|=RN=|ExpiresByType image/png "access plus 1 year"|=RN=|ExpiresByType image/jpg "access plus 1 year"|=RN=|ExpiresByType image/x-icon "access 1 year"|=RN=|ExpiresByType application/x-shockwave-flash "access 1 year"|=RN=||=RN=||=RN=||=RN=||=RN=|Header set Cache-Control "max-age=2592000, public"|=RN=||=RN=||=RN=|Header set Cache-Control "max-age=2592000, public"|=RN=||=RN=||=RN=|Header set Cache-Control "max-age=172800, public, must-revalidate"|=RN=||=RN=||=RN=|Header set Cache-Control "max-age=172800, private, must-revalidate"|=RN=||=RN=|Header unset ETag|=RN=|Header unset Last-Modified|=RN=||=RN=|

If you need a detailed description of how to use a cache browser, Google will help you find it.

3. Turn on compression

Compress the files into GZIP format before sending them to the client. It will take less time for the browser to uncompress them, than to transport them from the server to the client in the uncompressed size.

First, find out which system your web-server uses. Then follow one of these links to get information on compression:

1. Apache: use mod_deflate.
2. Nginx: use HttpGzipModule.
3. IIS: use HTTP.

4. Don't use redirections

In general, extra milliseconds are lost while loading the pages to which the visitor is readdressed; therefore you should avoid using unnecessary redirections. Google gives the same recommendation.

Below are some recommendations from Google:

1. Good: example.com uses adaptive web-design, no readdressing.
2. Satisfactory: redirections form example.com -> m.example.com/home
3. Bad: redirections from example.com -> www.example.com -> m.example.com -> m.example.com/home.

5. Minify JavaScript and CSS

Make minified copies of original files (*.css и *.js to *.min.css, *.min.js). Try to save bytes where possible and in the end you will have saved kilobytes and even megabytes.

Make minified copies of original files (*.css и *.js to *.min.css, *.min.js). Try to save bytes where possible and in the end you will have saved kilobytes and even megabytes CSS Minifier (online minifier), and Javascript Minifier for JavaScript. If you don’t like online services, you can use corresponding plugins for Coda2 and SublimeText 3.

6. Optimize Images

Optimize images by compressing them. There are many popular compression tools that do not harm the quality of the images. Here are some good compression tools for JPEG and PNG files: jpegtran or jpegoptim (only for Linux, use parametres --strip-all) for JPEG files, and OptiPNG or PNGOUT for PNG files.

Also, online services, developed on the above-mentioned technologies, are available. For example, you can use Kraken.io to compress images online.
To compress JPG и PNG formats, you can also use TinyPNG It has a plugin for Adobe Photoshop, which will make your job much easier.
If you are using macOS, the application called Paparazzi!.
might come in handy. And this list is not the ultimate one. You can easily find many other similar applications, based on the above-mentioned technologies.

7. Choose the Right Format for the Images

Use the right image format to achieve better results. Sometimes it is better to choose jpg, sometimes png or gif. Very often svg is good as it is very light and can be scaled (vector).

8. Use Photos of the Required size

Always try to use photos of the required size. Photos with the size @2х can be an exception when the client has a retina display. But double size photos use only if visitor become from high-dpi display device. For this reason you can find same Media Query

Also, adapt images to the client’s device. For example, if a client browses your website from a mobile phone, with 480px screen width, he doesn’t need a 800px-wide file. However, you don’t need to panic and make 20 copies of the same image for the wide range of devices available today. A couple of images with the most popular resolutions are enough. We usually prefer 480px images. If the screen is smaller than this, heavy images, bigger than 480px, can be replaced with smaller ones. Otherwise, you can use the original images.

9. Use Font Icons

While designing, pay attention to the icons on the website. If they are simple and of the same color, we recommend collecting a font of them and using them in that way. Or you can use ready solutions (Font Awesome) or websites, where you can make your own icon package (Flaticon).

One of the advantages of font icons is that by loading one file, the client saves time on the transfer server ←→ client. Another advantage is that being vector, the icons will always look tidy and clear, irrespective of the screen density.

10. Use CSS3 to its limits

The age of InternetExplorer 6-7 has long passed, as it doesn’t support fully CSS shades, gradients and so on. Now you can freely use CSS3 to its limits. Avoid using images for making shades, gradients, etc. Feel free to use CSS3, but first check the compatibility of styles, which seem too suspicious to you.

11. Load the Content in Parts

The first screen is considered to be the part of the content that fits on the monitor. Also, the first 640px of the website is considered to be the first screen. Keep this in mind while creating a website and load the content in parts. First, quickly load the first screen. It will give the feeling that the website loads quickly. While the client is reading the first screen, your script will have 2-3 seconds to load the rest “on the sly”.

To do this, load the scripts asynchronously, and also load only the first screen styles and, if possible, load the lower content after the first screen has fully appeared.

12. Cache Requests to the Database

Try to minimize database requests number on each page. Cache whatever is possible: articles, news, blogs can be cached until being changed. If your project is mostly non-dynamic (chats, games, graphs), the ideal result would be 0-1 request on each page. Yes, exactly 0!

For dynamic projects that process large amounts of information in real time you should choose appropriate technologies, such as web-sockets and other transports that secure constant connection.

13. Reduce Browser Requests Number

The bigger the number of files, the more requests will be sent from the browser to the server. For one file it takes millisecond, but if you have 40-50, or even 100 such files, it will take a long time to load the page.

You could, for example, try to save all JavaScripts or CSS styles in one or two files. Even if you use many plugins and have complex architecture, always try to join files whenever possible. It will give you one big file instead of ten small ones. If you follow the tips that we share with you in this article, it won’t be a problem, as the client will cache the file on his device, and as a result many bytes of titles will be saved. Instead of ten titles you will have just one, which is 20-50ms instead of 180-400ms, which changes considerably page load time.

14. Optimize Your Code

If you are using a website management system, you most probably have many modules on each page that are hardly ever used. This increases significantly script processing time, therefore increasing page load time. Switch off or delete any unnecessary modules. Don’t keep them “just in case they are needed”.

If you are developing the system yourself, you can do this easily while creating the website. Always try to measure the used memory and the CPU load on the server. The less the load and the used resources, the faster they are processed.

15. Choose the Right Hosting

We could not leave this point out. Many people choose hostings for 1 ruble, or even free hostings and, as a result, get the corresponding quality. You should be very careful while choosing a hosting provider. It is good if they have smart and friendly technical support, as it is the technical support that collects distributives and optimizes it.

There are many good hosting providers we can recommend, for example our partner MCHost. We are not recommending them because they are our partners, but because of the good quality and fast servers they provide.

Bonus

• According to studies made by Strangeloop more than 57% of visitors leave the website that loads in more than 3 seconds
• About 75% of the buyers will prefer competitor websites if your website slows down because of a large amount of graphics.
• On average a patient client will wait for 2 seconds
• 8% of website visitors say they leave websites because of slow content load
• The faster the website loads, the higher is the conversion
• More than 85% of visitors expect the website to load on the mobile device as fast as on the computer. Otherwise, they will leave the website.
Resource: gomez.com