CSS delays affecting the loading of the page's display

I am currently working on a WordPress website and I have noticed that one of the CSS files takes approximately 10 seconds to load, causing a significant delay in displaying the page. I am looking for ways to speed up this loading process.

As part of my efforts to improve loading times, I have installed a caching plugin and I also utilize the Visual Composer plugin. However, it appears that the CSS file associated with Visual Composer is the main culprit behind the delay.

The header section of the code looks like this:

<html lang="en-US" prefix="og: http://ogp.me/ns#">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        ...
        <link rel='stylesheet' id='vc_plugin_themes_css-css'  href='http://www.example.com/wp-content/plugins/easy-tables-vc/assets/css/themes.css?ver=4.4' type='text/css' media='all' />
        <link rel='stylesheet' id='js_composer_front-css'  href='http://www.example.com/wp-content/plugins/js_composer/assets/css/js_composer.css?ver=4.7.4' type='text/css' media='all' />
        <link rel='stylesheet' id='ubermenu-css'  href='http://www.example.com/wp-content/plugins/ubermenu/pro/assets/css/ubermenu.min.css?ver=3.2.0.2' type='text/css' media='all' />
        ...
        <script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
    </head>

Should I consider moving the js_composer.css file to the footer? Or are there other optimization techniques that you would recommend?

Thank you!

htmlcsswordpress

Answer №1

Check out resources like gtmetrix.com to pinpoint the exact issues with your website and receive detailed recommendations for improvement. These tools provide valuable insights and in-depth analysis. Implementing server adjustments or modifying your admin panel may be necessary, but the results are definitely worth it.

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

Do not let CKEditor interact with widget content

Even though the HTML content within the aside tag is not editable, CKEditor still performs content filtering and removes tags while displaying hidden input fields. Here is the relevant HTML widget code: <aside class="widget widget-form" contenteditabl ...

javascripthtmlckeditor

Creating an HTML button that functions as a link to a specific section on the same page

I am interested in creating an HTML button that functions as a link to an item on the same page. Essentially, when this button is clicked, it should redirect to an item within the same page. Is there a way to achieve this using only HTML, CSS, and JavaScr ...

htmlbuttonhyperlink

Utilize Django's collapse feature in a loop to streamline your Bootstrap integration

As I navigate through the event_list, I aim to showcase details for each entry. However, my html only exhibits information for the initial entry regardless of which one I select. For instance, if I click on green event, it triggers the display of the my we ...

htmldjangofor-loopbootstrap-4

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Currently, this website is designed to work exclusively for mobile devices. When viewed in Chrome's mobile view using the inspector, everything appears to be functioning correctly. However, when accessed through Safari or on an actual mobile phone, th ...

ioscssmobilesafarivertical-scrolling

CSS hover effect not working while mouse is in motion

As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...

csshoversiblings

What is hindering me from fetching the information stored in my json file?

Currently, I am delving into learning AngularJS by working on a simple webpage for a company. This page will showcase products that are fetched from a json file. Following a tutorial from the AngularJS website, which covers the exact task I aim to achieve, ...

javascripthtmlangularjsjson

What is the best way to align a modal with a layout when it appears far down the components hierarchy?

Struggling with creating a React modal and facing some issues. Let's consider the structure below: React structure <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModa ...

javascripthtmlcssreactjs

CSS button pressed

I came across a helpful discussion on the topic of CSS for pressed buttons, which provided some answers that I found useful. The link to the discussion can be found here: Pressed <button> CSS. Currently, I have a button within a link and I would lik ...

javascriptjqueryhtmlcss

Move the div from side to side when clicked

My mobile navigation bar currently has overflow, requiring users to scroll left or right to see all the choices. I want to implement buttons with arrows that will automatically slide the navigation bar to the desired direction when clicked. I have attempt ...

javascriptjqueryhtmlcss

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

The act of needlessly closing HTML tags within innerHTML in Angular

My Angular function is having issues with prematurely closing tags when doing search and replace on DOM content. It interprets the HTML incorrectly, resulting in improper tag closures and openings. Here's an example: }--><p _ngcontent-atr-c1="" ...

htmlregexangulartypescriptdom

PHP search function malfunctioning

I'm feeling quite confused about the current situation. I am utilizing a form that requires a student code input of "lz." <form action="classgrades.php?id=<?php echo $courseid ?>" method="post"> <input type="text" name="studen ...

phpmysqlsqlhtml

Is it possible to prevent website backgrounds from duplicating?

When I visit my website and zoom in using CTRL +, the background image starts duplicating instead of just resizing. Other solutions I've found only stretch the image, which is not what I want. My website has a comments section that can make the length ...

htmlcss

How can I center an image in HTML while maintaining a slight margin at the bottom

I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...

htmlcssimagemargin

The CSS within the WebComponent nesting is not valid

Upon testing, I have found that writing CSS directly using nesting is effective. However, when used within a WebComponent and nested with the :host selector, it becomes invalid. Below is a demo code snippet showcasing this issue. My Chrome version number i ...

cssweb-component

Establish a connection to the remote wpengine MySQL service using PHP's PDO extension

By following the provided steps: I have successfully established a connection to mysql using the command line: mysql -uuser -ppassword -h instance.sftp.wpengine.com -P13306 -D database --default-auth=mysql_native_password However, attempting to use the ...

phpmysqlwordpress

Is it possible to stop the manipulation of HTML and CSS elements on a webpage using tools similar to Firebug?

How can we prevent unauthorized editing of HTML and CSS content on a webpage using tools like Firebug? I have noticed that some users are altering values in hidden fields and manipulating content within div or span tags to their advantage. They seem to be ...

htmljavascriptphpcss

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

javascriptjqueryhtml

Ways to activate an event with select2

Hey there! I have a unique setup on my selling item page with select tags. The first select tag is created using HTML, while the others are dynamically added using jQuery when the user clicks on an "Add More" button. <select id='code0' onclic ...

javascriptjqueryhtmljquery-select2-4

What is the best way to incorporate a Django variable as the width parameter in a style tag within HTML?

I'm attempting to utilize a Django variable as the percentage width value within a style tag in HTML, but it's not functioning correctly. Strangely, I've discovered that using curly braces {} within style tags is prohibited—this contradict ...

pythonhtmlcssdjango