Website Performance

So you want to improve your website performance? Well, here is a brief intro to the topic for the non-technical user and website owner. Within this article, we will introduce the business person of today to the fundamentals of improving your website, so that you can better meet your target audience and provide better returns on investment. We will therefor be keeping the tech jargon low, but we will define some of the very 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 on 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 gotten from your properly configured Google Analytics and Tag Manager account.

Please be aware, that most of the tools analyze single page loads. Users who visit multiple pages, maybe able to view sequential pages faster due to caches in the browser of commonly used files. This includes Images, CSS and Javascript files.

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 sites performance, while leading you with 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

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

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. Its a bit more complex then the Google Web Speed tools but it offers more features, tests and matrices including SEO, Accessibility and others.

Google Web Speed

For those not looking for a online option, we recommend Google Page Speed Insights for website speed testing. This is a quick web based tool similar to lighthouse. Its a great, easy test for most people can 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 to 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 a 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 sites page speed is its total size. This includes all HTML, Javascript, CSS and fonts the site requires to show the site. This is important, because it will hint at the consumption of network bandwidth required for a user to see the webiste.

But please, do not over emphasis this value. There are techniques, Like Lazy Loading, Defering 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.

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 important 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. The limit on them is that not all browsers fully support them. And even Microsoft is known to charge for their support. This leaves the user to a few methods to distribute the right image to the right users. A professional can help, but if you’re using a CDN, then picture tags are your only option. For WordPress Users, a few plugins also provide these features, while Cloudflares professional (Paid) accounts can also help.

Caching

There are multiple types of caching which can drastically improve the page speed of websites and web based systems. Cashes work by storing the rendered results so that 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 first byte. They also can reduce server loads, and can have a compounding impact on overall 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 an amazing 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 of the 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 utilized by google. It’s a technology still in beta. We do not recommended for most due to incompatibility and changing specs. Please read more in our AMP documentation. In some cases, it can lead to incredible access to your site. But it only works when the user access your site from Google. AMP can also impact your user privacy, and some social networks and users have started to take note.

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 amount of emphasis on its results. Still, faster page speed can increase your returns, especially when paired with advertising.