Tutorial On Optimizing your Xara Website for Google Pagespeed

[sculptex]

Hi, I have just written the following article on optimizing your website for Google Pagespeed. This not only makes google happy, it also makes your website load faster for visitors and consequently makes your server use less resources.

https://www.sculptex.co.uk/optimizin...gle-pagespeed/

I would love for someone from Xara to comment on the "Eliminate render-blocking JavaScript and CSS in above-the-fold content" section as I am sure this could be improved but would be much better done by the application itself during the html page generation.

[behzad]

Very nice, I will bookmark this and use it once I finish my website. Thanks.

[gwpriester]

Wow! That is an amazing amount of time and effort (and help). Thanks for this.

[Boy]

Looks great. Thanks a lot!

[roly]

Wow, thank you Sculptex, but most of it is beyond my capabilities. Question for Xara, could much of this not be done directly into the Xara program? This would prevent many users of Xara software to have to make all of these changes and put a smile on many faces. Not everyone is comfortable making such changes, but I am sure the Tech savvy people at Xara are. In the long run, this could perhaps even bring in more users of Xara web products.

Ciao

Roly

[sculptex]

Hi Roly,
For reasons briefly mentioned in the article, its best for Xara not to mess around with htaccess settings as not all servers use it and they could break a website if it overrode an already existing htaccess file.

Regarding images, it would be cool to have this as an option in the publish stage to maximize compression, but it would have to be optional as it slows down the process considerably and some people may want to retain the meta info such as camera settings, location etc. for example on a gallery website.

The CSS and JavaScript optimizations though would be perfect for Xara to look at optimizing,
Like you suggest, the better Xara Software made websites perform (in addition to already looking great), the more interest it should generate in the Software!

[roly]

Thanks Sculptex, for the clarifications.

Ciao

Roly

[Egg Bramhill]

Really speaking, this is something that would be better addressed by Xara themselves as this type of thing is much better to be determined at the point of generating the code rather than coming along afterwards and trying to re-organize it then.

I couldn't agree more Sculptex. Image optimisation to Google standards should be a basic for Xara's publishing software.

The biggest problem I see in using your excellent method is that each time the site is republished the optimised images are over-written by newer, un-optimised ones.

The first two .htaccess fixes are fine. These aren't affected by subsequent re-publishing.

Again, on optimising css & js this really needs to be achieved by Xara's publish engine, as republishing destroys any previous edits.

The one re the above the fold is more difficult. If you're going to have a slider as a header then this by default is above the fold, similarly with highslide images. The only way I can see of avoiding this is to place these below the fold.

Thank you for an excellent insight.

[sculptex]

I couldn't agree more Sculptex. Image optimisation to Google standards should be a basic for Xara's publishing software.

Well there's actually one step further they could go and that is to also render suitable images to WebP format which is about 20% more efficient than jpg or png, although it requires a little extra code to check browser compatibility as not all browsers support it yet. This also means that both file formats need publishing, jpg/png and webp. But it would be great to have it as an option! This would truly show Xara are at the forefront!

The biggest problem I see in using your excellent method is that each time the site is republished the optimised images are over-written by newer, un-optimised ones.

Actually, if you select Fast Publish (Only Changed Files) in Ftp settings, it does not re-upload them if they haven't changed in the document. I will update the article to clarify this.

The first two .htaccess fixes are fine. These aren't affected by subsequent re-publishing.

Again, on optimising css & js this really needs to be achieved by Xara's publish engine, as republishing destroys any previous edits.

Well as per images, only if the source file changes. This actually makes negligible difference when compression is enabled so I would not worry too much about it!

The one re the above the fold is more difficult. If you're going to have a slider as a header then this by default is above the fold, similarly with highslide images. The only way I can see of avoiding this is to place these below the fold.

Well the above the fold is quite possible for Xara to determine as its so wysiwyg, it actually knows which elements will appear above the fold and which will not, so it has a head start in this respect. However it then needs to know which are render blocking and which are not and how to defer them in the script. A 'cheap' way of getting rid of this message for some scripts is to inline them in the html code, however for css repeated on several pages, this is of course very wasteful as the whole purpose of putting these stylesheets in separate files is to reduce duplication so I would not suggest for a second that Xara do that. Another is to defer them (only suitable ones) to below the body content, but this can give a FOUC (Flash Of Unstyled Content) for a brief moment while it all loads and renders and some people will be critical of that. So all in all, I am sure that there are some elements of this that could be optimized safely with no side-effects (rather than stick everything in the header), but I agree that if there is any chance of 'side-effects' or incompatibility that they should keep ERRing on the safe side.

Thank you for an excellent insight.

Cheers!

[Orelanic]

Hi Roly,


The CSS and JavaScript optimizations though would be perfect for Xara to look at optimizing,
Like you suggest, the better Xara Software made websites perform (in addition to already looking great), the more interest it should generate in the Software!

O yes indeedy this would be a god send, you can get plugins for wordpress so any chance this may happen with xara designer?