Website optimization is an important aspect for any site owner in order to provide a smooth experience to their site visitors. Users visiting slow loading sites tend to quit faster and also never return again. This will directly impact the revenue and reputation of the site.
The impact on site performance happens mostly during the following points:
- When the web browser gets the HTML code
- Reading CSS and
- Loading image files
This article explains the best practices to be followed to optimize your webpages in the front end.
Reduce The Size Of The Page Rendered
The first and foremost thing is that the webpage should be as light as possible and it should be of less size. There are two things involved in cleaning up the site.
- Cleaning up the content such as images and files.
- Identifying and cleaning up unwanted or obsolete code or rewriting a code in a more efficient way.
Cleaning up the front and back ends will not only load your site faster but also offer better user experience.
Minimizing and Compressing The Static Files
Reduce HTTP Requests
Remember each CSS, JS and images files on your site send a separate HTTP request to the web server for loading. When a webpage has lot of files, most of the time while rendering a webpage is spent on downloading these files. So it is important to reduce the number of components which in turn will reduce the number of http requests sent from the page. This ensures that the webpage loads faster.
But reducing HTTP requests usually won’t be possible as we may require rich applications to run in the webpage. You can consider the suitable methods explained in the below sections to reduce number of http requests.
Combining Static Files
Similarly all the CSS files loaded in a page can also be combined to a single CSS file. Minification of the generated combined files as explained earlier will also help in the faster download of the static file.
Load Files from Different Domains
When a static file is loaded, all the subsequent components wait till the download to get completed before even attempting to download the next one. This behavior of the browsers will definitely increase the time needed by a webpage to load.
Parallel download of the components is possible when the components needed are evenly distributed across multiple domains. Especially images can be loaded from the subdomain of a site so that they can be loaded in parallel to other content.
Loading Static Files Dynamically
In most of the cases all the components which are downloaded while accessing a webpage is not needed on page load itself. There are components which are needed only on certain actions carried on the page like clicking a link, hovering over particular text or image. Such components can be loaded at a later point of time.
Once such components are identified, we should be able to delay the download of these components. These event driven components can be made dynamically loaded which will reduce the number of components getting loaded at page load and instead will be downloaded only when that particular event is triggered.
Similarly the image components that are needed only on any particular actions or events can also be downloaded dynamically.
Lazy loading is a concept by which the objects or components are deferred until the point where it is actually needed.
Usually when a page loads, the whole contents of the page are loaded. This will make the size & weight of the page heavy, not to mention the number of http request. On analyzing further on this, there will be some portion of the page which will be below the user viewable area and hence remains unused or not needed on page load. Identifying such area will help in implementing lazy loading concept.
Spriting of Images
Usually a webpage with multiple images will take longer time to load as the images is the heaviest component and downloading them will take lot of time and generates multiple http requests. These images may be as small as icons, buttons background images etc. And each time such images are needed a new http request will be triggered. Using image sprites is a best way to improve performance of a webpage.
An image sprite is a collection of images put into a single image. The individual image can be displayed by specifying the background position in CSS. This will reduce the page loading times, bandwidth usage and server loads.
Inline scripts and styles are not a way of best coding and also it is hard to get a good overview. There are lots of disadvantages in using inline scripts and styles.
- The size of the HTML rendered increases and it becomes heavier.
The caching can be improved by using scripts and stylesheets externally to improve the loading speed of a webpage.
CSS At The Top and Scripts at Bottom
Putting style sheets or CSS files at the top of a page and that too in the head tag makes a page appear to load faster as it allows the page to render progressively. Progressive rendering usually gives the user an experience that the page is getting loaded much faster.
Moving the JS files to the bottom of the page improves the performance of the page. But the limitation in such cases is that any script which does the document writing or DOM manipulation during the page load time itself will be affected.
There are another solutions where deferred and asynchronous scripts can be used. Deferring a JS file is similar to loading the JS file at the bottom of the page.
Remove Duplicate Scripts and CSS
If an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.
Use Cookie Free Domains For Components
Make sure that all static components are requested with cookie free requests. Thus creating a cookie less domain and hosting all the cookie independent components (like images) in that domain will increase the performance of the webpage. Mostly the image components do not require cookie information and hence all the images can be loaded from a cookie less domain.
Container Binding For Event Handlers
On a webpage there will be several events binded for a particular functionality. For example, triggering a popup when clicking on a link. These events may be bound individually on the page load. This will prove more expensive if there are multiple events like this are binded to the DOM elements.
On a performance aspect all the event handlers can be contained together in a single container. The binding can be done at the container html element level and invoked on performing any event on any html element within this container.
This will reduce the individual binding for each event and hence will improve the performance of the webpage on page load.