Content performance optimisation
If you’re among the many webmasters who are upping your game on the content front, you need to be aware how this can impact site performance. Nichola Stott of theMediaFlow guides you through some key considerations with different content types and some working practices, to ensure those creating content for you aren’t contributing to a site that is slowing down or alienating by device.
If you’re in the business of marketing your brand and product with content, you’ve more than likely upped your game in recent times. If we want to stay ahead of the competition this means being first, original and inventive, and producing quality stuff that people want to spend time with. As a consequence, you may find that you’re employing more writers, designers and developers, and external agents, all with the brief to deliver content that’s going to attract readers, fulfil link objectives and improve your engagement metrics.
As you accelerate these efforts, it’s a good idea to pause every now and again and make sure that your content isn’t killing your performance. We’re going to look at key considerations with different content types and some working practices, to ensure that those creating content for you aren’t contributing to a site that is slowing down or alienating by device.
Pause every now and again and make sure that your content isn’t killing your performance.
Embrace HTML5 for Animation
Whilst I’m not opposed to JavaScript at all and have seen Google indexing and ranking more and more JavaScript content, a lot of JavaScript is more often than not the slowdown in the critical path between the Dom (Document Object Model) and CSOM (Client-side Object Model). JavaScript can be just the ticket for interactive elements, as you can get instant feedback, say, from an interactive infographic that requires user input as opposed to sending data back and forth to the server. However, with multiple scripts and external resource requests this can contribute most to latency. If you are using it try Closure Compiler which re-writes your JavaScript into a smaller form, achieving additional compression.
Alternatively try HTML5 capabilities for animation and interactivity instead with CSS3 or JavaScript. HTML5 can handle multimedia content natively and often means the reduction of the amount of JavaScript required.
Content attributes
HTML5 link rel attributes can also prove effective in optimising content for speed. Smarter browsers like Chrome and Safari are constantly trying to anticipate user behaviour (think of in-browser search suggestions that auto-complete your search query) and pre-loading crucial resources before we reach them, and there are things which we can do to make this process even more effective. The biggest speed issues on pages usually relate to resource rendering due to the sheer volume of assets per page.
This is an issue of network latency, not a bandwidth issue, and can be countered with the implementation of certain attributes.
Using rel pre* attributes, such as prefetch or pre-render, we are able to “hint” to the browser the actions that we expect visitors to carry out. As site owners, we often know the path that our users are likely to take – and our key resources – better than the browser itself does, and rel pre* attributes help us to share this information with them.
Best practice is to use rel prefetch for your most critical resources, and rel prerender when looking to both fetch and render content prior to the user’s request. This directive in essence loads an entire invisible tab ready for the user’s click, so should only be used when you’re fairly sure on the user’s next step.
As for other rel pre* attributes, preloading hints to the browser to download resources prior to information requests, and pre-connect opens linked connections in advance. Using pre* attributes can deliver huge boosts to site speed, and are well worth considering, especially if you have a good idea of users’ general path through your site (see Figure 1).
Image optimisation
Images play a huge role in the speed of a web page, something which is both a ranking factor and a determinant of a user’s experience on your site. Engaging visual content adds a lot to the quality of content, but should never come at the expense of the search experience.
Once you’ve selected images to use on your site, save them as either JPEGs or PNGs, with relevant filenames (both descriptive and including targeted keywords) and scale them to the size that they’ll be needed. Often – if images are not minimised to the size in which they’re needed – pages are slowed down as large image files unnecessarily load.
You can further streamline images by reducing their file size with tools such as JPEGmini. Compressing images has no effect on their quality, but can have significant results in terms of load speeds.
When adding the images to pages, also make sure that a descriptive alt. text (again including keywords) is added to them to help users who for whatever reason can’t see the image, as well as to aid search engines’ understanding of your content.
When pages are still in draft stage, test them using Google’s PageSpeed Insights.
This will give pages an overall speed score, and flag up any elements which could be hindering page speed. Another option is the YSlow chrome extension, which gives pages a grade based on overall performance.
Fonts and styles
You should also consider the fonts you use when optimising your content for performance. Think about how many typefaces, weights and styles are necessary before adding them, as each will result in an added request to the server, meaning a slower overall page-load time.
Fonts are made of a collection of “glyphs” – shapes describing letters or symbols. They vary in size due to the complexity of the vector paths making up each glyph, and the number of glyphs used by the font. When selecting a font, consider its aesthetic values, and weigh these against their file size.
It’s also worth considering whether the font works in other languages in order to retain a consistent “look” on international sites, and that certain web font formats are only supported by certain browsers. This can prove a costly mistake if you come to create market specific versions of a successful piece of content, only to have to go back to build phase to accommodate a font that works in the target market. If it’s necessary to serve different formats to different users in order to give all a good experience, this can mean a re-design.
Whilst of course they’re all different, fonts contain some broadly similar information, so can be compressed in the same way that images can. Some are auto-compressed, and for those that aren’t, using GZIP can significantly reduce file sizes. There can be an advantage in using more common fonts such as Typekit or Google Fonts, as these are more likely to have already been cached by your site visitor.
Our final tip in our experience as an agency that works on multiple content projects for operators and affiliates alike, is to include a speed checklist into your project briefing process. Be sure to discuss technologies, use of images, font selection and any internationalisation of the piece prior to going into production. Not only will your content efforts complement your SEO and site performance goals, but this can contribute to the smooth and profitable running of content marketing projects on a per item basis.