frontend

improving a website’s performance – part 1

/ bonnu18 / 1 Comment

If we had to look back to the dial-up days and compare the internet and overall world wide web experience, we can all agree that the improvement, particularly in speed, was life-changing. Yes I dare to use that word. Nowadays we are able to download large chunks of data in a bat of an eye but we should not rely on such commodity and become lazy developers knowing that the reliability of the internet will cover our mistakes. Instead we should always seek ways how to improve our product, in this case a website, and make sure that the user has a better user experience. Therefore, here’s my take at improving a website’s performance using simple tricks, methodologies and implementations.

Minify resources

When I code I like to keep everything structured and formatted, including the source code itself. It easier to read and maintain but the same structure is being processed and outputted by the web browser. Therefore the user would be downloading extra unnecessary characters such as carriage returns, white spaces, comments and any other characters that if removed the source code would still function as supposed to … not cool bro! Minify your resources, mainly JavaScript and CSS files(but it could be any file you’re serving over the web), to make file sizes smaller. More recently, latest minification processes also shorten variable and function names to further reduce the character count in that file. The main advantage of reducing a file size is to consume less of the user’s bandwidth and therefore loading the website faster. There are loads of tools, applications and online tools, that can be used to minify your files. I’m sure that a quick Google search will guide you to the right places.

Minimise HTTP requests

Every time a user visits your website and each web page on your website, or even if the same page is refreshed, the user is downloading all the resources needed to load the page. Every refresh … download … resources … let that sink in. Said resources would include the HTML itself, images, stylesheet files, JavaScript files along with other files being requested on page load. And for each and every file an HTTP request is triggered in order to get the data. These HTTP requests can be minimised by combining certain files together into one file, such as reducing 5 different CSS files into 1 CSS file which translates to reducing 5 HTTP requests into 1. Having said that try to combine files intelligently. If a certain JS file is specific for the Gallery page only, don’t combine it to the “main JS file” where it is being called by each and every page.

Optimise images

To further reduce the user’s bandwidth consumption consider optimising your images which could easily be the most resource hungry files in your website. Certain graphics can be generated with CSS instead of an image. For instance, set the background color of a button using CSS instead of setting the background image property and pointing it towards an image. Other times you have no choice but to use the actual image, such as when displaying your product. In that case, optimise your images starting off with reducing their sizes. It’s useless making the browser download a 2500 pixel image to be then set to 500 pixels and set as a thumbnail of your product. Use image editing software to resize your images. While you’re at it, why not compress the image too to further reduce the image size? Compressing images reduces the image quality by removing “extra” colour profiles and tags which are not required for the web but will still make it look great when viewed in a website. Photoshop has a specific feature for that, Save for Web. Lastly, save your images in the correct format. Stick to JPEG for images and PNG for graphics and avoid using BMP and TIFF.

In this first part we had a look at ways how our website’s response time can be improved. In the second part, we will discover other beneficial implementations and also tools that can be used to grade our website’s performance. Stay tuned for more and until next time,

Bjorn

loading a video at client-side level

/ bonnu18 / Leave a comment

Imagine a scenario where you want to load media, or any other form of content, from the user’s computer rather than retrieving the content from the web server and consuming bandwidth every time the pages is loaded or refreshed – and this can be quite pricey if the content you’re loading is a video. That being said, having a web application that can access the user’s file directory poses a serious security threat as this makes the user’s computer vulnerable to threats with not so friendly intentions. So, whilst keeping this security issue in mind, let’s create a scenario where we retrieve the HTML, and other web content such as CSS and Javascript, from the web server but load the interactive content from the file directory.

Let’s start by creating a simple HTML file and add a HTML5 video tag linked to a video.


<html>
<head></head>
<body>
<h1>Hello World</h1>
<video width="640" height="360" controls="controls">
<source src="./PlayStationStartup.mp4" type="video/mp4">
</video>
</body>
</html>

view raw

videoclientsideone.html

hosted with ❤ by GitHub

Run this on your browser and it should look something like this.

1

At this point let’s try and mimic the behavior of a web server by loading this HTML file on the Internet Information Services(IIS). I created a simple web site with a specific port(3001) and set it’s directory to where the HelloWorld.html is. Typing http://127.0.0.1:3001/helloworld.html in the browser’s address bar loaded the page as intended and the video still running just like it was before. So far so good. At this point the video is still in the same directory as the HTML file. I re-modeled the file system and created the following structure:

ROOT
– Server One
– – HelloWorld.html
– Server Two
– – PlaystationStartup.mp4

Server One is the web server where the HTML file is hosted and Server Two is the location of the video on the user’s computer. When I tried to edit the source of the video and changed it to the direct path, the video did not load and the following error showed up in the browser’s console.

2

One way to work around this is to host the video on the IIS at client-side and then make a reference to it, specifically by its port and file name, from the HTML file. I created another site on the IIS and mapped it on the new Server Two folder. I then edited the HTML file and the value of the source attribute was changed as below.


<html>
<head></head>
<body>
<h1>Hello World</h1>
<video width="640" height="360" controls="controls">
<source src="http://127.0.0.1:3002/PlayStationStartup.mp4&quot; type="video/mp4">
</video>
</body>
</html>

view raw

videoclientsidetwo.html

hosted with ❤ by GitHub

The web page was refreshed and the video loaded as intended. Even though the above is one way to load content from the user’s computer I still think that ideally content should be retrieved from the web server. However, in case of a closed environment and with certain strict conditions, it’s good to know that there are alternatives.

Adios,
Bjorn