{"id":8438,"date":"2020-08-19T12:25:15","date_gmt":"2020-08-19T10:25:15","guid":{"rendered":"https:\/\/www.combell.com\/en\/blog\/?p=8438"},"modified":"2023-01-03T11:42:41","modified_gmt":"2023-01-03T10:42:41","slug":"advanced-tips-for-making-your-website-even-faster","status":"publish","type":"post","link":"https:\/\/www.combell.com\/en\/blog\/advanced-tips-for-making-your-website-even-faster\/","title":{"rendered":"10 advanced tips for making your website even faster"},"content":{"rendered":"<p>A fast and high-performance website makes for happy customers! But there is always room for improvement, hence these 10 advanced tips for making a well-performing website run even faster!<strong>\u00a0<\/strong><\/p>\n<h2><strong>Additional optimisation of your load time may have a large impact<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-8439\" title=\"Making your website faster important for your ranking\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/Making-your-website-faster-important-for-your-ranking.png\" alt=\"Making your website faster important for your ranking\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/Making-your-website-faster-important-for-your-ranking.png 250w, https:\/\/www.combell.com\/en\/blog\/files\/Making-your-website-faster-important-for-your-ranking-50x50.png 50w, https:\/\/www.combell.com\/en\/blog\/files\/Making-your-website-faster-important-for-your-ranking-60x60.png 60w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/>The importance of a high-performance website cannot be overemphasised. Your visitors will lose interest if a page takes longer than 3 seconds to load. It is possible to make an immediate 10% difference in online sales through loading faster by just half a second.<\/p>\n<p>Not only does a high-performance website make for satisfied customers, but it also allows you to rank higher in the search results \u2013 Google does not just reward fast websites: <a href=\"https:\/\/www.combell.com\/en\/blog\/google-chrome-to-penalise-slow-websites-with-warnings\/\">before long, it will also penalise slow websites!<\/a><\/p>\n<p>We have already provided you with all the ground rules for a high-performance website in our article '<a href=\"https:\/\/www.combell.com\/en\/blog\/a-fast-website-thanks-to-a-few-magic-tricks\/\">A fast website thanks to a few magic tricks?<\/a>'\u00a0and our articles about high-performance <a href=\"https:\/\/www.combell.com\/en\/blog\/make-your-wordpress-website-faster\/\">WordPress<\/a> and <a href=\"https:\/\/www.combell.com\/en\/blog\/8-tips-faster-drupal-website\/\">Drupal<\/a> websites.<\/p>\n<p>Are you dissatisfied with your website? Perhaps your site is already fast, but for you (and us too), only the very best result is good enough. If so, follow these expert tips. Any little gain in speed you can achieve might well make a difference to the user experience and Google ranking.<\/p>\n<p>Based on these tips, we have optimised the performance of our website combell.com, and this has resulted in a higher PageSpeed score.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8440 aligncenter\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/combell-pagespeed.jpg\" alt=\"combell-pagespeed\" width=\"800\" height=\"280\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/combell-pagespeed.jpg 800w, https:\/\/www.combell.com\/en\/blog\/files\/combell-pagespeed-300x105.jpg 300w, https:\/\/www.combell.com\/en\/blog\/files\/combell-pagespeed-768x269.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h2><strong>Closely monitor your website\u2019s vital signs!<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-8441\" title=\"Check your vitals for making your website faster\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/Check-your-vitals-for-making-your-website-faster.jpg\" alt=\"Check your vitals for making your website faster\" width=\"150\" height=\"148\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/Check-your-vitals-for-making-your-website-faster.jpg 1000w, https:\/\/www.combell.com\/en\/blog\/files\/Check-your-vitals-for-making-your-website-faster-300x295.jpg 300w, https:\/\/www.combell.com\/en\/blog\/files\/Check-your-vitals-for-making-your-website-faster-50x50.jpg 50w, https:\/\/www.combell.com\/en\/blog\/files\/Check-your-vitals-for-making-your-website-faster-768x756.jpg 768w, https:\/\/www.combell.com\/en\/blog\/files\/Check-your-vitals-for-making-your-website-faster-60x60.jpg 60w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/>How can you find out how \u2018healthy\u2019 your website actually is? By testing it for yourself on <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google\u2019s PageSpeed test<\/a>. You do not just get the numbers, but an instant list of options for improving.<\/p>\n<p>In its assessment, Google evaluates \u2018web vitals\u2019; these are the essential indicators that show how healthy a website is.\u00a0Each of these figures represents a facet of the user experience and shows a user\u2019s real experience in the field.<\/p>\n<p>Currently, the Core Web Vitals are concerned with the loading, the interactivity and the visual stability of your website:<\/p>\n<ul>\n<li><strong>Largest Contentful Paint<\/strong> (LCP): measures the load performance. For a good user experience, this must be less than 2.5 seconds from when the page begins to load.<\/li>\n<li><strong>First Input Delay (FID)<\/strong>: measures the interactivity, how quickly the page responds to an action by the user. For a good user experience, the IFD must be below 100 milliseconds.<\/li>\n<li><strong>Cumulative Layout Shift<\/strong> (CLS): measures the visual stability - e.g. that, during loading, the text does not keep jumping continually. For a good user experience, a page needs to have a CLS of less than 0.1.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/web.dev\/vitals\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebDev<\/a> tells you more about these vital signs, and discusses the tools you can use to carry out the measurements with code. Alternatively, you can use the <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals-extension\" target=\"_blank\" rel=\"noopener noreferrer\">Web Vitals extension for the Chrome browser<\/a>.<\/p>\n<p>With the Web Vitals and the Google PageSpeed test, you are equipped with objective figures that enable you to set about cranking up performance with the tips provided below.<\/p>\n<p><strong>These 10 tips can crank up your performance either in combination or individually:<\/strong><\/p>\n<p>\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip1\">Tip 1: WebP images<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip2\">Tip 2: Native LazyLoading<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip3\">Tip 3: Critical CSS<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip4\">Tip 4: Preload external content<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip5\">Tip 5: Display swap for fonts<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip6\">Tip 6: Replace external scripts<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip7\">Tip 7: JavaScript Async\/Defer<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip8\">Tip 8: Enable HTTP\/2<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip9\">Tip 9: Caching with Varnish\/Redis<\/a><br \/>\n\u2192 <a href=\"https:\/\/www.combell.com\/nl\/blog\/advanced-tips-voor-een-nog-snellere-website\/#tip10\">Tip 10: Caching in the browser<\/a><\/p>\n<h2 id=\"tip1\"><strong>1. WebP images are up to 45% lighter than PNG or JPG<\/strong><\/h2>\n<p>Appearances count, so attractive images will give your website a lot of allure. Everyone knows you should not upload really heavy images at full size \u2013 these can be disastrous as far as fast loading your page is concerned.<\/p>\n<p>But you can go even further with your optimisation. Do this by converting your images to the WebP format instead of using PNG or JPG image format.<\/p>\n<p>On average, the <strong>WebP format<\/strong> developed by Google makes images 45% smaller than compression in the older image formats.<\/p>\n<p style=\"padding-left: 40px;\">You can easily convert JPG or PNG images via <a href=\"https:\/\/webp-converter.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebP-converter<\/a> or equivalent tools. This means some work to start with, but this modification will really pay dividends! It is a one-off job initially, and then you just need to remember to take it into account when you add new images to your page.<\/p>\n<p style=\"padding-left: 40px;\">Please note: although most browsers support WebP, that is not (currently) the case with <a href=\"https:\/\/caniuse.com\/#feat=webp\" target=\"_blank\" rel=\"noopener noreferrer\">Apple\u2019s Safari browser<\/a>. For that reason, it is important to load in the WebP versions of your images conditionally. Then, depending on browser support, you will display either a WebP version or a JPG\/PNG version of the image.<\/p>\n<p style=\"padding-left: 40px;\">This can be via the &lt;picture&gt; element or server side.<\/p>\n<p style=\"padding-left: 40px;\"><strong>&lt;picture&gt; method:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;picture&gt;\n    &lt;source srcset=\"img\/awesomeWebPversion.webp\" type=\"image\/webp\"&gt;\n    &lt;img src=\"img\/JPEGimage.jpg\" alt=\"Alt tekst\"&gt;\n&lt;\/picture&gt;<\/pre>\n<p style=\"padding-left: 40px;\"><strong>Server method:<\/strong><\/p>\n<p style=\"padding-left: 40px;\">By placing this code in your .htaccess file, all JPG\/PNG images are replaced automatically by WebP images if the browser supports this. Make sure that the WebP version of your image is located in the same server folder as your JPG\/PNG image. (Source: <a href=\"https:\/\/github.com\/vincentorback\/WebP-images-with-htaccess\" target=\"_blank\" rel=\"noopener noreferrer\">Vincentorback<\/a>)<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;IfModule mod_rewrite.c&gt;\n\nRewriteEngine On\n\n# Check if browser supports WebP images\n\nRewriteCond %{HTTP_ACCEPT} image\/webp\n\n# Check if WebP replacement image exists\n\nRewriteCond %{DOCUMENT_ROOT}\/$1.webp -f\n\n# Serve WebP image instead\n\nRewriteRule (.+)\\.(jpe?g|png)$ $1.webp [T=image\/webp,E=REQUEST_image]\n\n&lt;\/IfModule&gt;\n\n&lt;IfModule mod_headers.c&gt;\n\n# Vary: Accept for all the requests to jpeg and png\n\nHeader append Vary Accept env=REQUEST_image\n\n&lt;\/IfModule&gt;\n\n&lt;IfModule mod_mime.c&gt;\n\nAddType image\/webp .webp\n\n&lt;\/IfModule&gt;<\/pre>\n<div class=\"bs-callout bs-callout-success\">\n<p><strong>TIP 1: Also optimise your JPG or PNG images<\/strong><\/p>\n<p>As the Safari browser does not (currently) support WebP, the JPG\/PNG versions of your images will still need to be loaded in. You should also compress the JPG\/PNG images. For example, you can use<a href=\"https:\/\/tinypng.com\" target=\"_blank\" rel=\"noopener noreferrer\"> TinyPNG<\/a> for this.<\/p>\n<\/div>\n<div class=\"bs-callout bs-callout-success\">\n<p><strong>TIP 2: Always specify a width and a height for images<\/strong><\/p>\n<p>Make it easier for the browser always to give the correct width and height as attributes to images. This enables the browser to know straight away how much space an image will take up because the image ratio is defined.<\/p>\n<p>So get into the habit of using the following syntax for each &lt;img&gt; tag:<\/p>\n<p><code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"image.jpg\" width=\"120\" height=\"100\" \/&gt;<\/code><\/p>\n<\/div>\n<h2 id=\"tip2\"><strong>2. Load only what is necessary with LazyLoading<\/strong><\/h2>\n<p><a href=\"https:\/\/github.com\/scott-little\/lazyload\" target=\"_blank\" rel=\"noopener noreferrer\">LazyLoading<\/a> works by delaying the loading of <strong>images<\/strong> and <strong>iframes<\/strong> that are not visible until the user scrolls nearby. When an img or iframe tag is present in the HTML code and is processed by the browser, then the sources will be loaded in immediately. This blocks the full loading of the page. And consequently produces a longer load time. LazyLoading ensures that the user downloads only what is visible.<\/p>\n<p style=\"padding-left: 40px;\">It is really simple to apply this: you just add the <strong><em>loading=\"lazy\" <\/em><\/strong>attribute to your images and iframes. A good habit to get into when programming a hyperfast website.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<\/p>\n<p style=\"padding-left: 40px;\"><code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"image.jpg\" loading=\"lazy\" \/&gt;<\/code><br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;iframe src=\"https:\/\/example.com\/\" loading=\"lazy\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<div class=\"bs-callout bs-callout-warning\">\n<p><strong>Please note:<\/strong> <a href=\"https:\/\/caniuse.com\/#feat=loading-lazy-attr\" target=\"_blank\" rel=\"noopener noreferrer\">Safari currently does not support<\/a> lazy loading via attribute. However, that can be solved by using this <a href=\"https:\/\/github.com\/mfranzke\/loading-attribute-polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">polyfill<\/a>\u00a0(<a href=\"https:\/\/medium.com\/better-programming\/native-lazy-loading-in-the-browser-85dabe6653ed\" target=\"_blank\" rel=\"noopener noreferrer\">read more<\/a>).<\/p>\n<\/div>\n<p><strong>\u00a0<\/strong><\/p>\n<h2 id=\"tip3\"><strong>3. Critical CSS: Loading in CSS files for the above-the-fold section immediately<\/strong><\/h2>\n<p>As you know, CSS (Cascading Style Sheets) files contain a specific format for your page so that all the pages are consistently formatted. The big advantage is that if you want to change the style, all you have to do is merely change the CSS file and not each individual page.<\/p>\n<p>You can include CSS in the HTML code itself, or you can call up a central file on each page. That means that the browser has to download and process the CSS files before the page can be displayed.<\/p>\n<p>Therefore, CSS can be a source that holds up display. If the CSS files are large, or if the network conditions are poor, then requests for CSS files can be delayed, and the time taken to display a web page may lengthen considerably. You can avoid this by making use of Critical CSS.<\/p>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/web.dev\/extract-critical-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Critical CSS<\/a> allows you to include the styles needed for the \u2018above the fold\u2019 section, i.e. the very first content the user sees before starting to scroll, in the &lt;head&gt; section of the HTML document. As a result, no extra request has to be made for fetching these styles. The remainder of the CSS can be loaded asynchronously. <a href=\"https:\/\/criticalcss.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CriticalCSS.com<\/a> is a service that can help with this.<\/p>\n<h2 id=\"tip4\"><strong>4. Load external content in advance with preload, prefetch and other &lt;link rel&gt; tags<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-8442\" title=\"Selective loading for making your website faster\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/Selective-loading-for-making-your-website-faster.png\" alt=\"Selective loading for making your website faster\" width=\"125\" height=\"199\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/Selective-loading-for-making-your-website-faster.png 250w, https:\/\/www.combell.com\/en\/blog\/files\/Selective-loading-for-making-your-website-faster-188x300.png 188w\" sizes=\"(max-width: 125px) 100vw, 125px\" \/>You can also gain time by loading in advance content that will be called up later on the page, or preparing to do so. That may involve preloading a CSS file, searching for a domain name, etc. As a result, the content is ready and your visitor does not have to wait for it when it is actually needed.<\/p>\n<p style=\"padding-left: 40px;\">This instruction is given with the &lt;link rel&gt; tag. There are 5 different attributes that you can use with this.<\/p>\n<p style=\"padding-left: 40px;\"><strong>preload: <\/strong>download with high priority a source such as a script or a stylesheet, and keep it in cache. The browser does nothing with that source, so scripts are not executed for example. They are simply put into cache so that they are available immediately when required.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<\/p>\n<p style=\"padding-left: 40px;\"><code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/p>\n<p style=\"padding-left: 40px;\"><strong>prefetch<\/strong>: actually does the same as preload, but with low priority to prevent it getting in the way of more important sources.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<\/p>\n<p style=\"padding-left: 40px;\">\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/p>\n<div class=\"bs-callout bs-callout-success\">\n<p><strong>TIP:<\/strong> For both preload and prefetch, it is recommended to use the attribute \u2018as\u2019. That helps the browser to schedule the download correctly. Possible options are \u2018as style\u2019 for stylesheets, \u2018as script\u2019 for scripts, and \u2018as font\u2019 for fonts. A full list can be found at <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\" target=\"_blank\" rel=\"noopener\">MDN<\/a>.<\/p>\n<\/div>\n<p style=\"padding-left: 40px;\"><strong>preconnect: <\/strong>this is used to request the browser to establish a connection with a defined domain in advance. You use this when you know that the user will soon download something from that domain, though you do not know what exactly.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"preconnect\" href=\"https:\/\/example.com\" \/&gt;<\/code><\/p>\n<p style=\"padding-left: 40px;\"><strong>dns-prefetch:<\/strong> you ask the browser to execute a DNS resolution of a domain in advance. You use this when you know that a connection will have to be made to that domain, e.g. to use a font from Google Fonts, or to use React from a CDN.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"dns-prefetch\" href=\"https:\/\/example.com\" \/&gt;<\/code><\/p>\n<p style=\"padding-left: 40px;\"><strong>prerender<\/strong>: you request the browser to load a URL and load that page in an invisible tab. If your visitor clicks on that URL, the page is displayed at once.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"prerender\" href=\"https:\/\/example.com\/about.html\" \/&gt;<\/code><\/p>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/3perf.com\/blog\/link-rels\/\" target=\"_blank\" rel=\"noopener noreferrer\">Read more about the link rel tag.<\/a><\/p>\n<h2 id=\"tip5\"><strong>5. Load fonts in with display swap<\/strong><\/h2>\n<p>Loading an (external) font can also cause a delay. Especially when you use different versions of a font. But you can also improve that.<\/p>\n<p style=\"padding-left: 40px;\">Using the font display swap CSS property, you instruct the browser to use a standard font first until the external font has been downloaded. The fonts are swapped as soon as that has happened.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@font-face {\n  font-family: \"Open Sans Regular\";\n  font-weight: 400;\n  font-style: normal;\n  src: url(\"fonts\/OpenSans-Regular.woff2\") format(\"woff2\");\n  font-display: swap;\n}<\/pre>\n<p style=\"padding-left: 40px;\">\u00a0<strong>Do you use Google Fonts?<\/strong> If so, add the following code to activate font swapping:<br \/>\n<em>https:\/\/fonts.googleapis.com\/css?family= Roboto:400,600<strong>&amp;display=swap<\/strong><\/em><strong>\u00a0<\/strong><\/p>\n<div class=\"bs-callout bs-callout-success\">\n<p><strong>TIP: Preload this resource<\/strong><\/p>\n<p><code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css?family= Roboto:400,600&amp;display=swap\" as=\"style\"&gt;<\/code><\/p>\n<\/div>\n<h2 id=\"tip6\"><strong>6. Replace external scripts with your own code<\/strong><\/h2>\n<p>In all probability, your website makes use of external scripts, e.g. to show YouTube clips. Loading in these types of scripts always has a negative impact on your website\u2019s performance. Consequently, you should first check whether it is necessary to load this external script.<\/p>\n<p style=\"padding-left: 40px;\"><strong>Example: Replace YouTube\/Vimeo embeds by screenshots<\/strong><\/p>\n<p style=\"padding-left: 40px;\">Embedding video players from YouTube or Vimeo on a web page involves a load of additional resources that slow down your website. A simple solution is to replace these video players by screenshots. You then effectively only load in the video player or link through to YouTube\/Vimeo when someone clicks on the screenshot. Consider giving your image a \u2018play\u2019 icon.<\/p>\n<h2 id=\"tip7\"><strong>7. Do not let JavaScript block the processing of the rest of the page<\/strong><\/h2>\n<p>Another factor that can disrupt rapid display is the use of JavaScript, external or otherwise. If your visitor\u2019s browser encounters in the HTML code an instruction to load a JavaScript, it will proceed to fetch it and execute the script. Only after that will the browser continue processing the remainder of the code. This has a huge impact on a page\u2019s load time.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8444 size-full\" title=\"without-defer-async-head\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-head.png\" alt=\"without-defer-async-head\" width=\"1133\" height=\"248\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-head.png 1133w, https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-head-300x66.png 300w, https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-head-1024x224.png 1024w, https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-head-768x168.png 768w\" sizes=\"(max-width: 1133px) 100vw, 1133px\" \/><\/p>\n<p style=\"padding-left: 40px;\">You can prevent this in various ways.<\/p>\n<p style=\"padding-left: 40px;\"><strong>Do not place the script tags in the &lt;head&gt; tag:<\/strong><\/p>\n<p style=\"padding-left: 40px;\">In general, the script tag belongs there, but it causes major slowdown. One solution is simply to place the script tag at the bottom of the page, right before the &lt;\/body&gt; tag.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8445 size-full\" title=\"without-defer-async-body\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-body.png\" alt=\"without-defer-async-body\" width=\"1137\" height=\"203\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-body.png 1137w, https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-body-300x54.png 300w, https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-body-1024x183.png 1024w, https:\/\/www.combell.com\/en\/blog\/files\/without-defer-async-body-768x137.png 768w\" sizes=\"(max-width: 1137px) 100vw, 1137px\" \/><\/p>\n<p style=\"padding-left: 40px;\">This method is used mainly when you want to provide support for older browsers. But there are 2 new tags that can help with new browsers: async and defer.<\/p>\n<p style=\"padding-left: 40px;\"><strong>Use Async and Defer in modern browsers:<\/strong><\/p>\n<p style=\"padding-left: 40px;\"><strong>Async: <\/strong>The script is fetched asynchronously, and when it is ready, HTML processing is paused to run the script and then resumed.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script async src=\"script.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8446 size-full\" title=\"with-async\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/with-async.png\" alt=\"with-async\" width=\"1132\" height=\"247\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/with-async.png 1132w, https:\/\/www.combell.com\/en\/blog\/files\/with-async-300x65.png 300w, https:\/\/www.combell.com\/en\/blog\/files\/with-async-1024x223.png 1024w, https:\/\/www.combell.com\/en\/blog\/files\/with-async-768x168.png 768w\" sizes=\"(max-width: 1132px) 100vw, 1132px\" \/><\/p>\n<p style=\"padding-left: 40px;\"><strong>Defer:<\/strong> The script is fetched asynchronously and executed only after the HTML parsing has been completed.<\/p>\n<p style=\"padding-left: 40px;\">Syntax:<br \/>\n<code class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script defer src=\"script.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-8447\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/with-defer.png\" alt=\"with-defer\" width=\"1133\" height=\"251\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/with-defer.png 1133w, https:\/\/www.combell.com\/en\/blog\/files\/with-defer-300x66.png 300w, https:\/\/www.combell.com\/en\/blog\/files\/with-defer-1024x227.png 1024w, https:\/\/www.combell.com\/en\/blog\/files\/with-defer-768x170.png 768w\" sizes=\"(max-width: 1133px) 100vw, 1133px\" \/><\/p>\n<p style=\"padding-left: 40px;\">You can also use both attributes, in which case async is given priority in a modern browser. Older browsers that support defer but not async will then switch to defer.<\/p>\n<p style=\"padding-left: 40px;\"><strong>Please note:<\/strong> By applying async and defer to your JavaScript files, you are influencing the point in time at which these scripts are executed. Be sure to have a look at the <a href=\"https:\/\/flaviocopes.com\/javascript-async-defer\/\" target=\"_blank\" rel=\"noopener noreferrer\">results of using these techniques.<\/a><\/p>\n<div class=\"bs-callout bs-callout-success\">\n<p><strong>TIP: Delayed loading of scripts<\/strong><\/p>\n<p>Do you have an external script such as a Chat widget? In that case, opt to load this in subject to a delay, e.g. after 3 seconds. By this means, that script will not have any impact on the initial page load time.<\/p>\n<\/div>\n<h2 id=\"tip8\"><strong>8. HTTP\/2 allows you to load more files at the same time<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-8448\" title=\"Activate HTTP2 to make your website faster\" src=\"https:\/\/www.combell.com\/en\/blog\/files\/Activate-HTTP2-to-make-your-website-faster.png\" alt=\"Activate HTTP2 to make your website faster\" width=\"175\" height=\"147\" srcset=\"https:\/\/www.combell.com\/en\/blog\/files\/Activate-HTTP2-to-make-your-website-faster.png 1000w, https:\/\/www.combell.com\/en\/blog\/files\/Activate-HTTP2-to-make-your-website-faster-300x251.png 300w, https:\/\/www.combell.com\/en\/blog\/files\/Activate-HTTP2-to-make-your-website-faster-768x644.png 768w\" sizes=\"(max-width: 175px) 100vw, 175px\" \/>HTTP\/2 is the new version of the HTTP transfer protocol. It is the successor to HTTP\/1.1 that dates back to 1999, and it improves the old protocol significantly in various ways:<\/p>\n<p>- <strong>Multiplexing<\/strong>: At version 1.1, the protocol can only retrieve the files one by one; moreover, nowadays most websites retrieve content from multiple sources, such as advertising networks, content delivery networks, etc. However with HTTP\/2, multiple files can be transmitted simultaneously over a single connection via multiplexing.<\/p>\n<p>- <strong>Header optimisation:<\/strong> redundant headers are removed and the remaining headers are compressed.<\/p>\n<p>-<strong> Server push<\/strong>: the server does not wait until the client initiates a connection but sends sources proactively to your visitor\u2019s browser. The server knows, as it were, what content the browser needs to render the page and will push these data to the browser.<\/p>\n<div class=\"bs-callout bs-callout-success\">\n<p><strong>TIP:<\/strong> With Combell, you can easily enable HTTP\/2 via your control panel. Read more in our article: <a href=\"https:\/\/www.combell.com\/en\/blog\/boost-loading-speed-with-http2\/\">Boost the load speed of your website with HTTP\/2.<\/a><\/p>\n<\/div>\n<h2 id=\"tip9\"><strong>9. Make use of Varnish\/Redis caching<\/strong><\/h2>\n<p><strong>Caching via the server<\/strong> is a technique used primarily for dynamic pages \u2013 those which are composed on the fly when a user visits them. Data are retrieved from a database and inserted into the website\u2019s template. The result is then displayed to the visitor. This could be your product page with images, descriptions and prices, for example. Or pages produced via a Content Management System like WordPress.<\/p>\n<p>If certain pages do not change, or change only occasionally, it is not really necessary to rebuild them upon each visit \u2013 it is smarter in this case to hold them in cache at the server.<\/p>\n<p style=\"padding-left: 40px;\">There are various technologies for this, such as Varnish and Redis. Our article <a href=\"https:\/\/www.combell.com\/en\/blog\/make-your-website-lightning-fast-using-caching\/\">Make your website lightning fast using caching<\/a> gives you a clear explanation of how this works. Our e-book about caching, and more specifically Varnish, provides you with a practical guide to best practices for caching.<\/p>\n<p style=\"text-align: center;\"><a class=\"cta_button\" href=\"https:\/\/on.combell.com\/en\/ebooks\/lightning-fast-sites-with-varnish\" target=\"_blank\" rel=\"noopener\">Download our Varnish e-book<\/a><\/p>\n<h2 id=\"tip10\"><strong>10. Let your visitor\u2019s browser cache as well<\/strong><\/h2>\n<p>In addition to caching on the server, you can also have files stored in the <strong>visitor\u2019s computer\u2019s cache<\/strong>. When the visitor lands on your website for the first time, your code is sent from the web server to that visitor\u2019s browser. It is not necessary for all content to be sent again each time your visitor returns to your website. You can save a lot of time by fetching files from the cache as opposed to loading them via the network again.<\/p>\n<p>You can add an expiry date that tells the browser how long it should retain the asset in the cache. If, for example, you set the expiry date to 1 month, the browser will display that image from cache for a month and not request it from your server. Setting an expiry date can mean a massive time saving!<\/p>\n<p style=\"padding-left: 40px;\">The HTTP headers are an instruction to the browser as to the validity of the file. If the page is stored in cache, the file is fetched from there rather than from the server until the cache has expired. As soon as the cache expires, the file is stamped as such and a new version has to be fetched from the server.<\/p>\n<p style=\"padding-left: 40px;\">Include the Expires Header\/Cache-Control code in your .htaccess file<\/p>\n<p style=\"padding-left: 40px;\">Depending on your setup, you can then configure how long certain type of assets are to be cached. The code for configuring this is processed in the .htaccess file.<\/p>\n<p style=\"padding-left: 40px;\"><strong>Example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">ExpiresActive On\n\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType image\/webp \"access plus 1 year\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresByType image\/svg+xml \"access plus 1 year\"\n\nExpiresDefault \"access plus 1 month\"<\/pre>\n<p style=\"padding-left: 40px;\">In this example we keep all images in cache during 1 year.<\/p>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/www.byte.nl\/kennisbank\/optimaliseren\/expires-header-en-cache-control\" target=\"_blank\" rel=\"noopener noreferrer\">Read more about Expires Header \/ Cache-Control.<\/a><\/p>\n<h2><strong>Contact our Performance Team for tailored advice<\/strong><\/h2>\n<p>There you go... We have now shown you 10 ways in which you can improve your website so that it loads faster and delivers better performance. You may still have questions about all this, or perhaps these tips have not resolved your specific problem. If so, our <a href=\"https:\/\/www.combell.com\/en\/blog\/performance-team\/\">Performance Team<\/a> will gladly work with you to establish where the bottleneck is and what options are available for addressing it.<\/p>\n<p>Would you like a faster website but lack the necessary technical knowledge? Our <a href=\"https:\/\/www.combell.com\/en\/managed-services\">Managed Hosting<\/a> could be the answer to that. We look after the technical side so that your website runs like clockwork. And you can focus on your core task: selling your product and making your users happy!<\/p>\n<p style=\"text-align: center;\"><a class=\"cta_button\" href=\"https:\/\/www.combell.com\/en\/performance-optimisation\">View our tailored, high-performance solutions<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A fast and high-performance website makes for happy customers! But there is always room for improvement, hence these 10 advanced tips for making a well-performing website run even faster!\u00a0 Additional...<\/p>\n","protected":false},"author":1,"featured_media":8451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[63],"tags":[210,32],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster.jpg",1200,420,false],"thumbnail":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-50x50.jpg",50,50,true],"medium":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-300x105.jpg",300,105,true],"medium_large":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-768x269.jpg",768,269,true],"large":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-1024x358.jpg",1024,358,true],"1536x1536":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster.jpg",1200,420,false],"2048x2048":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster.jpg",1200,420,false],"post-featured":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-850x290.jpg",850,290,true],"post-featured-opt":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-750x256.jpg",750,256,true],"post-featured-opt-md":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-850x290.jpg",850,290,true],"post-featured-opt-sm":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-485x165.jpg",485,165,true],"post-featured-opt-xs":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-375x128.jpg",375,128,true],"post-most-popular":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-50x50.jpg",50,50,true],"post-author":["https:\/\/www.combell.com\/en\/blog\/files\/Advanced-tips-for-making-your-website-even-faster-60x60.jpg",60,60,true]},"uagb_author_info":{"display_name":"Combell","author_link":"https:\/\/www.combell.com\/en\/blog\/author\/blogadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"A fast and high-performance website makes for happy customers! But there is always room for improvement, hence these 10 advanced tips for making a well-performing website run even faster!\u00a0 Additional...","_links":{"self":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts\/8438"}],"collection":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/comments?post=8438"}],"version-history":[{"count":5,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts\/8438\/revisions"}],"predecessor-version":[{"id":10280,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/posts\/8438\/revisions\/10280"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/media\/8451"}],"wp:attachment":[{"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=8438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/categories?post=8438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.combell.com\/en\/blog\/wp-json\/wp\/v2\/tags?post=8438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}