|
sgonser
|
January 8, 2020 at 11:46 am
Hello,
This is urgent. I am using the ticket selector on a page and it is beyond slow to bring up the registration page.
Please advise ASAP as I’m looking for a fix quickly – registrations will be starting this week.
Here is an example link:
https://buffalorehab.com/wellness-ymca/three-secrets-to-beat-back-pain/
Thanks,
Steve
|
|
Josh
|
January 8, 2020 at 1:25 pm
Hi Steve,
I checked and the page in question is no slower than any other page on your site. One thing that will help with speeding up your site will be to reduce the number of http requests. Currently there are about 140 requests to load up a page on your website (most of them are separate JavaScript, CSS, and font files). A plugin like Fast Velocity Minify can help.
https://wordpress.org/plugins/fast-velocity-minify/
|
|
sgonser
|
January 8, 2020 at 1:40 pm
There’s no way that it’s as slow as anything else on my site. That is ludicrous. I have a 10-second count to open the registration page from the ticket selector.
What can you suggest to speed up the link from the ticket selector?
Thank you.
|
|
Josh
|
January 8, 2020 at 2:32 pm
Hi Steve,
I’ve already made a suggestion, but I’ll try to explain further with a few details.
Your home page took 9.68 seconds to load. Here’s a screenshot from the browser inspector’s network tab that has all the details:
https://slack-files.com/T02SY781D-FS4E9GSPK-7257035deb
the registration page load time after the ticket selector submission was 8.98 seconds. Here’s a screenshot using the same tool to measure the time it took:
https://slack-files.com/T02SY781D-FSEM0PB1N-8d7a6d394f
A web page with over 100 http requests will be slow. A good way to speed things up is reduce the amount of data per request and the number of requests. The Fast Velocity Minify plugin will be a good quick fix.
From there as a additional, longer term, solution you can look at caching, image compression, and have a conversation with your web host to see what kinds of options they have for higher performant web servers.
|
|
sgonser
|
January 8, 2020 at 2:54 pm
Ok. I can look at those items, but I guess doesn’t make sense is the ticket selector is loading some text and a few fields. The pages your comparing to are rich in images, text, buttons, etc. And they load in pieces so the site is accessible.
The registration from takes 9 seconds from click and has little to nothing on the page.
|
|
Josh
|
January 8, 2020 at 3:04 pm
The registration page, and every other page on the site, are still loading all of those scripts and stylesheets. 5.96 Megabytes worth. Whether they’re needed or not. This is typical of a WordPress site, and it’s a problem that a plugin like Fast Velocity Minify tries to solve.
|
|
sgonser
|
January 9, 2020 at 2:56 am
Josh, thank you for your help on this — I have implemented what you mentioned above.
I would like to take this one step further and add a “loading wheel” when the ticket selector is clicked (onclick event).
I found this link, but I’m not sure how to implement:
https://stackoverflow.com/questions/27184353/how-can-i-put-a-progress-cursor-when-submit-button-clicked
Here’s a link to the loading wheel gif:
https://buffalorehab.com/wp-content/uploads/2020/01/4JmO2.gif
Thank you,
Steve
|
|
sgonser
|
January 9, 2020 at 11:30 am
I would like to add a “loading wheel” when the ticket selector is clicked (onclick event?). This already happens after confirming registration — now I need it for ticket selector.
I found this link, but I’m not sure how to implement:
https://stackoverflow.com/questions/27184353/how-can-i-put-a-progress-cursor-when-submit-button-clicked
Here’s a link to the loading wheel gif:
https://buffalorehab.com/wp-content/uploads/2020/01/4JmO2.gif
Thank you,
Steve
(sorry for duel post, wanted to make sure this didn’t get lost from previous post)
|
|
Josh
|
January 9, 2020 at 5:02 pm
Hi Steve,
I added the code from your stackoverflow thread and found it didn’t work. It did show a “loading…” message when the button is clicked, but no spinner.
Here’s another way to add a spinner:
1) Add this html code to your page (it can be anywhere on the page)
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="https://buffalorehab.com/wp-content/uploads/2020/01/4JmO2.gif" alt="Loading"/>
</div>
2) Then add the following code into a site-specific snippets plugin:
add_action('wp_enqueue_scripts', 'my_add_inline_script_eets', 20);
function my_add_inline_script_eets() {
$custom_js = '
jQuery(document).ready(function($){
$(".ticket-selector-submit-btn").click(function() {
$("#spinner").show();
});
});';
wp_add_inline_script('ticket_selector', $custom_js);
$custom_css = '
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -16px; /* half width of the spinner gif */
margin-top: -16px; /* half height of the spinner gif */
text-align:center;
z-index:1234;
overflow: hidden;
width: 32px; /* width of the spinner gif */
height: 32px;
}';
wp_add_inline_style('ticket_selector', $custom_css);
}
3) Then activate the plugin
You can add the above to a functions plugin.
One other thing that could be slowing down your site could be related to this error:
[OptinMonster] The campaign could not be found. Check to make sure it is active.
You could try either deactivating OptinMonster, or fixing its settings so the campaign can be found.
|
|
sgonser
|
January 10, 2020 at 11:19 am
Excellent – Thank you!
Last question – is it possible to put a grey overlay on the screen based on what you shared? (rgba(3, 1, 4, 0.26))
Thanks!
|
|
Josh
|
January 10, 2020 at 6:46 pm
Yes that’s possible. You could add something like this to your custom CSS:
body.has-overlay::after {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(3, 1, 4, 0.26);
}
Then add this into the function that’s triggered on the click event:
$("body").addClass("has-overlay");
|
|
sgonser
|
January 10, 2020 at 8:15 pm
Sorry, Josh. This is way above me. Sorry to be a pain.
Can you please post the code in entirety.
This is what I did and it isn’t working `add_action(‘wp_enqueue_scripts’, ‘my_add_inline_script_eets’, 20);
function my_add_inline_script_eets() {
$custom_js = ‘
jQuery(document).ready(function($){
$(“.ticket-selector-submit-btn”).click(function() {
$(“#spinner”).show();
});
});
$(“body”).addClass(“has-overlay”);’;
wp_add_inline_script(‘ticket_selector’, $custom_js);
$custom_css = ‘
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -16px; /* half width of the spinner gif */
margin-top: -16px; /* half height of the spinner gif */
text-align:center;
z-index:1234;
overflow: hidden;
width: 32px; /* width of the spinner gif */
height: 32px;
};
body.has-overlay::after {
content: “”;
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(3, 1, 4, 0.26);
}’;
wp_add_inline_style(‘ticket_selector’, $custom_css);
}`
|
|
Josh
|
January 13, 2020 at 12:21 pm
Hi,
This is the JavaScript code in its entirety:
$custom_js = '
jQuery(document).ready(function($){
$(".ticket-selector-submit-btn").click(function() {
$("#spinner").show();
$("body").addClass("has-overlay");
});
});';
wp_add_inline_script('ticket_selector', $custom_js);
|
|
sgonser
|
January 14, 2020 at 3:30 am
Thank you, Josh. That worked.
Is there any way to code this so that it’s not getting blocked by a pop-up blocker?
|
|
sgonser
|
January 14, 2020 at 3:31 am
It appears the overlay is the problem.
|
|
Josh
|
January 14, 2020 at 7:20 am
Hi,
What kind of pop up blocker are we talking about? I can look into this if I know the name of the extension/setting and browser.
|
|
sgonser
|
January 14, 2020 at 7:47 am
Hi, Josh.
uBlock Origin is what I’m using.
Also, loading gif seems to not play on iPhone – any workaround there?
|
|
Josh
|
January 14, 2020 at 10:05 am
Hi Steve,
I see no issues with the overlay with the uBlock Origin extension activated on Firefox. I’m not sure why you’re having issues there, and I don’t know where to start with troubleshooting that issue since I can’t replicate it.
With the spinner, what you can do instead is add this to your custom CSS:
.spinner {
-webkit-animation:spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
What that will do is add a CSS spin animation effect to the image. So you could use any static image (instead of an animated gif).
|
