My website built with the Celia template from Envato is loading slowly. It is taking longer than anticipated to load all the content

After purchasing the Celia template from Envato Element, I made several edits to the code for my website. You can view my hosted website on Github at: https://github.com/rosyhnguyen/rosyhnguyen.github.io. Additionally, I used the domain from Namecheap:

Even though my site does not include any video or media files, it seems to be loading quite slow (taking around 5-10 seconds to load the case study page).

If you could please assist me in identifying what might be going wrong with my settings, you can find all the necessary information in the GitHub link provided above. The site takes a lot of time to load

Answer №1

To get a clear idea of what's happening on your website, check out the Network tab waterfall using Chrome developer tools.

I noticed a resource called 'sketchslider-2.png' and another large png file that is 16mb. These images are negatively impacting your site's performance.

It's important to reduce image sizes on websites and use minified versions of CSS and Javascript for better performance.

It seems like you're using heavy png files extensively throughout your site.

Be sure to check your code for any missing resources, as I observed some 404 errors as well.

You can decrease image file sizes using tools like or software like Photoshop.

I've taken a screenshot to illustrate the issue on your case study page.

I hope this information proves helpful.

View the Network waterfall screenshot here

Answer №2

Make sure to take a look at your network tab using Google Chrome.

The file sketchslider2.png is nearly 15 MB with dimensions of 7001 x 3842.

As for fitcheck.png, it is 4.5 MB and has a size of 8168 x 4000.

Unless you plan on displaying your website on a wide screen TV, these image sizes are unnecessary.

Optimize large images to fit within the 1920 x 1080 range.

By resizing sketchslider to a width of 1920 and saving it as a jpg, the file size can be reduced to around 175 KB.

For fitcheck, following the same process can bring the size down to about 100 KB.

Additionally, up-decor.jpg cannot be located, causing unnecessary delays in resolving the issue.

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

No matter how hard I try, the async function within the React Component keeps returning 'Promise {<pending>}' consistently

Currently, I'm facing an issue where running an asynchronous function inside a functional component in React (NextJS) results in the function returning a pending promise: Promise {<pending>}. Oddly enough, fetching data from a dummy API works pe ...

"Implementation of express-session limited to a single route file cannot be accessed in the app.js file of a

I am encountering an issue with the express-session in node js and express 4. I am setting a session variable inside the routes/index.js file, but it is not available in app.js. However, it is available in another route file users.js routes/index.js var ...

Create a customized multibar chart in Angular using NVD3 that displays only a line graph on the dual y-axis, visualizing

Currently, I am experimenting with developing an angular multibarchart that features only lines, with no bars. Instead of using Lee Byron's test data generator, I am keen on generating data using JSON. However, I am faced with the challenge of convert ...

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as exp ...

Using PHP and JavaScript to keep track of file modifications

Being a beginner in PHP and Javascript, I recently created a basic Clock application using Javascript which worked out successfully. Now, I have a file that will automatically change its content. For example, it might look something like this: "12h15: eat ...

Is it considered inefficient to import every single one of my web components using separate <script> tags?

Currently, I am in the process of developing a website with Express + EJS where server-side rendering is crucial. To achieve this, I am utilizing web components without shadow dom. Each page type (home, post, page) has its own EJS view. For instance, when ...

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Forgive me if my language is not accurate, as I am still learning about programming. The forum that I visit has cluttered the page with unnecessary and glitchy images and text for a promotion. This has made the forum difficult to navigate. I was successful ...

Tips for arranging information in ng-repeat using nested objects within JSON data on AngularJS

Looking to display an array of object properties in an Angular view. Here is the object: $scope._Json = { "foo": { "ItemDimension1": { "Item": "item1", "ItemIndex": 1, "SelectedItems": [{ "C ...

There is no display of output or errors for the node indexes

I am facing an issue with my MongoDB code that is supposed to create an index and retrieve data, but it is not showing any output or errors. I have already installed the necessary dependencies like mongose and mongo-client, and there are no URL errors in ...

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

Summary: I am learning JavaScript and jQuery, and wanted to write a script to replace "_normal.png" with ".png" for all "img.avatar" images on Twitter.com. I encountered an error which I will explain below. Background: Practice makes perfect, so I like to ...

Having difficulty with Mongoose in MongoDB when trying to retrieve an array of strings that match existing collections in the database

I've designed a helper function that is supposed to generate a promise containing an array of strings that represent all the names of Collections currently stored in my database. After conducting console logs, I confirmed that my connection to the da ...

What is the best method for deleting automatically added connection proxies in XCC?

Is there a way to make an ajax request from IBM Connections XCC without it being proxied? let api = 'https://my-server2/api.xml' var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = () => { if (xmlhttp.readyState == XMLHttpRe ...

Using jQuery to follow a div while scrolling that halts at a designated top or bottom boundary

I've been working on this jsfiddle: https://jsfiddle.net/3ncyxnzt/ Currently, the red box stops at a specified margin from the top of the page but I want it to also stop before reaching the bottom, so that it doesn't go under or over the footer. ...

Update the scatter/line chart dynamically in Chart.JS by incorporating multiple x and y grids for enhanced visualization

I need to develop a new function that will allow me to input data to update my line chart. Here is the current state of my function: function updateChart(label, xp1, yp1, xp2, yp2) { chart.data.labels.push(label); chart.data.datasets.data.push({x: xp1 ...

Addressing Memory Leakage Issues in a Basic Node.js Application

Out of sheer curiosity and as an experiment with NodeJS, I decided to write a basic program to test the Collatz Conjecture for an incredibly high number of integers. While this concept should work fine in theory, my simple code is unexpectedly facing a mem ...

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

Positioning customized data on the doughnut chart within chart.js

Is there a way to customize the position of the data displayed in a doughnut chart? Currently, the default setting is that the first item in the data array is placed at 0 degrees. However, I need to place it at a custom position because I am working on a ...

What is the process to activate a resize event with nvd3?

I am trying to figure out how to make the resize event trigger on nvd3 for AngularJS. The issue I am facing is that when I add line breaks in the labels of the pie chart and then resize the window, the labels revert back to a single line. What I want is ...

Retrieve items from an array using a series of nested map operations

When I execute the query below, it transforms the json data into objects - 1st level being a map (This works fine as expected) const customerOptions = () => { return customersQuery.edges.map(({ node: { id, name } }) => { return { key: id, text ...

Dealing with bulkWrites in Mongoose and MongoDB: how to handle cast errors with finesse

When importing data into my app's database using MongoDB's bulkWrite operation, I encounter a challenge. The data may contain errors as it comes from an external source. To maintain the integrity of my data, I need to update my collection while s ...