Initiating the bootstrap css download following the completion of page loading

It has been recommended by Google PageSpeed Insights to eliminate render-blocking CSS:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

To achieve this, one must extract important parts from the bootstrap style rules to display above-the-fold content and then include the bootstrap CSS file after the page has finished loading.

This process may require a significant amount of effort, but it is possible (I think).

However, by linking the bootstrap CSS after the page loads, all inline overrides to the bootstrap rules will be lost.

If you have any ideas on how to tackle this issue, please share them.

Thank you,

Answer №1

To optimize my website's performance, I prefer loading bootstrap from a CDN using JavaScript after the page content has loaded. Then, I use an online tool like this one to extract the critical path CSS efficiently: (Alternatively, you can utilize the same tool locally with Node or PhantomJS: https://github.com/pocketjoso/penthouse)

The extracted CSS is then minimized and placed in the header for improved website speed.

Answer №2

In the end, I came across a solution that I believe could be helpful to others in need.

Following AmacB's suggestion, I decided to download a customized version of the bootstrap css. I then transferred the css into an excel sheet, with each rule on its own line. Next, I added a x next to each rule in one column, and created a formula in the third column to display the rule if there was an x, and not show it if there wasn't. This modified list was saved and uploaded as a new css file for my site.

Although it worked, the resulting Css file was 32 kilobytes, too large to inline.

So, I started reviewing each rule to determine if it was necessary for above-the-fold content. Any rules deemed unnecessary had the x removed, the updated list saved, uploaded, and tested. This process took some time, but eventually I managed to condense the css to only include essential rules for above the fold, totaling about 80 rules.

Afterwards, I included the following code in my php file header:

$TheCSS=file_get_contents('/css/bootstrap-reduced.css');
echo '<style>'.$TheCSS.'</style>';

As a result, my Pagespeed Insights score improved to 99/100.

However, adding 4kb to every page seemed counterproductive. So, after the page loads, I utilize jquery to link to the bootstrap cdn instead of inserting inline css on subsequent page loads.

Additionally, I developed VBA code to streamline the process:

Sub SaveAsTextFile()
TheFileName = "bootstrap-atf.css"
ThePath = "C:\Users\MyFolder\"
Sheets("Sheet1").Columns("C").Select
Selection.Copy
Sheets.Add.Name = "Temp"
Sheets("Temp").Select
Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks:=False, Transpose:=False
Sheets("Temp").Columns("A").Select
LastRow = ActiveSheet.UsedRange.SpecialCells(xlCellTypeLastCell).Row

Set Rng = Selection
Open ThePath & TheFileName For Output As #1
For i = 1 To LastRow
 cellValue = Rng.Cells(i, 1).Value
 If cellValue <> "" Then Print #1, cellValue
Next i
Close #1
ActiveWindow.SelectedSheets.Delete
End Sub

By marking desired rules in the excel sheet and clicking the "Save CSS" button (which can be added to the sheet), the rules are saved as a css file named bootstrap-atf.css (atf=above the fold).

This significantly simplifies the trial and error process.

Answer №3

For optimal performance, consider refraining from using CDNs for Bootstrap and JS. Instead, download a copy of Bootstrap from getbootstrap.com/getting-started/ and integrate it into your css directories.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

Node.JS: Combining Multiple Files into a Single Output File

Currently, I am in the process of building a data pipeline using Node.js. While I acknowledge that there are better ways to approach this, I am determined to implement it and make improvements as I go. Here's the scenario: I have a collection of gzi ...

Is there a way to remove the grey overlay when clicking on an <a> tag?

I want to develop a Hybrid app. On a webpage, I have buttons displayed in the following format: <a href="#"> <div style = "height: 50px; width: 50px; background-color: #00ff00; margin: 32px"></div> </a> Whenever I tap and hold ...

Enhancing User Experience in Bootstrap 4: Making Dropdown Parents Clickable Links

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar ...

In IOS 9.0, flex items do not wrap to new lines and result in overflow

While it functions properly in other browsers, the issue arises in Safari. I require the flex items to occupy the entire width on screens smaller than 768px. Currently, they are taking up the full width of their container but remaining in a single line, wh ...

Centering text on input placeholder

What is the best way to center a placeholder vertically in an input field? input[type='text']{ background-color: rgba(255,255,255,.4); border:3px solid rgba(0,0,0,.5); min-height: 45px; border-radius: 6px; color:#fff; } input[type=&apo ...

Support for other languages in Laravel with the Dompdf package

I utilized the dompdf package in my Laravel project to generate a PDF file. However, when attempting to display content in a language other than English (like Bangla) ??????????????????????????? characters appear. <body style="font-family: 'Ador ...

What is the best way to add flair to the HTML <title> tag?

Just a quick question - I'm wondering if there is a method to apply CSS styles to an HTML element. Here's an example declaration: title { color: red; font-family: 'Roboto', sans-serif; } ...

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

Is it possible to revert the text back upon double-click or when it loses focus?

When I click on a dropdown labeled 'View Capacities', the label changes to 'Hide Capacities'. I am attempting to make it change back to the original label when it is double clicked (when toggle closes) or when the user clicks elsewhere ...

Changing the loading spinner icon in WooCommerce

Could someone help me change the loading spinner icon in WooCommerce? The current icon is defined in the woocommerce.css: .woocommerce .blockUI.blockOverlay::before { height: 1em; width: 1em; display: block; position: absolute; top: 50 ...

PHP incorporate diverse files from various subfolders located within the main directory

My question is similar to PHP include file strategy needed. I have the following folder structure: /root/pages.php /root/articles/pages.php /root/includes/include_files.php /root/img/images.jpg All pages in the "/root" and "/root/art ...

Surprising outcomes when hosting my website on its domain

During the development of my website, I uploaded it to Cpanel once everything was finished. It functioned perfectly fine at that time. However, after making some changes and uploading it again, the fonts and videos on the live domain appear larger than i ...

Constructing a string with specific formatting inside a For loop

I need assistance with formatting a string within my webform. Currently, I have a function that uses a for loop to output each item in my cart. However, I am struggling to include tab spaces and newline characters for better readability. Here is the code s ...

Inheritance in SASS - excluding the parent class

Can I apply this syntax to inherit a class in SASS? Code .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } Output .message, .success, .error, .warning { border: 1px solid # ...

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

Hover initiates a basic image presentation

Does anyone know how to create an image slideshow that only plays when a user hovers over the image? I found a demo that does everything I need except for the hover functionality. Check out the demo here. You can find the documentation here. Here is the ...

Deactivating form elements using jQuery

I am attempting to utilize jQuery in order to disable a form element once a checkbox is clicked, but for some reason it's not working properly. Can someone help me identify the issue? $('name="globallyAddTime"').click(function() { if ($ ...

Hiding content with a fixed Bootstrap menu

How can I prevent the fixed menu in my web page from hiding content, especially when the screen size is reduced and responsive menu hides even more content? Here's an example of the code: <nav class="navbar navbar-inverse navbar-fixed-top" styl ...

The secret to perfectly align a container in react-bootstrap

I am currently working on a website using react-bootstrap, and I have come across an issue where I need to change the width of a container to 60% while still keeping it centered. Despite adjusting the width, I am having trouble centering the container. Can ...