Speed up your website

The website is mainly used by users who do not have a machine that is nearly as powerful as their developer. Therefore, the client often does not realize that the page is rendering slowly. Avoid practices that slow down page rendering and adopt techniques that can make your web pages noticeably faster. Review the most common best practices, summarized in a few concise points, without going into too much detail. They describe both client-side and server-side steps.

6 guiding principles

• Respond to the HTTP request quickly.
• Send as little code as possible to your browser.
• Try to keep the HTML code concise
• Don't waste resources when you use video.
• Write fast JavaScript.
• Stay on top of what your app is doing.

Reduced network consumption

• Check that the server does not specify the Connection: close header in the HTTP response.
• Content compression - enable Gzip compression for everything except images.
• Use HTML5 App Cache – provide your browser with a list of files to keep in hidden memory.
• Store in hidden memory — specify how long client-side or server-side images are kept in hidden memory. This will prevent you from downloading the same image repeatedly.
• Support conditional requests - Store the client-side page in hidden memory and only refresh it when new content is available. The browser queries for new content using the HTTP header If-Modified-Since.
• Be aware of hidden memory when using XMLHttpRequest. 95% of sites forget.
• Do not shrink images by the browser – the server should send the image to the client in the exact size in which it is rendered.
• Combine all the small images into one – Combine all the small images that are typically part of the user interface into one large image and render just the necessary read. If you are loading over 20 images, you should consider combining them.
• If your web application is querying a database, web services, or simply pulling data from elsewhere, keep in mind that the browser is waiting for these calls.
• Do not use HTTP 3xx redirects. It may delay your browser for a few seconds.
• Do not use HTML meta tag refresh. It’s better to use HTTP redirects.
• Use a CDN if your customers are located outside the Czech Republic. Most of the time, it’s enough to use a CDN just for static content. The browser downloads a maximum of 6 sources from one domain at a time.
• Avoid referencing resources on third-party servers, which can be slow.
• The case of the URI matters regardless of how the server’s file system behaves. For the browser and its hidden memory, two files with the same name but different case are different.
• Keep your resources on as few different domains as possible and reduce the number of requests to the DNS server.

Browser responsiveness

• Load your pages in the most modern browser rendering mode. Use HTML5 Doctype or HTTP header X-UA-Compatible. If there is no other way, you can also use the HTML meta tag.
• Use no more than one JavaScript library.
• Always refer to CSS rules in the HTML header. The browser will not start rendering the page until the rules are loaded. Otherwise, the page will render several times from the beginning.
• Do not embed styles directly in HTML using the style tag or in an HTML tag using the style attribute.
• Do not embed JavaScript directly into HTML. The browser has to replace the parser and does not have enough information to optimize the code well.
• Reference JavaScript files before enclosing the body tag, especially if you're targeting older browsers. Be sure to include the attribute async.
• Do not reference the same javascript files multiple times. It sounds obvious, but 52% of sites have duplicate code.
• Replace gradient images with CSS3 Gradients.
• Replace the images for rounded corners with CSS3 Border Radius.
• Replace JavaScript animations with CSS3 Animations.
• For really small images, use DataURI.
• In the video tag, submit the attribute poster. Otherwise, the browser has to download and decode the video just to display the first frame.
• Save JPEG images in the YCbCr 4:2:0 color space. You can use the ability to decode the image using the GPU.
• Do not use browser add-ons – Flash, Silverlight, Quicktime. None of them are faster than HTML5 video tag. These add-ons compete for the computing resources of the computer with the browser.
• If the images are displayed after an action, download them in advance using the HTML5 App Cache (a JavaScript method is required for older browsers).
• Load JavaScript files dynamically only when they are actually needed.
• Try to keep the number of HTML elements in the DOM below one thousand.
• Do not use setInternal, but use DOM Events or requestAnimationFrame.
• Use the document.hidden feature and the Visibilitychange event to stop unnecessary actions when the page is not displayed.
• Use the prerender feature to load one page before the user enters it.

CSS

• Link only to the styles that the page uses. Don't try to put all CSS rules from the entire site into one file to reduce network consumption. It would be at the expense of rendering speed.
• Don't use the @Import command to import additional CSS rules.
• Don't use the !important rule in CSS. This rule puts a significant load on the browser’s CSS subsystem.

JavaScript

• If possible, do not use global variables. Use variables from the outside of the cap sparingly.
• If you call a function inside a loop, call it through a delegate.
• Use the function JSON.stringify and JSON.parse, respectively, for serialization and deserialization. The native features of the browser are always the fastest.
• Store elements in hidden memory – whenever possible, store calls to document.body.all in a variable and use it for longer.
• If you need to iterate through elements, you might want to generate HTML so that the elements are numbered and loop through those numbers. However, it is much faster to use the properties of fistChild and nextSibling.
• Take advantage of the Selector API. The document contains the method of querySelectorAll.
• Minify JavaScript using development or server tools. You save the network and increase JavaScript speed because the variable names are shorter and the runtime finds them faster.
• Use the innerHTML property rather than building a hierarchy of HTML elements yourself. It’s about 10 to 15 times faster.
• Deserialization of JSON is always faster than deserialization of XML. If you have a choice, you should rather pull dynamic data from the north in JSON.

Modern. IE

Take advantage of modern tools. IE, which will automatically check your site. You'll find out if they contain common bugs, suggest recommendations on how to improve their code, and show you how the site will display on a variety of devices.