This tells the browser to wait to load them rather than loading them in the order they appear on the page. This is pretty simple — You can add a bit of extra code to your website that will instruct the browser to either defer or load async or both :.

Nerd Note: Async and defer are not technically the same thing. But, for most of us, the difference is mostly semantics. Nevertheless, feel free to go down the rabbit hole and find out more about the subtle nuances.

If you want an easier way to handle this step, consider using the JetPack Boost plugin for WordPress. JetPack is a free plugin suite that gives you all kinds of tools to optimize the speed and performance of your website.

Notably, you can choose to defer loading non-essential JavaScript with a simple click. The plugin will render your site in the background and show your score, plus options for improvement.

To defer non-essential JS, simply click the toggle to enable it. Alternatively, if you have a lot of separate styles for different devices and browsers, you may want to split your stylesheet into multiple files and use a media query import to only load the appropriate styles.

But if your header has a lot of images or you have a video at the top of the page, then it may be worth investigating how to optimize these assets to improve initial load speed.

See below for more details on how to approach optimizing. Same as above. CDNs can help load your whole page faster, which gives a small boost to FCP. See below for more details on using a CDN. If you only paid attention to First Contentful Paint, you may think that all you need to do to crush your PageSpeed Insights score is defer and load all of your resources later to make that top portion of your website load quickly.

First Input Delay is also related to Total Blocking Time TBT and Time to Interactive TTI metrics. In other words, if your code takes a long time to finish loading, it will prevent the user from interacting with the website, and there will be a delay or lag time between when they click to when the action takes place.

First Input Delay is based on real-world user data and Core Web Vitals. In terms of improving the performance of these three metrics, the solutions are also similar but not identical.

You can think of JavaScript like a separate train track for the browser. So the longer it spends reading and executing the JavaScript when the page first loads, the longer the delay will be if the user begins interacting with the page.

One usual suspect for slow input response is that the website is still loading in all kinds of third-party tools, widgets, and apps to your website. Every time you add things like Facebook, Drift, Intercom, HotJar, or other third-party tools and services to your website, it adds a bit of code that will need to be loaded and rendered on the page.

So if the browser is trying to fetch some JavaScript from a third-party website on a slow server, it could cause significant delays. And you probably only use a few of them.

To get a full list of the third-party JavaScript loading on your page, refer to your PageSpeed Insights report or run a separate Lighthouse report. Now, using this information, you can decide which of these are critical and which can safely be removed.

Looking at the PageSpeed Insights report, you should see a section that references unused JavaScript:. The most common way to speed up load time is to reduce file size. And with JavaScript, there are two main strategies:.

Either of these could help make your code more performant. Largest Contentful Paint LCP is a metric that measures how long it takes for the largest block of content on a page to be visible to the user. Unlike FCP, it looks at the load time for the largest block of image or text on the page regardless of its position or order.

Before you begin working to optimize your LCP, you may want to determine which part of your page is considered the largest block of content. You can do this by using Chrome DevTools in your browser to identify the LCP resource on any specific page. Removing or deferring render-blocking resources can help the main content load more quickly.

But keep in mind that if these resources significantly change the layout or structure of the page, it could actually change which block is considered the largest and slow down LCP rather than improve it!

You can take this strategy one step further. The HTML of your website, along with all other resources such as images, stylesheets, and JavaScript files are transferred using this protocol. One way of solving this problem is reducing the number of requests. This is a good approach in any case.

Fewer resources required to render your website is always going to result in faster page load times, but there is another way to avoid this overhead. The details on how to do this will depend on the hosting provider you use.

Among them is the ability to send multiple files at the same time, over the same connection. This avoids the overhead of multiple requests. Many websites use graphics heavily. For example, websites sometimes use images with 2x or even 3x resolution so they are displayed well on high-density displays such as retina screens.

But if your users are not using a HiDP display, then you are just wasting bandwidth and increasing the load time for your visitors, especially if they are on slow mobile data connections.

You can read this MDN guide for using responsive images correctly. Specifying multiple image sizes will allow the browser to select the appropriate image based on screen resolution. Shopify has a good guide on how to do that. Make sure that you use the correct file type too!

Use JPEG for images with lots of colors e. Serving static files can get tricky. Luckily there are services designed especially for this: Content Delivery Networks or CDN.

CDNs will optimize the delivery of static files such as CSS, images, fonts, and JavaScript to your visitors.

Setting them up is usually very simple. CDNs use geographically distributed servers. What this means is that the server closest to your visitor will be serving the files.

So the load time for e. Generally, when serving static files from your own servers, the load time increases when users are physically far from the server. You can use Sematext Experience to monitor the performance of files hosted on CDNs so you can actually measure if outsourcing this part of your infrastructure makes sense.

When we first started using a CDN for serving assets for Sematext Cloud we actually used Sematext Experience that showed that we were indeed serving things faster to our users. Fig 1. Experience chart showing the avg. load time for the top five slowest domains.

Mobile devices are eating the world. Or so I am told. You should check what your users are using a RUM solution such as Sematext Experience or even with your website analytics tool of choice e. Google Analytics just in case. Usually, developers write and test websites on their own desktop devices, and only later they optimize the website for mobile devices.

This can often be a painful process, depending on the choices made while writing the website. Fig 2. Experience chart showing the difference between Mobile and Desktop load time performance. But what if, while testing the website we used mobile devices or emulators?

That way we would write for mobile first. The experience would be by default optimized for mobile devices. Then adjusting the website for desktop devices would be a more straightforward process.

We can progressively enhance the experience for devices with more power and screen real-estate. Just remember to also throttle the network and CPU to better simulate the experience of mobile users. Time to first byte , or TTFB, is the time it takes for the browser to receive the first byte of data from the server.

This is therefore a server-side concern but it plays an important role in the overall performance of your website, so you should take some time to improve it.

The main factor under your control when it comes to TTFB is server processing time. Therefore you can try some of the tips recommended by Google to improve TTFB :. A TTFB below ms is considered great. The ms to ms range is considered normal and okay. A TTFB consistently higher than ms will need to be investigated.

And Sematext Experience can help you with that along with monitoring other Web Vitals metrics as well. This ties into the previous point about minimizing time to first byte. You should look into upgrading the hosting service plan or if you are using WordPress, consider using a managed service that is well known for stable and high-performance hosting.

Discover effective methods to reduce bounce rates and encourage users to explore your content. Heatmaps allow you to analyze user behavior and create reports to use that data to improve your website. Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Skip to main content Webflow. Contact Sales. Build a website. State of the art web application security practices. Explore our site plans. Bring enterprise-level security, compliance, and scalability to your website.

Webflow for. Learn how world-class organizations build faster with Webflow. Customer stories. Rakuten uses Webflow to help clients push their business to new levels. HelloSign uses Webflow to empower marketing and design. View all customer stories.

Get started. Free ebooks, webinars, and whitepapers on web design, freelancing, and more. Webflow University. The ultimate course to learn the fundamentals of web design and development. Visit Webflow University. Log in Contact Sales Get started — it's free. Webflow Team. Why is website speed optimization important?

Optimal website performance: Improves customer satisfaction Fast loading speeds and response times enhance customer satisfaction by ensuring visitors can access and engage with content quickly, reducing wait times and frustration. Reduces bounce rates Fast-loading websites keep visitors engaged and inclined to continue exploring.

Increases conversion rates Smooth and snappy site experiences prompt users to take desired actions, such as making a purchase or submitting a form, by minimizing distractions and eliminating navigation barriers. What are the main factors affecting website performance? Here are a few factors to consider: Server quality A server's hardware and location directly determine its performance.

Network latency Internet connections vary depending on user location. Code efficiency Bloated code, such as redundant CSS styles, excessive JavaScript libraries, and improperly structured HTML, can bog down page speeds.

Optimize images Large, uncompressed images can significantly reduce page load speeds by requiring servers to transfer more data to browsers.

Minify HTTP requests When browsers request resources from servers via HTTP requests , multiple stages in the process can introduce latency. Set custom browser caching limits When visitors visit websites and download assets such as images and files, browsers temporarily save these resources locally in their cache.

Leverage Content Delivery Networks Content Delivery Networks CDN spread content across global servers to provide faster delivery to website visitors. Choose reliable web hosting providers Reliable providers host your website on high-performance servers optimized for speed, uptime, and security.

Learn more about the PageSpeed Modules. Speed up your browsing with Google Public DNS Leverage Google Public DNS to improve security and speed of your browsing experience.

Learn more about Google Public DNS. Offload popular open-source libraries Speed up your site by using Google's infrastructure to serve the most popular, open-source JavaScript libraries.

Of all the tools I use, I rely most on this. In addition to providing a performance score and advanced recommendations on how to speed up your site, GTMetrix offers a breakdown of your page content—displaying the resources that take up the most total page size and requests.

You can also filter their recommendations by a specific performance metric. Similar to GTMetrix, Pingdom shows you what elements of your site are taking the longest time to load.

Pingdom also provides an overview of file requests on a page. This feature allows you to visualize all of the resources that are loading for a page and how long each file takes to load. In addition, this is a great tool to see which files are taking the longest to load and evaluate the best solution to improve site speed.

org has been around for a while but often feels like the forgotten site speed tool compared to others. Similar to the above tools, WebPageTest crawls a website and gives specific information about site speed, security issues, and specific code call outs requiring correction.

This helps tremendously when figuring out whether or not issues are persistent or one-off problems. WPT provides a waterfall view with the entire page load, film strip views to see how pages load and pick up on specific layout shifts that occur.

Here, you can dive in to specific areas to improve. For example, you can find HTTP redirect requests, fonts loading with settings that hide text during page load, and large DOM sizes. This is just a sample of what can be found within a WPT test.

Chrome DevTools is the least user-friendly tool among this list. The approaches to website caching depend on the platform your website is developed on. For WordPress for instance, you can use the following plugins: W3 Total Cache or W3 Super Cache.

If you use VPS or a dedicated server, you can also set up caching under your general settings. Implement Gzip Compression Gzip Compression is an effective way to reduce the size of files.

It minimizes the HTTP requests and reduces the server response time. Gzip compresses the files before sending them to the browser. On the user side, a browser unzips the files and presents the contents. This method can work with all files on your website.

You can enable Gzip on your website by adding some lines of the code or via a utility called gzip. Database optimization in CMS Database optimization is the an effective way to increase performance. If you use a content management system CMS packed with complex plugins, the database size increases and your website works slower.

For instance, the WordPress CMS stores comments, blog posts, and other information that take up a lot of data storage. Each CMS requires its own optimization measures and also has a number of specific plugins.

For Wordpress, for example, you may consider WP-Optimize. Reduce the use of web fonts Web fonts have become very popular in website design. Unfortunately, the use of web fonts has a negative impact on the speed of page rendering.

Web fonts add extra HTTP requests to external resources. The following measures will help you reduce the size of web font traffic: Use modern formats WOFF2 for modern browsers; Include only those character sets that are used on the site; Choose only the needed styles This message is provided by the hosting to browsers or search engines when the accessed content of a page no longer exists.

In order to detect and correct a error, you can use error detection tools and plugins. As we mentioned, additional plugins can negatively affect your website speed, so we advise running the resource through external tools for error detection. If these dead links no longer bring any visits and thus never consume your server resource, then you may leave them as they are.

If these pages still have some traffic coming, consider setting redirects for external links and fixing the link addresses for the internal ones. Reduce redirects Website redirects create additional HTTP requests which negatively impact performance.

We advise to keep them to a minimum or eliminate them entirely. First, you should identify all redirects on you page by running a site scan. You can use Screaming Frog to quickly identify redirects. Then you must check if they serve a necessary purpose and leave only the critical ones.

Use prefetching techniques Prefetching entails reading and executing instructions before a user initiates them. The technique is rather common. It works well if you can anticipate user actions and, for instance, load some content or links in advance. Usually, modern browsers allow for prefetching by default as they assume user behavior patterns.

There are three main types of prefetching: DNS-prefetching. The practice entails resolving domains into IP addresses in advance. Link Prefetching.

If you are sure that a user will click on a specific link to navigate to some page, you can apply this type of prefetching. The method is useful for stable user journey actions, like moving to the shopping cart page after one or several items were added.

This approach means rendering an entire page or some elements of it in advance. While prefetching is effective, it requires deep user behavior analysis in to make precise assumptions.

Conclusion Currently, a typical user expects web pages to load less than after 3 seconds. So, we recommend applying a simple yet effective website speed optimization approach: Check and evaluate the key factors of website success, considering conversion, visibility, and usability.

Test your current website speed and prioritize the pages and features that need the most attention in regard to these three factors.

Start your optimization with the most speed-reducing aspects and focus on the pages that define your conversion success the most. Comments 6 Sort by newest. Load More Comments Add Comment. Subscribe to our newsletter Stay tuned to the latest industry updates.

By clicking subscribe you confirm, that you understand and agree to the Privacy Policy. Feb 12, OAuth Authorization Framework: How to Use It and Build Trust Online.