Site Optimization

Optimize Images

One of the main reasons for slow load time is huge image file size. We can reduce this by using optimized file format and resizing oversized images.

Convert png to webp

png file sizes are huge, specially for bigger images, convert it to webp to drastically reduce the file size.

If not provided by design, use this online tool to convert images to webp: https://bulkresizephotos.com/en

Serve appropriately sized images

For example, if the container is only 300px, only serve at max 300px width image, anything exceeding that would be a waste.

If you need to make it look crisp/better on retina screen, upload an @2x version of the image and utilize the retina js, which will automatically replace the original image with the @2x only when it is supported, instead of using the retina version as the initial, which would be a waste for non-retina users. (page testers will flag this as oversized, which results to lower score)

Sometimes, the client/user updates the images, and they would assign big images, it is important to add codes to only serve the appropriate image size, use the add_image_size wordpress function for this.

Chrome Lighthouse

Use chrome web browser’s built-in page test tool to view the list of recommendations to improve the score.

Inspect > Lighthouse > Analyze page load https://prnt.sc/lbf-kkxFPE92

Below are some of the recommendations and how to address them.

Reduce initial server response time

This is affected by the state/settings of the server and the php codes it executes.

Minimizing the plugin usage means lesser codes to run.

Unoptimized or resource extensive custom codes also affects this.

Leverage wordpress transients for caching heavy queries, making them load quicker on subsequent requests.

Eliminate Render Blocking Resources

This lists all URLs blocking the first paint of your page. To address this, we need to extract the critical css/js.
And load it inline, the rest non-critical codes will be deferred (loaded later when needed or after the initial complete load).

We will use wp-rocket plugin to automate this.
the plugin works by processing each page, it will identify the critical css, load it inline, and the rest will be deferred. Note, that the plugin will not do this for front-end users that are logged in to wordpress.

These are the settings to enable on plugin for this (already set by default):
CSS: https://prnt.sc/_G1OLNPbnw16
– Optimize CSS Delivery
– Load CSS Asynchronously

JS: https://prnt.sc/jQ-FCjpFpQew
– Load JavaScript deffered
– Delay JavaScrpt execution

in some cases, a site might have issues so test thoroughly and adjust as needed (test with a non-logged in user/incognito)

Largest Contentful Paint element

This is the largest contentful element painted within the viewport which is dynamically identified by the tester through some criteria (this can change per page load). The goal is to make this element load as quickly as possible, prioritizing it above other resources.

These are some of the common culprits on having low score with this metric:

When the LCP element is an image and is lazy-loaded

by default, wordpress adds lazyload attributes automatically to image tags https://prnt.sc/spXsr1MtuRUu

We need to remove or change this to loading=”eager” for images above the fold which will likely to be selected as LCP element.

For elementor image elements, add the class “no-lazy“, this will modify the lazyload attribute https://prnt.sc/9jytKBZzTsNJ (codes at theme/elementor/elementor-customizations.php)
For custom codes using wp image function like get_the_post_thumbnail , set it on the arguments e.g: https://prnt.sc/JPWrB16ATt0a

Note, for all other images (below the fold) apply lazy loading

When the LCP element has entrance animation

Setting an entrance animation (via elementor settings) will only show that element once elementor has fully loaded which delays this by quite a bit. Remove entrance animations to elements that are likely to be identified as LCP element, including it’s container.

Improving load time of LCP Element

We can improve the load time of the LCP element by setting a higher priority to it’s resource request or preloading it.

				
					<!-- sample preload + setting higher request priority -->
<!-- image -->
<link rel="preload" as="image" href="https://site.com/wp-content/uploads/2023/05/image.webp" fetchpriority="high">
<!-- font -->
<link rel="preload" href="https://site.com/wp-content/themes/theme/fonts/font_file_here.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">

Defer offscreen images

Serve images in next-gen formats

convert images to webp format for lower file size.

Any images below the fold should be deferred to make the initial load as quick as possible. Apply lazy loading to offscreen images.

for image tags, add loading=”lazy” attribute
for background images, add the class: “defer-bg-image” to the element or it’s container/parent. https://prnt.sc/_saCkij9cyHx This class forces the css background to not load the image until initial page load is complete (via css & js, codes at main.js)
For older projects, the codes might be missing of is commented out, get the codes at our latest big daddy template js: https://prnt.sc/onT6LM5YoKiW css: https://prnt.sc/Wit-7344vVhn

Avoid an excessive DOM size

Inherently, elementor uses alot html elements. Using some elementor extensions with too many nested elements increases this further. When developing, just keep it as minimal/simple as possible.

Google PageSpeed Insights

https://pagespeed.web.dev/

This is similar to the lighthouse tool above, It may have some other recommendations not covered on the previous test, double check and go through each.

GTmetrix

https://gtmetrix.com/

This is similar to the tests above, It may have some other recommendations not covered on the previous test, double check and go through each.