Website Optimization and Analysis on XYZ Website using Web Core Vital Rules

XYZ website is a business website that operates in the field of e-commerce which is implemented through websites and applications, for several years the website has had a percentage of users' usage speed which has decreased quite a bit and has become old, due to lack of maintenance of some of the features contained in the website application which have an impact on the lack of customer interest in buying goods on the XYZ website and more influential in terms of access from searching e-commerce notifications from Google that if the percentage of websites decreases over a long period of time, this will result in websites not being allowed to publish advertisements. In this study, we analyze the problem to understand the problem starting from small things, namely from the use of programming languages, the data provided, the use of writing code, third party or vendor support, filling out website content, and websites using vital core web architecture. So that the website used has good comfort, accelerates the use of the website which can be affected by the large number of customer visitors, and can facilitate the development team's performance in management and maintenance and provide many positive things from customers so that business runs fast and provides convenience for customers and the XYZ website can received by Google.


A. Introduction
In this study related to implemented through websites and applications.The process of designing a website using the programming language used is JavaScript, HTML, CSS, Library JavaScript React.Js, and Node.js combined as a page server so that SEO needs can be processed through server-side rendering.In the previous few years until now the performance of the website published the percentage of the speed of use of the user is quite declining and becomes long, due to the lack of maintenance of some of the features contained in the website application, it has an impact on the lack of customer interest to buy goods on the XYZ website and more than affect also in terms of access from the search engine from Google.The use of data for the website provided by the external team is quite a lot that is not related to customer needs.Not enough analysis of website performance because this website prioritizes business first so that this website business continues to run.For website optimization that is applied in terms of business.
This XYZ website also affects the assessment of Core Web Vital standardization.Core Web Vital is a support feature so that this website can be published by Google from search engines and advertising.This impact also affects the use of architecture models on the XYZ website, website modules that use a monolith flow system, which impacts the process of working on website systems designed in 1 bundle.In this study, to understand the problem from the start of small things, namely from the use of programming languages, the data provided, the use of writing code, third party/vendor support, filling the content with the website, and the website using the vital core web.This study uses code refactoring techniques that minimize code and make it easier for the team to analyze applications and perform rules from the vital core web, namely rules from Google to adjust Google's needs so that the website can have a better presentation and can be allowed to publish in advertising.
The problem formulation of this research can be explained as follows, what causes the XYZ website to have a fairly low speed, how to implement a website to make it faster, and how can the XYZ website will be allowed to work together by Google so that it can be published?The purpose of this research is to analyze the website to find out what factors cause the website to be lower in speed, examine the design of website optimization with appropriate standards so that the website speed is better, and provide a presentation of website optimization scoring to make it better and adjusts to the rules of Google needs.And also the benefits provided are to find out the causes of the problems faced by the XYZ website related to website speed, make the website faster and more structured which affects website optimization, and get cooperation from Google to publish the XYZ website so that business runs better.
The scope applied in the research is as follows More to the visual side and website performance.the scope includes the front-end team.The sample pages that will be tested are several website pages, namely Profile Page, Microsite Landing Page, Product Catalogue Page, Homepage, and Checkout Page.The analysis applied is influential in the architecture of the path in the XYZ Website.

B. Research Methods
1. System Design percentage of comparison tests and getting the total results of the comparison of Website Performance analysis on Website XYZ on react js using Google pageSpeed core web vital for illustration describes the sequence of work processes in this study.Website Performance is a type of testing to ensure the software will work properly under the expected workload.In focusing the main goal is to implement Performance Elimination.The focus of Performance Testing, namely: Speed, Scalability and Stability [13].Performance testing is essential for analyzing and monitoring the performance of web applications.How page speed performance is affected, some of the most common factors that slow down page speed on a website page on the client side include scripts, fonts, and plugins (HTML, JavaScript, CSS).However, when a page request is made, the client-side and server-side components must complete their respective operations [17].

Research Design 2.1. Application Architectural Changes
Architectural changes from monolithic to microservice aim to have a more straightforward design and easier to monitor if there is a system failure in one of the system components.

Figure 1. Architecture Microservices
Another benefit is that scalability can be applied to certain system components, to improve performance, the system needs to be maintained with sufficient resources.

Change Code Package
To solve the Size of code problem, it is necessary to implement changes in writing the code package itself.The implementation of the solution includes rendering using Webpack to combine all scripts, this will compile our entire application into one file and then have an index file.The very basic HTML is limited to bundled JavaScript files.In writing code, apply solutions by cleaning up function/stateless components and React.pureComponent,using Webpack production markers, and applying immutable data structures, using React.Fragments.

Response Time & Page Load Time Management
Changes in architecture and code packages, it is expected to speed up the Response Time & page Load Time of the website.However, these changes must be continuously monitored to maintain Performance at an optimal state with the target {Response Time target} using the Google Page Speed tool with core web vital rules.

Size of Code
The size of the code referred to in this study is the file size resulting from the rendering or compile process when you want to deploy to the server.To do rendering will use Webpack to combine all scripts.This will compile our entire application into one file.Once completed, then we can have a very basic index.htmlfile that only creates bundled JavaScript files.After successfully rendering then the application can be deployed to the server.

Response Time
Load Time and Response Time are the main factors for ranking pages for the purpose of faster access.Faster website access is a factor that increases the usability of web pages.response time is divided into several components, namely as follows.1. Blocking The state when the browser is not ready to send a request.2. DNS Lookup The state when the browser is looking for DNS information.3. Connecting The browser is connecting to the server.4. Sending The browser is sending data to the server.5. Waiting The browser is waiting for data from the server.6. Receiving The process when the browser receives data from the server.in seeing the factors of Website delays in covering the various components above, these components are applied so that it runs well. [18]

Implementation Code
Implementation code refers to converting an idea or concept design into real code in a particular programming language.It involves translating the planned solution or algorithm into instructions that can be understood by the computer.In the context of software development, code implementation is an important step in the software development cycle.
The code implementation process involves writing lines of code that conform to the design specifications and functional requirements of the software.At this stage, the developer selects a programming language suitable for the project, sets up data structures, implements algorithms, connects components, and takes care of various other technical aspects.A stage for how to implement the code to be designed:

Server-side rendering (SSR) implementation
Server-Side Rendering (SSR) is a technique in web development in which web page content is generated on the server side and then delivered to the client (browser).Here are the general steps for performing SSR in React using Next.js:3.1.1.Make sure to have Node.jsinstalled and run the following command in terminal."npx create-next-app project-name".3.1.2.Enter the use of "getServerSideProps" which will be run on the server side before the page is rendered.

Client-Side Rendering (CSR) Implementation
Client-Side Rendering (CSR) is an approach in web development in which web page content is generated on the client side (browser) using JavaScript.This contrasts with Server-Side Rendering (SSR) where content is generated on the server side before being sent to the client.Here are the general steps for performing Client-Side Rendering (CSR) in React: 3.2.1.API and Data usage using methods like fetch or libraries like Axios.This data can then be processed and displayed in components.

Image optimization on the website
Image optimization is the process of reducing the file size of images without sacrificing quality.This can be done by using lossless or lossy compression, resizing images to the appropriate size, and choosing the right file format.The collection method in this study includes some of the information needed by the results of the requirements by the Performance Website standardization using the following methods: 1. Field Research: In the field research method conduct research Observation.2. Library research: In library research we conduct research based on books, articles and journals and sources related to the research we are doing

Analysis Technique 5.1. Related Research in Website Performance
Website performance has its own indicators so that the website can run smoothly and the performance of the website is good for users to use.First Contentful First or abbreviated as FCP is an assessment of the first time the browser runs the DOM element script, and First Input Delay or abbreviated as FID is a measurement report from users implementing client side or running actions from users [5].Google PageSpeed Insight has 3 groups of website speed assessments, which are as follows -Fast (Green) with an assessment of more than 90.
-Average (Orange) orange color with an assessment of more than 50 and less than 90.-Slow (Red) with an assessment of less than 50 (Xing, 2019).
Step by step for website performance: 1. JavaScript Response Code Standardization: To implement with the support of response code standardization in JavaScript [7]. 2. Implementation of react.jssupport for Vital Core Web scoring : React.js is a JavaScript library that can help create responsive and interactive web applications.In order for the React.jsapplication to support the performance [7].3. Vital Core Web scoring on Google Pagespeed: Analysis of the implementation of the React.js:file structure is the flow of using the correct code from React.js so that the structure of using the file is tidier [7].

Standardization of revenue response data from APIs
1. Lightweight data formats like JSON or protobuf will speed up data load time and increase the speed of your application.Avoid using complex or heavy data formats like XML. 2. Data compression can reduce the size of transferred data and speed up data load time.You can use compression techniques like gzip or deflate.3. Limit the amount of data sent by the API by sending only the data required by the application.Avoid sending irrelevant data or too much data in a single request [20].

Website performance conceptual measure development
Website performance measures the overall attractiveness from the consumer's point of view.The performance literature suggests that indicators cause performance and not the other way around.Formative rather reflective measures best assess website performance to define a construct, and suggest clarifying the assessing entities, objects, and attributes.In this case, travelers seeking information online are the assessing entities, websites that provide tourist information are the objects, and website performance evaluation is the attribute.To better understand the performance of the Website and further development of measurements, a qualitative survey was conducted.Data were collected through in-depth interviews.

Performance in Google pageSpeed insight
PageSpeed Insights is an application for analyzing website performance from Google.The problem with SPA (Single-Page Applications) is that they display content after loading a chunk of JavaScript first, so it takes a little time for the client before it can actually render the content and it can destroy PageSpeed Insights scores [23].
A commonly used method uses the PACE framework which has the following points: 1. Content Optimization from google optimization scoring 2. Page Speed Optimization 3. SEO Optimization (Search Engine Optimization) 4. User Data Analysis (Data response speed) 5. Use of microservices architecture model

Section Page Method
The analysis method that will be designed in this study using Linear Regression.This trial used a percentage of the standardization of websites in Indonesia with the XYZ Website.With data size from Core Web Vitals, namely Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), Interaction to Next Paint (INP), Time to First Byte (TTFB).
The sections on the website are divided into pages A to page H, each page has different content.In the analysis process, it will be divided into 2 types of flow chart components, namely general components, and individual components.1.General components General components are certain parts that are widely applied by all different pages and sections on the XYZ website.The use of general components helps make it easier to manage websites and achieve uniformity in appearance and behavior.

Individual components
Individual components are individual sections that apply to specific pages.The use of individual components helps make it easier to manage the website and achieve uniformity in appearance and behavior.This component is designed with certain functionality so that it is not dependent on other components.

C. Evaluation
Page Load Time is the time it takes to download and display all the content of a web page in a browser.The performance of this test will be carried out with the help of the Google Chrome performance tool to calculate the time, which starts when the button is clicked and ends when the rendering process is carried out.The tool that will be used to assess or test is Google PageSpeed Insight.
Using Google PageSpeed Insight is to access Google PageSpeed Insight on the browser, then enter the address of the Website you want to analyze [23].To continue, please click the Analyze button as shown below: After entering and analyzing our website URL into the column provided by Google PageSpeed Insight, we will get a performance report, including the Core Web Vitals Assessment and the number of requests obtained by the website.For how to apply the core web vital rules themselves in using the load time system, you can see in terms of the list of core web vital.
This step continues with the contents of the results of the implementation that have been implemented based on the analysis.In the results that have been applied, do an analysis using the percentage of vital website measurements using the Google Pagespeed Insight tool, which consists of Largest Contentful Paint (LCP), and First Input Delay (FID)., Cumulative Layout Shift (CLS), First Contentful Paint (FCP), Interaction to Next Paint (INP), and Time to First Byte (TTFB).
The assessment is analyzed using pages based on section page A to page H with an average of frequently visited pages.This analysis is divided into various analyses, namely as follows an analysis of numbers in components based on percentages on each page the percentage analysis based on all pages is a page.
Calculation Section : page to be analyzed Percentage : total data transmission using rest api and access weight in each component Component : name based on component.
The table below is a section presentation that has total pages based on the percentage of fetches using all page data: The results of the design were successfully implemented and can be accepted by google, the website is faster and lighter Need Improvement (NI) The design results are almost successful and not fails, can be accepted by Google and the website is stable.

Poor (P)
The results of the design fail, less accept by google and unstable website Before implementing code optimization website:

D. Conclusion
Website performance is very important because it has a direct impact on user experience, conversion rates, and brand image.Website speed can have an impact on conversion rates, such as sales or other desired actions.Users who must wait too long for a page to load are more likely to leave the site before taking the desired action.and A positive experience with a website can increase customer satisfaction, which in turn can lead to long-term support and loyalty.Thank you to your supervisor for supporting this journal and thank you to your supporters who were able to help complete this journal.

Figure 7 .
Figure 7. Source Code Server-Side Rendering

Figure 9 .Figure 10 .
Figure 9. Source Code Imge Optimazation 3.4.Optimization of API data requests Optimizing API requests in React.jsprojects is to improve application performance, reduce loading times, and minimize resource usage 3.4.1.Using the "react-infinite-scroll-component" library to get data restrictions in the amount of data retrieved at one time.This prevents overloading and reduces initial loading times.3.4.2.Run the command in the terminal to install react-infinitescrollcomponent in the application to be designed."npm install --save react-infinite-scroll-component" Run the following code sample:

Figure 11
Figure 11 Google Pagespeed website

Table 1 .
Percentage Section

Table 3 .
Score Core Webvital Assessment before implementing code

Table 4 .
Score Core Webvital Assessment after implementing code

Table 8 .
Score Core Webvital Assessment before implementing code

Table 9 .
Score Core Webvital Assessment after implementing code

Table 10 .
Description of status core webvital assesment

Table 11 .
Score Core Webvital Assessment before implementing code

Table 12 .
Score Core Webvital Assessment after implementing code