How to improve Core Web Vitals and page load speed became a very important topic when Google began baking this into their core ranking algorithm in 2020. Long ago, they said “The web should be fast.” When Google speaks, it is important to listen – if you wish to prosper online.
Although improving page load speeds can result in better rankings, the other equally important aspect to address is Visitor Experience.
There are few people who enjoy watching rust form, and slow to load web pages engender similar feelings… At the same time, through 2016 the average web page size continued to grow, now at 2.33 Megabytes.
An increase in load time usually results in decreased revenue for e-commerce sites – Amazon say 100ms extra load times costs 1% in revenue!Conversely, making the site faster improves revenue…
Website visitors subjected to your slow loading website are far less likely to return, directly impacting your website’s success – and not in a good way!
Other indicators that should be positively impacted are bounce rates, visitor retention times, repeat visitor rates.
As part of all my small business web design packages, page load speed optimisation is addressed.
Indicative Costs: NZ$300
How to Improve Website Performance?
When you start considering how to improve website loading speed, there are multiple elements to examine. Having a plan of attack helps immensely. The following strategy is how a freelance NZ website designer should approach the task;
- Benchmark – run performance tests on any/all of the services listed below. Copy and save the results. This will be the base measurement against which you judge the results of the improvement work you will do.
- Caching – assuming you have not yet installed a caching system, that is the next step. If using WordPress, start with the $39 WP Rocket Cache because it delivers better performance than it’s competitors. *
- Plugins – Godaddy produced the P3 Plugin Profiler to determine what plugins are hogging resources. If you have any greedy plugins, either find a light-weight replacement. Deactivate and delete plugins that are not mission-critical.
- Image Sizes – make sure they are sized correctly and compressed appropriately. Specify image pixel height and width so that text content can flow around the image space before images load. Use a “lazy load” plugin to only display images as they enter the viewport. (Some caching plugins include lazy load)
- Home Page: are you opening a basket full of recent posts, top 10 posts, posts from various categories, comments, featured pages? That is database-intensive content which quickly adds up in terms of total database requests.
Website Performance Benchmarking
When you are making changes, it is important to check at each stage that what you have just done had a positive result. Fortunately, the web offers a plethora of measurement services. It is important to remember that there are lots of variables, such as;
- Location of the test server vs location of your website
- Connection – dial-up, cable, ADSL, unthrottled etc
Because of this, results do vary between the various measuring services. Don’t worry about the inconsistencies, just focus on the overall load speed trends. Here are the most popular testing platforms;
- Pingdom: performance checks from multiple locations; http://tools.pingdom.com/fpt/
- GT Metrix: a free website speed checking system by a Canadian hosting company: http://gtmetrix.com
- Dotcom Tools: website load speed tests across multiple countries: https://www.dotcom-tools.com/website-speed-test.aspx
- Web Page Test: http://www.webpagetest.org
- Sucuri Performance: performance checks from multiple locations; http://performance.sucuri.net/
Benchmark Website Performance
Run the initial test on 3 or 4 services before you start making changes.
The process makes more sense if you;
- Note exactly what you did to optimize website performance
- Record the result each time you check page load time…
Generally, work on two pages – Home page and an internal page – to monitor page load times after each stage.
Reduce Website Load Speed with Caching
There is no disputing the dramatic benefits that a good caching system can deliver.
User of the popular WordPress CMS system are spoiled for choice with caching plugins. W3 Total Cache, WP Super Cache and Quick Cache are three I’ve used extensively.
These days, as part of WordPress tech Support services, I use WP Rocket Cache on all sites I build and/or provide website maintenance services on. I purchased a Developers Licence for WP-Rocket in order to provide it to all clients.
For non-WordPress sites, caching systems may also be available, depending on the CMS you are using. Even if that”s not possible, there are still many opportunities to minimise load times! Implementing Gzip file compression can usually be done in the .htaccess file, and you can certainly tackle image file sizes!
Plugins – Impact on Page Load Time
Not all plugins are beneficial to performance. A plugin has a quantifiable impact on page load speed, page file sizes and database requests. Indeed, some add hundreds of lines of code to every page, and trigger high volumes of database requests. This can cripple “shared hosting” web servers, and some hosting companies have banned such plugins.
The worst culprits are invariably broken link checkers and related content generators.
Use Godaddy’s P3 Plugin Profiler to determine which plugins on your site are burning up the most resources. The pie-chart graphics show clearly;
- % of resources consumed by plugins in total
- % of resources consumed by each plugin
Should any plugin be consuming a much bigger wedge, consider the alternatives.
Two for One Plugins: In some cases, a plugin serves a dual purpose, allowing you to achieve a couple of desirable outcomes without increasing consumption of resources. An example might be a social widget that offers both Like buttons and Follow links to your social media business pages. multiple purposes.
Be very careful of Jetpack – it is the Swiss Army knife of plugins but is very resource-hungry!
Lite Plugins: unlike beer, the “Lite” version is often full strength without the weight of competing plugins. Sure, it may also be the Free vs the Pro version.
Some security plugins include features that you don’t need to run all the time. For example, the respected Wordfence plugin offers Live Traffic logging which is a bit resource hungry. Turn it off if you don’t need it. The scanner has options for image file scans and ultra-sensitive modes – run those once, and then deactivate them to reduce resource consumption.
I usually run two security plugins, but care has to be taken that the complement each other and not generate conflicts that increase the time it takes pages to load.
If one of your plugins is a Web Application Firewall (WP Ninja or Block Bad Queries), don’t use another plugin that also has a WAF – or deactivate its WAF function.
The WordPress Heartbeat API can sometimes generate high server loads, negatively impacting performance. that slow things down significantly. If you suspect that’s happening, there is a Heartbeat plugin that can minimise this issue.
Images – Dimensions & File Sizes
A great way to trash page load times is uploading images straight from your camera or phone. Your website software probably does not work like social media sites, here images are automatically resized and compressed.
That said, CMS systems like WordPress do have tools available to help you. Every image on the entire site should be optimised to improve website performance. Background images can be awfully big and inserting a 1400 x 1000 pixel image that is not adequately compressed is going to kill your website performance.
In general, JPG images offer the best performance and these should:
- be reduced to the maximum size that they will be displayed at
- be compressed by at least 10% and in most cases 30% still offers good image quality
- have its dimension specified in the page/s within which it is displayed
WP Image Size Limit
This plugin adds an extra setting in the Media Settings section that can be adjusted to a maximum image size. Setting it to 250 Kb allows even large 1500×680 banner images to be loaded. When correctly compressed, these are mostly under 200 Kb.
THIS IS ENFORCED ON IMAGE UPLOAD!
Basically, you cannot upload an image the exceeds the maximum permitted image file size
Batch Processing existing Images in Bulk
There are good plugins for automatically processing images across your website.
My go-to tool is the Shortpixel plugin – https://shortpixel.com and I extend the default limited number of image with a 50,000 Image Processing Plan for $30. The plugin can be installed with the same API key on multiple sites and the 50k Image Plan can be shared across all those sites.
Site-wide batch processing of previously loaded images is easy;
- configure the plugin settings for glossy or lossy compression
- set the maximum image size etc
- set it to work.
The plugin will backup copies of the original images, and the hundreds / thousands of previously generated thumbnails can also be batch-processed.
Shortpixel does a wonderful job of optimising and compressing your entire image library!!
This tool allows you to reduce image file sizes, improve performance and boost your SEO using the WordPress Smush API. It analyses new images on upload and will compress them on the fly as/if appropriate. After installation, images can be processed in bulk;
A running total is maintained.
The PRO Version delivers better performance…
Optimise ALL Images: Use WP Smush to work through all images in the site / media library.
I’ve used it on several sites but overall, Shortpixel gets my vote. A reputable and diligent NZ web design agency would use this or similar tool.
Performance Testing Tools
Where you see a recommendation in GT Metrix or other load speed results relating to “optimise images” you could examine the list to see if there are any very large ones that you can process. The only option is one by one, which is why a fully automated batch-processing tool is a godsend!
Note: GT Metrix give you a link to a compressed version of the file under each image that can/should be reduced. That is very helpful with PNG files as they can be awkward to compress…
- Click the “See optimised version” to open the compressed file
- Right click the image and select “Save as” and make sure the name is identical to the original version
- Use your FTP software to upload the optimized files to the original folder
Specify Image Dimensions: Also examine each image you have added on the page to see if any are being scaled to fit. In Firefox, right clicking an image shows such details;
Each image that is being scaled should be resized to the correct dimensions. Some design themes are not efficient at displaying images, so if there is a site-wide issues with images being scaled, you may need to consider a better design theme. In general, mobile-responsive design themes are engineered specifically to process images in a way that reduces page load times across all viewing devices.
Retina Ready Images:
Not everyone understands that this is Apple marketing at work. It’s a gimmick, where only enabled devices might theoretically show a photo-realistic image… Loading retina-ready images onto the average website is verging on stupid… Yet some website designers will tell you its essential. On the average website’s traffic logs, you will see that Apple visitors make up less than 6% of total visitors. Of those, a very tiny percentage actually have retina-ready devices!
Why punish 99% of visitors with huge images and slow load times?
Home Page – Constrain Complexity
Bear in mind that the Home page is the single most important page. It is where most visitors touch down!
When planning how to improve website loading speed, remember that a fast Home page is crucial to keeping a visitor’s attention long enough grab their interest. Achieving a compromise between highlighting site content and loading it as fast as is possible is the conundrum.
More often that not, less is more… Keep it closer to 1Mb than 2Mb, have it load in less than 3 seconds… To achieve that, trim numbers in terms of posts, comments, slideshows, tags, categories, featured pages & posts, top post lists etc.
External content can slow things down significantly;
- Don’t load the Facebook Statistics for your Fb Business page, only show the Follow buttons
- Same goes for Tripadvisor etc
- If you are running Ads, check what impact your suppliers code is having
- If you are loading external fonts and icons, see if your caching plugin can cache them!
Trial and error, patience and persistence will reward you with can be dramatically improved page load speeds. If you feel that this degree of tedius effort is beyond your pay grade, don’t hesitate to ask for help via a website maintenance plan…