Website takes too long to load on internet

JJanakrishnanMay 23, 2020

Hi,

Recently I purchased your Canvas theme. It really nice and i liked to use it for my company's webpage.

Once i hosted it to server and run the website on internet, it takes TOO LONG time for the homepage to load. Not only homepage all other pages too.

Almost it takes a 60-90 seconds to get fully loaded.

My website URL: https://www.jksourcing.com/

I've contacted my hosting company and they activated Cloudflare CDN for this and extended the speed limit by clearing caches on my server.

Even though i didn't get the results, still it take 90 seconds to load.

I've searched on internet and got a suggestion to check speed of my site with the help of Google's test site:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.jksourcing.com

And really i don't understand any of the things i got in result.

It says to UnCSS and minify like stuffs. I just tried to to things but am not well knowledged and i ended with failures.

Only thing i understand was it says to reduce image sizes, but other than homepage images all other images are no more than 30KB.

Am a beginner and i don't know much in coding

I've seen an topic regarding this, it says to get help in Documentation>Start>Optimization Tips

Its says something like gZip Compression & Browser Caching, Image Compression & Optimization, CSS & jQuery Minifications and Content Delivery Network.

When i visit the link mentioned in gZip Compression & Browser Caching to code .htaccess file. But it have a tons of codes. I don't know which i've to use. Or i've to copy all the codes and paste it to my websites .htacess, it won't affect the already .htaccess codes in it?

Please advise, as I cannot use this template if it will really take 60-90 seconds for the webpage to fully load.

Kindly help me step by step to fix this issue.

Thanks

SSemicolon WebSTAFFMay 24, 2020

Hello,

The Slow Loading issue is mostly never an issue with the Template but depends on the Amount and Size of the Media Files or the Server Configurations/Speed. Also, when we are checking the Codes on your Page, there is no external URL on the Page (except the Google Fonts and the Google Analytics) that could cause this slowness. So this is not an issue with the Canvas Template, as this is a Static Template and does not require any Server-Side Processing.

However, the Images on your Website are a bit larger than expected and it is recommended to optimize them using an Image Optimizer, ex, https://kraken.io/ .

Now, coming to the Servers, it appears that you are using BlueHost. If this is a Shared Hosting, you can expect it to be slow as the resources are shared between users and the more users on the Servers where your website is hosted, the slower your website will be. If this is a Dedicated or a VPS Server, then this could be an issue with the Server Configurations or Caching Capabilities/Settings and you will need to optimize this yourself as this is your responsibility. The .htaccess Codes we had provided are the recommended settings provided by the HTML5 Boilerplate based on the Latest Standards required for Browser Caching, gZIP Compression and other optimizations. Either, you will need to invest in a Good Optimized Hosting Server or hire someone to help you optimize the Servers. We use CloudFlare and Google Cloud Servers, which we are managing ourselves and it appears to be working fine for us: http://themes.semicolonweb.com/html/canvas/intro.html .

A few things you can do is:

Set a Page Loading Transition timeout by setting a data-loader-timeout="5000" to the <body> Tag.
Remove the Page Loading Transition entirely by adding the .no-transition Class to the <body> Tag.

More settings and instructions can be found in the Documentation > Start > Page Transition Section.

For the included CSS/JS Files, since Canvas is a Multi-Purpose Template, everything is included by default and it is the user's responsibility to include/exclude the codes according to what is required for their website. We provide tools like Custom JS Package Generator: http://support.semicolonweb.com/js-package-generator/ and for CSS, you can consider using the css/imports Folder and the style-import.css File to include/exclude the CSS according to your usage requirements. The CSS Files in css/imports Folder are the mirror copies of the style.css but broken into parts so that you can simply use the CSS Styles you actually need for your Website. Start with the style-import.css File and remove the @import references for the Elements Styles you do not need for your Website.

Support is provided only for the issues or bugs arising from the Design and Functionality Features already included with Canvas and not for User Customizations as this could be limitless. Speed Optimizations are based on User's Content, Hosting Environment, Server Configurations or CDN Usage and falls under Customization. And unfortunately we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to optimize your Website manually. For any other issues covered within the Support Policy, we are always here to help you.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.