AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

Optimize
2.7K members online now
2.7K members online now
Everything you need to know about setting up Optimize including creating your account and container, linking to Google Analytics and how to tag your site.
Guide Me
star_border
Reply

Optimal experiment setup

Follower ✭ ☆ ☆
# 1
Follower ✭ ☆ ☆

From a performance perspective what would be the best way to do the following changes to the page?

Also, if there are any performance differences, how much is it?

 

So the questions are really about how the built in element selector works and how it applies the code to each element... Is there any more documentation than this?

 

Example #1

go-forumquestion-ex1.png

 

 

var container = element;
var hash = (Math.random() + 1).toString(36).substring(7);
// Remove more offers option
$('.more-offers', container).remove();

// Remove divider
$('hr', container).remove();

// Hide original bullet list
$('ul', container).attr('id', hash).hide();

var ul = $(hash);


var headline = $('h3', container);

// Add button to headline
$(headline).html(headline.text().trim() + ' <button id="' + hash + '" class="btn btn-link"><span class="caret"></span></button>').css('text-align', 'center');

// Add event listener to btn
$(hash).on('click', function() {
  $(ul).toggle();
});

// Make it more compact
$('.panel-footer', container).css({
  'padding-top': '0'
});

 

 

Example #2

go-forumquestion-ex2.png

var containers = $('.offer');
$.each(containers, function(index, val) {
  var container = val;
  var hash = (Math.random() + 1).toString(36).substring(7);
  // Remove more offers option
  $('.more-offers', container).remove();

  // Remove divider
  $('hr', container).remove();

  // Hide original bullet list
  $('ul', container).attr('id', hash).hide();

  var ul = $(hash);
  var headline = $('h3', container);

  // Add button to headline
  $(headline).html(headline.text().trim() + ' <button id="' + hash + '" class="btn btn-link"><span class="caret"></span></button>').css('text-align', 'center');

  // Add event listener to btn
  $(hash).on('click', function() {
    $(ul).toggle();
  });

  // Make it more compact
  $('.panel-footer', container).css({
    'padding-top': '0'
  });
});
1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author Simon D
July 2017

Optimal experiment setup

Google Employee
# 4
Google Employee

I don't think that there will be a significant difference in pure js performance, one way or another.

 

But in the second case, the whole page (i.e. body element) will be hidden until DOM ready, while in the first case only the ".offer" containers will remain hidden.

 

If you don't have things like scripts at the bottom of your body, it probably will not matter because the code will be equivalent.

 

If you have blocking sync scripts at the bottom of the page (or even worse for some reason between the "offer" elements), your users will be able to see the rest of the page apart from the "offer" elements earlier.

 

While this would make the page look more "fast", it may cause some re-flow, depending on where "offer" elements are in the page. In the first case everything will be shown once all the code has run and everything finalized.

View solution in original post

Optimal experiment setup

Google Employee
# 2
Google Employee

Hi Simon and thanks for your feedback about the need for more documentation about how the runtime works.

 

I will describe here the most important aspects related to your examples:

 

1) Google Optimize is not based or using jQuery. Your code that uses jQuery will work, only if you add jQuery to your page yourself, and you need to do this above the Optimize plugin code (so that its available when the Optimize script loads).

 

Google Optimize is based on the concept of "change records" which you can create by using the editor functionality or manually using the editor "change dialogs" (see the selection dialog by clicking the rectangle next to the hierarchy bar in the editor).

 

In respect to performance, Optimize makes heavy use of CSS style elements which are added on head. So when you "remove" an element or do any other style change, Optimize will add a style element in the <head> (i.e. display: none), even BEFORE that element has been parsed by the browser. This has significant gains in performance and stability.

 

When you do any other of change (i.e. a script change as you do). Optimize will "hide" the elements specified by the CSS selector of that change until the change gets applied (to avoid flickering) and will apply the change as soon as it detects that these elements have been added in the DOM. This can be BEFORE DOM ready.

 

So if you wish to do a script change on an area of the page, it is beneficial to use a selector of the smallest possible container that includes the elements that you will modify.

 

In your example, you use the "body" selector and the "after closing tag" which pretty much means that the body will be hidden until DOM ready and then the script will run.


By looking at your code, I believe that performance would be a lot better if you would add individual changes on the selectors that you wish. For example you could add a CSS style change on ".panel-footer" (this would be applied adding a <style> on head even before the ".panel-footer" element exists), and a HTML change on "h3 .offer" (note that Optimize changes can apply to multiple elements) which will be applied to each "offer" element as soon as its detected in the DOM.

 

I hope that this helped.

Optimal experiment setup

[ Edited ]
Follower ✭ ☆ ☆
# 3
Follower ✭ ☆ ☆

Hi, Dimitris!

 

Yes, I know. We have jQuery defined at the top of every page, so that should not be any issue.

 

I have understood the whole BEFORE/AFTER closing tag thing as well. To redo all the changes within the WYSIWYG editor would take some effort and time, it's much faster for us to do it by code.

 

Also, the whole WYSIWYG thing is a black box for me since I don't know how the changes really are executed. Is there more in-depth documentation available somewhere?

 

So apart from that, what would be the fastest way, do some sort of loop (with or without jQuery) myself and apply changes or do the changes as I suggested in Example 1 with the built-in loop? From what I noticed there is no significant difference. Is there a way for me to see how long it took Optimize to executing all changes and hiding the DOM etc?

 

Marked as Best Answer.
Solution
Accepted by topic author Simon D
July 2017

Optimal experiment setup

Google Employee
# 4
Google Employee

I don't think that there will be a significant difference in pure js performance, one way or another.

 

But in the second case, the whole page (i.e. body element) will be hidden until DOM ready, while in the first case only the ".offer" containers will remain hidden.

 

If you don't have things like scripts at the bottom of your body, it probably will not matter because the code will be equivalent.

 

If you have blocking sync scripts at the bottom of the page (or even worse for some reason between the "offer" elements), your users will be able to see the rest of the page apart from the "offer" elements earlier.

 

While this would make the page look more "fast", it may cause some re-flow, depending on where "offer" elements are in the page. In the first case everything will be shown once all the code has run and everything finalized.

Optimal experiment setup

Follower ✭ ☆ ☆
# 5
Follower ✭ ☆ ☆

Hi,

 

Great to hear - that is what I hoped for Smiley Very Happy !