I have integrated Zendesk Zopim Chat to Vuestore front. Though adding this chat causes the pagespeed to drop score.
I did added the script through async and added this code in mounted section of page
zE(() => {
// Zopim API
$zopim(() => {
$zopim.livechat.concierge.setTitle('SiteTitle');
$zopim.livechat.concierge.setName('Name');
$zopim.livechat.concierge.setAvatar('https://example.com/siteLogo.svg');
$zopim.livechat.window.setTitle('Support');
$zopim.livechat.prechatForm.setGreetings('How can we help?');
$zopim.livechat.theme.reload();
});
});
Now the issue is that it's affecting the page speed.
I have added screenshot that how it is affecting the page speed.
Check this below screenshot:
Related
We built a simple blog using Next.js and noticed that none of the changes we're making on the CMS (headless wordpress) are reflected on the dynamic pages. For example we updated all the author names and although the changes show up correctly on the blog landing page, the dynamic pages are not reflecting this change (i've tried different browsers and incognito window). I understand that next.js builts these pages when deploying but if this would then mean we'd have to re-deploy everytime we make even a small udpate to the conten on the backend.
Your static pages are fetched when built. But Next.js does have an option for refreshing them on the fly.
Try revalidate options in getStaticProps (https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every second
revalidate: 1, // In seconds
}
}
They say that it's ISR approach (https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration)
When plugin page load then by default open calendar. So how I hide the by default open calendar.
in Iphone page load calander open. website link
You have :
$(document).ready(function() {
$('#hide_cal').delay(8000).fadeIn(400);
});
buried at the end of:
/wp-content/plugins/appointkart/assets/js/jquery.pickmeup.js
Something like that doesn't even belong in the plugin file. Perform all initiation in a separate js file.
I've been up half the night on this issue . I've embedded a google map API via iframe into a Wordpress site and I get the error: The Google Maps API server rejected your request. The provided API key is invalid.
Nothing is wrong with my key. I put it in a vanilla html document outside of wordpress and it works great.
Then I've tried setting the sensor to true in the header.php.
No difference except more errors from my console:
Failed to load resource:
https://www.google.com/maps/embed/v1/place?q=place_id:myplacekey=mykey?wmode=transparent Failed to load resource: the server responded with a status of 403 ()
**Can't post the rest because I need more reputation
I believe the issue is with the ?wmode=transparent being appended to the end of the key. What might be adding that and how can I remove it?
The problem is in your theme.
When you look at the page with the map in browser inspector (Elements tab), you can see that link is ended by ?wmode=transparent
Code of the page does not contain ?wmode=transparent, you can see it on Sources tab of inspector:
This means that code of the page is modified by some js script. Browsing scripts in Sources tab, I had found the following:
At line 13 you can see source of your problem. This is some action for Youtube video, which was done by developers with a rough mistake. They add ?wmode=transparent to src of ANY iframe, including Google maps.
I have checked the latest version of theme. Same bug.
What you have to do: just comment line #13 in the file /wp-content/themes/crescent-theme/js/jquery.custom.js and make it like this:
( function( $ ) {
function modifyPosts() {
/* Fit Vids ---------------------*/
$('.feature-vid, .postarea').fitVids();
}
//Fix z-index youtube video embedding
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
// $(this).attr("src",url+"?wmode=transparent");
});
});
$( document )
.ready( modifyPosts )
.on( 'post-load', modifyPosts );
})( jQuery );
If you will update theme, you have to comment similar line in the same js file.
I'm currently on a project where I want to have :
Wordpress for easy content managment.
AngularJS for some UX (the goal is to have no page reload + nice animation between pages loading) + further functionalities.
And care about the SEO.
In that purpose, I'm using Angular's Route module to get the user a smoother experience, and using the Angular HTML5 "pretty urls" mode to "hook" the page switching (No hashbang -> natural links).
I don't want to generate hashbangs because it's more difficult to maintain (HTML snapshots with phantom.js server etc...) than just leaving Wordpress generate the content as he does it well.
So my intention was to let angularJS controls the user's navigation, and wordpress to generate the content when user will F5 & for the SEO bots(No JS).
But I can't find a clean & clear solution to this problem because either the Angular way will work, either the "PHP" way will work.
Any ideas will be welcome ! :)
Wordpress already provides you with wp_ajax_ hook for AJAX requests. ( link)
Example:
mysite.com/my-test-page
Wordpress
In this simple case we need our wp_ajax_ hook to retrieve a page by it's slug.
One easy way is to use get_page_by_path($page_path, $output, $post_type), to get the page we want where $page_path is the slug.
Then return the page data as JSON, return json_encode($pageArray);
AngularJS
Route: Do a simple GET:
.when('/:page_slug', {
templateUrl: 'views/page.html',
controller: 'PageController',
resolve: {
page : function($route) {
return $http.get(wp_ajax_url,
{
'action': 'the_ajax_hook',
'data': $route.current.params.page_slug
}
);
}
}
})
SEO
Google recently announced they are updating the Webmaster Tools to show you how a Javascript generated site renders and provide you with tips on how to make your site crawl-able.
http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html
Apart from that you can use other services to make your site SEO-friendly today:
getseojs.com
brombone.com
prerender.io
I am looking for a way to modify the links on my Wordpress site so it tracks all my 3rd party links.
I was able to find some help with the, how to create the correct tracking code in Google Analytics, but the second part of the process is to add some specific link attributes.
Here is the example which they suggest I replicate:
<'a href="www.blog-hosting-service.com/myBlog" onclick="_gaq.push(['_link', 'www.blog-hosting-service.com/myBlog']); return false;">View My Blog
Does anyone know where I can insert this code link attributes so I can collect the external clicks via Google Analytics?
JQuery would be the best way in my opinion.
// start by getting the current page path (the one you are sending to tracker)
var pathname = window.location.pathname;
// ready handler to change the links on hosts not equal to location host
$(document).ready(function() {
$('a[href^="http://"]').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
_gaq.push(['_link', pathname]);
});
});