Omology Guide - Page Speed

Page Speed

Target 2 seconds or less

 

All the techniques you can use to improve performance is known as technical SEO. You can think of it like the foundation of your website. And the stronger the foundation, the higher your site will rank. It’s that simple. So what technical SEO factors matter the most? Two techniques can help set you up for long-term success. They are:

  • Page speed
  • Mobile optimisation

Even if you aren’t web designer or web programmer, don’t sweat. You can improve both and start earning better rankings with a few quick adjustments. We’ll show you how.

Page Speed: A Key Metric for Website Success

Online, you have 2 seconds to create an impression. If your pages take forever to load, you start dropping visitors. In fact, according to Google data, 53 percent of mobile visitors ditch a page that takes longer than 3 seconds to load. That’s more than half of your potential customers – gone! Fortunately, a few key strategies can transform your website into a speed demon.

Why Page Speed Is Important And How To Make A Website Faster

Website page speed is often a neglected feature of a successful online marketing strategy. The longer a page takes to load is a direct correlation to the number of users that give up and abandon your website.   If an e-commerce site makes $100,000 per day, a 1-second page delay could cost $2.5 million a year in lost sales.  On the other hand, a website profiting $100,000 per day that improves their page speed by 1 second would bring in $7,000 more per day. The end goal is to have web pages that load within one-second or less on both mobile and desktops. Three-seconds or less is ok, but to ensure you maximise every click to your website, one or two seconds for a page to load is ideal.  Google provides free Page Speed insights that will rank a webpage’s speed as good, needs work or poor.

Let’s break down what goes into loading a webpage. There are two segments of page loading, the front-end side that the user experiences and then the server-side that is invisible to the user.

The front-end side involves:

  1. Browser rendering
  2. Computer performance
  3. Internet connection speed

These factors affect the server-side of page loading:

  1. Quality of the code and network
  2. Server performance
  3. Location of the server relative to the user

Key Areas to Increase Site Page

Caching

Browsers manually load every file – HTML, image, CSS, JavaScript – each time a visitor lands on your site. Using caching, many of those files get stored remotely on the visitor’s device. Therefore, on each subsequent visit, the browser already has most of the information it needs. And page load speeds improve significantly. You can set timeframes for browser caching within your website’s code. If your site design stays fairly consistent, a year is a normal timeframe. Start by checking in on your caching time limit. A web-based tool like GTMetrix can tell you where you’re at.

Without page caching, a server has to load every element of a page each time that it visits that webpage. Gtmetrix explains, “Sending your user’s cached versions of pages is like giving them photocopies of a flyer.” A cached page lets the server copy the page instead of making it from scratch. This decreases the amount of time it takes the server to display the page.

Optimise Images

Image files tend to be huge, and they weigh your website down. By optimising images, you make those files leaner and smaller. How do you do it? Start by trimming your images. First, choose the right file type: JPEG and PNG files are much smaller (and load a lot faster) than TIFF files. Most stock images and camera pictures are much larger than the size necessary for a website. The unoptimized images cause the browser to perform many steps when loading the page instead of one. When an image is not optimized, the browser has to request the image, rescale it and then render it on to the webpage. This process takes more than one-second and immediately increases loading time.

To optimize an image, using Google Chrome, open a full-screen webpage with the image. Slowly make the page smaller by dragging from the right-hand side towards the left. Watch the image and take note of when it randomly resizes itself. There will be a noticeable jump in the image size. Leaving the browser page at this size, right click on the image and click Inspect. Hover over the URL and the “natural” dimensions of the image will appear. This is the largest display size. Upload the image at this size to ensure a speedy page load.

CSS sprites are another option. A CSS sprite combines all your photos into a single image. The benefit: Your site only makes one image request from the server. Then, your CSS file tells the browser which portion to display on different areas of the page.

Compression

Compressing files makes them smaller and faster to load. Any files over 150 bytes can be compressed, especially CSS, HTML and JavaScript files. Gzip is a favourite tool of webmasters for compressing files. This helps to reduce the amount of data that must be requested by the browser. With images, you can use Photoshop to compress images without losing quality.

Compressing the image can decrease the file size significantly and can affect the speed of the page. The compressing tools recommended by the experts at GTMetrix are kraken.io and Optimizilla.

CDNs

CDNs, or content distribution networks, work by creating many identical versions of your website. Each version is then stored on a server in a different geographic location, which puts a version of your site closer to more of your users. So if your main server is located in Sydney, a user in France would have to go all the way to Sydney to access the content.

Using a CDN, you could put a server in France, providing faster access for that user. Think of a CDN as one of many global server headquarters. Each website associates with the closest CDN to its hosting service. If a website is hosted in America and somebody accesses the site in New York City, they will have a great site experience. If somebody in Germany accesses that same website, they’ll have a much slower site experience. Unlike the person in New York City who located close to the CDN, the person in Germany is farther away and this causes a delay in page speed. They have to connect to the CDN all the way in America.  A website with a global CDN will retrieve website information via the closest CDN instead of the original hosted CDN. The user in Germany will access that website through a German CDN, not the American CDN. CDNs are only necessary for high traffic websites, like a global retail store.

However, if you’re a national store you can also get significant benefits from operating a CDN.  For example, if your website is hosted in New York you may wish to have CDNs for the West Coast of the USA and also in the southern states.  You want to always create the best experience for your customers no matter what their location. Therefore, in terms of page speed, you want a page to load in one or two seconds in whatever location your customer is in.

Minify HTML, CSS and JavaScript

Minifying files means you’re simplifying them. You cut out any unnecessary spaces, commas, unused code, etc. This doesn’t have any effect on the way the page looks. It renders exactly the same. But the HTML, CSS and JavaScript files are smaller.  Use tools like HTMLMinifer, CSSnano and UglifyJS to simplify your code.

Cascading Style Sheets (CSS) CSS are the HTML elements that make a website look the way it does in colour, font and layout. The CSS is responsible for determining the look of your website on various devices. This plays heavily into a website’s ability to load as the webpages cannot load until the CSS downloads and processes. In some code, CSS like font size and style repeats many times when the website only needs the information once to load.

Minifying CSS and HTML is like compressing a picture. It reduces the file size by removing repeat information. This means less information for the server to have to render and decreases loading time. Moving the CSS to the head element of the page will also help page speed. The head element can is between the <html> and the <body> part of the code.

Minify JavaScript In the same way that CSS and HTML are compressed, JavaScript can be tightened to help with page loading speeds. Minifying JavaScript removes repeat information, extra spaces and line breaks. It also shortens parts of the code to improve the server’s speed in reading and displaying the page.

Asynchronous code

In order to make a page load faster, you can also ensure that your code, where possible, loads in the background.  For example, tags such as those provided by Google Tag Manager can load in the background and therefore not slow down or stop other elements of the page from loading.  Check with your tag suppliers (Google Analytics, AdWords, Bing, Facebook etc.) or use Google Tag Manager to load code and tags.


Get us to do the Analysis for you.

Omologist can analyze you pages to identify opportunities to improve speed.

Join Free