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 8 years ago.
Improve this question
My web page loads up quickly but takes time on the frontend to render.
I have a lot of JS CSS and images on the page.
I have gone to Google PageSpeed insights and in terms of network connections etc. the page is good.
Yes it does mention to minify static resources (JS/CSS/HTML) on the server. But will that improve page redraw.
I need faster rendering times. How do I make this possible?
csstriggers is a handy reference by Paul Lewis list down all the css/style rules that affects paint, layout & composite.
Google Developers recommendations are:
Use efficient CSS selectors
Avoid CSS expressions
Put CSS in the document head
Specify image dimensions
Specify a character set
Details in Optimize browser rendering
Chrome dev tools can help with profiling and finding bottle necks here is a guide and another one.
If you do have time check Crash course on web performance (Fluent 2013) it's so interesting and worth every second, if you want just the rendering part see:
Delivering 60 FPS in the browser
Critical rendering path
Related
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 5 months ago.
Improve this question
My current site has horrible optimization. A mobile score of 10 and a desktop score of 60 does anyone have any information on what I can do to make these scores better? Would love some suggestions on what to do. Here is a link to google insights. Thank you to who can help.
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=desktop
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=mobile
Mobile Score
Desktop Score
I personally focus on the Core Web Vitals, which come from real user experiences, and not the PSI scores, which are based on a single simulated test.
I'll audit your home page:
LCP
This is the time it takes to show your carousel image. A first improvement would be to do a preload on that image so that it starts loading earlier. And then remove the lazy load from its img tag.
Important images that are above the fold should not be lazy-loaded but eagerly loaded.
Some of your lower-down images are lazy-loaded, which is good. But some are not. In particular, I saw the image in the expandable sections are not lazy-loaded. If you make them lazy-load, they will not get in the way of loading more important resources, like your LCP image.
Your JavaScript bundle is running a few long tasks. This can get in the way of rendering and therefore LCP. Consider looking into reducing or delaying what it is doing. In particular, delay the starting of animations.
CLS
Your green selector at the top of the page is added late and pushes down the whole page. This layout shift alone means you fail CLS. Try and pre-allocate the space for it, so nothing shifts.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I want to use about 10-15 icons on my website. Should I use CDN or download all of the icons separately?
Which will be more fast CDN or using separately and what should be preferred?
Very difficult to answer this as it requires more information about the size of the icons you want to use, the size of the full icon set, your websites host transfer speeds and the speeds of the CDN.
Best way for you to make a call is to test it yourself, include the 15 icons and use the Network tab in Developer tools to see how much time it takes to load the icons. Then switch to the CDN and check that. Best to do each test around 20 times on different connection speeds to get a good enough average.
But remember, one of the main benefits of using a CDN is that hopefully the user will have already come across the files and have them cached, which means they won't have to go through a HTTP transfer.
My particular answer would be go with the CDN unless the difference in size is large.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I need to create a project of web application that contains a very long list of items and I can't use pagination...
How many tags is optimal for the single website from the point of view of the optimization?
When the website begins to slow down due to the large number of tags?
How do you deal in a different way than the pagination?
Can you suggest a javascript library free for commercial use?
As mentioned by #gus27 it all depends on what operating system, browser and most importantly the resources such as CPU and memory that is available to the browser for use.
Having said that, modern browsers can easily handle 100s if not 1000s of tags. The best way to go about optimization is to go make the system and when you hit a bottleneck try to find out the reason for it and then fix it. Don't worry about efficiency until you hit a problem which requires optimization.
Angular.js is the javascript that comes straight to my mind for the kind of javascript library that i think you want.
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 7 years ago.
Improve this question
I'm working on an Ember app and it shows a lot of real time data, it makes the JS thread really busy.
I'd like to add some nice fluid animation with CSS3 but having JS which works under the hood makes the entire app laggy.
Is there a way to give priority to the CSS animations to make them fluid?
After all I don't care if for half second my data is not updated.
I mostly target Chrome and Firefox
You might want to look into webworkers.
If you let all your ajax and dataprocessing be done by the webworker thread, and the displaying only by the DOM thread you can save a lot of overhead/delays caused by computations.
One word of advice. Don't do worker.postMessage(arg,arg) but do worker.postMessage(arg) with a single argument.
The object itself will be posted then instead of it being converted to json and converted back in the other thread. Saves a lot of cpu time.
Keep in mind that the thread that posted the object will have "lost" the object(to prevent concurrency problems)
Also DOM elements cannot be posted to a webworker, so make sure your data is "clean" if you post to the worker.
Maybe trying to get the CSS animations to be rendered by the GPU would be an possibility.
CPU and GPU would run seperate, You should give it a try and see if it gives you an improvement!
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 9 years ago.
Improve this question
I have a set of users with different permissions. Depending on what permissions they have, they should only have access to a certain javascript files. In terms of speed, is it better if on every instance of their visit, I check the permission of that user, create one javascript file that contains ALL the javascript commands accessible to that user, and load that file into the view?
Or is it better to have multiple javascript files, call them page#_permission# (for instance, page1_permission10.js), and just load the corresponding files every time the page loads?
Thanks
It is probably faster to load in only the JavaScript that is needed BUT...
It probably will not be significant enough to warrant the effort. Futhermore, you may find youself in debugging hell just to save a few ms.
Firefox and many other browsers have built in tools which describe how much time it takes to load a page. Below a recent example for stackoverflow.com. You can perform a similar operation you site and locate the bottlenecks.