Optimize website based on Jekyll

Help
1

I am trying to make a website homepage fast ( load under 1 sec )

Currently the website i am working have

  • Images : 38

  • Js : 6 files

  • css : 3 files

After optimizing and using proper images formats

our website speed is around 1 sec. ( on wifi )

But in slow 3g First Contentful Paint is around : 5 sec

To improve the FCP i am trying to load the header with minimum required css but not able to do that as we planned to host the site on AWS s3.

Is there any way to do that without affecting the SEO of site.

Thank you.

Edit 1:
In normal speed ( on wifi )
wifi

On Fast 3g
fast3g

2

By website speed, are you referring to metrics provided by Google (or similar)…?
https://developers.google.com/speed/pagespeed/insights/

If so, Google itself provides recommendations to improve the website’s speed.

3

Yes, you are right. i am talking about Google Pagespeed, and followed as suggested and what i know.

I normal speed after optimisation it opens under 1 sec ( most of the time ) but we are trying to load the website faster in slow network as well.

In slow network ( slow 3g ) i am trying to improve the FCP and for this i planned to load the header first so that user sees something as soon possible , in react or similar we can call assets on demand but in static site which is hosted on AWS s3 i can’t do that.

4

Ok cool. So what’s the URL to your website?

5

Lazyload your images and use a CDN. Seperate critical and non-critical css and load js asynchroneous. That should do the trick.

So… use lazysizes.js, split CSS in two files and load the non-critical in the footer. Move js to the footer as well and add ‘async’ to it.

6

Services like Cloudinary will do that for you (serve the right image depending on the viewport and the browser) There’s a jekyll-cloudinary plugin for that.

You might also wanna test with Lighthouse and add PWA capabilities to define how browsers should handle cache and offline pages. jekyll-pwa plugin will help you set all of this.

Check also how to properly charge your fonts.

With those optimizations and those mentioned by @jhvanderschee, you website should run fast.

1 Like
7

Thanks Frank!

Using Lighthouse and jekyll-pwa is terrific advice! I do not fully agree with you on Cloudinary. Also, the font article is quite… well… complicated. When optimizing for speed you should always choose for FOUT (flash of unstyled text). Swapping the font (font-display: swap;) is the way to go. See: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

I would always try to load everything from ONE domain (fonts with the help of https://google-webfonts-helper.herokuapp.com/fonts). This is good for speed AND privacy. Some privacy tools/blockers even block cross-domain requests. I would rather have slow images than no images at all. So, if you use optimized images, put them on your own domain. It is a little bit more work than using Cloudinary, but it is absolutely worth the effort.

Note that using optimized images has little influence on the first paint when you use lazy loading. Image size is most of the time NOT the problem. The problem is that your page does not load properly without these images.

8

Hi there, if you have more than 1 .js file, they should be included in 1 js compressed file. Many things could be done, I suggest you to read the article write by webjeda : 100 / 100 page Speed score (you can find this article on Google).

9

make a service worker to locally cache ?

10

Due to some reasons i cannot share the website link currently.

Sorry for this.

11

I think service worker wont help to improve the FCP and first load ?

12

I will surely try this way.

I think PWA wont help in first load neither in FCP ?

  • I am using lazysizes.js
  • CDN : cloudfront is used ( help to reduce the time around 2 seconds )
13

I think PWA wont help in first load neither in FCP ?

You are right. It does not influence the Google score. However, the service worker (part of a PWA) can cache your assets locally, which results in instant loads for returning visitors. Using local cache might be a good idea if you care about speed.

Note that reducing the amount of files (by combining them) will result in LOWER speeds once you use HTTP/2, as HTTP/2 can do (more) parallel requests. Combining code is not a great idea. Minifying is also not a great idea, as it has no real advantage over HTTP compression. The only thing that really matters is using one domain name, as it reduces the amount of DNS lookups (which are expensive).

Less is more.

PS. I think it is funny that the word ‘expensive’ now links to Kinsta :rofl:. SEO humor…
PPS. You can visit https://web.dev for Google Lighthouse (with Firefox, if you love the internet).

14

I read the expensive article and its good one. Though i didn’t checked practically what is suggested there.

So crust is reduce the DNS look up by hosting all/most of the resources at one place.

In our case all resources are hosted at cloudfront except the google fonts , analytics code and bootstrap files as i think they are faster and stable.

Will try to move them on cloudfront as well to see the difference.

15

You should self-host the Google Fonts, as suggested earlier (https://google-webfonts-helper.herokuapp.com/fonts). The JS and CSS from bootstrap should be self-hosted as well. Google Analytics should be loaded asynchronous (or not at all, because you want to ask for cookie consent first).

Good luck!