• Fit Web Design

15 Tips To Speed Up Your Website

Updated: Sep 18

Website speed is one of the factors which can highly improve your ranking in Google. We live in a time where everyone is in a hurry and expects quick results. Efficient service means many benefits, incl. better user experience, increase in traffic, conversion, etc. In this article, we'll go over 15 easy tips and best practices you can use to increase site's load speed.

Content:

  1. Format, size and compression of photos

  2. Lazy loading

  3. On-Page Video

  4. Minification of JS, CSS, HTML files

  5. Browser cache usage

  6. Code restriction and optimization

  7. Multiple redirects

  8. Eliminate rendering blocking resources

  9. Asynchronous loading of files

  10. AMP technology

  11. Gzip, Deflate or Brotli compression

  12. PHP version

  13. HTTP / 2

  14. TTFB

  15. CDN (Content Delivery Network)

The Benefits of Fast Pages

The faster your site loads, the lower the bounce rate. If your website loads fast, you have a better chance of ranking on Google over slow sites that drive high bounce rates. Let's get into more detail:

  • Ranking factor - It's not hard to notice that page speed is one of the many ranking factors that affect its position. Faster loading means greater user satisfaction and a greater chance of improving your position in search results.

  • Improving Quality Score - Another advantage is the quality improvement that occurs in Google Ads campaigns. I am talking about the quality of the landing page. The better the quality score, the greater the chances for our ad to be above the competition and cost less.

  • Bounce Rate Reduction - What can I say, if a page loads too slowly, it will generate bounces. The user will not see the page yet, but will already leave it and will certainly take advantage of the competition's offer, which respects his time by serving him an optimized website.

  • Improving Conversion - It goes without saying that the sooner a user gets the information, the more likely he or she will convert. This applies to every channel (organic traffic, advertising, social media, etc.).

  • User satisfaction - It is very important. Everyone wants the page they visit to load as quickly as possible. It is therefore worth making a good impression and surprising users with the speed and smoothness of our website.

  • Improved page indexation by robots - Google robots crawl better and index faster pages. It is worth mentioning that robots can skip over heavy sites, thus delaying their inclusion in the index. (You can read more about indexation in the article: SEO Tips for your website)

Website speed test

Before I tell you how to speed up your website, I will briefly discuss the tools with which we can analyze its speed and get a list of elements that affect the long page load time. The tools mentioned below are free.


Google PageSpeed ​​Insights

PageSpeed ​​Insights is a free tool from Google that allows you to check the loading time of any website. It assesses its speed separately on desktop and mobile devices. Google shows the results on a scale from 1 to 100, where: 0-49 points (marked in red) are weak, 50-89 (orange) - in need of improvement, 90-100 (green) - good. A score above 90 for computers is considered sufficient for the efficient and quick operation of the website.

PageSpeed tool
https://developers.google.com/speed

Page Speed ​​Google presents the so-called laboratory data, i.e. page loading time divided into several components. They include:

  • First contentful paint - rendering time of the first image or text;

  • Speed ​​index - determines how quickly your website fills up with visible content;

  • Largest contentful paint - rendering time for the largest image or text;

  • Cumulative layout shift - is a measure of the movement of elements in the viewport;

  • Time to interactive - indicates the period after which the page becomes fully interactive;

  • Total blocking time - the sum of all periods between the first rendering of the content and the time to full interactivity if the task length exceeded 50 ms. This parameter is expressed in milliseconds.

Many of these factors are part of the Core Web Vitals - they will be factors influencing the ranking of pages in Google results from May 2021. Factors with parameters beyond the allowed standards - also appear in Google Search Console in the form of errors.

https://developers.google.com/speed/pagespeed/insights/

A particularly useful element provided by the PageSpeed ​​Google Insight tool are tips that help improve the performance of a website and thus retain users on it. They contain detailed information on what and how should be optimized to make the website as fast as possible. They are presented in descending order - from those whose implementation will bring the greatest savings in terms of charging speed. Red and orange are the elements for which improvement is most desirable, while the green ones are the factors that do not require changes. Analysis of PageSpeed ​​Google Insight tips and creating specific optimization guidelines - these are elements of a professionally performed SEO audit.


GTmetrix

GTMetrix is ​​one of the tools you can use to get a detailed report on your site's performance. It is a free tool that analyzes page speed with Google Page Speed ​​and YSlow. GTMetrix generates results for your pages and offers practical recommendations on how to improve them. You will find many useful items in the results of the GT Metrix analysis. For starters, you'll check the browser and location used for testing, PageSpeed ​​and YSlow results, page load time, number of requests, and total page size. The tool is great for analyzing trends, but if you really want to know why your website is slow and what you can do to make it even better, you need to deepen your analysis.

Gtmertrix for Fit Web Desing
https://gtmetrix.com/reports/fitdesignldn.com/r4EI0Txu/

Pingdom Website Speed ​​Test


The Pingdom tool, apart from the list of guidelines and elements affecting the page load time, allows you to select the location of the server from which the test is to be performed. It is obvious that we should choose the one closest to our hosting or we should be guided by the location of potential website users.

Pingdom tools result for fit web design
https://tools.pingdom.com

In the report, we can notice the percentage breakdown by the type and weight of the resources loaded, as well as the number of resources broken down by type, e.g. photos, scripts, HTML, CSS, fonts. Here too we have a chart with a list of requested resources, similar to the one from the GTmetrix tool.


Light House

It is a Google tool that is used to audit the website. We can perform the test in a simple way. All we have to do is open developer tools in the Chrome browser (devtools) and go to the audit tab. An alternative solution is to install the LightHouse plug-in in the browser. The audit is divided into 5 segments. Each of them includes personalized guidelines and a separate rating on a scale of 0 to 100.

Light House
Light House Audit

Google Analytics

If we have a tracking tag implemented in the website code, we can analyze the loading speed of the visited pages. To do this, go to the Behavior -> Site Speed ​​tab, where we can see, for example, the loading time of individual pages or the guidelines from the Google PageSpeed ​​Insights tool for each of them.


Google Analytics show how quickly users are able to see and interact with the content on your website. It also measures three aspects of latency: Page-load time for a sample of pageviews on your site. After analysing your website you'll get information about your page speed for both Mobile and Desktop.


Other speed analysis tools

  1. DNSpref - Tests the performance of the DNS provider.

  2. WebPageTest - an advanced test that takes much longer - The tool analyzes the page several times, averages the result and presents a large amount of information.

  3. Google Mobile Speed ​​Test - focused on usability analysis for mobile devices.

  4. Key CDN Speed ​​Test - the report contains basic information on the speed of loading the page.

  5. Web.dev - a tool similar and based on Lighthouse - It presents the test results in a slightly different form.

Elements that affect page loading speed


Now for the specifics, how to improve website speed. Below are the most important elements affecting website performance and site loading time. Some of them are related to the server and the method of resource transmission, and the rest to SEO, i.e. website optimization. Each element has a definition and a description of how to improve it.


What can be improved on the website


1. Photo resizing, compression and new formats

One of the most common elements extending the loading time of a website are unoptimised images. This mainly applies to the graphics format, their compression and the dimensions of the photo on the server in relation to the image displayed on the website. They should be the same. For example, avoid reducing the size of an image using CSS. Remember to make a backup for any operations on photos!

CompressPNG
https://compresspng.com/

By changing the image format, e.g. to WebP, which is a better compression format, we can save a lot of KB and significantly speed up the website loading time. In the case of graphics with the PNG format, we can gain about 26% of the weight, and JPEG by 25-34% on average. With some photos, you can reduce the weight even several times. More about graphics in the WebP format on the Google website - https://developers.google.com/speed/webp


How to use the WebP format?

If the website is designed in the WordPress engine, it is worth using the Webp Express plugin, but the server configuration often affects its correct operation. You can also place photos in Webp format on the server and prepare an original script that, depending on the browser, will display the appropriate image format. This is especially important because some browsers do not yet support this format.


How do I compress photos?

If we have few photos, we can use the application https://compresspng.com/. All you have to do is upload the photos, wait for them to be compressed, download and replace them on the server. If you want to compress many more photos, I suggest using a plugin for popular CMS systems or your own script.


2. Lazy loading

Lazy Loading is a mechanism whose purpose is to load graphics on the page only when they are needed - i.e. when we scroll through the content of the website and come across a fragment with graphics. As a result, the page will load faster.


How to turn on lazy loading?

This feature is available by default from WordPress version 5.5, in older versions of this software it is worth using, for example, the A3 Lazy Load plug. You can use a lightweight script of your own authorship that will delay the loading of graphics or manually add the loading = "lazy" attribute to the img tag - popular browsers support this solution.


3. On-Page Video

Of course, we are talking about all kinds of movies displayed on the site, which are hosted on the same server as our site. This can be lethal for the server especially when it has bandwidth limitations and the movie plays frequently. This can cause delays or even interruptions in playback.


What should I do?

You should definitely avoid large video files. This practice has a negative impact on the page loading time and the users' experience.


Hosting the movie on your own server is ineffective, a much better solution would be to place the video on an external platform such as YouTube and make the movie available on the website. Such practise will save space on your server and shorten the loading time of the movie / page.


Why?

Because YouTube's servers are among the best and are located all over the world. Additionally, YT adjusts the quality of the video to the user's internet connection bandwidth. This means we will see the video faster and with less chance of playback interruptions (clips). The loading = "lazy" attribute can also be assigned to iframe videos on the page, which should speed up the page loading time a bit.

suboptimal loading of movies image


If the video must be loaded from your server, take care of the appropriate format and compression, of course, so as not to lose quality. For this purpose, you can use video converters and compression programs available on the Internet.

optimal loading of movies image


A common practice to increase page loading time is to put graphics with a "play" icon resembling a video player. Only after clicking on the graphic, the loading of the video or downloading the scripts of the YouTube player will start. However, this might require more advanced programming skills.


4. Minification of JavaScript, CSS and HTML files

What is file minification? This is nothing more than removing unnecessary spaces, enter, tabs and comments from HTML, JavaScript and CSS files, which are irrelevant for the code interpreter and increase the size of files unnecessarily. The minified files are lighter and the website loads faster as a result.

W3 Total Cache

How to enable file minification? We can write our own script that will remove unnecessary characters from files. For websites with a WordPress engine, it is worth using the W3 Total Cache.


5. Use of the browser cache (cache)

What is the browser cache? In other words, browser caching - This is a place in the user's device where static elements of our website can be saved (for a specified period of time). I am talking about storing data on mobile devices, tablets, computers, etc. As a result, when we go to the next subpage or visit the website after a few days, some resources are loaded directly from the device, which significantly speeds up the page loading.


How to enable the browser cache?

We can do it in several ways, e.g. by changing the settings in the server administration panel. The most popular option is to set the browser cache in the .htaccess file, as shown below:


ExpiresActive On ExpiresDefault "access plus 2 month" ExpiresByType image/jpg "access plus 2 month" ExpiresByType image/jpeg "access plus 2 month" ExpiresByType image/gif "access plus 2 month" ExpiresByType image/png "access plus 2 month" ExpiresByType text/css "access plus 2 month" ExpiresByType text/html "access plus 2 month" ExpiresByType text/xml "access plus 2 month" ExpiresByType text/javascript "access plus 2 month" ExpiresByType text/x-javascript "access plus 2 month" ExpiresByType application/javascript "access plus 2 month" ExpiresByType application/x-javascript "access plus 2 month" ExpiresByType application/x-shockwave-flash "access plus 2 month" ExpiresByType application/pdf "access plus 2 month" ExpiresByType image/x-icon "access plus 2 month" ExpiresByType application/vnd.ms-fontobject "access plus 2 month" ExpiresByType application/x-font-ttf "access plus 2 month" ExpiresByType application/x-font-opentype "access plus 2 month" ExpiresByType application/x-font-woff "access plus 2 month" ExpiresByType image/svg+xml "access plus 2 month"v


If you are using WordPress, you can install the WP Fastest Cache plugin and fix the problem


6. Code restriction and optimization

Another factor that affects webpage loading speed is the excess code. PHP and JS scripts in particular, which are not used, but are nevertheless loaded and processed by the server / browser.


On WordPress and other popular CMS systems, this problem is most often generated by an excessive number of installed plugins. Especially when we use multi-functional plug-ins, and we only use selected functions - all the plug-in code and other functions are still loaded and executed.


The problem of code optimization is complex and it also concerns the duplication of redundant tags and styles, e.g. each paragraph in the code has an identical inline style, as a result it is duplicated several dozen times.


Also pay attention to universal website templates - their code is created for a wide range of people, which makes it not optimal. In that case, there will always be a lot of unused code. Our developers recommend creating a new and lighter template based on the look of the previous one. Visually, the page will practically be the same - but performance and loading times will improve significantly.


How to limit and optimize the code?

First of all, avoid installing to many plugins. Install only those that are essential for the website to function. Some plugins are unnecessary and you can easily achieve the same effect without it, e.g. creating redirects, compressing images, adding custom code to the head or body of the site - it requires only little technical knowledge.


Analyze the internal scripts used and those loaded from external sources. Get rid of unnecessary ones or make modifications so that they only load on specific pages - not all.

When entering the content on the page, verify that the pasted content does not contain unnecessary styles from the document from which it was copied.


If we use external resources to load our page correctly, it is worth using the rel = "preconnect" attribute in the tag.


How it's working?

We advise the browser to establish a connection with another domain as soon as possible. This happens before the actual query for the resource, which means that when such queries occur, the resource is downloaded immediately. The attribute should be used with caution, as overusing it may be counterproductive.


If you are planning to design a website, check how to create and optimize your on-page content.


7. Avoiding multiple redirects

Redirect chains slightly extend the time in which the target page will be loaded. This is because the server asking for the URL usually returns the address to which the redirect points, after which the browser must send another query, this time to the address received in response. It is a good practice to avoid redirects e.g. from page A to page B, and from page B to page C. This will speed up the loading time of the target page.

http status website

You can check redirects e.g. in the tool https://httpstatus.io/


8. Eliminate rendering blocking resources

The elimination of rendering blocking resources applies to the section above the fold, i.e. the fragment of the page that we see first without scrolling the page. The problem occurs when, along with the JavaScript and CSS files responsible for showing the Above the Fold section, files that do not affect this are also loaded. As a result, the rendering of the website is delayed, which has a negative impact on the overall performance and website speed index.

above the fold

How do I eliminate render-blocking resources?

For WordPress, the best solution would be to download the A3 Lazy Load plugin, it reduces the size of a resource via minification so that the page has fewer bytes to load. You can also use the defer and async attributes to eliminate render-blocking JavaScript – more about it below.


9. Asynchronous file loading

We can load files in three different ways. The first one is synchronous loading, i.e. each file is loaded one by one in the order in which they appear in the page code. The second way is asynchronous loading, which is one that tells your web browser to load multiple files at once. The last option is to postpone the loading of the external resource until the page is fully loaded. This variant is used when the file is not important for the proper rendering of the page, e.g. the script of the chat module.


How does it work in practice?

When the browser loads a page, it does so from top to bottom. If it reaches a JS / CSS file that is loaded synchronously, it will stop loading the page until the file is fully loaded. If the same file is loaded asynchronously, the browser will continue to load other page resources at the same time. The effect is that the page loads faster.


How to enable asynchronous file loading?

At the outset, remember that this mainly applies to JS and CSS files loaded from external sources. The easiest way is to find a suitable WordPress plugin. Another solution is to add an async attribute in your code to the scripts you call.


Example:

<script async src = "https://example.com/test.js"> </ script> - script is loaded asynchronously.

<script src = "https://example.com/test.js"> </ script> - synchronously loaded script


10. AMP (Accelerated Mobile Pages) implementation


AMP or accelerated mobile pages are essentially pages that use optimised framework based on existing HTML in order to streamline the information exchange with browsers, creating a flawless, faster and more efficient user experience. This is Google technology. AMP pages are distinguished by a lightning bolt in mobile search results.

AMP “prioritizes the user experience” through the enforcement of restrictions on ads and user interface design.

  • Limiting CSS to 75KB.

  • Limiting JavaScript to 150KB.

  • Moving all the fluff out of the critical rendering path.

You can learn more about AMP technology on the official website https://amp.dev/about/how-amp-works/


What can we improve on the hosting side?

Web hosting (the place where the files of our website are located ) gives you infinitely more control over the design and functionality of your website. Beyond the server that hosts your site, you can also use other networks of servers to decrease load times for your visitors.


11. Gzip, Deflate or Brotli compression

These are methods that compress our website files losslessly and are executed on the server side. As a result, fewer resources go to our browser, which shortens the loading time of the website. The efficiency of Gzip and Deflate compression is very similar, but in the case of using Brotli method, we can count on about 20% better results.


What files should be compressed with the Gzip, Deflate, Brotli method?

In general, we get the most from compressing text files, including HTML, CSS, JavaScript, XML, fonts, where their size can be reduced by up to 70-80%. We should not compress already compressed files and we should avoid compressing photos.


How do I enable gzip, deflate or brotli compression?

This can be done top-down on the server. You can also paste the appropriate code in the .htaccess file, which is located in the root directory of the page files on the server. If your website is based on a WordPress engine, you can enable file compression by installing the WP Fastest Cache plugin. All you have to do is select the appropriate checkbox when configuring it.


Enabling the Gzip method in the .htaccess file


mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


Enabling the Deflate method in the .htaccess file


SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/vtt AddOutputFilterByType DEFLATE text/x-component AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/js AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/atom+xml AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE application/ld+json AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-web-app-manifest+json AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon # Exception: Images SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png)$ no-gzip dont-vary # Drop problematic browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html


Enabling the Brotli method is possible, by the CloudFlare CDN service, more about that later.

PHP Version


PHP is a scripting programming language primarily used for website development. PHP is released under an open license and anyone can download a copy for free, install it and use it without restriction for both private and commercial purposes. The language is easy to learn and allows you to create professional dynamic websites. PHP is an open-source programming language that runs on a webserver. It is one of the most popular languages for web development; for example, all WordPress sites run on PHP.


PHP is a server-side language, i.e. it works on the side of the web server. The opposite are client-side languages ​​that work on the user's browser side (e.g. JavaScript). To use it on your own website, you need to make sure your server supports PHP.


The PHP scripting language works on the principle of four modules:

  • kernel modules (i.e. the always active part of the PHP engine),

  • official modules (run manually by the server admin, included in every PHP language distribution),

  • PECL repository (PHP Extension Community Library, containing free open source modules)

  • PEAR repository (PHP Extension and Application Repository, being a framework and extension distribution system)

How to check PHP version and how to change it?

To check which version of PHP is currently active for your website, place a file with the extension ".php" in the website directory, e.g. info.php containing this code below, and then open it in your web browser.


To do this, enter in the browser: adres-strony.pl/info.php


Code:


<?php phpinfo(); ?>


To change your PHP version log in to your cPanel. With just a few clicks, you can switch between the new and the old version. This is especially helpful when upgrading older sites, troubleshooting, or dealing with third-party applications.


13. HTTP / 2 Protocol

It defines how the browser communicates with the server and how resources are transported between them. Earlier versions of HTTP / 1.x sent requests for resources sequentially, i.e. the browser asks for a file, receives it from the server, processes it and asks for another, etc. Using the HTTP / 2 protocol speeds up page loading, thanks to handling multiple requests simultaneously. In addition, the server has the ability to send files before the browser asks for them. When choosing hosting, we should also pay attention to the version of the HTTP protocol used by the server.

HTTP / 2 Protocol

How to enable the HTTP / 2 protocol?

To take advantage of the advantages of the HTTP / 2 protocol, it is recommended to use an SSL certificate, as using the HTTP version 2 protocol in popular browsers may require it. For this reason, remember to run the website with the SSL certificate before using HTTP / 2.

TTFB (Time To First Byte) server response time


Time to first byte (TTFB) is a value in microseconds measured from the moment the query is sent until the user receives the first byte of data sent by the server. Unfortunately, this parameter is one of the most popular ways to measure page loading speed. Why unfortunately?


In principle, the speed testing methods are to help locate and improve the bottleneck that extends the waiting time for the service. TTFB is just a raw variable, the sum of many other variables. It does not take into account many important parameters and does not allow to determine exactly which components translate into an increase in the final result.

If the TTFB parameter value is too high, despite good website optimization, it is worth considering changing the server on which the website is hosted. You can try changing the PHP version, which has a significant impact on the overall performance and speed of the website.


14. CDN - Cloudflare

CDN (Content Delivery Network) is a highly-distributed platform of servers that helps minimize delays in loading web page content by reducing the physical distance between the server and the user.


When a website uses a CDN, the user's request is sent to the nearest CDN server, which greatly reduces latency and therefore makes the site load much faster. This allows users all over the world to enjoy high-quality content without long waiting times, regardless of the computer's location.


Content delivery networks can be considered as a kind of data intermediary. They stand between the actual server that hosts the website's files and the user's computer. First, they download data from the aforementioned server, save it on their own servers, and then display the saved content to the user.


Cloudflare is one of the most know and free CDN providers. Whats in in the free version?

  • Use of the HTTP / 2 protocol, (soon HTTP / 3)

  • Compressing files with the Brotli method,

  • JavaScript, HTML, CSS files minification,

  • Free SSL certificate,

  • Resource caching and much more.

You can create your free account here - https://www.cloudflare.com/


PROtip

You can update DNS records in the domain panel by reducing the TTL time to e.g. 15 minutes. Then wait one day for the changes to propagate. As a result, DNS servers will check your domain configuration more frequently and the transition to CloudFlare will be much faster.


Summary

Yay, you’ve made it through the guide! Now you know how to speed up your website. We hope you found at least a couple of great bits of advice that you can act upon now. Do not forget about optimizing the content for selected keywords and acquiring valuable external links.

33 views0 comments

Recent Posts

See All