Enhancing your website performance - Basic

[khammond]

Folks, lovers of sparkleapp, I have started considering checking the performance of all the websites I built for clients to ensure user experience is enhanced and especially google ranking my sites best or high. In my first attempt I failed miserably with some of the sites I have built and will like to share what I did to fix them as a non-coder. Do the following if you’re not a coder to check your website performance;

1. Enter www.website.grader.com in your browser or click this link https://website.grader.com.

2. Enter your website address the one you want to test. forget about the email address below and click get your answer button

3. If your website scored anything less than 94, you have issues to deal with. Have a look at the report to understand fundamental issues to begin with.

4. If you want to continue dealing with this issue to enhance your website performance, copy and paste this link in your browser or look for googles PageSpeed Insight on this link PageSpeed Insights

Fixing Basic issues
Since I am not a coder, I tried hard to understand the suggestion narrated by google concerning the fixing of the problem and saw some basic steps all website designers or developers must do to mitigate issues. Most issues where about how images, text, java scripts impact the performance of our website. Diving deeper, I gathered all the basic facts and did the following to increase my website performance score. The other issues where advance so to speak since its meant for people with coding skill. and believe Duncan to address it for us here in due time or his earliest convenience.

1. Revisit all the images you used on your website you’re testing and start compressing them into jpeg 2000 or WebP format. If you don’t have any software to do that you can fall on www.tinypng.com. The lower the image size the better, but make sure it doesn’t pixellate or loose compression either. Reload them back into sparkle and don’t forget to define image. Get the image a proper filename, title and description for search engine purposes. To enhance your jpeg 2000 format images even more, go to settings in your sparkleapp, and select image and then check generate webP images. Duncan already knew of this challenge so made provision of it. It takes longer time compressing images into webP when publishing the site, but sake of performance gains have the patience to wait.

2. Look into most of your resources like java scripts etc and ensure to select the lazy load feature if you think it might affect page loading or server response.

3. Ensure that text remains visible during webfoot load. Choose your web fonts wisely and don’t use a lot of them. A font family with normal, light, bold and italics will do the job.with mobile format, make sure your font are large and readable.Text base resources also must be served with compression gzip, deflate etc to minimise total network bytes. I believe Duncan will address that as well since I lack that knowledge.

4. finally serving static assets with efficient cache policy and reducing server response TTFB ( Time-to-first-byte) also enhances website performances. will leave that to Duncan to addressed it .

Its not pretty much but it goes a long way enhancing the websites we create. Go back and check your performance. 98 viola you’ve nailed it.

Thanks

[duncan]

Ok so all this is unnecessarily scary.

First Sparkle implements all of the performance features that website grader is looking for, second website grader has outdated advice.

About the suggestions:

1. Sparkle already produces webp images if you configure it to, it’s in the images settings; higher compression is inevitably going to produce longer publish times (though the first time the image is published only, Sparkle has disk cache for subsequent publishing)
2. Sparkle already implements css and js lazy loading, so you are getting this warning because you exported to disk as offline compatible and published that. If you publish straight to your website you won’t have this issue.
3. we could do a little more in the webfont loading area, but it’s a somewhat obsolete recommendation because all browsers will now show fallback fonts instead of webfonts when webfonts take too long to load.
4. the “efficient cache policy” is setting the expiration headers, it’s a server specific issue so we don’t currently control that in Sparkle, if you have apache I already mentioned it here

Time to first byte combines how slow your web server is with how far your web server is from your site visitor, it’s the total time it takes your content to reach your user. You can lower this on one hand by paying for more expensive web hosting, that has faster servers, and on the other hand by using a content delivery network that takes your content around the world, closer to site visitors (but that too has its own gotchas).

Website grader offered advice on combining files to minimize the number of requests made, which is somewhat true but kind of obsolete in the light of http/2.

The render blocking warning is bogus and unsubstantiated in my opinion.

The sitemap requirement is also bogus, Sparkle can generate it by the way, we don’t have it on sparkleapp.com for many reasons, it’s not actually required if your site has a plain structure and links.

Honestly it looks like website grader is just a marketing tool for hubspot, it uses scare tactics to get you to read their info-marketing. We can hardly spend time addressing all those.

Google’s Pagespeed Insights has much more relevant information, combined with real world usage data, and we are actively tracking and addressing the issues it raises.

I have seen wordpress-based websites score as low as a “6” on Google Pagespeed, and frequently in the low 20s. That never ever happens on a Sparkle website.

[khammond]

Google’s Pagespeed Insights has much more relevant information, combined with real world usage data, and we are actively tracking and addressing the issues it raises.

Thanks for the clarification, I know you will nail this. For most of us the non-coders, I think once in blue moon advice us on the current technology and expectations when it comes to high performance website, so that we would not be fooled into not doing something right. Thanks once again addressing this.

[FlaminFig]

@khammond, There is so much more that goes into web design which can further effect your sites speed but more importantly ranking! The other big thing is having an SSL Certificate because without it Google and the likes doesn’t care how well your site ticks all the boxes… it will flag it and demote it!

The other issue is how good and optimised your mobile version is laid out because that will outrank your desktop version by Google’s policies and if it fails then your whole site will suffer!

As Duncan mentioned, I wouldn’t give these third-party auto website-testers much clout. By making things look bad they have a pricey solution waiting for you! A good example is Sparkle has hardly any javascript that preloads the sites content and yet these third part website-testers will give a poor result. Compare this to a WordPress site that could have 30-40 and at times 70 odd javascripts firing off before the sites content loads and nearly half of that at times are called in from other servers! That in my books is just outright terrible!

There is always room for improvement but I believe Sparkle covers a lot of the basics which when followed gives your site a favourable position with the major search engines and that is from someone who has been creating websites for the last 11 years! The results I get from a Sparkle built website is really good and that also covers SEO and Google site ranking!

[habboud]

Take “Website Grader” with a grain of salt. I tried it on our website and it gave it a 30/30 perfect score for being mobile-friendly, when in fact it’s not mobile friendly yet.