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.

You should enable gzip compression on your HTTP servers. Gzip compression minimizes the size of HTTP responses for certain file types.

It is usually used for textual responses only. This should reduce the load times and save on bandwidth. I already mentioned that you should try to load both JS and CSS in a single request for each.

This is accomplished by minifying and combining separate JS and CSS files into single bundles. Browsers have a limit on parallel network requests so if your website needs 3 requests in total to load, it will be most likely faster than if it had to load 30 different resources.

Developers can use tools like webpack to have the convenience of using multiple files while developing the website and to have the performance benefit of a single bundle when deploying to production.

But in general, combining files means exactly that, all files are copied as-is into a single file. Minification is the process of optimizing the size of JavaScript and CSS files by removing or shortening symbols in the source code. The output is functionally equivalent, but not entirely human-readable.

What most optimized websites end up doing is first minifying JavaScript and CSS files and then combining them into single bundles. That is called synchronous loading. It will continue parsing the page while the script is loaded. There are different prefetching and preloading techniques that you can use to give hints to the browser about which resources will be required to render the page before the browser actually needs those resources.

DNS prefetching. You can tell the browser that certain domain names will need to be resolved to an IP address before the browser actually sees resources from that domain name. This can seem like a small optimization, but it can make a difference when you have exhausted other techniques.

TCP preconnect. Much like the DNS prefetch method, preconnect will resolve the DNS but it will also make the TCP handshake, and optionally the TLS handshake. This should be reserved for when you really know that the next step a user will take is to go to a certain page.

You can instruct the browser to prerender the complete page, along with downloading all the required assets by specifying the URL like this:.

Plugins are reusable pieces of functionality, usually used in content management systems like WordPress or other pre-built website platforms. Plugins give website owners additional functionality such as analytics or the ability to leave comments on blog posts.

But plugins come at a cost. Each plugin will almost certainly load additional CSS and JavaScript files. Some plugins will increase the TTFB time as well because they require additional processing on the server for each page request.

So I would recommend going through your plugins list and making sure that you really need each plugin. You should delete any plugins that are not critical for your website. Caching is the process of saving a version of your files in a temporary storage location — a cache — that can be accessed faster.

There are lots of advantages to enabling browser caching as it can reduce bandwidth consumption, increase load times , reduce latency , and the workload of the server. The main downside is that basically there will always be at least two versions of your website at any given time.

This can cause issues if you are running a real-time service that relies on accurate data but even this can be addressed to some degree forcing subsection of the cache to clear when new data is imported.

The first step to improving the performance of your website is to measure it. Measuring the performance requires specific tools, and ongoing monitoring is a must if you want to be alerted if your changes are improving the performance or if performance is degraded over time.

There are two approaches to website monitoring: synthetic monitoring and real user monitoring. synthetic monitoring where we compare the two types of monitoring.

In either case, we suggest using cloud-based website monitoring tools so you can focus on growing your business instead of building or managing your own tools.

Sematext Cloud offers solutions for both synthetic monitoring and real user monitoring. Try it free for 14 days! Looking for more tips on how to speed up your WordPress website?

Check out this short video below for more details:. Improving website performance can be challenging, especially with the vast differences in devices, connectivity, browsers, and operating systems, but it will have a significant positive impact on your business if your business relies on your website as one of the main channels for reaching your customers.

Spend some time looking into the monitoring tool results, make changes on the website, and then compare the performance before and after the changes. Sematext ensures end-to-end visibility into all the components of your application to help you maintain the performance and availability of your website.

Give it a try! Start Free Trial. Table of Contents Why Is Page Speed Important What Affects Site Speed How to Measure Website Speed What Is a Good Website Speed? Best Practices to Speed Up Your Website 1.

Reduce the Number of HTTP Requests 2. Optimize Image Sizes 4. Use a Content Delivery Network CDN 5. Write Mobile-First Code 6. Minimize Time to First Byte 7. Choose the Right Hosting Service Plan 8. Implement Gzip Compression 9. Minify and Combine CSS, JavaScript, and HTML Files Load JavaScript Asynchronously Consider Using Prefetch, Preconnect, and Prerender Techniques Reduce the Number of Plugins Use Website Caching But first things first.

Why Is Page Speed Important Research shows that the amount of time a user will wait before losing focus is roughly from 0. Analyze with PageSpeed Insights Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through our online tool.

Run Insights Read docs. Speed up with the PageSpeed Modules Run the open source PageSpeed Modules on your Apache or Nginx server to automatically rewrite and optimize resources on your web site. 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.

As time passes, the number of plugins grows, while some of them may not be used anymore. We recommend checking out all the plugins you have installed and deleting unnecessary ones.

First, run the performance tests on your page to find out which plugins are slowing down your website. Not only does the website speed depend on the number of installed plugins but also on their quality. Try to avoid plugins that load a lot of scripts and styles or generate a lot of database queries.

The best solution is to keep only the necessary ones and ensure that they are kept up to date. Minimize the number of JavaScript and CSS files If your website contains a lot of JavaScript and CSS files, it leads to a large number of HTTP requests when your website visitors want to access particular files.

If you reduce the number of JavaScript and CSS files this will undoubtedly speed up your website. Try to group all JavaScript into one and also do so with all CSS files. This will reduce the overall number of HTTP requests.

There are a lot of tools to minify HTML, CSS, and JavaScript files quickly. For instance, you can use WillPeavy , Script Minifier , or Grunt tools. Use website caching In case there are a lot of users accessing the page at one time servers work slowly and need more time to deliver the web page to each user.

Caching is the process of storing the current version of your website on the hosting and presenting this version until your website is updated. 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. Time to Hero Element , or a threshold over a period of time. Performance means efficiency. In the context of Open Web Apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.

Synthetic monitoring and real user monitoring RUM are two approaches for monitoring and providing insight into web performance. RUM and synthetic monitoring provide for different views of performance and have benefits, good use cases and shortfalls. RUM is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term performance issues during development.

In this article we define and compare these two performance monitoring approaches. Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.

There are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load 1 second , idling 50ms , animating Speculative loading refers to the practice of performing navigation actions such as DNS fetching, fetching resources, or rendering documents before the associated pages are actually visited, based on predictions as to what pages the user is most likely to visit next.

Latency is the time it takes for a packet of data to travel from source to a destination. In terms of performance optimization, it's important to optimize to reduce causes of latency and to test site performance emulating high latency to optimize for users with lousy connections.

This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it. DNS-prefetch is an attempt to resolve domain names before resources get requested.

This could be a file loaded later or link target a user tries to follow. The MDN Web Performance Learning Area contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:.

This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.

More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.

In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster.

There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.

Some attributes and the source order of your markup can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience.

This article looks in detail at how HTML can be used to ensure maximum performance. The lowest hanging fruit of web performance is often media optimization.

Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further.

In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible. CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others.

In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted. The good news is, while actual implementation may differ, most performance optimization principles and techniques are more or less the same, no matter what website type or platform you have.

It deals with images, frontend and backend code, caching, hosting, third-party modules, and so on. Based on it, you can find weak spots and plan website optimization. For a modern business, website speed improvement should be one of the overheads like heating and electricity. Otherwise, it's almost impossible to compete in selling products or services.

At the same time, if you speed up web page loading and keep it at the highest possible level, the impact on the user experience and KPIs is invaluable. Maintaining excellent overall site's performance both actual and perceived positively affects numerous KPIs and four crucial constituents of the company's well-being.

Sites with good Google PageSpeed Insights scores get higher positions in SERPs. So, the better your store or landing page performs, the more visible it gets in organic search results.

So, you can expect better organic traffic with more prospects visiting the site. Web pages' load time and the user experience are directly linked. Let's say each consecutive page of your website has a one-second delay when loading. It literally feels like stumbling all the time, causing frustration in users.

If the website is easily replaceable e. Yes, it's not that easy to change something like a bank if its web app lags, but many will definitely consider such a move. The aforementioned aspects naturally influence the essential website metric: the conversion rate. All businesses can relate: it's really hard to increase it, so much so that even fractions of a percent are considered a win.

So, if there's a chance to achieve higher conversion rates on mobile and desktop, shoot for it. In this regard, understanding the nuances of ecommerce conversion optimization can play a critical role in enhancing your website's performance and boosting conversions.

Customer loyalty. Eventually, excellent performance has long-term positive effects on websites as customer loyalty grows too. When more one-time clients return again, you have more flexibility in budgeting.

For instance, spend less on customer retention and acquisition and allocate more for other marketing activities. Now, let's talk numbers. Market researchers, scientists, Google, and other companies have been studying the connection between website speed, user behavior, and critical metrics for decades.

What do you make of these insights? Page speed optimization is one of the most popular services we provide. Complex speed issues tackling bring fruitful results: decrease the bounce, exit, and cart abandonment rates; increase add-to-cart and conversion rates.

We ran a website speed test, and after a major website performance optimization for Timetravels , this Finnish tour provider achieved the following outcomes:. It takes a professional approach and painstaking work to reduce the load time and achieve really impressive results.

And to make them sustainable, there's a need for ongoing technical support: performance testing, looking for occurring bottlenecks, updating and upgrading infrastructure, optimizing new content, and so forth. The need for optimization is here to stay, so you need to prepare for the long haul.

Before we delve into the tips and tricks on how to improve page load speed, we need to determine some benchmarks. Well, there's no strict consensus on how fast a website must be to satisfy users. Several years ago, Google recommended keeping it under 3 seconds for mobile sites because of the dependence between the speed and bounce rate we mentioned above.

Now, experts tend to name the 2 seconds as a perfect speed for both mobile and desktop websites. However, on mobile, you need to put more effort into reaching such a great result.

When it comes to Google, the benchmarking is quite concrete. The largest Contentful Paint LSP metric used to evaluate page loading experience perceived load speed states that if the biggest piece of content above the fold usually an image or text block is loaded within 2.

But you should think not only about the initial page load times but also about interactivity , which is how quickly pages react to users' actions. Eventually, it's also about website performance.

So, the First Input Delay FID and Interaction to Next Point INP , which is to replace FID in , must also be under control. All in all, aiming to pass the Core Web Vitals assessmen t with flying colors is a good strategy. Besides, draw attention to other Web Vitals such as Time to First Byte TTFB; read our guide on how to improve server response time , Speed Index, First Contentful Paint FCP , Total Blocking Time TBT , and Time to Interactive TTI.