Facebook Like And Twitter Tweet Load Slow - javascript

I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.

It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.

This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.

I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.

Related

Refreshing Google Ads for Single Page Application

I have a website (hellostory.org) with a custom event that's fire when a user clicks a link. Instead of re-loading the entire page a fetch request is issued, the server processes the <main> tag content, and then the <main> content is entirely replaced with the server's response.
The reason for this is three-fold:
refreshing the entire page content is not optimal for this kind of content
my own benchmarking has found that fully refreshing the page is an order of magnitude slower than just processing the rendering that changes from page to page
a better user experience, especially on mobile.
Problem is though, the ads never refresh. I'm wondering if any of you guys have had a similar problem? How have others tackled Adsense for single page applications? Any advice that won't violate Google's TOS? Or maybe even documentation from Google on this topic?
EDIT: To clarify, I only want to refresh the page when my custom "user clicked a link" JS event fires.
This is being done with:
googletag.pubads().refresh();
It is against the TOS of Adsense, but you can use it with Adsense + DFP (Double click for publishers)
This documentation should point you in the right direction
Remember to use DFP, or you will get banned!

Techniques for loading page with several thumbnail images (laravel 5.3)

I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.

SHOUTcast streaming music and OpenX ads

I have created a tab page app that streams music and displays banner ads via OpenX (approved by Facebook). The page that frames within Facebook is located here: https://www.mypchost.com/stream/
The problem I am encountering is that the banner ads will display properly OUTSIDE of Facebook, but not within the app itself (https://www.facebook.com/pages/MyPCHostcom/220325541429517?id=220325541429517&sk=app_484549871594370). What should happen is that both, the background should rotate at 30 second intervals, and the banners should change when the page is loaded; sometimes refreshing the page 3-6 times will make that happen, it varies.
I have tried using both JavaScript provided through OpenX and iframe code. Both will work OUTSIDE of Facebook - but never WITHIN it.
I have tried everything possible I can think of. I can set banners to be rotated manually using JavaScript, but that disallows the functionality of the OpenX ad server from rotating banners as then it isn't tied into the server, its manually coded onto the page.
Does anyone have any idea as to WHY this works OUTSIDE of Facebook and NOT inside? If you open one window with the outside version and one with the app within Facebook and refresh both, you will see different ads served. This is such a SIMPLE thing, but why in the world is it NOT WORKING!!!
The problem you're having is 'cause the delivery URL for OpenX isn't using your SSL URL. Likely all you need to do to correct it is replace the http: with https: in your invocation code for the banner's zone. There may be more to it but that's the gist.

Do links with javascript slow down a page?

Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"
I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.
What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories