Need for Speed: Make Your Website Faster

 

Website Speed

 

First of all, how important is website speed? Well, according to Crazy Egg, a 1-second delay in site loading speed causes:
• 11% fewer page views
• 16% decrease in customer satisfaction
• 7% loss in conversions

Not only that, it also makes the site rank a lot lower with Google, so people will be scrolling through all your faster competition in order to find you in the search results. 47% of consumers expect a site to load in 2 seconds or less, and 40% of them will abandon it if it takes longer. Did you know that since 2017 Google has been ranking all search results based on the mobile versions of pages? In fact, since 2015, the majority of searches are performed on a mobile device.

So what site loading speed to aim for? 3 seconds.
Here’s how to get there:

  1. Minimize HTTP requests.

    How many requests does your site need to make? This can be found with Chrome Developer Tools. Right click inspect, then click the network tab. IT shows the name, size and time each page detail takes.

  2. Minify and combine files.

    Get started with HTML, CSS and JavaScript files. Minify and combine them to reduce the size and overall number. A template often has a lot of messy code for built-in features that aren’t being used. Eliminate extra spaces, line breaks, and indentation. Combine multiple CSS and JavaScript files into one. WordPress, plugins like WP Rocket make it easier. Go the “Static Files” tab and check the files you want to minify and combine.

  3. Use asynchronous loading for CSS and JavaScript files.

    So now, some files are combined and minified. Now we can optimize how they load. CSS and JavaScript can be loaded in two different ways: Synchronously (one at a time, in order of placement) or Asynchronously (simultaneously). Asynchronous allows other elements of a page to keep loading when something heavy would otherwise have hung everything else up. Using the same “Static Files” tab of the WP Rocket plugin, check the options next to “Render-blocking CSS/JS.

  4. Defer JavaScript loading. 

    Preventing a file from loading until other elements have. Check the box in WP Rocket for “load JS files deferred”. If you have an HTML site, you need to place an external JavaScript file before the </body> tag.

  5. Minimize the time to first byte.

    Besides the total time to load, you’ll want to know how long it takes to start loading at all. Time to First Byte, TTFB is the time the browser has to wait before getting the first byte of data from the server. Less than 200ms is recommended. The http request to a server host involves a DNS lookup, server processing, and a response. Developer tools > network > waterfall. This can be affected by your overall internet speed. You can also use WebPageTest from a data centre. Anything above 200ms, is probably caused by network issues, dynamic content, web server configuration and traffic. If you have a site built on a template, they probably have “dynamic pages” which means it needs to load the PHP. You can reduce the time it takes by enabling caching.

  6. Reduce server response time.

    One of the biggest factors is how long the DNS lookup takes. Domain name system – a server with a database of IP addresses and their associated hostnames.  It translates a URL into the IP address to indicate it’s location online. You might need to switch to a faster one. http://www.solvedns.com/dns-comparison/2020/01

  7. Choose the right hosting option.

    It’s worthwhile not to just opt for the cheapest possible host. You’ll want to upgrade once you start getting more traffic. https://www.quicksprout.com/best-web-hosting/ There are 3 options, shared, VPS or a dedicated server. Shared might be $5/month but it struggles to keep up with traffic spikes on your site, or others you share it with. VPs makes your site less susceptible to the overall load of the network. It’s a happy medium. A dedicated server gives you a lot more space but also requires more configuration and technical set up. You’ll have to decide to what extent your site is slowed by excess traffic.

  8. Run a compression audit.

    You want your files to be as small as possible without sacrificing quality. Run a n audit using http://www.gidnetwork.com/tools/gzip-test.php it tells you how much is already compressed, and how much could be.

  9. Enable compression.

    Gzip is an application that locates strings of similar code in your text files and temporarily replaces them to make the files smaller. Check if your site has this enabled with https://checkgzipcompression.com/

  10. Browser caching.

    When you visit a site, elements on the page are stored on your hard drive in a cache. Next time you visit, the page doesn’t have to send another HTTP request to the server. About 40-60% of the website visitors tend to be first-time so you need to optimize for them, but enabling caching can shave off a huge amount of time for returning visitors. Improve WordPress speed with W3 Total Cache https://wordpress.org/plugins/w3-total-cache/
    Once installed, general settings > page cache > enable check box. Leave object caching disabled if you’re using a shared server.

  11. Reduce image sizes.

    https://www.pingdom.com/ can show you “requests by content type” as an indication of the weight of specific page details, like imagery. Reduce the image size to exactly what you need to display. If the image you upload is 2000px, it has to load that and then readjust it for the container. https://wordpress.org/plugins/wp-smushit/ can compress images on WordPress sites. There are also non-Wordpress tools like Compressor.io. PNGs are larger than JPGs. Also make sure your code doesn’t contain any empty image sources <img src=””>. Add the file path or remove the tag.

  12. Use a CDN.

    Content delivery network. besides the server that hosts your site, you can use other networks of servers to decrease load times. It helps ease everybody requesting the same server, keeping things speedy during high-traffic times, and it also helps to improve the distance to that user if they are in a farther location. It routes to the nearest server. MaxCDN and Cloudflare are good options.

  13. Leverage external hosting platforms.

    Videos are especially useful to have hosted somewhere else, like Vimeo or Wistia. Youtube and Vimeo can be discovered on their own, off your site. Youtube also can include ads and additional video suggestions you might not like. Embedding those links on your site to improve site speed is super easy.

  14. Optimize CSS delivery.

    CSS holds the style requirements for your page, either accessed via an external file that loads before your page renders, or inline, in the HTML. Avoid using CSS in HTML code, it will be cleaner if you put it into an external stylesheet. It reduces duplication. Keep it to 1 CSS style sheet. Use this to find out how many you have https://varvy.com/tools/css-delivery/

  15. Prioritize above-the-fold content (lazy-loading).

    This is one exception when it comes to only using 1 CSS stylesheet and no inline CSS. UX improves by only loading the content that would be visible as they scroll, rather than the whole page while they wait. You can use this plugin https://varvy.com/tools/css-delivery/ for WordPress. Or this one https://wordpress.org/plugins/bj-lazy-load/ or WP Rocket also includes lazy load features.

  16. Tidy the plugins on your site. 

    Speed is impacted by plugins that are incorrectly configured, out-dated, or inefficient. Deleting and deactivate any that are unnecessary, and test the ones you’re using. Disable them one by one and test site speed using GTmetrix, Pingdom or whatever you prefer. There’s also a plugin to monitor the other plugins, https://wordpress.org/plugins/p3-profiler/ – run a site scan and it will give you metrics on how much of the site speed is occupied by their functionality. Commonly, features are built into a theme, which are not used or known by the website owner and a plugin has been installed to achieve it instead. A lot of plugins can be replaced by basic code, such as tracking pixels, and fonts.

  17. Avoid redirects.

    Eliminating broken links when you move and delete pages is important but redirects can be detrimental in HTTP requests, especially for mobile. Google recommends eliminating them entirely. http://www.screamingfrog.co.uk/seo-spider/ will show you all the redirects on your site. Try to decide how necessary they are and tidy it up.

  18. Reduce external scripts.

    This would include things like Twitter integrations for easier sharing, etc. They don’t add a lot of weight usually, but you can decide whether they’re adding enough value.

  19. Track speed over time. 

    Check a site by URL using https://tools.pingdom.com/

  20. Monitor mobile speed

    Google’s https://testmysite.thinkwithgoogle.com/ for mobile site speed.

No Comments

Post A Comment

CLIENT TESTIMONY
READY TO GROW YOUR BUSINESS?

Don’t hesitate to get in contact with us and make your digital aspirations a reality. Book a consultation with one of our digital experts and start down the road to growing your business now.

Please Enter your details