I am in the process of trying to speed up my HTML website and the first thing I have done is to reduce the images to the exact size that they are loaded into.
My PageSpeed Insight for desktop is 90 which I am very happy with but for mobile, it is 24, which isn't so good (was 19 before I did the images)! It says that I can save 4 seconds if I "remove unused JavaScript" but I haven't added any JavaScript to my website yet (only just taught myself HTML and CSS so moving onto JavaScript soon).
So I am wondering what this unused JavaScript is and how I can remove it if I wasn't the one to add it in there in the first place. Any other tips on how to speed up the website will be much appreciated!
Thank you!
If by "speed up the page" you mean improve the performances of your website:
Changing the dimension of images don't necessary mean that they are "optimized for the web". You can find tools like https://optimage.app/ and information on the web on how to compress them.
You can use the inspector of your browser (Right-click on the page + Inspect) to do this :
Go to Network Tab, clear all logged requests then reload the page you will be able to see which requests are the most time-expensives and maybe do something about it.
Go to performance, start recording, reproduce the actions that you want to analyze
(You can zoom in and out in the timeline and click on the element to have more details)
Delete all Javascript from your website
Related
Hello StackOverflow 😀​
I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)
You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.
Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'
I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash.
My question is how can I improve this? and what is related to this?
Most of the questions here are related to some stuff that is in react-native, but my app is react web.
I have read about FOUC but I'm not really sure if it's the issue.
btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).
Thanks for help.
Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?
The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.
Here's what comes to my mind:
Environment check before troubleshooting an web app
I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram
The machine spec only holds some portion of performance assessment. It may or may not matter. because,
OS can slow down the performance due to its update issue. what OS are you using?
Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?
So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.
Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.
Finding Problem with (any) Web App
If these little details are not causing the problem, it's time to get metrics inside browser.
I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.
Somebody already mentioned React devtool profiling in comment but I also recommend these tools:
Chrome Performance Tab
Chrome Lighthouse(previously Chrome Audit Tab)
Please try run a performance check with these tools first.
I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.
(screenshots inside red lines are indicating white screen flashing moment)
Most Probable Reasons at the Moment
according to Chrome Performance Tab + Lighthouse audit, these problems are existing in that flashing moment.
treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.
lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).
too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.
this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.
Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).
Perhaps turning Hardware Acceleration off will fix the issue?
You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.
I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?
So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app).
The problem with the picture was - whopping 35,000 px width and 5,000 px height.
You couldn't see it because it was inside a div with a fixed height and width.
The way I found that - opened dev tools, and started to delete the divs.
for example, we have:
<div id="root">
<div>1</div>
<div>2</div>
</div>
So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture.
Very 'old school' but it is what it is (:
My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.
I have a fairly extensive javascript that I can load in my Chrome (latest stable) and in IE11.
The load icon spins but the script eventually loads on my machine in both browsers.
I have 2 other people trying to load the page that contains the javascript in IE11 and they both cannot get the page to load. The loader icon spins forever and when they mouse over the refresh icon a flyout states "long running script"
How can I analyze my javascript to identify how and where the script is taking forever to load?
Chrome's Developer Tools (F12) can profile your code. This will give you a lot of information -- possibly a lot of noise -- but it will identify two things for sure 1) functions where a lot of time is spent, and 2) functions that are called often.
This is the first place I'd start: turn on the profiler and reload the page.
If that doesn't give you a good place to start, look into the Chrome Timeline and console.timeStamp( 'Some Note' ). After you have started recording a timing session, every time the code encounters "console.timeStamp", it will annotate the timeline allowing you to estimate elapsed time between one or more points in your execution. See here: https://developers.google.com/chrome-developer-tools/docs/console#measuring_how_long_something_takes
I've a test website on http://insstock.info/xxx/
With two sliders inserted into it:
Nivo Slider
DIV Content Jquery slider (Exact below of Nivo Slider)
second slider is expected to flip the content one by one; the code and scripts are set accordingly!
It is showing no error in Chrome developer tool Console panel!
Can anyone Please help me to making this second slider work?
A couple of suggestions that I run through when I experience this behavior.
1) Clear the Chrome Cache
Chrome caches aggressively and frequently will return stale resources. You can clear the cache either by using Ctrl+Shift+Del, or prevent its use on the page by opening up Chrome Developer tools, clicking the gear icon in the bottom right, and checking "Disable Cache". Then reload the page with Ctrl+Shift+R. This will ensure you have the latest version of your resources.
2) Check the Network tab for any resources which are failing to load
3) Step through your code in the debugger to try to identify where things go wrong.
4) Start removing pieces more and more pieces of your code until you have a very small set that is exhibiting the issue. This is a great strategy for debugging generally, since it is much easier to debug something small than something big.
When first visiting my site it stays on the splash screen for about a minute. I was wondering if it had to do with the file size of my pictures of my HTML and CSS code? You can check the HTML code by viewing the page source. I will add the CSS code if needed.
Here is my website: Tom Falzani Portfolio Website.
Whenever you meets performance issue, don't forget the network tab of your browser's developper debbuging tool. See Google Network Performance Documentation.
Here is a record of the initialisation and loading of your website, and if we take a deeper look at it, we see that the philly_scene.png file makes 6.3 MB and take 25 seconds to load and that the philly.png file makes 6.6 MB and takes 18 seconds.
To avoid this long loading time, you can try to ajust the both size of them using this link, for exemple. (Never used)
Or you can them asynchronously and deliver a first render of your website until they are actually loaded.
If you're using jQuery, take a look at the .load() function, there is also many others ways to do it like the Axios Promise or the Async library if you're using Node.js