Questions tagged [front-end-optimization]

Front-end optimization (FEO) is the process of optimizing the delivery of website resources from the client side.

30 questions
4
votes
0 answers

Browser layout event: How to achieve lower times for many DOM elements (like Facebook's home page)

Recently I've been reading and trying out different stuff regarding optimizations of the browser's layout event (not paint or composite), but exactly layout. The test app I'm using I've got a very simplified social media-like app, which just…
Rosen Dimov
  • 1,055
  • 12
  • 32
4
votes
2 answers

Angular Architecture: How to handle state persistence with multiple HTTP Services?

I was wondering how you should structure an app which makes calls to a backend. Wrapping HTTP calls in a service seems like a natural way to do things, but how / where do you keep the data for consistency? E.g. I have a component which displays some…
mortom123
  • 511
  • 4
  • 14
3
votes
2 answers

REST best practice for updating an item in an array of items

In my single page application that uses RESTful services, I want to know what the best practice is for updating one item in an array of items. Prerequisites 1. Front-end makes a GET request to fetch a list of items 2. Front-end formats the list of…
3
votes
1 answer

How is this CSS render blocking?

I'm trying my best to follow the Google PageSpeed guidelines on how to design my website for optimal performance. After analyzing the website, Google gives me a score or rank based on those guidelines. One guideline that is keeping my score low is…
Matias Cicero
  • 25,439
  • 13
  • 82
  • 154
2
votes
1 answer

LCP result is totally opposite from performance API than the pagespeed insights or webpagetest

I am trying to optimise LCP for this page. I read an article on LCP optimisation where I also found a script which can help to determine which part of the LCP most time is spent on. Script: const LCP_SUB_PARTS = [ 'Time to first byte', 'Resource…
2
votes
1 answer

Does .includes() run during a change detection loop if the variable associated with it does not change? / Alternative to .includes()

I have a variable user_roles in my component file which gets initialized by an API on ngInit() and does not change after that. this.service.getUserRoles().subscribe( data => { this.user_roles = data; } ) user_roles is an…
2
votes
2 answers

Which one is better using CDN or in our own server?

While developing websites is it a good practice to use CDN link for integrating fonts, jquery and all that stuff ? or is it better to keep the files on our own server. Suppose, I saved my jquery file in my hosted space which is in the USA and my…
1
vote
1 answer

Filter List to render or conditionally render list's elements

I want to render a list (or array) of objects but that rendering would be based on some boolean condition. What is the most optimized way to approach this: const list: object[] = [....] // Coming from somewhere else const (renderList,…
1
vote
2 answers

What is the advantage of has sperate front-end page for mobile and desktop?

When we access to facebook page on mobile, it redirect to URL 'm.facebook.com' that m represent for mobile. Even when we access to this URL in desktop, it still return mobile UI. As I guessed, this was for reduce CSS or JS or anythings that handle…
dungmidside
  • 508
  • 7
  • 19
1
vote
1 answer

Use transition property on * selector?

Use the *{ transition: all 0.25s linear; } harms the performance, or is a bad practice? There is an other way to get an better transition of the elements? I'm trying to make an smooth transition of the elements, to not have those cut off and blink…
LucasTelesx
  • 305
  • 2
  • 10
1
vote
1 answer

Calling Functions from AngularJs Directive

I need to insert a header in my AngularJS application. I used to have a header and header controller containing login/logout functions since the header contains the username and login/logout. Now I changed this to header directive, but in order to…
0
votes
0 answers

Improving Frontend Error Logs with Global Exception Handling in Angular

I recently learned about logging errors in my frontend application. I implemented a basic global exception handler to log any occurring exceptions. However, I encountered an issue where the stack trace wouldn't always provide the correct function…
0
votes
0 answers

Is there a frontend component building tool that can be used across frameworks and versions?

Is there a frontend component building tool that can be used across frameworks and versions? This tool enables front-end developers to develop any component without worrying about whether they are using Vue 2.x, Vue 3.x, or React. Write once, run…
0
votes
0 answers

How to prevent Ngrx Feature modules from ending up in main.js for Angular?

We're trying to optimize the bundle sizes for our very feature rich Angular app. We use @ngrx/store for state management. I've been around the block a few times - We're already using feature modules properly, they're in lazy loaded routes. However,…
0
votes
1 answer

Total network waiting time for all http requests

Not sure whether anybody has similar query here, assume we do a performance tracing on a single page application completely loaded on a url, how to get the total waiting time on networking time for all resources?
1
2