Johannes Lichtenberger

Posted on Sep 18, 2019

Help speeding up website / Mobile View

#help #webdev #html #javascript

Hi all,

can someone help me speedup my website[1] before I release version 1.0.0 of SirixDB soon!? Would be great.

What I did so far was scaling images (lower scale), using Webp instead of JPEG files, moved loading of CSS files before Javascript stuff and adding GZipping to the Jekyll configuration. Loading of JQuery stuff asynchronously or deferred...

However, as I'm no frontend engineer I'm having a rather hard time, figuring out all the stuff :-)

I think @import url("font-awesome.min.css"); in the main CSS-file is taking some time, too.

The mobile view seems to be not optimal sadly:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fsirix.io%2F&tab=mobile

I've used a Jekyll theme, for which I mainly changed CSS stuff :-)

Kind regards
Johannes

[1] https://sirix.io

Top comments (20)

Paweł Kowalski • Sep 18 '19 • Edited

I would recommend:

Lazyload images ( github.com/verlok/lazyload )
Use woff2 fonts, instead of woff (much smaller)
Subset fonts to characters that you use, instead of having all of them (much smaller)
Optimize ( jakearchibald.github.io/svgomg/ ) and inline SVG files (save http requests)
Create font awesome build with icons you use, instead of loading thousands of them (much smaller)
Fixing JS errors or remove things that are erroring, since they are not used anyways - i think order in html is not correct (just a good practice)
Removing google tag manager (MUCH faster)
Do not load any JS in head. Move it all to the end of body (you didnt add defer, so they are loading before anything is painted on the screen)
Minify all your assets (smaller)
Self host as much as you can on your CDN (less ssl handshakes)

After applying, you should be looking at 95+.

Johannes Lichtenberger • Sep 18 '19 • Edited

Thanks so much :) funny, I can not number my points... always starts with one when it's getting converted to an ordered HTML list.

Six: Should be fixed :)
Seven: What is the Google tag manager? Oh, Google Analytics... What would you use?
Eight: Does it still work? I played around with the order or async loading of the JavaScript files, but then it always broke something.

I moved the JavaScript stuff to the end of the body... but now again the responsive layout doesn't work again. It drives me crazy :)

Paweł Kowalski • Sep 18 '19

In markdown you do ordered lists by writing 1. my point :)

GTM is much more than GA, GA should be lighter and faster. GTM allows you to inject any arbitrary js code into your page and do some other very bad things in regards to performance.

I would probably switch to async loaded GA.

In general if you move everything at the end of body and there is no WEIRD js, nothing should change apart from that something will appear on the screen, before js is executed.

I see that you fixed js errors, so at least the order is now correct.

You can do it step by step. Move js to the end of head (after everything).
Next step, move last script from head, to the end of the body. One by one, sooner or later this layout thing should break, and you will at least know which script exactly is breaking.

I would also move mailchimp script to the end of body, just to keep it all together.

TBH i would remove mailchimp script altogether, as it is loading second jquery (1.9.0) inside of it. so i would probably cut out whats needed from there and self-host it.

My personal web performance rules:

As little as possible
Load blocking things last
Lazyload whatever your users dont need ASAP

Paweł Kowalski • Sep 18 '19 • Edited

Ouh, and someone else in comments noticed something important, it looks like cache headers are weird in most assets:

cache-control: public, max-age=0, must-revalidate

This kind of sucks because browser cannot cache those assets even if they didnt change, so subsequent page views are not benefiting from browser cache.

Johannes Lichtenberger • Sep 18 '19

Oh, this must be a Jekyll setting somewhere, maybe :(

Johannes Lichtenberger • Sep 18 '19

It was Netlify, which adds this Header... I had to use a Jekyll plugin:

github.com/jgarber623/jekyll-netli...

Josh Ransley • Sep 19 '19

Two observations from me:

Around half of the overall page size is JS. "Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways." – Addy Osmani
You've mentioned in a comment somewhere that you are using a free Cloudflare plan, perhaps a different plan or host would have faster hosting. I have found big variations in speed between different providers. A recent example was a staging site hosted on our DigitalOcean droplet, then pushed live to client hosting with GoDaddy and the load times doubled.

Johannes Lichtenberger • Sep 19 '19

Okay, I used a Jekyll template and now I'm a bit overwhelmed I have to admit.
Yes, I just moved to CLoudFlare yesterday... I ran Netlify without any other CDN provider.

Josh Ransley • Sep 19 '19

No worries, I wouldn't say the site is SLOW to load for me.
Hmm, I'd still expect CloudFlare to be faster than this. Perhaps it's to do with the server location, the site I was looking at for reference is hosted in/near London (UK) and being viewed in London. I'm not sure what your set up is. It's not scientific but I was seeing sub 50ms times for similarly sized images on my reference site, compared to >400-500ms times for images on sirix.io/. I don't know if it makes a difference betwen JPG (what I'm using) vs WebP, but I would have thought WebP should be faster.

Johannes Lichtenberger • Sep 19 '19

I've used Gimp to convert the JPEP files to WebP and they considerably shrunk in size. I also used 80% quality, and they are relatively small-sized now I think (around 18 - 30kb? Have to work right now, can check later on ;)) :-)

Josh Ransley • Sep 19 '19

I don't think I explained my point properly. I was looking at a 36KB JPG image that loads in ~60ms on my site, versus even an 11KB WebP image on sirix.io/ that takes ~500ms to load. So a smaller file size image takes longer to load for me on your site.

I'd expect some difference just by having the server closer to the user, but ~450ms seems a lot.

I've literally just Googled this to educate myself a little more and found an article by Cloudflare (cloudflare.com/learning/cdn/perfor...) which seems to suggest that server location would have quite an impact.

Either way, your site loads acceptably fast. I can't see any advertised differences between Cloudflare's free and pro plans that would affect the speed. So other things like Pawel listed are going to be your best bet. My hosting suggestion can be an often overlooked quick win if you're trying to eek out the fastest load times.

Johannes Lichtenberger • Sep 19 '19

Oh, I have no clue. Is Netlify that slow? I've heared they host other Jekyll based websites as for instance from Vue.js.

I'm not sure however, if I probably missed something in my Jekyll installation!?

Adam Crockett 🌀 • Sep 18 '19 • Edited

The stock images on the bottom of the page, well all stock images of a corporate nature are a turn off for me. I think ditching them might be good.

Also is that 2 different webfonts?

I suppose get it on cloudflare under some edge server cache.

Johannes Lichtenberger • Sep 18 '19

Hey thanks, I thought they are nice and bought them a while ago, but maybe you're right!?

What do others think?

I just move to the free Cloudflare plan, but may pay the 20€ per month!? I don't know :)

Adam Crockett 🌀 • Sep 18 '19

My opinion is right for me 😅.

To me I see a product marketed at businesses but what I would rather see is a product marketed at tech leads of said business, usually developers. Developers are very binary people there is no middle ground. And so images like this add little value to me. But what I do like is fast (feeling) websites that get to the point quickly and I think the content is good. Take a look at my to 40 interesting website features post for some inspiration maybe? Anyway good job!

Johannes Lichtenberger • Sep 18 '19

Ah, thanks :-)

What I also like more are vector graphics, which are somehow just nice to look at... artistically ;)

Earid A. • Sep 18 '19

GTMatrix explains well (Yslow).

gtmetrix.com/reports/sirix.io/KnB0...

You need to add Add Expires headers. You have 10 external Javascript scripts & 6 external stylesheets. Try combining them into one. also seems like Gzip is not working correctly.

Johannes Lichtenberger • Sep 18 '19

I think it's because of the JavaScript from Mailchimp :(

Johannes Lichtenberger • Sep 18 '19

I'm getting crazy... I think now I broke the mobile pages all together somehow (at least with my tablet sometimes I'm getting the desktop versions, the navigation is missing...). Maybe because of some "optimization" by Cloudflare?

Johannes Lichtenberger • Sep 18 '19

Seems it's done by using JQuery... deciding if it has to display the mobile variant or not, so I had to move this loading of JQuery before loading the CSS-files.

View full discussion (20 comments)

DEV Community

Help speeding up website / Mobile View

Top comments (20)

Read next

Mastering Bruno: A Beginner's Guide to API Clients

Writing high quality tests

How to Create a Dynamic Popover with CSS and JavaScript 🚀

From Web2 to Web3: A Developer’s Guide to the Shift