Time is a truly valuable commodity and people like to use it wisely. Research has found that when a page is slow to load, people quickly become frustrated and go elsewhere.
Having now acknowledged that page loading speed is a significant factor in their search algorithm, Google have opened the flood gates to new SEO possibilities. This news in essence means that fast loading web pages can rank higher than slower pages of equal merit.
Many people, you probably included, are keen to learn the tricks of the trade to make sure their website stays nimble and light of foot. So in keeping with the title of this post, the following speed tips will be coming at you thick and fast.
Images
#1 – Use Photoshop’s Save for Web tool.
All images on a webpage should be compressed correctly for the web. The key is to keep your file size down whilst maintaining image integrity. If you have Adobe Photoshop, always use the ‘Save for Web’ tool. In most cases there shouldn’t be a need to go above quality 70 for jpegs.
#2 – Try SmushIt™.
Another lossless method of compressing images if you don’t have Photoshop is SmushIt™.
#3 – Resize your images.
Every image should be resized ready for the web. Ideally you need to make them pixel perfect so it is these dimensions that are important. Images can be re-scaled on the fly using code, but this can lead to pixelation or loading files that are much larger than necessary.
Just to make life that little bit easier we’ve designed our very own pixel ruler. Download it free here.
#4 – Define image dimensions.
It is best practise to define the pixel width and height of an image within your HTML code. If you don’t define the image size a browser may need to re-flow text and other layout elements once the image has fully loaded. Defining it beforehand tells the browser how much space to allow for in the rendering process and shaves off a few milliseconds.
#5 – Smaller backgrounds
Keep the dimensions of background images as small as possible. Get creative with repeating patterns. Here’s a great resource for subtle textured backgrounds.
#6 – Use PNGs only when necessary
You should only ever need to save an image as a PNG file if you absolutely require high quality transparency effects. PNGs, however do not compress as well as jpegs or gifs.
#7 – Fake transparency effects
As an alternative to PNG or Gif files with true transparency, try matching your website’s background colour in the image itself to create a fake transparency effect. This works best with flat colour backgrounds and could shave of a few kilobytes.
#8 – Experiment with Gifs
Small images, especially those with a limited colour palette may be better saved as a GIF rather than a jpeg. Gifs are particularly useful for small single colour logos. Experiment to find the best solution.
Web Fonts
#9 – Images shouldn’t be used to replace text
Using images in order to have a header or a quote in your favourite font is not always a great idea, especially if you are relying too heavily on this technique throughout your site. Try using web fonts as an alternative. Google has a great and free webfont library and make them super-easy to use.
#10 – Choose your web fonts carefully
Everything is best in moderation, so it’s a good idea to limit the amount of web fonts you reference. Certain fonts have more of an impact on page load time than others, depending on their complexity etc. Google web fonts also allow you to load specific character sets and weights.
#11 – Consider referencing only the fonts you need on a per page basis
If your web fonts are not used site wide, try customising your webpage’ssection so that you only load the fonts on the pages where they’re needed.
Video & Music
#12 – Avoid embedding videos which auto play on load.
#13 – Avoid embedding auto play music
Avoid background music that plays automatically. Apart from being a nuisance to a lot of people, particularly if they’re playing listening to their own music on their computer/device, auto-playing music will significantly slow down the initial page load time. Why not give the choice to your users?
Streamline your code
#14 – Remove unnecessary commenting
The key is to keep your code as efficient as possible. Remove unnecessary , particularly if they’re only being used to hide unused content.
#15 – Use external CSS files rather than inline styling
Inline styling is not always an inefficient way of coding your website. Attaching classes and ids to your content allows you to specify a style only once and reference that many times throughout your site.
So rather than repeating this in the HTML code:
Use this:
plus this in your referenced CSS:
Learn more about CSS here.
#16 – CSS Shortcode
Along the theme of streamlining your CSS, make good use of shorthand techniques. Instead of defining font weight, font size, line-height and font family separately, combine them with a quick and simple shorthand entry.
Shortcodes are also available for other elements including backgrounds and borders.
#17 – Always reference CSS in your Referencing CSS in thesection of a web page allows it to be cached quickly plus browsers will render your content correctly right from the start as it loads the.
Minimize Redirects
In certain situations a browser will need to perform a redirect from one URL to another. In some cases these can be avoided.
If possible:
#18 – Minimize links coming into your site that are being redirected via an old or out-of-date webpage. Try to get the links changed to the current resource.
#19 -Avoid using vanity domains and vanity URLS where possible.
#20 – When linking to your own content, always add a trailing forward slash to pages that don’t have a file extension. For example you would use a forward slash for: www.zaposphere.com/ or www.zaposphere.com/blog/ but not for www.zaposphere.com/index.php
Combine and minify external resource files
#21 – Reduce the amount of external resources by combining files
In order to render the content of a webpage, additional external files are usually referenced by your browser. These can be things like javascript files, cascading style sheets (CSS), web fonts etc. Each referenced resource needs to be loaded prior to or parallel with your web page content. It is a good idea to try to reducing the amount of files that need loading by combining them.
#22 – Minify resources where possible
Minifying is the process of compressing files files by removing all unnecessary characters, like empty character spaces. There are many tools online that can manually convert your files for free. Take a look here and here.
Caching
In order for a web browser to work quickly and efficiently it temporarily stores certain data whilst browsing to prevent the necessity of re-fetching information it has already read. This process is called caching.
When requests for data are made by a web browser to a website server, the server can also fulfill those requests using pre-cached versions of your website’s assets. This helps speed up the delivery process and puts less strain on your server.
So some speed improvement options are:
#23 – Use a caching plugin to generate cached/static html files for you.
#24 – Automate the process. For WordPress users there is this awesome all-in-one cache plugin that will combine, cache and minify your entire site for you. W3 Total Cache has a daunting array of options, but when used with care it can really supercharge your site.
There are a lot of comparison articles online as to which caching plugin is best with some conflicting results depending on the host you’re with. So, the simplest advice we can give you is to experiment/test/measure to find the one that works for you.
Hosting
If speed is important to you, don’t try to save money by purchasing a basic hosting package. Buy the best you can afford.
There are many options out there and the variety of choices can be confusing, especially when a host can look good on paper, but performs poorly is real life.
#25 – Choose your web host wisely and pick one that specialises in the type of website you want/have.
The only host we would recommend is Bluehost. Although on paper they don’t seem to be a premium choice, they do perform particularly well with WordPress powered websites and have never let me down… ever. A competitor with, shall we say… paternal leanings do not score very highly with their comparable packages.
#26 – For high-traffic sites requiring large bandwidth consider upgrading to a VPS (Virtual Private Server) or dedicated server package.
#27 – VPS and dedicated servers are also more likely to allow Gzipping. Gzip is a form of file compression that speeds up data delivery times.
Empty your trash
WordPress websites store your deleted posts, pages, comments and media in their own dedicated trash folders. They are permanently deleted every 30 days but if you’re keen to eek out a little more speed you can delete the contents manually.
#28 – Delete your trash.
Remove unused or deactivated plugins
Every plugin you install on your website is a trade off between functionality and performance. The majority of plugins generate new files that will need loading and processing per page visit, which puts a strain on your server. It is best to choose your plugins wisely and permanently delete unused or deactivated ones.
The major culprit of server resource hogging are caching plugins and statistic plugins. They either require a lot of server memory or bloat your database. As mention before, only use a caching plugin if your server can handle the extra load. For website statistics you can’t beat the combination of Jetpack and Google Analytics. Both use external servers for handling the data, this helps free up your server for more important tasks.
#29 – Delete unnecessary or unused plugins.
The functionality of some plugins may only be required for a single page on your site, like a contact form. Yet by default, many plugins load (enqueue) scripts and CSS on every page of your site. This is completely inefficient and doesn’t have to be the case. With some clever coding in your WordPress functions.php file you can completely remove all unnecessary javascript and css references from your header. This can have a dramatic effect on page loading speed, especially for sluggish sites with lots of active plugins.
#30 – Disable loading unnecessary plugin scripts and CSS from your header.
The Jetpack plugin for WordPress is a particularly slippery customer as it loads many modules automatically upon activation. You may not want or need all of these modules. So take a careful look at your settings and configure or deactivate each one individually.
#31 – Configure or deactivate (Jetpack) plugin modules.
Adverts, iframes and embedded content
Any content on your page that requires access to data on another website will always have an impact on your loading speed performance. If in doubt, leave them out.
#32 – Reduce or remove dynamic content that requires data to be read from another website.
…and finally
Content Delivery Networks (CDN)
For those of you who are fortunate to have a high traffic global website consider using a content delivery network.
So, what is a CDN? Essentially it is a series of servers spread across the globe covering a wide arc of geographical locations. A copy of your website lives on all these servers and the closest one to the end user delivers the content. This reduces latency, network congestion and in essense speeds up the delivery process and handles spikes in traffic better.
#33 – Try opting in for a CDN.
Bonus tip #34 – Looking for a zero-cost option that works similar to a CDN? try Cloudflare. It’s easily enabled directly within Bluehost’s control panel and has a whole host of security features as well. Love it.
Summary
I hope you’ve enjoyed this post and learnt something new along the way. I’ve deliberately not embellished certain complex ideas as they won’t be relevant to most people’s needs, so instead they were highlighted in passing for you to do further research if you’re interested.
- Images
- Web Fonts
- Video & Music
- Streamline your code
- Redirects
- Combine and minify
- Caching
- Hosting
- Trash folder
- Plugins
- Embedded content
- Content Delivery Networks
If you have any questions or comments about this topic please feel free to add them below. Until next time… arrivederci.
