We can also minify this, using an HTML minifier. Often you can see there are CSS and Javascript mixed with the HTML. Often HTML pages have inline CSS and inline JS. The last file we will look at minifying is the HTML itself. Here we can see that minifying the CSS has made a saving of 33KB, the file has gone from 100KB to 67KB. To do that copy the CSS and paste the css into the window to minify. Like UglifyJS there is a tool we can use called CSSNano that will minify CSS.
Looking at this file we can see that the content is also not minified. Javascript is not the only file type we can minify, let’s look at CSS next.Ī quick search for styles.css in the network tab filters the results. Pasting in contents of this file gives us a saving of 42.5% on this file, from 19kb to 11kb. To do this we use a tool called UglifyJS.Īll you do is copy and paste the contents of the script into an online minifier. When this happens we still have the option of minifying it ourselves. Sometimes you will come across a javascript file that is custom and does not have a. Let's see if there are any more scripts we can improve this way? This is the same file as the original, except it has had all unnecessary characters removed. To load the minified version of this file you add. So let's take this URL, copy the address and load the file in a new tab. I know that they also offer a minified version of this file. In this example, the JQuery file is not minified as there are comments and it is easy to read. Using Chrome Developer Tools we can find the file by filtering on the network tab for JQuery. Minifying removes all the unnecessary information like spaces, comments, etc.Ī common mistake I see often is using an un-minified JQuery file. Minifying files such as Javascript, CSS styles and HTML, will make them smaller. Wrapping Up, Factors affecting Website Performance.Let's look at some of the improvements we can make. Would you wait 57 seconds for a website to load? Meanwhile, Trader Joes finishes at 57 seconds. The BBC site takes 13.1 seconds to finish, a very respectable time on this type of connection. You can see that the two sites return some HTML at around the same time. This is running on a mobile device using a fast 3G connection. Your browser does not support the video tag. Using a tool like WebPageTest we can compare website speed side by side and create a comparison video. Now we have these numbers what is the difference in user experience. Once the page has loaded we can see the page weight comes in at a much larger 7.7mb. Now let's take a look at a site with large files, Trader Joes. Once the page has finished loading we can see that it has transferred 882KB. Click on the Network tab, then refresh the page. We can then get the total byte size (or page weight) using Google Chrome.įirst, let's look at the BBC, you can open up Developer Tools by right-clicking the site and choose ‘Inspect’.
Let's find a site with small files and a site with big files. So what does a fast website feel like compared to a slow one? Let's take a look at an example. The golden rule of page performance is to make these files smaller. The files on your webpage are getting bigger. It’ gone up, but only by 16 and not at the same rate as page weight. These requests to files like CSS, javascript, images, etc are not going up at the same rate.
Minify text archive#
HTTP Archive also tracks the number of requests sent from a page. With some pages creeping up above 7mb and it’s not that the sites have more files. In July 2019 the average size was under 2mb. The size of pages on the web is increasing. HTTP Archive has been tracking the page weight of sites since 2010 and there is a clear trend.
0 kommentar(er)
