This verifies that the certificate information is valid and correct for the connection. Connections such as DNS Lookup, and TLS negotiation can be initiated beforehand, eliminating roundtrip latency for those connections and saving time for users.Įstablishing a connection to a server hosting a resource takes several steps:Ī brief “conversation” between the browser and server to create the connection. Preconnecting is a speed-optimization function, in which the browser sets up an early connection before an HTTP request is actually sent to the server. SSL/TLS handshake time Link Preconnecting
If you have access to your hosting server and you find yourself using lots of libraries, resources, fonts or SVGs for your clients’ sites, create a subdomain and dump all the resources there. Often times, these resources can be loaded in a single file. Sometimes, in a big project, 10 or 20 external resources may be used, such as multiselect libraries, popup libraries, validation frameworks, utilities and helpers. They can be added to the main stylesheet and avoid 2 or 3 external requests. Sometimes libraries have small dependencies, such as stylesheets. Note that having third-party resources hosted locally help with the QA department. Also, note that the library itself is almost 0.5Mb. Font Awesome is a great library and extremely convenient, but it jsut doesn’t scale to load 1500+ icons and only use 20 or 30. Font Awesome loads a JS file which injects an inline stylesheet first thing in the element and then loads all (1500+) icons. I have optimized a site using Font Awesome icons by removing the library and using the SVGs inline. I have also hosted all Leaflet.js assets locally. I have optimized a map-heavy site by merging some of the Leaflet.js add-ons into one local file (the marker clusterer, the fullscreen functionality and the custom map layers).
I have moved the jQuery library and the slider library locally to avoid any external requests. the admin could pick any of three sliders to spice up their homepage. They were all loaded for convenience and for ease of use (i.e. I have optimized several bloated ThemeForest themes by removing 2 out of 3 slider libraries. Here’s some real life examples: Case Study #1 When you have all your functionality fleshed out, move all third party resources locally. Do you need the slider to load on all your pages or specific pages only? The second step is evaluating the functionality and refactoring the code. Some libraries exists on more than one CDN, so try to use one CDN only. The first step in improving DNS lookup time is reducing the number of hostnames used. Some of the most well known content delivery networks out there are: This functionality includes, but it’s not limited to, frameworks (such as jQuery), sliders, carousels, fonts, icons, validation libraries and more. Number of external requestsĪ complex website may use external libraries to add visual functionality to the front-end. There are two major issues when it comes to DNS lookup times: 1.