How to optimize liquid code

Plate theme files are written in Liquid templating language. To create better insights for our front-end developers, we created a tool to profile your code: the Liquid Profiling. With these profiles it's possible to see how your code performs, line by line.

Getting Started

To be able to create a Liquid Profile, you need to check if you have the correct settings

• Your account needs to be a developer account. This can be changed in user settings. You can only have access to Liquid Profile tests with a developer account.
• You need a url that corresponds to a post. You cannot create a liquid profile for a url that is not a post template.

Creating a Profile

Step 1: Select a Post

Go to the url of the post you want to create a profile of and click the 'Liquid Profile Test' under the header 'Test' in the admin sidebar.

Step 2: Fill in the Fields

To create a test you can fill in the following fields:

• Name
• Description
• HTTP Method
• HTTP Path

All these fields have default values. You can change any of these default values.

Step 3: Create your profile

When all the fields have values, create a new profile. Your profile is now being created. Once it's done it will show up in the dashboard under the header 'Development' in the dashboard sidebar

Profile Insights

To see your newly created profile, click on the profile in the profile list. This will take you to the rendered profile visualisation.

In this visualization you can view the profile details. Under this box, you can see the profile. It displays the total render time and it displays the render time for each nested line of code. Within each nested line of code, you can see individual render times for lines of code.

Important: profiles are automatically deleted after 7 days. If you want to keep your profile, make sure to pin it. You can do this through the rendered profile page or the index page

Use this profile as a guide to update your own liquid code where necessary. After you updated your code, make sure to create a new profile of the same page. This way, you can compare performance and see if your edits had any effect.