Page “weight” refers to the overall size of a particular web page, including files like HTML, CSS style sheets, images, and scripts. A “heavier” site loaded with high-res images and videos will generally run slower if not optimized correctly.
According to web performance expert Tammy Everts, 1MB is the ideal size for fast-loading web pages. To get us there, we’ll need to take stock of what elements we can afford to trim and how to minimize file size.
Photos and video are usually the largest data hogs on any web page, accounting for two-thirds of an average web page’s total size. While hosting an introductory video can be a great way to engage users, you’ll want to consider if its usefulness outweighs the drain on page speed.
Images also take a significant amount of time to load, so you’ll want to only include those images necessary for conveying your message. You’ll also want to be aware of the various image formats and the amount of space they consume.
In general, JPEG files take up less space than PNG files. However, for images with less than 16 colors, such as logos, PNG images are usually preferred. WebP is a more recent image format that achieves an average of 30% more compression than JPEG, without loss of image quality.
Text & Code
According to Yahoo, 80% of a site’s load time is spent downloading elements like CSS style sheets, images, and scripts. For every one of these elements, an HTTP request needs to be made, with each request taking up the user’s precious time.
The order in which you load page elements also impacts page speed. Browsers normally load synchronously, meaning each element is loaded one at a time. While it might seem efficient, the system can get jammed up if it encounters a large file. An easy solution is asynchronous loading.
You can also choose to defer loading on certain files. This ensures that the rest of the page loads without delay before tackling the larger files. To see a full list of files, HTTP requests, and your page’s load order, right-click on your page and click Inspect. Then click on the “Network” tab.
Compressing your text files will help reduce download speeds by nearly 70%, according to Yahoo. Gzip is considered the gold standard for easily compressing text files, as it works with 90% of browsers.
Websites assign attributes to represent each element on the page. For example, href attributes are used to link to a particular resource, while src attributes refer to resources on a page, such as images and videos. Browsers not equipped with HTML5 may experience issues if an href or src attribute is left blank. Blank attributes look like this:
In this case, the empty value between the quotation marks may confuse some browsers since it isn’t given a directive. This can result in slower load times as the browser tries to figure what to do. Be sure to enter in values for each attribute in order to prevent any delays.
Hosting too many third-party scripts can also slow down page speed. You’ll want to inspect which third-party scripts are running on your page and determine whether you really need that site tracker or Vimeo embed. You can use Google PageSpeed Insights to get a list of third-party scripts featured on your site.