Page Speed Score of 350+ Webflow Themes

written by hiveminds_dev

on April 29, 2020

WHAT IS WEBFLOW?

Webflow.Inc is an American company that provides software as a service for website building and hosting. Basically, Webflow is a web-based design tool that provides you with a free platform for building, designing & launching responsive websites without the use of code.

Anybody, whether it’s a newcomer or a professional, all web designers & users who don’t like coding can easily create and customize their websites using Webflow. While designers use the tool, the Webflow automatically generates Javascript, HTML & CSS in the backend.

Webflow also provides pre-edited templates for different niches and industries which a user can buy and design according to their needs and requirements.

 

WHAT ARE THE FEATURES OF WEBFLOW?

  • Familiar UI:

Writing code is one of the tedious tasks that one can imagine. Thankfully, Webflow does this for you. You just have to drag and drop the cleanly coded, fully responsive HTML elements on to the canvas. Meanwhile, in the backend, Webflow does the translation work for you.

  • Search Engine Optimization:

With Webflow, you just have to create a template for your SEO tags to follow, and it will automatically generate SEO friendly Titles, Meta Descriptions that means you don’t have to write meta titles & descriptions for every one of your blog posts.

  • Pre-Edited Website Templates:

Webflow offers 25+ free templates & 300+ Templates of different niches & Industry where you can choose from. Whether you are looking for a blog, basic portfolio site or even E-commerce, there are really good templates you can select from depending on your needs and requirements. And every template present gives information regarding which type of website it is best for.

  • Automatic Site Backup:

If you have done coding or used any other website builder, then you know how frustrating it is when you forgot to save your work. And it gets even more worsened when you have moved your work to the web.

Webflow automatically creates a backup version of your site every 20th autosave. You can also save your work just by pressing Shift + ⌘ + S on Mac or Shift + Ctrl + S on Windows. And if you face any situation in which there is a need to revert a change (whether due to client requirements or any bug), you can restore a backup just by a click

  • Easy to Illustrate your Interactions Ideas:

As a website designer, there are chances that you have some really amazing animation & interaction ideas in your mind. And you may have also tried to capture how they’d look and feel by creating gifs or videos.

With Webflow, you can build your animations and interactions without coding, or making any gifs or videos, using the same tools you used to do the rest of the work.

With Webflow your clients and stakeholders can actually experience your vision and idea. So, it’s much easier for them to understand your idea.

 

WHY IS PAGE SPEED IMPORTANT?

Website page speed plays an important role in ranking higher in SERPs. Slow websites irritate users and Google can’t tolerate this. Ultimately you may face rank fall in the long run. 

Here are some facts which showcase the importance of website page speed:

A. 79% of the online shoppers who have experienced trouble with website performance say that they would not prefer to visit that site again.

B. 40% of users abandon the websites whose loading time is more than 3 Seconds.

C. Your website conversions can be reduced by 7% of your website’s page response gets delayed by 1 second.

D. Your website page views will get reduced by 11% if your page load time gets delayed by 1 second.

You can visit Hostingtribunal to know more about the page speed facts.

Also ReadPage Speed Scores of 896 Websites Built using GatsbyJS [Downloadable Table]

 

WEBFLOW PAGE SPEED SCORES ANALYSIS:

In this process, we have analysed 350+ Webflow themes of different niches & industries.

Below, is the summary of 50 Templates. If you want the details of all the 350+ websites then you can refer to this Google sheet where we have added all the data. The data below shown is extracted from  developers.google.com which showcase the page speed score of different themes and templates of Webflow.

 

Address

Mobile Score 1

Desktop Score 1

https://webflow.com/templates/html/chronicle-ui-kit-website-template

41

56

https://webflow.com/templates/html/aller-one-page-website-template

35

66

https://webflow.com/templates/html/photo-photography-website-template

35

58

https://webflow.com/templates/html/alice-restaurant-website-template

43

61

https://webflow.com/templates/html/samnio-business-website-template

39

63

https://webflow.com/templates/html/minimal-agency-website-template

42

66

https://webflow.com/templates/html/university-education-website-template

37

58

https://webflow.com/templates/html/anagram-agency-website-template

47

64

https://webflow.com/templates/html/snoop-fashion-website-template

41

58

https://webflow.com/templates/designers/webflow

42

70

https://webflow.com/templates/html/devkit-technology-website-template

43

56

https://webflow.com/templates/html/ourapp-mobile-website-template

37

67

https://webflow.com/templates/html/atlas-agency-website-template

42

64

https://webflow.com/templates/html/milton-blog-website-template

46

65

https://webflow.com/templates/html/orsa-blog-website-template

32

53

https://webflow.com/templates/html/wecare-charity-website-template

43

62

https://webflow.com/templates/html/noon-architecture-website-template

44

61

https://webflow.com/templates/html/coverd-technology-website-template

37

61

https://webflow.com/templates/html/delve-magazine-website-template

41

55

https://webflow.com/templates/html/creatix-agency-website-template

39

60

https://webflow.com/templates/html/business-starter-website-template

40

66

https://webflow.com/templates/html/figaro-salon-website-template

38

59

https://webflow.com/templates/html/xtreme-gym-website-template

38

63

https://webflow.com/templates/html/startup-ui-kit-website-template

40

63

https://webflow.com/templates/html/kloks-fashion-website-template

35

64

https://webflow.com/templates/html/conference-event-website-template

41

61

https://webflow.com/templates/html/easy-times-restaurant-website-template

34

58

https://webflow.com/templates/html/lamar-blog-website-template

41

68

https://webflow.com/templates/html/marlin-photography-website-template

43

53

https://webflow.com/templates/html/foray-ui-kit-website-template

41

65

https://webflow.com/templates/html/victory-agency-website-template

28

53

https://webflow.com/templates/html/persona-ui-kit-website-template

29

61

https://webflow.com/templates/html/my-life-personal-website-template

43

65

https://webflow.com/templates/html/vivlio-one-page-website-template

36

62

https://webflow.com/templates/html/aurea-retail-website-template

36

61

https://webflow.com/templates/html/virgo-religion-website-template

43

63

https://webflow.com/templates/html/explorer-blog-website-template

41

56

https://webflow.com/templates/html/bellcast-architecture-website-template

44

54

https://webflow.com/templates/html/notch-winery-website-template

37

60

https://webflow.com/templates/html/avante-ui-kit-website-template

40

62

https://webflow.com/templates/html/network-education-website-template

42

63

https://webflow.com/templates/html/prisma-portfolio-website-template

35

57

https://webflow.com/templates/html/designio-ui-kit-website-template

34

64

https://webflow.com/templates/html/cons-construction-website-template

28

53

https://webflow.com/templates/html/enigma-technology-website-template

40

64

https://webflow.com/templates/designers/tom-cunningham

44

72

https://webflow.com/templates/designers/deni-bozo

42

70

https://webflow.com/templates/html/sonoma-agency-website-template

45

56

https://webflow.com/templates/html/videographer-one-page-website-template

25

49

 

 

 

 

   Download Data of Complete 350+ Themes: Click Here

 

METRICS TO MEASURE:

Always give more preference to speed to website speed when you are comparing functionality & speed.  Here I have also added five such important metrics (known as “lab data” on page speed insights) in a google sheet. Those metrics are as follows. 

First Contentful Paint (FCP): FCP measures how long it takes any part of the page’s content to be rendered on the screen. A good FCP value is less than 1 seconds.

The average FCP value for of Webflow website is:

Mobile:    1.80 Seconds > 1 Seconds

Desktop: 0.50 Seconds < 1 Seconds

 

First Meaningful Paint (FMP): FMP measures how much time it takes for a page’s primary content to appear on the screen. Good value for this metric is less than 2 seconds.

The average FMP value for Webflow website is:

Mobile:    5.6 Seconds > 2 Seconds 

Desktop: 1.40 Seconds < 2 Seconds

 

Speed Index Measures: Speed Index measures how quickly the page contents are visually populated. A good value is less than 4.3 Seconds.

The Average Speed Index measure for Webflow website is:

Mobile:     5.7 Seconds > 4.3 Seconds.

Desktop:  1.80 Seconds < 4.3 Seconds.

 

First CPU Idle: It defines the first point of time at which the page could accommodate input. Good value for this metric is under 4.7 seconds.

The Average First CPU Idle time for Webflow website is:

Mobile:     10.5 Seconds > 4.7 Seconds.

Desktop:  4.6 Seconds < 4.7 Seconds.

 

Time to Interactive: Time to interactive measures how long does it take for a page to fully interactive. Sometimes, a page is fully visible but not ready to take input from the user. Good value for this metric is under 5.2 second.

The Average Time to interactive for Webflow website is:

Mobile:   16.3 Seconds > 5.2 Seconds

Desktop: 5.6 Seconds >  5.2 Seconds

 

 

The Process:

I went to the Webflow website Templates section.

I removed all the filters from the category. 

Then I clicked on “All tags” and copied all the links in the Google Spreadsheet

Templates links

For scaling up the bulk page insights check, I added

https://developers.google.com/speed/pagespeed/insights/?url=” in front of every selected domain with the help of concatenate formula.

=CONCATENATE(A1,B1)

urls

 

Now, go to Screaming frog & adjust some of your settings. 

So here are some adjustments we need to make during data extraction in screaming frog so that Google doesn’t realise that you are running a bot or else it will put a Captcha hammer on you straightway

Google-captcha

Switch the tool to list mode(on the top menu >mode> list) 

Screaming-frog-sections-to-edit

Now shift to rendering section (configuration > Spider > Rendering) – Turn on Javascript & increase the AJAX timeout from 5 seconds to 15-20 for safe measure 

Screaming-frog-rendering-section

Now go to the speed panel (Configuration > Speed) turn the max threads to 1 and the Max URL/s to somewhere between 0.1 & 0.5 a second.

 

Data Extraction:

Now we have to make the tool understand which data we actually want to get extracted i.e page speed scores.

Now, we have to go to the custom extraction panel (Configuration > custom > extraction) and enter the following XPath variables depending on the metrics you require to pull. 

Screaming-frog-Custom-extraction-dashboard

 

Mobile Score

(//div[@class="lh-gauge__percentage"])[2]

Desktop Score

(//div[@class="lh-gauge__percentage"])[3]

 

Field Data

Mobile  First Contentful Paint (FCP)

(//div[@class="metric-value lh-metric__value"]//text())[1]

 

Desktop First Contentful Paint (FCP)

(//div[@class="metric-value lh-metric__value"]//text())[5]

 

Mobile First Input Delay (FID)

(//div[@class="metric-value lh-metric__value"]//text())[2]

 

Desktop First Input Delay (FID)

(//div[@class="metric-value lh-metric__value"]//text())[6]

 

Lab Data

Mobile First Contentful Paint

(//div[@class="lh-metric__value"]//text())[1]

 

Desktop First Contentful Paint

(//div[@class="lh-metric__value"]//text())[7]

 

Mobile First Meaningful Paint

(//div[@class="lh-metric__value"]//text())[4]

 

Desktop First Meaningful Paint

(//div[@class="lh-metric__value"]//text())[10]

 

Mobile Speed Index

(//div[@class="lh-metric__value"]//text())[2]

 

Desktop Speed Index

(//div[@class="lh-metric__value"]//text())[8]

 

Mobile First CPU Idle

(//div[@class="lh-metric__value"]//text())[5]

 

Desktop First CPU Idle

(//div[@class="lh-metric__value"]//text())[11]

 

Mobile Time to Interactive

(//div[@class="lh-metric__value"]//text())[3]

 

Desktop Time to Interactive

(//div[@class="lh-metric__value"]//text())[9]

 

Mobile Estimated Input Latency

(//div[@class="lh-metric__value"]//text())[6]

 

Desktop Estimated Input Latency

(//div[@class="lh-metric__value"]//text())[12]

 

 

(So to differentiate among the various metrics, later on, make sure that you are adding a custom label to every metrics you are extracting and setting the type tab to XPath & change the far-right drop-down tab to “Extract Text”)

Once you update all the above-recommended changes, copy the whole list of URLs & paste it in the upload section of Screaming Frog. 

Screaming-frog-upload-section

That’s it you are done. Now, let’s have a cup of coffee because it going to take time for a while.

 

How to export the data? 

When the crawl is 100% complete, click on custom extraction and put the filter to “All” & then click on export to extract the whole data. 

Screaming-frog-Data-Extraction

 

Types of Errors in crawl:

There are generally 2 types of errors you might face in this process of extraction. 

A. Screaming frog is not providing the data for every URL:

While crawling, you may find that Screaming frog is not able to pull out the data for some URLs. So, just select all those URLs and submit those URLs again for re-spider. 

B. Google can put anti-bot captcha:

If you are facing the issue of Captcha, then pause the crawl for a while, open those URLs in the browser & solve the captcha & Just select the URLs for which you didn’t get the data and submit them for re-spider.  

If still, you are facing issues in crawling then make the screaming frog configuration settings to default by going to (file > configuration > clear to default >.

 

Hope this post serves you as a reference in identifying Webflow themes pages speed scores quickly. This post will help you to keep things in check when creating your own website using Webflow Themes.