4 Replies - 2550 Views - Last Post: 04 October 2017 - 01:59 PM

#1 nblinks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 20-August 17

Optimizing CSS delivery

Posted 20 August 2017 - 04:05 AM

Hi members,

Wondering if I can get some help please. I am trying to optimize this web page - http://yokebay.com/s...-lagos-nigeria/ for speed. I have tried all I could but not getting result.

When I use the google speed checker, it is given the below results (see attachment) saying that I should do the following. Can someone help please.

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Optimizing CSS delivery

#2 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: Optimizing CSS delivery

Posted 23 August 2017 - 06:25 AM

Hello,

Forget about this. First of all, your server may be a bit slow to respond (I am in France so maybe it's normal). It took 4.5 seconds before the HTML document itself only started to get downloaded.

Then, look at you network tab: how can you have 1.4Mo of Javascript and 1,3Mo of CSS on this page? There is nothing going on visually. If you are preloading things (I wonder what it is...), do it after the page has loaded. You also have these big png images (choose jpeg when it's a photograph).

Although asynchronous, your javascript and assets take up query slots and you only have so much at a time, so the user has to wait until your bulk has loaded before he can start downloading anything else.

Moreover, since your CSS is so big, it is likely that the page's styling is delayed. You also have custom fonts, which delay the final styling even more, and when they have loaded they trigger a reflow.

Finally, look at your source code: it is so full of junk and duplicate code. Remember that inline Javascript execution delays the parsing of the page and makes it unresponsive.

Considering your content, your home page should load in a flash.
Was This Post Helpful? 1
  • +
  • -

#3 natejms  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 8
  • Joined: 26-July 17

Re: Optimizing CSS delivery

Posted 29 August 2017 - 10:56 AM

I think you're looking for this page from Google PageSpeed Insights which explains how you can optimize the delivery of your CSS. To summarize,

  • Don't load large data URIs inline. For an example, if you're trying to load an image from a long data URI such as `data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Q... etc.`, place it in a CSS file with the right property.
  • Avoid inline CSS altogether. Never use the `style` attribute.
  • You can keep a few important rules in a `<style>` tag but keep most of your CSS in an independent file.


You should also make sure you minimize all of your CSS (and JS), only use the web fonts you absolutely need, and keep unnecessary Javascript to a minimum.
Was This Post Helpful? 1
  • +
  • -

#4 nblinks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 20-August 17

Re: Optimizing CSS delivery

Posted 29 August 2017 - 04:11 PM

Thank you ge∅

I will work on your recommendation. Your comment is really helpful.

View Postge∅, on 23 August 2017 - 06:25 AM, said:

Hello,

Forget about this. First of all, your server may be a bit slow to respond (I am in France so maybe it's normal). It took 4.5 seconds before the HTML document itself only started to get downloaded.

Then, look at you network tab: how can you have 1.4Mo of Javascript and 1,3Mo of CSS on this page? There is nothing going on visually. If you are preloading things (I wonder what it is...), do it after the page has loaded. You also have these big png images (choose jpeg when it's a photograph).

Although asynchronous, your javascript and assets take up query slots and you only have so much at a time, so the user has to wait until your bulk has loaded before he can start downloading anything else.

Moreover, since your CSS is so big, it is likely that the page's styling is delayed. You also have custom fonts, which delay the final styling even more, and when they have loaded they trigger a reflow.

Finally, look at your source code: it is so full of junk and duplicate code. Remember that inline Javascript execution delays the parsing of the page and makes it unresponsive.

Considering your content, your home page should load in a flash.

Was This Post Helpful? 0
  • +
  • -

#5 SeekGuidance  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 17-June 17

Re: Optimizing CSS delivery

Posted 04 October 2017 - 01:59 PM

I run a website too and use external CSS stylesheets. Stylesheets should be compact if you are loading them externally as it slows down the speed of loading your website hugely. Google recommends that you have critical and big blocks of CSS in the actual HTML file rather than a stylesheet as this will help to optimise CSS delivery. You can also try to compress images and make sure you have a priority in what you want to load first.
If you want to load images first, put them closer to the top of your code. If images are the last thing you want to worry about, try to place them nearer to the bottom. Here is what Google has written in CSS Delivery Optimisation:
CSS Delivery Optimisation
I hope this helps, and don't be afraid to ask or message me on more help. I'll be glad to do so and I don't bite. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1