5 Quick Ways to Improve your Site Speed for a Better User Experience in 2022

See More

Optimize Image Size and Quality

This speed-enhancing recommendation is almost as old as the web itself, but it is so important it must be said again. Many websites have large images as the Largest Colorful Paint. Basically, make sure you serve the images in the size you need, and compress them well.

Learn More

Optimize Image Size and Quality

Jpg works best for photos, while png is best for graphics. New image formats such as JPEG 2000, JPEG XR, or WebP shrinks image size while maintaining quality. Since it is so important to speed up the load time on mobile, you might consider removing the above-the-fold photo just on mobile, perhaps using a graphic or pattern instead.

Learn More

Optimize Image Size and Quality

As well as reducing the image file size, consider using a Content Delivery Network (CDN). A CDN is a network of servers in distributed locations, so the server closest to the user will serve up your content, speeding up the process.

Learn More

Optimize Image Size and Quality

There are also image CDNs, which will give you more control over how your images are served up.  At Stikky we use Cloudflare but there are other fast CDN providers worth considering.

Learn More

Use Lazy Loading

Lazy loading speeds up the initial loading of a site by only loading those images that are within the viewport. As the user scrolls down the page images are progressively loaded. This technique is so popular and effective that WordPress added a native default loading to all images in version 5.5.

Learn More

Use Lazy Loading

This augmented reality software company’s site is a great example of lazy loading.

Learn More

Use Internal or Inline CSS for Critical CSS

Critical CSS are all the style directives used to display and format the content in the above-the-fold area of a website. Most often, the style rules for a page or website are stored in at least one external file called a style sheet. The browser must fetch the external stylesheet before it is able to render the page.

Learn More

Use Internal or Inline CSS for Critical CSS

The more files the browser needs to fetch, the slower the load time. You may have seen the term “render-blocking CSS”. This means that the page can’t be displayed until the CSS is fetched.

Learn More

Use Internal or Inline CSS for Critical CSS

As a rule, inline style coding is frowned upon, but there are occasions for it, and speeding up the appearance of the critical part of a website — that part that a user sees first — is one of them.

Learn More

Use Internal or Inline CSS for Critical CSS

To be clear, it doesn’t actually speed up the total load time of the page, it just makes it appear faster to the user. This is a job for your developer or ours, and they can either code it by hand, or use an application that will do it for them.

Learn More

Reduce JavaScript Execution

JavaScript files can also block the rendering of a page, making it appear slow to the user. The browser needs to fetch JavaScript files and then execute those files for the page to become interactive among other things, which affects the FID (First Input Delay) score of the Core Web Vitals.

Learn More

Reduce JavaScript Execution

If your site is deemed to have a poor FID, it means that it took more than 300 milliseconds to become interactive. Besides minifying, compressing and consolidating your JavaScript files, you can also use defer JavaScript files that aren’t essential to the rendering of the page, speeding up it’s time to interactivity.

Learn More

Specify Room for Images and Embeds

How annoying is it when a site is loading, you’re clicking a link, then suddenly the page shifts and an ad appears in that spot and that’s what you end up clicking? To solve this, add width and height attributes to the img tag. This will allow the browser to determine the aspect ratio and leave space even before the image is loaded.

Learn More

Specify Room for Images and Embeds

This goes for ads or injected content as well. This won’t make your page actually load faster, but it will sure be less frustrating for the user!