Website Performance

Do you want to improve your website performance?

Within this article, we will introduce the business person of today to the fundamentals of improving your website, so you can better meet your target audience and provide better returns on investment. We will therefore keep the tech jargon low, but we will define some basic concepts you might run across.

Why does Website Performance Matter?

Research has shown the modern website user is extremely impatient. Companies have found that as little as 1/10th of a second can make a noticeable difference in revenue.

How much difference? Well, lucky for us, Google provides a nice tool for us (requires registration for extended version). Of course, you need to know your conversion rate, which can be obtained from your properly configured Google Analytics and Tag Manager account.

Website Performance also impacts Search Engine Optimization. So, it’s recommended to get the best performance available.

The Best in Website Performance Tuning Services (Advertisement)

Have a slow sight? Contact Proper Programming, LLC now, and let us optimize your site. We have packages that cost as little as $200, and we can increase your return on investment. Please send us a message for a free consultation.

What Makes a Fast Website

Measuring website performance is complicated. The free tools can help measure your site’s performance, while leading you to provide valuable information about what opportunities are met. The information they provide must be interpreted to get the most out of your property.

Free Testing Tools

You don’t know how your site performs? Try one of these recommended two free tools to audit your site’s performance.

Warning: the performance testing tools analyze single page loads and do not address the performance when the user visits multiple pages. Users who visit multiple pages may view sequential pages faster due to caches in the browser of commonly used files. This includes images, CSS and JavaScript files.

Lighthouse Plugin for Chrome Browser (Download)

Lighthouse can be found online, and provides a browser-based testing tool that can be accessed via the Chrome Browser. It’s made by Google and is a good representation of how Google judges performance. It’s a bit more complex than the Google Web Speed tools, but it offers more features, tests, and other matrices.

Google Web Speed

For those not seeking an online option, we recommend Google Page Speed Insights for website speed testing. This is a quick web-based tool similar to a lighthouse. It’s a great, easy test for most people to run.

Interpreting the results

Time to First Byte (TTFB)

Time to first byte is the speed it takes your hosting to get the files and website to you. It does not include any time to download the resource, and is generally a good indicator of an overloaded server. The best thing to do is talk to your service provider to see if something could be done. If they are in-able to solve the problem, a migration to a different host or service might be needed. TTFB issues can also be the result of a poorly optimized database or system. Caches can also be deployed to greatly reduce TTFB times.

Total Loading Size

The first thing to consider when judging a site’s page speed is its total size. This includes all HTML, JavaScript, CSS and fonts the site requires showing the site. This is important because it will hint at the consumption of network bandwidth required for a user to see the website.

But please do not over emphasis this value. There are techniques, like Lazy Loading, Deferring JavaScript and CSS, and Critical CSS, that can reduce the impact of sites that require many resources.

Improvements and Technologies

Some common techniques and technologies can be deployed. These are the ones you shouldn’t be missing, as they have a large impact on performance.

Combining CSS

Combining CSS is no longer recommended. Using this setting will slow your site on most hosting who use HTTP/2 and higher. All quality hosting providers should now offer HTTP/2.

Lazy Loading / Deferred JavaScript and CSS

We as website developers can deploy a few different techniques to overcome large page sizes. Deferring JavaScript and CSS to the bottom of the page, or after the page becomes visible, can help us present our information to the end user faster.

Critical CSS

Critical CSS is the process of putting essential CSS up at the top of the page so that it can load with the page itself. These technologies can drastically reduce the perceived loading time of the page when paired with the deferment of CSS files to the bottom of the page.

Next Gen Images

Next Gen Images is a group of newer compression technologies that shrink image sizes about 80% from their original, with no real change in quality. All major modern (not IE11) browsers now support them. For WordPress users, WordPress is now adopting the WebP standard into its frameworks.

Caching

There are multiple types of caching, which can drastically improve the page speed of websites and web-based systems. Caches work by storing the rendered results, so they don’t need to be reconstructed for each page load. There are many forms of caching, and almost any system can deploy these to greatly reduce response time and time to the first byte. They can also reduce server loads, and can have a compounding impact on system performance.

Content Delivery Networks (CDN’s)

It’s recommended to use Cloudflare or CDN. We found some CDN solutions to negatively impact performance by requiring burdensome JavaScript to run on the browser. JavaScript-based CDN’s can cause speed issues on mobile, as the JavaScript needs to process the website in the browser.

Progressive Web Apps (PWA’s)

Progressive Web Apps (PWA) are a wonderful technology that allows users to install a web page, as if it was an app. Unfortunately, Progressive Web Apps are usually poorly developed, or not properly deployed. But they can offer a great way to get on a few application stores, inexpensively. Progressive Web Apps may also support the development and reuse of online systems in application development.

Accelerated Mobile Pages (AMP)

AMP is a technology deployed by Google. Please read more in our AMP documentation. In some cases, it can lead to incredible access to your site. Yet, it only works when the user accesses your site from Google. AMP can also impact your user privacy, and some social networks and users have started to take note.

We do not recommend for most due to incompatibility, privacy of your users, changing specs, and the URL dependency issue created when someone shares your AMP link, and not the website’s own link.

Common Pitfalls and Problems

Common problems with page speed can be caused by misinterpreting the results of tools like Page Speed Insights. Google recognizes these shortcomings, and thus puts a limited emphasis on its results. Still, faster page speed can increase your returns, especially when paired with advertising.