Objective: To gain basic familiarity of what is involved with web performance. This includes the following major areas: Reducing overall load time : How long does it take the files required to render the website to download on to the user's computer?

This tends to be affected by latency , how big your files are, how many files there are, and other factors besides. A general strategy is to make your files as small as possible, reduce the number of HTTP requests made as much as possible, and employ clever loading techniques such as preload to make files available sooner.

Making the site usable as soon as possible : This basically means loading your website assets in a sensible order so that the user can start to actually use it really quickly. Any other assets can continue to load in the background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed this is called lazy loading.

The measurement of how long it takes the site to get to a usable start after it has started loading is called time to interactive.

Smoothness and interactivity : Does the application feel reliable and pleasurable to use? Is the scrolling smooth? Are buttons clickable? Are pop-ups quick to open up, and do they animate smoothly as they do so? There are a lot of best practices to consider in making apps feel smooth, for example using CSS animations rather than JavaScript for animation, and minimizing the number of repaints the UI requires due to changes in the DOM.

Perceived performance : How fast a website seems to the user has a greater impact on user experience than how fast the website actually is. How a user perceives your performance is as important, or perhaps more important, than any objective statistic, but it's subjective, and not as readily measurable.

Perceived performance is user perspective, not a metric. Even if an operation is going to take a long time because of latency or whatever , it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips or jokes, or whatever else you think might be appropriate.

Such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up. Performance measurements : Web performance involves measuring the actual and perceived speeds of an application, optimizing where possible, and then monitoring the performance, to ensure that what you've optimized stays optimized.

This idea is illustrated particularly well by a waterfall diagram, one which visualizes how long each resource takes to load completely.

As shown below, frontend content is the culprit on a typical web page:. While this works, the problem is that frontend technology is becoming too advanced for its own good. As web professionals are drawn to new dynamic page functions and experiences, load time gets neglected.

This is why, surprisingly, websites have been getting slower despite improvements in page delivery technology. Even after simplifying your pages, you might experience stalls in performance due to large files. This is where minification comes in. Minification is the practice of deleting excess characters from files like certain spaces, line breaks, and comments.

This information helps developers read the code files but makes no difference to the browsers processing them. Minification is possible with online tools, and WordPress users can leverage speed plugins to minify files automatically. Most content you see on websites are either text or images. Images files are much larger than plain text HTML files, so they take longer to download and render in the browser.

It follows that high-fidelity images will impede an otherwise respectable load time. Luckily, optimizing your images is an easy fix. Each image is another resource to load, so choose yours intentionally.

Next, resize your images to the desired dimensions before uploading them. Lastly, keep files small by limiting image file formats to JPG, PNG, GIF, and SVG whenever possible. Compressing images may also improve load times, but this is a more subjective process — you want your image files to be small enough to improve performance, but large enough to retain enough quality.

Every website follows the Hypertext Transfer Protocol, or HTTP. The web server then sends back a response with the requested resource. In reality, most web pages are complex and require multiple HTTP requests to fully render.

As a rule of thumb, the more complex a web page is, the more HTTP requests it needs. And the more requests made, the slower the page. Reducing HTTP requests may take some time and rethinking of your site, but it could be worth the investment to shave down your load time.

Simplifying a page will reduce the amount of requested resources, so start there if you can. Also, be wary of external resources, resources fetched from third-party servers. External resources can be embeds like images, videos, and other media, as well as external font packs, display ads and affiliate links, and widgets — all require additional HTTP requests to separate servers and may hurt performance.

Caching is the process of storing data in a place where it can be more easily fetched in the future. When the user returns to the cached web page, the browser loads these files from its local cache instead of requesting them from the web server, saving time and bandwidth. Browser caching is a must for content that is static on your website for longer periods content that changes frequently should not be cached.

How you enable caching will depend on what services you use to build and host your site, but every provider should offer instructions and explain how to set time limits for cached content.

File compression helps deliver files quickly over the web. A web server with compression enabled shrinks down the requested files without loss of information before sending them. When a browser receives the compressed files, it decompresses them and renders them as normal. Smaller files are faster to send and download, so compression is almost always beneficial.

Learn how to enable GZIP compression on your server. Web browsers process each page resource one-by-one. content first visible when the page first loads to work. Developers can remove or defer render-blocking code to give the impression of better performance.

While the majority of web performance optimization practices address the frontend of your website, the right web host is the foundation of a successful, high-performing website. Choosing a plan above shared hosting will help keep your pages fast at all times.

The larger the distance between the device making HTTP requests and your server s completing the requests, the longer your website files will take to send and load.

versus Tokyo. You can remedy this problem with a content delivery network CDN. A CDN is a collection of servers distributed around the world that hold cached copies of your website files. When a user requests your website, your CDN will determine the server closest to their physical location and deliver the files from that server.

As you can guess, the time spent redirecting visitors detracts from performance. The first step of website performance optimization is measuring how fast your website currently runs. The best way to do this is by conducting an online speed test of your web pages. These free tests let you paste in the URL of any webpage, and will return a summary of the page performance.

Many tests also produce an aggregate score quantifying the overall performance of the page and a rundown of which areas contributed most to a fast or slow performance, so you can pinpoint the most outstanding issues on your website and achieve some quick performance wins.

Website Grader provides an aggregate performance score out of which encapsulates the effectiveness of your website. Scoring factors include performance as well as SEO, mobile experience, and security.

It provides an aggregate score from 0 to and is powered by Lighthouse — a score of 80 or above is considered high-performing. PageSpeed Insights is notably rigorous and holds websites up to high standards in terms of performance.

It also provides a detailed but accessible report of important metrics, as well as opportunities — suggestions for speeding up your page — and additional diagnostics which may be helpful. Pulsetic is a global website monitoring tool that provides insight on your website performance including website speed, typical website maintenance, and other customizable reporting ranging from setting headers to response timeouts.

For websites with multiple languages and regions, reports will include detailed regional information like uptime and response times. All of Pulsetic tools allows you to run tests and receive website downtime alerts by phone call, SMS, email, or Slack if your website is down.

Pingdom is a website monitoring tool that also offers a free website speed test. Its results center on changes you can make to boost performance, and it assigns letter grades to each component enhancing or detracting from load time. It breaks down transfer sizes by file type and number of HTTP requests per content type.

Also, Pingdom allows you to run tests from several global locations to simulate how your site performs in these regions. The GTmetrix performance test is one more Lighthouse-powered option — it gives an in-depth summary of performance and suggestions for improvement. It also includes a helpful speed visualization a timeline of screenshots marking each significant load time event , a content waterfall, video recordings of its tests, and historical performance data for tracking improvements over time.

WebPageTest is an open-source testing tool that assesses web performance and security. The right measurement and optimization tools and a winning strategy are the building blocks to driving sales.

Accelerate load times and make freezing a thing of the past with web performance optimization that regularly combs for problems and resolutions. Step up your web performance with an all-encompassing roadmap that gives you an actionable strategy that covers everything from tech to training.

Deliver rich, dynamic content at high speed with a robust, scalable content delivery strategy covering everything from configuration to caching. Eliminate weak spots that risk derailing your site during high traffic events with a pre-peak audit that ensures robust performance under pressure.

Performance Optimization Management Want to meet your performance goals?