Why my website shows the elements without styling before showing the styled page?

Question

I have developed this website.

If you click on the tabs above. It shows the website without styles for a microsecond and then renders. I tried everything and removed all the errors and warnings from console but still it happens. It should not do that because it gives very negative looks if the internet is slow then it might be there for a while.

layout/Master page's code:

Update:

New ordering of JS, css files i.e. I put Now jquery first then bootstrap and then other plugins. I put Css in the start of page and scripts after rendering the body. Kindly check.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Tag Manager -->
    <script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            }); var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-W9FNBLV');</script>
    <!-- End Google Tag Manager -->
    <!--  -->
    <!--    Document Title-->
    <!-- =============================================-->
    <!--<title>Velosi | Asset Integrity Ltd.</title>-->
    <title>@ViewBag.Title</title>
    @RenderSection("head", false)
    <!--  -->
    <!--    JavaScripts-->
    <!--    =============================================-->

    @*<script src="~/Scripts/modernizr-2.8.3.js"></script>*@
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet" />
    <link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
    <link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />

    <link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
    <link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
    @*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*@
    <link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <!--  -->
    <!--    Stylesheets-->
    <!--    =============================================-->
    <!-- Default stylesheets-->
    <!-- Template specific stylesheets-->
    <link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
    <link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
    <link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
    <link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
    <link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
    <link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
    <!-- Main stylesheet and color file-->
    <link href="~/Content/Theme/css/style.css" rel="stylesheet">
    <link href="~/Content/Theme/css/custom.css" rel="stylesheet">
    <!-- DataTable -->
    <link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
    <!-- Datepicker -->
    <link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

    @RenderSection("scripts", required: false)

    <script src="~/Scripts/modernizr-2.8.3.js"></script>
    <script src="~/Scripts/popper.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
    <script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
    <script src="~/Content/Theme/lib/CustomEase.min.js"></script>
    <script src="~/Content/Theme/js/config.js"></script>
    <script src="~/Content/Theme/js/zanimation.js"></script>
    <script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
    <script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
    <script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
    <script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
    <script src="~/Content/Theme/js/core.js"></script>
    <script src="~/Content/Theme/js/main.js"></script>
    <script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
    <!-- DataTable -->
    <script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
    <script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
    <script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
    <script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
    <script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
    <!-- Datepicker -->
    <script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
    <script src="~/Content/Theme/Toaster/toastr.js"></script>


    <!--    Favicons-->
    <!--    =============================================-->





</head>
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FNBLV"
                height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    <main>
        <div class="loading" id="preloader">
            <div class="loader h-100 d-flex align-items-center justify-content-center">
                <div class="line-scale">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        @Html.Partial("_Header")


        @*<button class="btn btn-md btn-round btnEmailUs RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>*@
        <div style="display: flex; justify-content: flex-end;" class="m-2">
            <button class="right btn btn-md btn-round btnEmailUs1 RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>
        </div>


        <div id='slider' class="card text-white bg-dark EnquiryLowerBody" style="max-width: 20rem; display:none;">
            <div class="card-header header-callback">Request Callback</div>
            @using (Html.BeginForm("EnquiryForm", "Home", null, FormMethod.Post, new { @class = "mt-3" }))
            {
                <div class="card-body CardBody">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text" id="name" name="name" oninput="this.value = this.value.replace(/[0-9]/, '');" class="form-control" placeholder="Your name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id=" mobileno" name="mobileno" class="form-control" placeholder="00971 XX XXXXXXX" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="email" id="email" name="email" class="form-control" placeholder="name@domain.com" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
                                <option selected value="m-None">-Select-</option>
                                <option value="m-SS">Software Services</option>
                                <option value="m-AIMS">Asset Integrity Management Services</option>
                                <option value="m-HSE">HSE & Environmental Services</option>
                                <option value="m-ES">Engineering Services</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>

                    <div id="divSubServices" class="form-group">
                        <div class="col-md-12">
                            <select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">

                                <option class="" selected value="s-None">-Select-</option>
                                <option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
                                <option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
                                <option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
                                <option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>

                                <option class="AIMS" value="s-RBI">Risk Based Inspection (RBI)</option>
                                <option class="AIMS" value="s-RCM">Reliability Centered Maintenance(RCM)</option>
                                <option class="AIMS" value="s-SIL">Safety Integrity Level (SIL)</option>
                                <option class="AIMS" value="s-PIMS">Pipeline Inspection Management System (Onshore & Offshore)</option>

                                <option class="HSE" value="s-HSECES">Health, Safety & Environmental Critical Equipment Systems (HSECES)</option>
                                <option class="HSE" value="s-AM">Risk Assessment & Management</option>
                                <option class="HSE" value="s-OH">Occupational Health</option>
                                <option class="HSE" value="s-EMP">Emergency Management & Planning</option>
                                <option class="HSE" value="s-HS">HSEIA Studies</option>
                                <option class="HSE" value="s-ES">Environmental Services</option>

                                <option class="EngineeringServices" value="s-FFS">Fitness for Services(FFS)</option>
                                <option class="EngineeringServices" value="s-CDFDECS">Conceptual Design, FEED, Detailed Design and Engineering Consultancy Services</option>
                                <option class="EngineeringServices" value="s-OMP">Operating Manuals & Procedures</option>
                                <option class="EngineeringServices" value="s-DVA">Design Verification & Appraisal</option>
                                <option class="EngineeringServices" value="s-ABDS">As-Built Drafting Services</option>

                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>

                    <div id="divDescription" class="form-group">
                        <div class="col-md-12">
                            <input type="text" id="Description" name="Description" class="form-control" placeholder="Description">
                        </div>
                    </div>
                    <div id="divDescription" class="form-group">
                        <div class="col-md-12">
                            <button id="btnSubmit" class="btn btn-primary BtnSubmitEnquiry">Submit</button>
                        </div>
                    </div>

                </div>
            }

        </div>

        @RenderBody()
        <div id="cookieConsent">
            <div id="closeCookieConsent">x</div>
            We use tools, such as cookies, to enable essential services and functionality on our site and to collect data on how visitors                   interact with our site, products and services. <a class="cookieConsentOK">Got it</a>
        </div>

        @Html.Partial("_Footer")

    </main>
    <!--  -->

</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {

        $("#divDescription").hide();
        $("#divSubServices").hide();

        if (!localStorage.getItem('firstVisit')) {

            localStorage.setItem('firstVisit', 'true');

            setTimeout(function () {
                $("#cookieConsent").fadeIn(200);
            }, 4000);
            $("#closeCookieConsent, .cookieConsentOK").click(function () {
                $("#cookieConsent").fadeOut(200);
            });
        }
    });

    window.addEventListener('mousewheel', function (e) {
        e.preventDefault();
    }, { passive: false });

    $("#trigger").click(
        function()
        {
            $("#slider").show();
        }
    );

    $("#slider").slideReveal({
        trigger: $("#trigger"),
        position: "right",
        push: false,
        overlay: true

    });



    $("#MainServices").change(function () {
        var OptionSelected = $(this).find("option:selected");
        var ValueSelected = OptionSelected.val();

        if (ValueSelected == "Other") {

            $("#SubServices").val("s-None");
            $('#divSubServices').hide();
            $('#divDescription').show();

        }
        else {
            $('#divSubServices').show();
            $('#divDescription').hide();
        }

        //Software Services

        if (ValueSelected == "m-None") {

            $("#SubServices").val("s-None");
            $('#divSubServices').hide();

            return;
        }

        if (ValueSelected == "s-None") {

            $('#divDescription').hide();

            return;
        }

        if (ValueSelected == "m-SS") {

            $("#SubServices").show();
            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').show();

            drpSubServices.children('option[class=HSE]').hide();

            drpSubServices.children('option[class=AIMS]').hide();

            drpSubServices.children('option[class=EngineeringServices]').hide();

            return;

        }

        //AIMS
        if (ValueSelected == "m-AIMS") {

            $("#SubServices").show();

            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').hide();

            drpSubServices.children('option[class=HSE]').hide();

            drpSubServices.children('option[class=AIMS]').show();

            drpSubServices.children('option[class=EngineeringServices]').hide();

            return;

        }

        //HSE
        if (ValueSelected == "m-HSE") {

            $("#SubServices").show();

            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').hide();

            drpSubServices.children('option[class=HSE]').show();

            drpSubServices.children('option[class=AIMS]').hide();

            drpSubServices.children('option[class=EngineeringServices]').hide();

            return;

        }

        //Engineering Services
        if (ValueSelected == "m-ES") {

            $("#SubServices").show();

            var drpSubServices = $('#SubServices');

            drpSubServices.children('option[class=SoftwareServices]').hide();

            drpSubServices.children('option[class=HSE]').hide();

            drpSubServices.children('option[class=AIMS]').hide();

            drpSubServices.children('option[class=EngineeringServices]').show();

            return;

        }
    });

    $("#SubServices").change(function () {
        var OptionSelected = $(this).find("option:selected");
        var ValueSelected = OptionSelected.val();
        if (ValueSelected == "Other") {

            $('#divDescription').show();

        }
        else {

            $('#divDescription').hide();
        }
    });

    $("#btnSubmit").click(function () {

        var name = $("#name").val();
        var email = $("#email").val();
        var mobileno = $("#mobileno").val();
        var MainServiceName = $("#MainServices").find(":selected").text();
        var SubServiceName = $("#SubServices").find(":selected").text();
        var Description = $("#Description").val();


        var EnquiryForm = {
            'name': name,
            'email': email,
            'mobileno': mobileno,
            'MainServiceName': MainServiceName,
            'SubServiceName': SubServiceName,
            'Description': Description
        }
        //alert(EnquiryFormViewModel.name);
        @*$.post("/Home/EnquiryForm", EnquiryForm, function(returnedData) {
            //alert(returnedData.data);

            window.location.href= '@Url.Action("Thankyou", "Others", new {message= "Thank you for contacting us. We'll get back to you soon." })';

        });*@

    });




</script>

brk · Answer 1 · 2019-04-07T12:34:11.317

1

Put all the link tags which are loading style sheets before script tag which are loading javascript file.

In fact you should take js file out of head and put it near closing end of body tag

edited Apr 07 '19 at 12:34

answered Apr 07 '19 at 11:42

brk

48,835
10
56
78

i did it but same issue – Johnny Shallow Apr 07 '19 at 12:12

Mark Schultheiss · Answer 2 · 2019-04-07T14:30:26.523

This is the challenge when you create a page that has a fairly large set of added elements. Most often this is NOT an issue but ALL that needs to be parsed and processed as part of your page load. Start by fixing "basic" things, see how that goes and move to the next set of "things" that negatively impact load performance.

Let' start with some specific issues demonstrated here then move to some general.

NEVER EVER EVER put tags such AS SCRIPT or anything else outside the HTML document - you force the browsers to put/move it inside the body when doing so. Most browsers do something with this INVALID HTML but why not make valid HTML to start with.
Put CSS BEFORE script tags
Put CSS ordered by "library" first - you included a library for a reason, not the cascade sequence IS important - doing this may even make your OWN CSS simpler due to that "cascade" - think of this as a downhill slope with your stuff at the bottom of the hill. (jQuery, then bootstrap, then plugins, then yours etc)
Put JavaScript library code before YOUR code - try to put it ALL in the page bottom if at all possible, especially YOUR code.

General comments:

EVERY time you do something like drpSubServices.children(someselector').hide(); you hit the DOM, This is likely only PART of the issue but it definitely will contribute.
Typically, JavaScript libraries have ways to create "consolidated" bundles for things that go together - try to include those as one item instead of multiple .js files
Remove commented out code in JavaScript - that is what source control is for, do not force the browser to parse garbage out during the rendering process. Blanks lines to me also fall into this category.
Consider creating minimized versions of JavaScript code during the build process or BEFORE that.
"Modularize" your code - it appears you are using MVC so create partial views of stuff and include those only when/if you need it. Putting ALL the CSS and JavaScript on every page adds negative impact to pages where it is NOT used. (see the .min note in that case - even MORE important for re-used content)
Format better - do you REALLY need 6 blank lines in HTML? NO. - not likely a huge issue but WHY? (browser is forced to parse unneeded stuff)
IF it helps YOU to include blank lines, perhaps create a partial view? (modular code?) (more to help you, not the browser here)
- don't use comments such as  that are parsed consider "un-rendered" comments for example you ARE using MVC here, use those MVC comments instead How to write a comment in a Razor view?

HOW to consolidate DOM hits: (may not be specific to load but IF the event triggers it IS)

Hit the DOM once, not many times:

Cache the item: Here you DID but reverse those lines do NOT hit DOM twice:

$("#SubServices").show();
var drpSubServices = $('#SubServices');

new:

var drpSubServices = $('#SubServices');
drpSubServices.show();

DO STUFF ONCE not multiple

drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
... more code like that

Better: (not all, just hit it ONE time), couple ways to do this

drpSubServices.children('option[class=HSE]').hide();// NOT a fast selector
drpSubServices.children('.HSE').hide();//faster selector but...still

Hit the DOM ONE time:

let options = drpSubServices.children('option');
options
  .filter('.HSE,.AIMS,.EngineeringServices,.TPIs,.IIS,.NDTCM')
  .hide();
options.filter('.SoftwareServices').show();

//OR better, just hide all and show the one
let options = drpSubServices.children('option');
options.hide();
options.filter('.SoftwareServices').show();

DO NOT keep re-creating an object:

if (ValueSelected == "m-SS") {
    $("#SubServices").show();
    var drpSubServices = $('#SubServices');

Do it once

    let drpSubServices = $('#SubServices');

    //NOW all the conditionals
    if (ValueSelected == "m-SS") {
        drpSubServices.show();

Expose stuff LAST

    let drpSubServices = $('#SubServices');
    if (ValueSelected == "m-SS") {
        let options = 
           //... (see above for that)
        // THEN show it
        drpSubServices.show();

Another example:

$("#divDescription")
  .add("#divSubServices")
  .hide();

OR consider a class like ".hidden{display:none;}on an element initiallyI do not show`

Then when you need it toggle that class

$("#divDescription").toggleClass('hidden',conditional);
//or
$("#divDescription").toggleClass('hidden',false);
//or
$("#divDescription").removeClass('hidden');

NOTE ALL this also applies to the `@RenderBody()` content, it can also kill a page BUT you have this on EVERY page that uses it so this is your first focus point — Mark Schultheiss, Apr 07 '19 at 14:35
Hi, thanks for such a detailed answer. appreciated. Kindly check my updated code. is it the right sequence and placement? — Johnny Shallow, Apr 08 '19 at 05:28
Your code in the question looks somewhat improved here. This should PROBABLY be the last script: `@RenderSection("scripts", required: false)` AND you still have one script outside the HTML at the end, put that in the body (but last there) . I typically do NOT click links to anywhere that I do not know in a question since the site states the code should be IN the question; which you have done here. — Mark Schultheiss, Apr 08 '19 at 11:33
Also note `meta` should come first, then `title` then other stuff in that header. You have some `meta` mixed in. — Mark Schultheiss, Apr 08 '19 at 11:49

Why my website shows the elements without styling before showing the styled page?

2 Answers2

HOW to consolidate DOM hits: (may not be specific to load but IF the event triggers it IS)