Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created some Restaurant website, that's got single Menu page containing different food items. The problem is that above mentioned page is loading too slow on first load. Firstly, i thought that when u enter the Menu page, all items with appropriate images (about 200 images) are loading and this is the root cause of the problem, but then i set up JS trigger which clicks certain menu-item on page-load and loads only 6 images. However, it didn't help. So please, describe some ways of optimizing my page for fast loading.
Thanks a lot in advance! :)
Even if only 6 images are loaded, depending on the size of the images, it'll be slow.
COnsider resize your images to optimize the speed.
You can do it using Gimp / Photoshop or this website: https://tinypng.com
[EDIT]
Don't use all these separated files in Production:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
the CSS inside the HTML
And do you really need THAT many JS files?
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
Don't use in this way, minify all and be sure that you are using the minified version of jquery, not the jquery.js.
Check it here: https://code.jquery.com/
Give a try to Grunt to help you with the automation and minification of the code: https://gruntjs.com/
Or just use this website: https://www.minifier.org/
You should optimize you all images:
You can use online tool for this:
Compress jpeg
url : https://compressjpeg.com/
Compress png
url: https://compresspng.com/
You can upload many picture on it and this will zip folder of compress images.
After optimize all images you site speed will increase.
Use java script ajax and create pagination for listing. i.e you will get data from database and display only 10 values at once. and for images.. pick some of your common images and create sprite .. these 2 things help you the most. in your every single project..
Related
I am building a website on Visual Studio Code and I'm using Bootstrap 5.3, but the functions are not working - buttons not expanding, carousel not rolling, etc. I'm a beginner, so I've been struggling to understand why :(
Do someone know what's the issue or had the same problem?
Many thanks!
I used the CDN from here: https://getbootstrap.com/docs/5.3/getting-started/download/
This is what I have in head - these are followed by my own css file only.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
*I didn't start my own JavaScript yet, only have the html and css files.
You will need to include both of the required resources. Put them both in your <head> element.
The Bootstrap5 css (style) bundle
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
The Bootstrap5 JavaScript Bundle
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Source: https://getbootstrap.com/docs/5.3/getting-started/download/
If you edit your post to contain the html itself then we can have a look and see what the issue is. This will most likely lead to better answers for you.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm trying to load jQuery library following videos but it does not work. When I'm trying to load some jQuery function, it writes that jquery is not defined. I also tried CDN.
<title>
GRID
</title>
<link rel="stylesheet" href="grid.css">
<link href="https://fonts.googleapis.com/css?
family=Ubuntu&display=swap" rel="stylesheet">
<script src="jquery-2.1.1.min.js"></script>
<script src="script.js"></script>
</head>```
You need to put jquery-2.1.1.min.js file into same location where your quoted file is if we are talking about local purposes.
If your prefer to download it each time, you can use for example Google Hosted Libraries in following way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Like so <script src="jquery-2.1.1.min.js"></script>, jquery have to be in the root of your domain, like your script.js.
If you want CDN, use:
<script rel="prefetch" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
Or official jQuery CDN:
<script
rel="prefetch"
src="https://code.jquery.com/jquery-2.1.1.min.js"
integrity="sha256-h0cGsrExGgcZtSZ/fRz4AwV+Nn6Urh/3v3jFRQ0w9dQ="
crossorigin="anonymous">
</script>
How can i decrease the page load time when using multiple CSS and Javascript files.
In my website home page i have used about 6 javascript and 3 css files i know these many files can cause the page load to take time.
files which i used are :
js
<script src="js/jquery.slides.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/respond.js"></script>
<script src="js/lightbox.js"></script>
css
<link href='css/style.css' rel = 'stylesheet' type='text/css' media="screen">
<link href='css/reset.css' rel = 'stylesheet' type='text/css' media="screen">
<link href='css/lightbox.css' rel = 'stylesheet' type='text/css'>
How can i reduce the page load time without removing any files?.
you can use jsCompressor to compress and minify multiple JavaScript files
and CSS Compressor to compress/minify multiple Css files into one file.
You can do other things as well like converting your links to base64 to reduce http requests.
Use W3 total cache plugin for wordpress and minify JS and CSS both from W3 Total Cache
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have seen a few questions that are similar but they didn't seem to have the answers that helped me. So, I come to you with hat in hand.
My site was working perfectly under a test URL and then when I moved all the files to the parent url, no code changed, just a simple copy and paste with all the links updating themselves, all of a sudden I get no javascript plugins working.
Everything else came over just fine, it is only the javascript that is giving me problems. When I look at the site through firebug, it doesn't seem to show any problems. I am absolutely pulling my hair out on this one.
This is the setup I have right now:
<!-- /// CSS Stylesheets //////// -->
<link type="text/css" href="../style.css" rel="stylesheet" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<!-- /// jQuery //////// -->
<script type="text/javascript" src="../_layout/js/jquery-1.8.0.min.js" ></script>
<!-- /// SelectNav //////// -->
<script type="text/javascript" src="../_layout/js/selectnav/selectnav.min.js"></script>
<!-- /// Imagebox //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/imagebox/imagebox.css" />
<script type="text/javascript" src="../_layout/js/imagebox/jquery.imagebox.min.js"></script>
<!-- /// FlexSlider //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/flexslider/flexslider.css" />
<script type="text/javascript" src="../_layout/js/flexslider/jquery.flexslider.min.js"></script>
<!-- /// Carousel //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/carousel/carousel.css" />
<script type="text/javascript" src="../_layout/js/carousel/jquery.carousel.min.js"></script>
<!-- /// Validity //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/validity/css.validity.css" />
<script type="text/javascript" src="../_layout/js/validity/jquery.validity.js"></script>
<!-- /// Custom JS //////// -->
<script type="text/javascript" src="../_layout/js/scripts.js"></script>
<script type="text/javascript" src="../_layout/js/plugins.js"></script>
Again, everything worked before the move, so I don't think that there is anything wrong with the individual javascript files themselves. If you don't see anything wrong here, then it might be the DOM? Full disclosure, I know nothing about the DOM, if anybody has a good source for learning about configuring the DOM for beginners, please do let me know.
I appreciate any time that any of you can give to this problem.
I suspect the problem is caused by the fact that you are using relative URLs, and perhaps your new web server setup has changed. Have you tried going to the NET tab in Firebug to see if all of the JavaScript files load successfully (make sure you arent getting an HTTP 404 error)?
Make sure you're pointing to correct location. If you were in /web_root/test/ and you just moved everything to /web_root/, you'll need to update the src attribute of all your imported scripts to reflect this change. Assuming you just moved your files up one directory, you can simply get rid of the first ../. For example,
<script type="text/javascript" src="../_layout/js/jquery-1.8.0.min.js" ></script>
Would be
<script type="text/javascript" src="_layout/js/jquery-1.8.0.min.js" ></script>
It would be helpful to know the directory structure for your site, specifically the directory you were in while testing everything, and the directory you moved everything into.
I am developing web based software applications which means that the presentation layer is html pages.
Every html page needs to have imported javascript files (sometimes 10 to 15) and lots of css files (sometimes 20 to 30).
I find it really anoying to write the path to each one of them ( Well when you write the path to the first one then you can simply copy and paste it and change only the file name but this is not the case ). Ok... i was talking about that it is really annoying and time consumption.
Here is example:
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/a.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/b.css">
<link rel="stylesheet" type="text/css" href="../xxx/yyyy/zzz/c.css">
<script src="../xxx/a.js"></script>
<script src="../xxx/yyy/zzz/b.js"></script>
<script src="../xxx/yyy/zzz/c.js"></script>
<script src="../xxx/yyy/zzz/d.js"></script>
So lets just ask you the question:
Is there a way (or a plugin) in NetBeans which can help me to drag the file from its location (the project is visualized as a tree) and put it in the html so its path to be automatically inserted in the file?
I know this is an old post but as of recent versions of NetBeans, drag the file from the tree into the document itself, and it will place a tag to the CSS file automatically.
Cheers