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.
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.
Load Order
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. Asynchronous loading allows your browser to load more than one element at a time. It prevents your browser from getting caught up downloading large files, like JavaScript, which tend to load the slowest (and why we recommend staying away from JavaScript if possible). 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.Third-Party Scripts
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.Lazy Loading
If your page needs to contain lots of photos, you can apply lazy loading through JavaScript. Lazy loading allows you to load only images that are “above the fold” on your page. 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. For sites not run on WordPress, Google offers a sample implementation for direct lazy loading and tips for fixing lazy loaded content.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. You can reduce the number of requests by “minifying” your HTML, CSS, and JavaScript files. Minifying reduces the size and amount of your files by combining redundant files and removing unnecessary formatting, whitespace, and code. Best of all, the minification process does not affect how browsers process the page. The following tools will help you minify your files:- HTML Minifier (HTML)
- CSS Nano (CSS)
- Uglify.js (JavaScript)
Text Compression
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.Clean Code
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:Videos
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. Using Youtube to embed videos is the easiest and least expensive option, which is why it’s also the most popular method of embedding. Since Youtube uses third-party Javascript, the native elements of the site load quickly due to asynchronous loading. Keep in mind that some browsers may have problems playing Youtube videos. Also, some Youtube videos may slow down the site, such as monetized videos with lots of ads. 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.Compressing Images
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. You can learn more about WebP here. There are a number of API tools used to compress images, such as Imagify and ShortPixel that integrate seamlessly with WordPress sites. Image compression is also offered through Google’s Squoosh tool and through Microsoft Picture Manager.Share:
