CODEWITHSUNDEEP
jqueryhtmlcsswebload
Jacob
Jacob

Reputation: 900

Can loading some CSS last speed up page load time?

I have an idea to try and make my website load faster, but I want to know if it is actually going to help.

I have a website that is made with HTML, CSS, & jQuery. It runs great on desktop browsers, and is super dynamic. Unfortunately, it is pretty laggy on mobile browsers.

Here is my proposed model for the HTML layout.

Header Section Loads

Now the rapid.css file will have only 1/3rd of the CSS in it. Just the fonts, basic body settings, etc.

End Section Loads

The main.css file will contain the other 2/3rds of my CSS in it. That way, the website does not have to load so much CSS within the first few seconds of loading the page.

My Questions

  1. Will this idea actually make my page load faster and, if so, will it be enough to count.

  2. How can I get this rapid loading to work?

Upvotes: 0

Views: 1531

Answers (2)

Jose Raul Barreras
Jose Raul Barreras

Reputation: 859

There are many rules/tips to improve the speed. Some of them:

  • Enable Compression
  • Use browser caching
  • Minify Resources (HTML, CSS, and JavaScript)
  • Optimize Images
  • Remove Render-Blocking JavaScript
  • Use a Content Delivery Network (CDN)
  • List item

Some resources:

Upvotes: 1

damiano celent
damiano celent

Reputation: 709

For the fastest results:

  • CSS must , must be loaded first, inline as much CSS as you can, not in the html, but inline it in the head section. This is the fastest way to consistently load css fast.

  • Bootstrap is very bloaty and more than 1 extra server request, drop it altogether if you can, if not, oh well, the css with external file, the js bit after the jQuery.

Put no JS files in the head section(except modernizr, if you use that), place the jQuery link just before the closing body tag. Jquery has to be the very first file to be loaded, then the bootstrap js, the "main" js or your jQuery code can be inlined after the body and html closing tag.

As for the fonts, I would try to stay away from using them if performance is the goal. Historically, browsers don't render text until a font is loaded.

There is one way to use a JS promise to load a standard font first and have it displayed and then later on load the font of choice is rendered.

But that is only gonna work on Chrome and FF, maybe MS Edge, but all the rest and esp mobiles wile have a FOUT.

You can also concatenate all CSS into one file, but as said above, inlined in the head section is quickest.As long it's smaller than 4kb, which seems to be the breaking point.

OH yeah, defer load or lazy load the images, if you have super large images, load them loke google does in search results, with a blurred small pic initially.

Upvotes: 1

Related Questions