well I'm new to JavaScript so I know that my work will look nasty but I have been looking for a solution for a week now, I tried to put some JavaScript in the Head tag and so but it didn't get any faster so I said if there is one I'll get it here :D here are the link to the project please have a look at it and if there is something to do about it I'll appreciate it thank you all!
http://www.ayman.benhamida.com/metalexfinal/
First of all, your site looks pretty nice! ;) However, I saw the following problems:
you have two javascript versions included. Kick one out!
Very important: You have several .js which are uncompressed. Use an online-compressor to minify them: this one or this one or just pick one, you like.
You have a lot of jquery-plugins. You can merge them together into one file.
Fix your 404-errors (css/bullets.png, css/loading.gif)
Place your scripts as far to the bottom of your page as possible. (best position would be before </body>). This speeds up the initial page-construction.
minify your css.
compress your images.
Use minfied Javascript.
Use minfied CSS.
Combine Javascript files.
Combine CSS files.
Compress your images more.
You use 2 versions of jQuery ( http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js and http://code.jquery.com/jquery-latest.js ).
Split your page up into seprate pages, so you don't need to load things like http://www.ayman.benhamida.com/metalexfinal/images/map.png (which is 181.1kb in size) on the home page. Only load resources when they are needed, i.e. when someone wants to see the map!
http://www.ayman.benhamida.com/metalexfinal/images/para_green.png is 235.2kb in size. Compress this more!!
Related
I've seen similar questions but I think this one is slightly different.
I'm writing a website and since the nav and footer styling is the same on every page, I've put it in a separate file that I've linked to in every html file because this saves a few KBs of data.
The navbar is using some jQuery and I was wondering if there is a simple way to do the same for my JS files. The problem is that all of my code is inside a $() function and I don't think I can just make 2 of these, 1 in every file.
If the solution for this is too complicated I won't bother because the data this saves is negligible compared to the size of the images on the site.
My first attempt at a PWA is here:
https://flowster.app/calculators/freight-class-calculator/
And I'm trying to get 100% in Lighthouse for all the categories :)
I read the "Learn More" page but couldn't understand how to deliver Bootstrap CSS inline, for example.
Any suggestions?
What this means
“Eliminate render-blocking resources” means that all resources (CSS/JS) which are required for the first view (top fold) should be part of the html itself (inline or script or style block); all the other CSS/JS (which is used somewhere below) can go to their other separate files;
This way, the browser will be able to paint/render the first view quickly and then go on to load the other CSS/JS files;
How to go about it
I went through this myself and realized that within the bootstrap.css i was hardly using 15% of the classes... you may also get the hint of unused css classes within lighthouse also. So this is where you can selectively include only relevant classes in your HTML;
JS will be trickier. Going on, to make this first view functional, you can insert vanilla Javascript (inside the HTML) for the navigation, carousel etc. which is better/faster than bootstrap.js;
hope it helps... Good luck
You should only load the CSS and JS in the head that are actually required to load the current 'view' (I deliberately did NOT say 'page'). This does NOT mean that you should inline them. You can perfectly load them from a CSS or JS file. You should load the rest of the CSS and JS in the footer (CSS or JS files are fine here too).
In the case of a single page application (SPA) that is also a progressive web app (PWA), this is only your opening/splash screen... easy enough. It should be very easy to get a 100% score on that. But, when you are talking about a website in which it is unclear what the 'first page' is... it becomes an almost impossible task. A clever CSS in JS or inline solution could do the trick, but would be quite difficult to build.
There is however a much easier solution for websites. I wrote how to get a 100% Google Lighthouse score, which focusses on websites only. TLDR: just omit the frameworks. It might not be a solution for every case, but for those situations where it is possible, it is definitely the way to go.
Today I found that my Wordpress website has encountered a problem. There are two unexpected letters at the top of the page which can be found in the screen shot below. I can't find where it is from the raw files of Wordpress. I don't know what happened. Could somebody help me please?
Heya :)You might be using some website screenshot plugin. Deactivate that plugin and then check the output. :)
i've had the same problem a while ago only instead of an n or two n's in your case i had a v just at the same place as yours is. What helped for me where the following steps.
Check all files, header.php, template files, etc.
Deactivate and activate your plug-ins. Maybe even try the Wordpress Re-install function from the updates page. Don't worry none of your contents like pages, posts, etc will be lost.
Check your widgets, sidebars and other content blocks from the back-end but also the corresponding template files.
If you have a decent editor like in my case PHPstorm make use of the show history function. It makes searching a lot easier.
I hope just like i had your problem will be solved after taking these steps.
I've been working on a photography portfolio page and want to use different jQuery slideshows for each photo group. I realize having lots of different scripts can cause conflicts, but I've made sure that each script is wrapped with (function($) { })(jQuery); to avoid conflicts with the $.
All the scripts played nice together until I added one particular script (jquery.RotateImageMenu.js). It is definitely this script that breaks everything because when I comment it out, everything works fine. Even the other scripts required for that plugin are fine. As soon as I uncomment that script tag, all the jQuery on the page breaks. There are no console errors.
Because there are so many files, I threw it all up on Plunker so the all code is in one place.
I'm aware that none of the images work on Plunker because it was enough of a pain to copy and paste all the script files, let alone go through over 100 image tags and put in direct links.
I am also aware that there may be an easier way to load all these scripts, but at the moment the goal is to get them all to work before figuring out ways to condense. Well, unless combining would eliminate the problem. To be honest, I have no idea if that would work or not or if there's an easier way to go about this. Any suggestions for an easier approach are welcome, even if they aren't necessarily a solution for how I have things set up at the moment.
Tumblr is just flooding the blogs with loads of JS and CSS files. I don't know if these files are required or just useful. Here's a list of them
The JS:
- tumblelog.js & pre_tumblelog.js -> looks like this is Tumblr JS API, but do we need it?
- cedexis.radar.js -> no idea what this does.
- rapid-3.18.1.js
The CSS:
fonts/gibson/stylesheet.css
And some images are also added to the page.
I searched a bit, but there is no way of stopping tumblr from doing this.
Is there any way we can stop Tumblr from doing so, if we don't need these files?
If we need the scripts, can you please elaborate why we need these?
No, sadly you can't do anything to stop Tumblr adding scripts / style sheets as they are added serverside.
For reference, fonts/gibson/stylesheet.css is added in relation to the theme fonts option: https://www.tumblr.com/docs/en/custom_themes#theme-options
You might be able to break some of the scripts (for example by adding window.addEventListener = 1), but it's probably not be worth the hassle.
You can remove any extra CSS or element via javascript but any downloads initiated by them can't be prevented.