I have recently been reading up on the AMP-CACHE and although the URL will change in Q1 2017 the question I'm trying to understand is how to optimize the experience for a mobile user.
If you start with the view that AMP pages are the best way to show mobile users your content then if they find an AMP version of a page via Google shouldn't links take them to the AMP version of the site.
And in that case should that be the google AMP Cache version?
OR the underlying amp version that the site created.
In our case we have created an AMP version of our site
http://amp.sportsmole.co.uk
You can obviously look at and link to pages on that but the implication of some of the documentation is that using the AMP cache version is even better?
Is it and how should one do that?
When I started looking at AMP pages I wondered about this but ignored it up until now. However, the more I read about the goal of the AMP Cache the more I wonder how to take advantage of it.
Anyone have any ideas on how to use the AMP cache to make sure that the users get the fastest experience.
You may probably want to check the Cache optimizations and modifications from Google documentation:
The Google AMP Cache performs optimizations and modifications, such as the following:
Validates content is truly in AMP format, meeting all AMP performance goals.
Caches images and fonts in addition to AMP documents.
Limits maximum image dimensions to prevent browser memory issues and poor responsiveness.
Various transformations to improve the delivery efficiency of images via the amp-img tag, such as:
Removal of data that is invisible or difficult to see, such as certain metadata.
Conversion of images to smaller and mobile-friendlier image formats, such as converting GIF, PNG, and JPEG format images to WebP in browsers that support WebP.
Transformation of the image to a lower quality if the request includes the Save-Data header.
Generation of alternatively sized versions and adding srcset attributes to support delivery of responsively sized images.
Serves over a secure channel (HTTPS) and uses the latest web protocols (SPDY, HTTP/2).
Sanitizes AMP documents to prevent XSS attacks based on incorrectly closed HTML tags, comments, and more.
In making the above transformations, the Google AMP Cache disregards the “Cache-Control: no-transform” header.
Related
How to use or setup a google AMP cache for my amp website. I have seen many site manages their request from google.com server . How it is possible for me?
To make Google serve your pages as AMP-page, the page must be re-written / modified to make it fit the AMP requirements.
AMP-pages are stripped down versions of web pages, with some restrictions compared to ordinary websites. The HTML markup is slightly different, i.e. and there are other restrictions such as CSS limited to 100kb. Those sites are separately hosted and as soon as Google crawled it, it might be included in the AMP mobile search results.
See AMP documentation for the details on how to implement it.
Is there any way how to force loading main homepage (index.html) to load from AMP Cache?
I have all images loaded from Cache according to manual: https://developers.google.com/amp/cache/overview
But in DevTools audit there is still an error for the homepage (not being served through http/2 - from the cache)
I’m not sure exactly what you mean but think you may be misunderstanding the point of the AMP cache.
The Google AMP Cache is not like a CDN (Content Delivery Network) that always sits in front of your site, though in certain instances it acts like one.
The Google AMP Cache is automatically populated by Google when it crawls your site. Any searches on Google while on mobile will then serve your AMP pages, rather than your normal pages, and will also serve them from the Google AMP cache rather than from your domain. This is done for a number of reasons, but primarily to create the “instant loading” effect that AMP gives when loaded from Google Search results (aka Search Engine Results Page or SERP). In this case the whole page including the index page is served from the Google AMP Cache.
Other sites and domains can also decide to display AMP pages instead of your HTML pages if they want, and can decide to serve them from the Google AMP cache, from their own AMP cache (though, other than Google, only Cloudflare have implemented their own AMP Cache AFAIK) or directly from your home page (in which case there is no cache used). Twitter for example automatically replaces links with their AMP equivalents but loads from the real domain so is fast (due to AMP) but not “instant” (like it is in the Google Search Results).
So you, as a site owner, don’t decide when to use the AMP Cache - the calling application (e.g. Google SERPS, Twitter) decides that. And if the calling app/page doesn’t use an AMP Cache, then it is served directly from your domain and therefore whatever technology your domain supports (e.g. HTTP/1.1 or HTTP/2). You can of course give out the AMP Cache URL instead of your real one if you want.
You seem to suggest you have altered your page to replace all images and the like with references to the AMP cache - is that so? If so that sounds like a bad idea, as the cache is loaded from your site which now depends on the cache, which is loaded from your site, which is... etc.
Using Joomla System - Page Cache, my webpage is now around 4-5 sec.
But i have few pages which will be shown only to registered users. I just checked its taking around 10-15 sec. When i inspected using chrome, i can see few things, i have livechat, which is taking around 2 sec, and few things. But live chat is showing in homepage also. but that page is speed.
Wanted to know is Joomla system cache plugin will not work for registered users visible page. or any other plugin i can use to speed up this type of pages.
Joomla have one JCH Optimize plugin which will decrease your website load speed.
It will compress all css and js file into one file.That file will store in cache so website speed will be up.
This plugin will be helpful to you.
Thanks
Are you using Joomla.
for some components only had the problem of page cache. if u need to clear cache.
and you need to speed up the joomla site
follow the basic step:
Enable Gzip Compression
Using the Gzip Compression feature, you can compress your website pages before sending them to the user. After that, they will be uncompressed by the user’s browser. And this process takes less time than transferring uncompressed pages.
Enable Cache System
Optimization Settings (Images, CSS, Java Scripts…)
Now Check Your Joomla Website Speed
it may use full to speed up your site.
Wanted to know is Joomla system cache plugin will not work for registered users visible page.
Per the Joomla! Documentation, Page Caching:
Only caches pages for guest visitors (not for logged in visitors)
or any other plugin i can use to speed up this type of pages.
Aside from JCH Optimize (which was already mentioned), another component I recommend is JotCache, which is far better than just the Joomla! default cache.
You may, also, use GTmetrix to analyze your site against both Google PageSpeed and Yahoo! Yslow.
Finally, you may try using a CDN to speed up resource delivery. Here are a few:
MaxCDN
Amazon CloudFront
Azure CDN
CDN77
CDNetworks
CDNlion
CacheFly
EdgeCast Networks
KeyCDN
SkyparkCDN
You can use CDN for Joomla! to incorporate the CDN technology.
Overall, your best bet is going to be a combination of the CDN and JCH settings to trim down the overall weight of the site using GTmetrix to compare the site after each change.
Further reading: Joomla Performance & Speed
I'm working on a site where we are using the slide function from jquery-ui.
The Google-hosted minified version of jquery-ui weighs 63KB - this is for the whole library. The custom download of just the slide function weighs 14KB.
Obviously if a user has cached the Google hosted version its a no-brainer, but if they haven't it will take longer to load as I could just lump the custom jquery-ui slide function inside of my main.js file.
I guess it comes down to how many other sites using jquery-ui (if this was just for the normal jquery the above would be a no-brainer as loads of sites use jquery, but I'm a bit unsure as per the usage of jquery-ui)...
I can't work out what's the best thing to do in the above scenario?
I'd say if the custom selective build is that small, both absolutely and relatively, there's a good reasons to choose that path.
Loading a JavaScript resource has several implications, in the following order of events:
Loading: Request / response communication or, in case of a cache hit - fetching. Keep in mind that CDN or not, the communication only affects the first page. If your site is built in a traditional "full page request" style (as opposed to SPA's and the likes), this literally becomes a non-issue.
Parsing: The JS engine needs to parse the entire resource.
Executing: The JS engine executes the entire resource. That means that any initialization / loading code is executed, even if that's initialization for features that aren't used in the hosting page.
Memory usage: The memory usage depends on the entire resource. That includes static objects as well as function (which are also objects).
With that in mind, having a smaller resource is advantageous in ways beyond simple loading. More so, a request for such a small resource is negligible in terms of communication. You wouldn't even think twice about it had it been a mini version of the company logo somewhere on the bottom of the screen where nobody even notices.
As a side note and potential optimization, if your site serves any proprietary library, or a group of less common libraries, you can bundle all of these together, including the jQuery UI subset, and your users will only have a single request, again making this advantageous.
Go with the Google hosted version
It is likely that the user would have recently visited a website that loads jQuery-UI hosted on Google servers.
It will take load off from your server and make other elements load faster.
Browsers load a fixed number of resources from one domain. Loading the jQuery-UI from Google servers will make sure it is downloaded concurrently with other resource that reside on your servers.
The Yahoo developer network recommends using a CDN. Their full reasons are posted here.
https://developer.yahoo.com/performance/rules.html
This quote from their site really seals it in my mind.
"Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective."
I am not an expert but my two cents are these anyway. With a CDN you can be sure that there is reduced latency, plus as mentioned, user is most likely to have picked it up from some other website hosted by googleAlso the thing I always care about, save bandwidth.
TL;DR QUESTION: Are the Angular and PageSpeed compatible at all? I can't find any information anywhere on this.
I have an application that uses AngularJS to load in images from external websites. These images are often quite large (~500kb, ~1200x900px) but are served in my application at a lower resolution (~800x500px). I have no control over the image size or level of compression.
I've signed up for Google PageSpeed service and have everything up and running. However, these images are not being touched in any way. I'm wondering if this is because I'm using AngularJS to serve them up (the images are despite being in Angular, I'm serving the images with src="{{img}}" rather than ng-src).
Any ideas on what I can do to get this working? It really seems like an ideal service for me, proper compression and scaling of images would make my page loads go from ~2mb to ~100kb!
Are there any other services which do a similar thing? I need some sort of middleware to compress and scale images before serving them to my user.
EDIT: For clarity, my server is running on Heroku using NodeJS/ExpressJS/AngularJS/MongoDB. Don't know if this affects anything.
After doing a bit of research, it seems that PageSpeed works similar to the Google search, in that it indexes your page and looks for images to compress. Seeing as Angular needs to load scripts before pages are loaded, the two just won't work together.
There is a possible solution found here:
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
For me this won't really work, as I have dynamic search pages that I can't really pre-render with PhantomJS. But for others, this might be useful.
Please alert me here if this ever changes!