Streaming live at 10am (PST)

Issues with Google Analytics event tracking, image cropping, button resizing and render blocking


#1

Hey everyone,

I’m having a couple issues with my site and would really appreciate some help.

I am using:
1. Laptop: 13 inch retina Macbook Pro
2. Browser: Chrom
3. Website in question: http://wafflenewwebsite.webflow.com/

The issues are as follows:
1. Google Analytics set up for forms:
I'm trying to set up event tracking for the forms on my website. 1 for the nav, another for each of the ones in the body on any of the pages.

Here's the code I'm using as a custom attribute for the nav button one:
Name: clickButton
Value: gaq.push(['trackEvent', 'form', 'click', 'nav']);

Is this correct? In GA im using:
1. Category: form
2. Action: click
3. Label: nav
4. Value equal to: 1

Would it be better to track it on the success state of the form? Or would you suggest something else? If so, what?

  1. Get started button on features page http://wafflenewwebsite.webflow.com/features (mobile devices only) - the button seems to resize to over double what it should be. I am using 2 buttons, one to show on tablet and desktop (only shows on these devices) and another to show on mobile only (which directs to a dedicated sign up page because there isn't enough room for a form in the nav otherwise). How can this be fixed?

  2. The crop of the testimonial images on the homepage http://wafflenewwebsite.webflow.com is strange on different desktop/laptop screen sizes. Seems ok on my retina 13 inch mac but on other desktops the crop cuts the people off and becomes an issue.

  3. Eliminate render-blocking JavaScript and CSS in above-the-fold content. Is there any way to do this without exporting the project from webflow? Google page speed checker flags this as a major item that should be fixed on all pages I have ever created on webflow.

It said I should do the following:
Your page has 2 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js
https://daks2k3a4ib2z.cloudfront.net/0globals/modernizr-2.7.1.js
Optimize CSS Delivery of the following:
https://daks2k3a4ib2z.cloudfront.net/…4/css/wafflenewwebsite.37fd9d726.min.css
http://fonts.googleapis.com/…700,700italic%7CUbuntu+Condensed:regular


#2

Anybody have and answer to the render-blocking issue above?


#3

Please continue the discussion here and here.