Info
I have never been a big fan of JavaScript but recently discovered Google’s AngularJS Library…
I was intrigued at a particular feature that made it possible to shave quite a few milliseconds from the page loading time but most important of all; to render and display included files but NOT show the source!
This technique will no doubt improve SEO because it will only show your “Golden Content” and reduce the “clutter” such as adverts, banners, superfluous javascript, footers, etc.
Normal loading umpteen images - using PHP include ‘_snippet.php’;
Normal page loading of 1.90 meg images
Notice how long the page takes to load
and epecially the page source code which shows the loaded images
Same ‘_snippet.php’ file using Angular ngInclude
Normal page loading of 1.90 meg images
Notice how long the page takes to load
and epecially the page source code which DOES NOT show the loaded images
1. (PHP files extensions need to be changed from TXT)
2. NB: Image files are NOT included.
3. Please set "_snippet.php -> $RELATIVE_FOLDER to your own images folder.
Please feel free to test using any relevant tools.
Ideas, comments, suggestions, improvements, etc can be made on Sitepoint Forum.
To be clear, this is hardly news, and AngularJS is certainly not necessary to “hide” certain content from your page, vanilla AJAX will do just fine. AngularJS is to AJAX what jQuery is to JavaScript. BTW, large “surprise” AJAX content will score you negative SEO points and raise suspicion about your intentions.
Also, you should add to the page loading time, AJAX fetching time and page re-rendering time to be on the fair side.
It seems a small clarification is needed, AngularJS is for making webapps, not webpages, with emphasis on SPAs. As a pitfall, moving all the logic at once to the client-side also adds the risque of user meddling where they shouldn’t be able otherwise.
Many thanks for your useful insights and observations.
I initially liked the idea of AngularJS and tried to use the AngularJS->ngInclude but had difficulty; the included files were missing numerous variables and constants. It only works on plain HTML text.
I acknowledge the points you made about “vanilla Ajax” and also intrigued by the possible negative SEO impact of AngularJS?
What I would like to do is make the site load a small template and use the “scroll forever” feature instead of clicking to load the next page.
I have researched and found a Github Ajax script, with numerous updates, This should interface with my CI project because it is written by Derek Jones from CodeIgniter. I hope to give it a whirl tomorrow.
A crawler, like the Google indexing bot, when it reads your AngularJS page, it finds a lot of handlebars, mustaches: “{”, with meaningless placeholder names inside them, like pageName, userName, postTitle. That’s because the dynamic rendering part happens at client side, whereas with traditional dynamic pages, it gets generated at server side. What the bot needs for a successful crawl and index instead, it’s the actual content.
The difference is that your content is being generated with AngulatJS upon page arrival at client, whereas with node.js for example, is being generated at server request time for the page. This doesn’t exclude that there may still be some AJAX-ing action going on after the initial response, but there is already a comprehensible content in place.
One way to overcome this, is to read the user agent data and when a crawler like Google bot is identified, it should trigger the server side rendering for it, generating the content for the bot. Sounds easy? Let’s read again: now you need to generate pages dynamically not only at server side, for the crawler, but at client side also, for the user. That’s why AngularJS (or ample AJAX generated content) is best suited for webapps, not for webpages.
There is also the concern of misrepresentation. Say you put a “My little pussy - adorable, soft and pink” title, and then a lot of cat lovers are suddenly starring at mature content instead. That’s why crawlers are wary of this type of page construct, and that’s why it may hurt your page rank.
I have researched further and eventually, after a struggle, managed to use AJAX to load 500 thumbnails in less than half a second!
There are quite a few AJAX versions and searching revealed numerous solutions which were not applicable. AJAX CodeIgniter has two different implementations, the first I tried, sounded very good but the documentation is sadly lacking. What made it worse was PHP 5.3 was the highest acceptable version, error_reporting level could not be set to STRICT (-1). and developing/Debugging could only be done Online. I get the distinct impression that the script was written by a Javascript programmer that tried to interface CodeIgniter. Unfortunately the subtle MVC simplicity was lost and convoluted resulting in numerous unhappy programmers requesting clarification. The author upgraded Github with the latest version about three weeks ago and since been unreachable for comments…
The other version also has poor documentation but fortunately accepts PHP Version 4.6 along with error_reporting(-1) which made debugging on Localhost far easier.
I did notice when viewing page source (using the five most popular browsers), not a single image link was shown BUT Pingdom does show all 500 thumbnail links?
At the moment, I think that this technique not only satisfies the page speed rendering and load times but also the "Golden Content " is preserved as far as SEO is concerned
