"> Website Optimisations Insights - Punch Buggy®

Insights

Website Optimisations

Craft CMS

Why Use Craft CMS?

Here at Punch Buggy, we run a CMS agnostic shop and have a lot of choices available for which Content Management System to use.  Most recently, we’ve become bigger & bigger fans & supporters of Craft CMS, developed by Pixel & Tonic. There are several major reasons we’d lean towards using Craft over any other, and they all relate to ease of use for our clients, as well as best practices for development that we can all be proud of. Some of this is technical, but it all serves the same point – Craft is a powerful, flexible system that’s easy to use.

Overview
Craft gives you the power to create exactly what you need, from content to design and through to functionality (development). It’s the CMS that the entire team will love.

No longer are you having to compromise on either Design, Content or Development. Craft brings a flexibility to all three areas that no other CMS can compare with.

  • 100% customisable for beautiful, bespoke experiences.
  • Plenty of plugins to extend capabilities and integrate with popular services.
  • Extend away using Craft as a content API or ecommerce website solution.
  • Fast and Secure

Freedom for Designers

Let them do what they do best. Design data-driven, strategic and personalised experiences without the compromise of designing to the constraints of a CMS. What they design can be tailored into Craft without compromise.

No limitations for Content & Marketing teams

Super intuitive and flexible content management and creation. Content authors have a great amount of freedom and flexibility to create great content without the need a development team member.

Three main ingredients here are

Entry Types

Craft allows you to store different kinds of content in the same section.

Powerful relationships

Working with entries, categories, tags, assets, users, or even plugin-supplied element types – is a consistent experience, both for content authors and template designers, because they all use the same core relationship system.

Matrix Fields

Allowing content authors to create beautiful, interesting, and flexible Blocks which are made up of one or more custom fields.

Powerful for Developers

A fast PHP 7 application, built on Yii 2 framework. This makes extendability endless and plugin development really nice.

Templating is powered by Twig. Again another really fast, flexible and very popular templating language. Very easy for any developer to get up to speed on.

Craft uses composer for its dependency management which means keeping it up to date is as simple as one command.

Let’s dive deeper into Craft CMS features and breakdown the full control of the data structure at your disposal.

Sections & Categories

Craft CMS comes with a very barebones structure – there’s no included section for posts, or even pages.  However, with a few simple steps, we’re able to create custom sections for pages, recipes, stories, products, chapters of a book, episodes of a podcast – almost anything can be organised into its own section and then arranged in multiple categories.  These are known as Entry Types.

The entry types mean that no matter what structure you need for the site, you can achieve it without feeling like you’re trying to fit a square screw in a round hole.

Emily Fitton – Web Architect at Punchbuggy

Entries in these sections can be related to each other, a category and any other entry in the same site.  So what’s an individual entry made of?

Entries & Fields

Each entry – the piece of information that could be an article, recipe, FAQ or page is made of  one or more Fields. Fields are totally customisable and configurable. A basic blog post might have a heading, excerpt and body text, while a product could have multiple specifications tables, images, sizes, variants and SKU numbers.  All would be individual fields associated with a type of entry. Fields can take the form of text input, WYSIWYG editors, checkboxes, dropdowns and myriad other choices. There’s no limit to how many fields, or groups of fields, can be added to an entry type.

Total control of markup and output

Craft includes a pair of powerful templating tools, named Yii and Twig.  These two handle the majority of behind-the-scenes processing. They allow us to create the frontend layout and content display tools that are required for each and every field, entry type and section.  Many other CMS will come bundled with an opinionated framework, or even an entire frontend. These are often gutted, modified and squeezed to fit requirements. Starting with a Craft site avoids that headache and allows for a fully custom frontend.  As sites become more and more bespoke, there’s less need for reliance on someone else’s code and more focus on building something that is truly fit for purpose.

Content Management, but better.

Craft’s media asset management is head-and-shoulders above its competitors, allowing for multiple storage directories, drag & drop uploads and an image editing tool that allows for crop, resizing and other features.  Using the tools provided in Craft we’re even able to optimise your content dynamically – dynamically resizing images and delivering dynamic results to the site’s users.

Extensible

Plugins, Modules and extensions are available to extend Craft’s robust feature set even further.  The range of available plugins is fairly broad – they range from premium commercial tools for selling products and collecting payments,  all the way to free single-purpose developer tools that allow us to compress files to be even smaller. Flexibility is shown not just in the ways we can configure craft, but in the ways that it can be extended even further.  We have a short list of recommended plugins we add to most Craft sites we create.

E-commerce

Craft Commerce is a powerful first party plugin by Craft CMS. It completely removes any barriers when it comes to ecommerce. You get all the flexibility and customisable freedom that Craft CMS offers but with all the modern store features. Think any number of custom fields and totally flexible layout on every template making it perfect for conversion optimisation and experimentation.

It’s High Performance

Out of the box, Craft will render pages as quick as almost any other CMS platform. Coupled with a smartly designed template system, adequate hosting and well-designed frontend development practices, a Craft site can become seriously fast.

In the past we’ve written about advanced techniques we use to speed up Craft even further.  Additionally, we can cache copies of your pages Craft’s database for page loads several times faster than the default, with performance increases between 10% – 50% per-page.  We’re also able to provide hosting recommendations and suggestions for CDN usage to take the site speed to the next level. All sites we create are tested rigorously in pagespeed tools and will not be released without being scored highly.

Faster, less frustrating pages translate directly into more pageviews and clicks for your content, and if you’re selling items, a higher conversion rate.

Who Uses IT

Whilst we’re not wholly just a Craft CMS Agency, we do love it. But don’t just take our word for it, see for yourself. Some of the worlds largest brands are taking advantage of the flexibility of Craft CMS. You may of heard of…

Netflix – media.netflix.com

Intel – msp.intel.com

Salesforce – www.salesforce.com

BigCommerce – Bigcommerce.com

Pingdom – www.pingdom.com

Grilld – www.grilld.com.au

Keep reading

Fix your Shopify store speed issues. You know you have them!

As a technical agency we get a lot of speed optimisation work come our way. Whilst we’re big fans of Shopify and a committed Shopify Partner that works with a lot of high end Shopify stores. A common pattern we find with Shopify stores is around it’s performance, which is typically isolated to three main areas.

  1. JavaScript
  2. Image handling
  3. Coding practices

Let’s drive into this a bit deeper.

JavaScript

I’ve got two words to summarise this point: “Shopify Apps”. Functionality can come at a high price. Take a quick look at your installed apps and if you’re in the double digits it’s likely that you’re serving up a ton of separate JavaScript files.

You might ask what’s wrong with that? Two main things:

  1. Each JavaScript file could be way over 100kb in size totalling up and over 2MB of additional code loading into your pages.
  2. They may be hosted on an external server, causing large network payloads and increased DNS requests.

Image handling

Shopify has a great feature that automatically converts your images to WebP format which has a huge benefit in image file size. However, the caveat to this is that certain browsers including Safari on MacOS and it’s iOS counterpart don’t currently support it. You need to make sure that your image filesizes are small and compressed before uploading them, ideally to ensure you haven’t got a massive file still being served on Apple devices. You might find a hidden conversion killer on these devices otherwise, so don’t be fooled. 

Use the correct image format for the right use. Photos should typically be JPG, graphics PNG and icons or outlined content SVGs. Have a documented process in place for uploading new product images to the store to ensure you’re not uploading big PNG files.

Lastly, be sure to also be lazy loading your images.

Coding practices

Most of this stuff will be a bit more technical and behind the scenes, so I wont go into great detail.

  • Avoid hosting fonts and resources remotely.
  • Image dimensions and formats not specified (large images provided in an icon’s space for example).
  • Defer non-essential scripts if possible.
  • Make sure your JavaScript isn’t throwing errors.
  • Use conditions to only load what you need and where you need it. E.g. Don’t load every bit of code on every page. 
  • Use Google Tag Manager to handle your marketing and tracking JavaScript snippets both conditionally and asynchronously.

Tip: Get familiar with what core devices and browsers your website is most commonly loaded on via Google Analytics, because if you do have heavyweight images being loaded on Safari as mentioned above you’ll be able to quantify the impact it’s having on your site.

Google Analytics Reports

  1. Navigate to Audience > Technology > Browser & OS to identify the most common browsers used to view your website.
  2. Navigate to Behaviour > Site Speed > Page Timings to get a breakdown of speed per page. You can also layer in a Secondary dimension of Browser to this report for further analysis. 

Most stores will have an item in one of these areas holding it back. Just remember it’s the little hinges that swing big doors that make the difference.

Get in touch to find out which of the three areas is holding back your store’s performance!

Keep reading

Craft Eager Loading

All CMS-driven websites rely on one form of a database or another. This database contains almost all of the content and the configuration of the site.  For some sites, almost everything except the aesthetics of the site is stored in the database.

A database differs from regular, boring file storage in that it stores data in a structured, organised manner. This organisation means that one piece of information can relate to another and be organised, and then searched, in a structural manner – not unlike browsing the shelves in a store.  These search requests are known as queries. You can do a lot of cool stuff with a simple database, and a smartly designed DB will carry a site a long way.

Keep reading