7 Tips to Improve Your Website Performance

#1 Optimize the images 

Two main factors influence the loading time of the webpage related to images and video: the total number of items and the size of each of them. The primary goal of formatting the images is to balance between the lowest possible file size and acceptable quality. There are different ways to achieve this goal:

• Choose the best file type

A good idea is to use WebP formatted images that are approximately up to 30% smaller than JPEG and 25% smaller than PNG formatted images, and can significantly decrease the size of a web page. Though their drawback is that they are not supported by Safari and IOS Safari. You can use such online tools as Squoosh and Online-Convert.com or command-line tools to convert JPGs, PNGs, and other file formats into WebP. Using JPEG images allows you to adjust the size of the file to its quality. PNG format produces images of higher quality though larger in size. 

• Compress the images

Compression is another important thing that plays a huge role in image optimization. Depending on the image compression tool, there exist different types and levels of compression. Most image editing tools like Adobe Photoshop, Affinity Photo, On1 Photo, and others already have built-in features for image compression. 

• Image dimensions

Photos imported from the camera have very high resolution and file dimensions (height and width) which makes them good for printing-out or desktop publishing though not for websites. Therefore it’s important to reduce file dimensions to decrease image file size. This can be done with the help of image editing software on your computer.

#2 Optimize the videos

Same as for images, videos should be optimized for the web. Instead of using heavy animated GIFs and slow videos that have a negative impact on the performance of the website, think about opting for an animated WebP or replace them with an HTML5 video tag. Though browsers can’t preload videos as they do with images, HTML5 format is lighter and gives you better control of your website’s video player. The format allows uploading a video in the original format and gives a lot of possibilities in the matters of geolocation capabilities of devices. HTML5 video tag works only with a few file formats (MP4, OGG, and WebM). Some popular online HTML5 video encoders are HTML5 Video Converter, Handbrake, Converter Point, and Freemake Video Converter.

In 2018 a new video format AV1 was released which is completely free and gains more and more popularity among the developers.

#3 Use Web Caching

Web caching is a method for temporarily storing a copy of the asset that the user has requested earlier. Instead of seeing original files, users are provided with a cached version of the webpage or an image which allows to significantly speed up the website and reduce server lag. There are four main types of web caching depending on the place where you cache the data;

• Site cache

This is a type of client-side caching that stores website data when a web page is loaded for the first time. When a user returns to your website, saved elements are swiftly displayed to them. Website owners don’t have control over the saved elements but they can decide how long content will remain in the cache. This type of caching is great for websites with a lot of static content.

• Browser cache

This type of caching is integrated into the end-user’s web browser and controlled by it. Web elements are stored in the end user’s computer and grouped with other files related to your content. It contains multimedia content, HTML pages, CSS stylesheets, etc.

• Server cache

Server caching is one of the best methods to minimize server loads, it’s completely administered by owners of the website without any interruption from end-users. The term covers a range of types of caching such as object caching, opcode caching, and CDN caching, each of them storing different content on the website’s server. After a request has been made, the server checks its temporary storage for the required content. If it’s available in the server cache, it’s returned to the server immediately., so your server can handle much more traffic and return web pages faster. 

• Micro cache

Micro cache stores the content for very short periods of time, generally static versions of dynamic elements are saved for up to 10 seconds. Because of the short storage time, it’s not a popular type of caching though sites with rapidly changing content and high traffic can benefit from it.

#4 Combine CSS and JavaScript files to reduce HTTP requests

The speed of your website is decreased with every fetched resource that includes HTTP or HTTPS web address. The bigger the number of requests is, the slower a website gets. Combining external JS and CSS files allows to drastically reduce the number of requests. Instead of loading, for example, 5 external CSS and 5 external JS files, you can combine them into a unified separate file which would result in 8 fewer requests. 

#5 Use a CDN

A content delivery network (CDN) is a geographically distributed network used as a mediator for content delivery to the end-user. In essence, a CDN delivers content like images, videos, HTML, JS, and CSS through web servers that are situated close to a user’s geographical place. 

For instance, if the origin server is located in the US, and the user opens a website in Poland, the content will take some time to load because of funneling the content. In the case of CDN, there is a range of data servers in different locations around the world. This way, the problem with network latency (delays in communication over a network) is solved, as the number of trips that the server makes is significantly shortened, so the loading time becomes faster.

#6 Enable Prefetching

Prefetching enables a browser to store the information that a user might access in the nearest future. Once the time has come and a user clicks on some link that has been already stored in the browser's cache, the necessary information immediately appears on their screen. There are three main types of prefetching: 

1. Link prefetching enables a browser to gather the resources that a user is likely to request in the nearest future; 
2. DNS prefetching converts IP addresses into readable website URLs while a user browses a particular page;
3. Prerendering is quite similar to prefetching. It also collects the information that a user might access. The main difference between them is that prerendering renders the entire page and as soon as a user navigates to it, the current tab will be replaced with a hidden pre-rendered page.                     

#7 Compress the files

Every website is made up of HTML, JS, CSS, and other code files. The more complex the page is, the longer the loading time you should expect. To improve site responsiveness, these large code files should be compressed to their original size. These are good options for files compression:

1. Brotli. Introduced by Google in 2015, Brotli has a compression ratio comparable to  the best currently available general-purpose compression methods.
2. Gzip. Gzip is another popular data compression and decompression program. If you doubt which of the two to choose, it’s possible to estimate the compression level using Brotli or Gzip.

Conclusion

Nowadays users expect websites to load quickly, and those who don’t care about improving web performance, risk being kicked out of competition. According to Aberdeen Group research, even a one-second delay in loading time leads to 11% fewer page views. And while various factors might affect the speed of your web page, not all of them can be solved without a professional. Contact us for a free consultation to speed up the performance of your website.