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.
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.
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.
Once a user scrolls down the page, the additional images load as needed. Lazy loading speeds up your page speed by allowing your page to load a little bit at a time rather than taking on a massive load of data all at once.
WordPress offers nearly a dozen different plug-ins to easily enable lazy loading for websites. The most popular plug-ins include a3 Lazy Load and Lazy Load, along with Lazy Load For Videos, which works specifically with video content. There’s also Google’s native lazy load, which allows for lazy loading through Chrome browsers versions 76 and later.
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.
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.
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.
A video’s impact on website speeds depends on factors such as how the video is embedded and the number of videos featured on the site.
Hosting the video on-site with no third-party input gives a site full control over the content, such as its appearance. However, hosted videos take the longest to load and can cause difficulties if it requires troubleshooting from the developer.
One last solution is Wistia, which works similarly to Youtube but offers more customization and integration with a Customer Relationship Management (CRM) system. Unlike Youtube, Wistia is not free and involves a bit more know-how to fully take advantage of its features.
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.