Having a lot of client projects on the go recently revolving around page speed, talks of utilising CDNs and a few personal ideas involving automating technical SEO tasks, it was only natural to gravitate towards these topics.
So in light of that, here’s a roundup of my most interesting learnings and takeaways from Brighton SEO.
- Speed & Performance Optimisation: How to meet users’ high expectations, Rachel Costello
- How to get 100% in Lighthouse performance score, Polly Pospelova
- Living on the Edge: Elevating your SEO toolkit to the CDN, Nils De Moor
- CLI automation – Using the command line to automate repetitive tasks, Mike Osolinski
1) Speed & Performance Optimisation: How to meet users’ high expectations
Rachel Costello kicked off the page speed session setting the scene with how it’s very important to focus on having empathy for users. Rachel highlighted that 50% of users blame their internet connection for webpages loading slowly. The emphasis was that this stat can’t be relied on forever, it’s time to focus on improving the standards of web performance. There were some great points and logic that can be applied to the mindsets of multiple disciplines within any digital agency, so here are my key learnings.
Key learnings
- Not all devices have the same performance capability. It’s important to review website analytics to see which devices (and browsers) users interact with a website. This will inform specifications for testing webpages to see benchmark speed performance across multiple devices, which will benefit testing post technical changes too.
- The same applies to internet connections too, so test various connections for accurate insights when testing.
- Personalisation is the future of speed performance – personalise webpages per device, connection, browser etc. AKA progressive enhancement: progressively adds more tech advanced features as users scroll down the page.
- Graceful degradation – customise for performance if the client can’t handle it. If you want to see a good example of this, try testing bbc.co.uk, Rachel advised this was a good website to see this in action.
- An awesome point made was a feature called – Guess.js, apparently talked about Google i/o in 2018. It combines data from GA account and is data driven loading of websites meaning that it can model users’ next page predictions and most common journeys to prefetch links or images etc.
- Finally – talk to developers about performance optimisation methods.
2) How to get 100% in Lighthouse performance score
Polly Pospelova provided some great insights and takeaways to bring back to the tech SEO team here at QueryClick. Namely the hackathon to improve their own agency website, with the aim of achieving Google Lighthouse score of 100 out of 100. Polly worked with their UX and developer teams and went to work improving all the recommendations that Google Lighthouse presented. This is a great way to experiment and get real life SEO experience with tinkering with a website. https://queryclick.com watch out, you’re next!
Key learnings
- SEOs and developers must unite more than ever. It’s clear to me that this is a key point across many of the talks on page speed.
- Ongoing optimisation is the new norm – Lighthouse scoring system changes all the time, so it’s important to focus on consistent page performance analysis and make improvements to webpages regularly.
- Page speed is a ranking factor for all devices, so tailor page speed optimisations per device, for example each device has a different “above the fold” line.
- 100% in Google Lighthouse is possible: key areas updated were ‘Reduced requests on page load’ and ‘Reduce volume of data sent on first page load’.
- Http2.0 is awesome – http1 can only send 6 concurrent requests to the server. Http2.0 can send all of requests in one stream, it was designed to reduce latency, so go on, utilise it!
- Optimise images in these methods – a) deferring offscreen images – b) serve images in nextgen formats e.g. WebP quality, lower weight (but only for modern browsers for now) – C) utilise adaptive images via – srcset – it provides a collection of images in different sizes which are served accordingly.
- Lazy load – only load images when they arrive into the users viewport.
- Critical – a browser doesn’t start rendering a page until it parses all resources. Only take necessary resources for a page and then inline them into html markup in a head tag. (Quiz Clothing is a website that I’ve seen that does this – check out the network tab in chrome dev tools for all files in line with each other).
- Load only what’s required – Polly explained that braking up CSS and JS into small files for each logical block of code, e.g. header, form, footer etc made a noticeable difference.
- Use Modern JS – it’s a new and improved format for JS. Use fall back for non-modern browsers – 300% faster and 20% smaller file size.
3) Living on the Edge: Elevating your SEO toolkit to the CDN
Nils De Moor kicked off his talk explaining the basic principle of how CDNs work. He highlighted some great points about the benefits of CDNs including greater speed of serving websites to users, lower costs due to less bandwidth, increased reliability and improved security (DDoS mitigation/SSL out of the box). Personally, knowing the basics of CDNs, it was great to learn some points in which SEOs can optimise websites with CDNs.
Key Learnings
- CDNs are used to cache static files – JS, CSS etc. However, with CDNs it’s possible to run arbitrary code on a CDN (Worker) such as blocking requests from spammy user agents. Simply put, each CDN can be tailored to handle each location which could be great to handle specific international SEO related issues.
- Why CDNs? There are performance benefits (speed) & can alleviate platform restrictions.
- Some great examples of CDN usage related to technical SEO include;
- Injecting Hreflang code at CDN level which gets served to the end user
- Modification of Robots.txt
- Redirections
- Security enhancements
- Access log file data
- A/B testing for specific locations
- There are however issues to consider when making changes via CDNs, which include: Debugging, security, change management, accountability,
- Remember “Great power = great responsibility” (a common quote I heard used throughout the day at BrightonSEO).
4) CLI automation – Using the command line to automate repetitive tasks
Mike Osolinski kicked off his talk highlighting how manual tasks can be overcome by automating tasks using command line. This was so topical for me as I’m always looking for ways to make more efficient use of time (I’ve got no excuses now – it’s time to delve into command line). The key feature that grabbed my attention was how command line can run bulk tasks. Initially I was aware of this for APIs, but hadn’t been aware of some other uses too. Check out some of the cool features SEOs can optimise their own time.
Key Learnings
- Use pre-built scripts to enter into command line – a great way for command line newbies to get a good head start. Example tasks and outputs include:
- Merge files together
- Optimise images in terms of size
- Rename files
- Run Google Lighthouse tests
- Run Screaming Frog (command line version)
- Log file analysis e.g. export 404 status codes only
- Another tool to make best use of is PowerShell
- Helps automate tasks
- PowerShell is an integrated scripting environment with a library
- It includes aspects such as “Cmdlet” to activate tasks such as import csv or export csv, Redirect report with chains in > and many more tasks.
- Look out for Mike’s slides on the BrightonSEO website – there are some great command line ideas in there to draw upon.
All in all, Brighton SEO this April was informative and topical for the projects that we’re working on at QueryClick. Hope the round up has been useful if you didn’t manage to make it. Looking forward to the next Brighton SEO later in the year.
~ Dan Dracott, Technical Account Manager
If you would like to download any of the QueryClick presentations from Brighton SEO and access our resource hub, click here