UA –Main Campus COLLEGE OF COMPUTER STUDIES

MODULE IN INFOT 1: INTEGRATIVE PROGRAMMING AND TECHNOLOGIES 1

Effective: 1st Semester 2024 – 2025

INTEGRATIVE PROGRAMMING AND

TECHNOLOGIES 1

AIRONE VONN S. VILLASOR

Instructor

Email:
[email protected]

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

CHAPTER 4: Technology Stacks and Web Application Security

Chapter Overview:

This chapter introduces the Model-View-Controller (MVC) architecture, focusing on its key principles
and how it separates concerns into models, views, and controllers to promote better organization,
maintainability, and scalability in web applications. Readers will learn to build a web application using
MVC, gaining hands-on experience in developing modular components that interact seamlessly within
this structure. Additionally, the chapter explores techniques for analyzing and optimizing performance in
MVC-based applications, covering topics like database optimization, caching, and resource
management to ensure efficiency and scalability in real-world scenarios.

Objectives:

• Describe the key principles of MVC Architecture

• Build a web application using MVC that separates concerns into models, views, and controllers.
• Analyze and optimize the performance of an MVC-based Web Application

Introduction to Programming Stacks

Programming Stacks

A programming stack, also known as a tech stack, refers to a combination of programming languages,
frameworks, libraries, tools, and technologies used to develop and deploy a software application or
system. It represents the layers of software components and infrastructure that work together to create
a functioning software product.’

Key Components of a Programming Stack

1. Frontend
2. Backend
3. Database
4. Operating System
5. Architecture

Frontend Development

Front end development is what makes up the user interface of a software solution. It refers to the
process of designing and building the visual and interactive elements of a website that users interact
with directly. Three common languages used in frontend development are HTML, CSS and JS.

Who is a frontend developer?

A frontend developer has a crucial role in crafting and implementing an application’s user interface. This
interface is the gateway to users accessing and interacting with the application.

Skills:
HTML, CSS, JS, Bootstrap, React, Angular, Vue.js
User interface and User experience

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Responsive web design

Backend Development

Backend refers to the server-side development of web applications, where the focus is on building the
underlying infrastructure, logic, and functionality that enables the application to operate. It is the
“behind-the-scenes” magic that makes websites and apps work. Back-end development covers server-
side web application logic and integration and activities, like writing APIs, creating libraries, and workig
with system components.

Who is a backend developer?

A backend developer’s job entails focusing on website architecture, scripting, and writing code that
communicates between the website’s database and the user’s browser.

Skills:
Python, Java, PHP, SQL Git, JS
Data Structures and algorithm
Database management systems
Web hosting platforms

Full Stack Development

Full stack development refers to the process of building a complete web application, encompassing
both front-end (client-side) and back-end (server-side) development. Full stack is a collection of tools,
technologies, and programming languages required to develop and deploy projects.

Who is a full stack developer?

A full stack developer has the skills and ability to complete a product independently. He or she can
handle the work of front-end UI programming and development, databases, and servers. This also
includes work on native application stacks, mobile stacks, or web application stacks with full stack web
developer skills. So, instead of a front-end or back-end developer, you can learn the required full stack
developer skills and be able to handle any aspect of app design, from front to back. You’re the Swiss
Army knife of app development.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Database

A database is an electronically stored, systematic collection of data. It can contain any type of data,
including words, numbers, images, videos, and files. Databases are designed to organize and manage
large amounts of information in a structured and standardized manner, making it easier to retrieve, edit,
and analyze the data as needed.

Ex. MySQL, PostgreSQL, MongoDB, Oracle, etc.

Operating System

An operating system (OS) is system software that manages computer hardware and software resources,
and provides common services for computer programs.

Ex. Linux, Windows, and macOS

Infrastructure

This layer involves the tools and technologies required to deploy, host, and manage the application in
production environment.

Ex. Cloud platforms (such as AWS, Azure, and Google Cloud), containerization technologies (like Docker
and Kubernetes), deployment automation tools, and monitoring systems.

EXAMPLES OF TECH STACK USED IN SOFTWARE DEVELOPMENT

LAMP Stack

A classic, time-tested stack of technologies that stands for - Linux (Operating System), Apache (Web
Server), MySQL (Database), and PHP (Programming Language).

It efficiently handles dynamic web pages wherein content changes each time when a page is loaded.
It also allows you to choose components based on your specific business requirements. For instance,
instead of Linux OS, you can use Windows OS to form a WAMP stack of macOS to form a MAMP stack.

Examples of applications built using LAMP Stack: WordPress

MEAN Stack

MEAN stack comprises of MongoDB (Database), Express.js (Backend framework), Angular (Frontend
framework), and Node.js (Runtime environment).

MEAN is an end-to-end JavaScript stack that allows you to use a single language throughout the stack.
This helps you reuse the code across the entire application.

MEAN stack technologies are ideal for cloud hosting since they are flexible, scalable, and extensible. The
stack can be deployed easily as it includes its own web server.

Examples of applications built using MEAN Stack: LinkedIn, Upwork, CourseEra, Walmart, PayPal, Trello

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

MERN STACK

MERN stack comprises of MongoDB (Database), Express.js (Backend framework), React (Frontend
framework), and Node.js (Runtime environment).

React is one of the most popular frameworks used for building high-end, single-page applications with
interactive UI. It uses JSX, a syntax extension to JavaScript, which provides a way to structure
component rendering using syntax familiar to many developers.

Examples of applications built using MERN Stack: Uber, Whatsapp, Airbnb, Pinterest, Khan Academy,
Hulu

REACT NATIVE STACK

React Native is a JS framework for building native IOS and Android mobile applications. The framework is
based on React; a JS library built by Facebook UI development.

React Native applications are written with a mixture of JS and XML Markup. Applications built using
React Native render using real mobile UI components, which means the apps look like any other mobile
application.

Examples of applications built using REACT NATIVE Stack: Facebook, Instagram, Skype, Bloomberg,
Pinterest, Airbnb

FLUTTER STACK

Flutter is an open-source framework by Google for building multi-platform applications from a single
codebase. It is powered by Dart, a programming language optimized for fast apps on any platform.

Flutter can use Google’s Firebase on the backend which allows you to build highly scalable applications.
Its built-in widget catalog and UI toolkit allow you to build high-performing, natively compiled mobile
apps with visually exciting application elements.

Examples of applications build using FLUTTER Stack: Google Ads, BMW, Alibaba.com, Journal, and
Google Pay

ASP.NET STACK

Microsoft’s .NET Core has been growing in popularity in recent years. Modern .NET applications are very
lightweight and can run on Windows and Linux. Microsoft’s embrace of open-source technologies has
caught the attention of developers all over the world.

Applications built using .NET commonly use the following application tech stack: ASP.NET MVC, IIS
(Web server), Angular (Frontend framework), SQL Server (Database) and Microsoft Azure.

Examples of application built using ASP.NET Stack: Stack Overflow, Zillow, Microsoft, Dell Technologies,
and Jetbrains

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

BENEFITS OF USING TECH STACKS IN SOFTWARE DEVELOPMENT

1. Improves developer efficiency and productivity y streamlining the development process and
reducing the time and effort required to setup and configure various components.
2. Allows developers to focus on perfecting their code and building new features rather than
dealing with integration issues or reinventing the wheel.
3. Offers a standardized approach to development, ensuring consistency across the project, and
provides the essential guidelines and best practices for coding, architecture, and deployment.
4. Promotes code reuse and maintainability and improves the overall quality of the software.
5. Popular technology stacks are often backed by active developer communities that provide
extensive documentation, tutorials, forums, and support resources to help software developers.
6. Modern technology stacks are scalable as they help handle increased traffic, data volumes, and
user interactions, so your application can be adapted quickly to changing business demands
without making any significant architectural changes or disruptions.
7. Compatibility and interoperability between various components of different technology stacks
enable smoother data flow and communication between components.
8. By choosing a popular and well-supported stack, developers can reduce the risk of
encountering major technical issues, security vulnerabilities, or lack of support.
9. Availability of free and open-source components (open-source frameworks, libraries, and tools)
in tech stacks significantly reduce your licensing costs and encourage your team to build robust
and feature-rich solutions without incurring additional expenses.

TIPS FOR CHOOSING YOUR TECHNOLOGY STACK

Define the project size, complexity, and functionality

The tech stack used for a small project might vary from that used for bigger projects. The size of the
project is a key factor to look out for when choosing a technology stack. Also, the complexity and
functionalities of your project matter. If your project is complex and includes heavy functionalities, it is
wiser to choose an advanced technology stack.

Scalability Requirements

As your project progresses and grows, the tech stack should have the potential to scale sufficiently. You
should choose a technology stack that allows for adding new compelling features and handles
unpredictable increases in user numbers.

Technology and Team Expertise

It’s important to determine whether or not your team will be able to maintain the application once it is
deployed. Consider your team’s experience and expertise when choosing a tech stack. It will be better if
you know that your team can use a tech stack successfully and doesn’t require additional training;
otherwise, there is no need to consider one.

Time to Market

When choosing a tech stack, ensure that it can accelerate your development process without
hampering the quality and closes within the deadline.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Security Requirements

If your app will handle confidential user data and information, security plays a major role. You need to
pick a robust tech stack with fully secured standards and support a high-end security framework to meet
your app development goals.

Web Performance

Web performance is all about making websites fast, including making slow processes seem fast. Does
the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if
something is taking time to load (e.g. a loading spinner)? Are scrolling and animations smooth? This
article provides a brief introduction to objective, measurable web performance*, looking at what
technologies, techniques, and tools are involved in web optimization.

Web performance measures the speed and user experience of a website or application. Major areas
include:
• Reducing load time: Minimizing file size, reducing HTTP requests, and using techniques like
preloading to speed up file downloads.
• Early usability: Loading key assets first to make the site usable quickly, with non-essential
assets loading in the background (lazy loading). This is measured by time to interactive.
• Smoothness and interactivity: Ensuring the site feels responsive, with smooth scrolling, fast
interactions, and efficient animations (using CSS instead of JavaScript where possible).
• Perceived performance: How fast the site feels to users can impact their experience more than
actual speed. Keeping users engaged (e.g., with loading spinners) can reduce frustration during
longer waits.
• Performance measurement: Tracking and optimizing actual and perceived speeds using
various metrics and tools ensures that performance improvements remain effective over time.

PERCEIVED PERFORMANCE
Perceived performance is a subjective measure of website performance, responsiveness, and
reliability. In other words, how fast a website seems to the user. It is harder to quantify and measure than
the actual speed of operation, but perhaps even more important.
A good general rule for improving perceived performance is that it is usually better to provide a quick
response and regular status updates than make the user wait until an operation fully completes (before
providing any information). For example, when loading a page, it is better to display the text when it
arrives rather than wait for all the images and other resources. Even though the content has not fully
downloaded the user can see something is happening and they can start interacting with the content.

PERFORMANCE METRICS
There is no single metric or test that can be run on a site to evaluate how a user “feels”. However, there
are a number of metrics that can be “helpful indicators”.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

First Paint
The time to start of first paint operation. Note that this change may not be visible; it can be a simple
background color update or something even less noticeable.
First Contentful Paint
The time until first significant rendering (e.g. of text, foreground or background image, canvas or SVG,
etc.). Note that this content is not necessarily useful or meaningful.
First Meaningful Paint
The time at which useful content is rendered to the screen.
Largest Contentful Paint
The render time of the largest content element visible in the viewport.
Speed Index
Measures the average time for pixels on the visible screen to be painted.
Time to Interactive
Time until the UI is available for user interaction (i.e. the last long task of the load process finishes).

IMPROVING PERFORMANCE
Here are a few tips and tricks to help improve perceived performance:
Minimize initial load
To improve perceived performance, minimize the original page load. In other words, download the
content the user is going to interact with immediately first, and download the rest after "in the
background". The total amount of content downloaded may actually increase, but the user only waits on
a very small amount, so the download feels faster.
Separate interactive functionality from content, and load text, styles, and images visible at initial load.
Delay, or lazy load, images or scripts that aren't used or visible on the initial page load. Additionally, you
should optimize the assets you do load. Images and video should be served in the most optimal format,
compressed, and in the correct size.
Prevent jumping content and other reflows
Images or other assets causing content to be pushed down or jump to a different location, like the
loading of third-party advertisements, can make the page feel like it is still loading and is bad for
perceived performance. Content reflowing is especially bad for user experience when not initiated by
user interaction. If some assets are going to be slower to load than others, with elements loading after
other content has already been painted to the screen, plan ahead and leave space in the layout for them
so that content doesn't jump or resize, especially after the site has become interactive.
Avoid font file delays
Font choice is important. Selecting an appropriate font can greatly improve the user experience. From a
perceived performance point of view, "suboptimal fonts importing" can result in flicker as text is styled
or when falling back to other fonts.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Make fallback fonts the same size and weight so that when fonts load the page change is less
noticeable.
Interactive elements are interactive
Make sure visible interactive elements are always interactive and responsive. If input elements are
visible, the user should be able to interact with them without a lag. Users feel that something is laggy
when they take more than 50ms to react. They feel that a page is behaving poorly when content repaints
slower than 16.67ms (or 60 frames per second) or repaints at uneven intervals.
Make things like type-ahead a progressive enhancement: use CSS to display input modal, JS to add
autocomplete as it is available
Make task initiators appear more interactive
Making a content request on key down rather than waiting for key up can reduce the perceived load time
of the content by 200ms. Adding an interesting but unobtrusive 200ms animation to that key up event
can reduce another 200ms of the perceived load. You're not saving 400ms of time, but the user doesn't
feel like they're waiting for content until, well, until they're waiting for content.

MEASURING PERFORMANCE
Measuring performance provides an important metric to help you assess the success of your app, site,
or web service.
For example, you can use performance metrics to determine how your app performs compared to a
competitor or compare your app's performance across releases. Your metrics should be relevant to your
users, site, and business goals. They should be collected, measured consistently, and analyzed in a
format that non-technical stakeholders can consume and understand.
Performance Tools
There are several different tools available to help you measure and improve performance. These can
generally be classified into two categories:
• Tools that indicate or measure performance, such as PageSpeed Insights or the Firefox Network
Monitor and Performance Monitor. These tools show you how fast or slow your website is
loading. They also indicate areas that can be improved to optimize your web app.
• Performance APIs that you can use to build custom performance tools.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

PageSpeed Insights

Tools like PageSpeed Insights can provide quick performance measurements. You can enter a URL and
get a performance report in seconds. The report contains scores indicating how your website performs
for mobile and desktop. This is a good start for understanding what you are doing well and what could be
improved.
A performance report contains information about things like how long a user has to wait
before anything is displayed on the page, how many bytes need to be downloaded to display a page, and
much more. It also lets you know if the measured values are considered good or bad.

Network Monitor Tools

Modern browsers have tools available that you can use to run against loaded pages and determine how
they are performing; most of them work similarly. For example, the Firefox Network Monitor returns
detailed information on all the assets downloaded from the network, along with a waterfall time graph
that shows how long each one took to download.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Performance Monitor Tools

You can also use browser performance tools such as the Firefox Performance Monitor to measure the
performance of a web app or site's user interface as you perform different actions. This indicates the
features that might slow down your web app or site.

Performance APIs
When writing code for the Web, many Web APIs are available to create your own performance-
measuring tools.
You can use the Navigation Timing API to measure client-side web performance, including the amount of
time needed to unload the previous page, how long domain lookups take, the total time spent executing
the window's load handler, and more. You can use the API for metrics related to all the navigation events
in the diagram below.

The Performance API, which provides access to performance-related information for the current page,
includes several APIs including the Navigation Timing API, the User Timing API, and the Resource Timing
API. These interfaces allow the accurate measurement of the time it takes for JavaScript tasks to
complete.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Multimedia: IMAGES
Media, namely images and videos, account for over 70% of the bytes downloaded for the average
website. In terms of download performance, eliminating media, and reducing file size is the low-hanging
fruit.
Why optimize your multimedia
For the average website, 51% of its bandwidth comes from imagery, followed by video at 25%, so it's safe
to say it's important to address and optimize your multimedia content.
You need to be considerate of data usage. Many people are on capped data plans or even pay-as-you-go
where they are literally paying by the megabyte. This isn't an emerging market problem either. As of
2018, 24% of the United Kingdom still use pay-as-you-go according to OFCOM Nations & regions
technology tracker - H1 2018 (PDF).
You also need to be considerate of memory as many mobile devices have limited RAM. It's important to
remember that when images are downloaded, they need to be stored in memory.
Optimizing image delivery
Despite being the largest consumer of bandwidth, the impact of image downloading on perceived
performance is far lower than many expect (primarily because the page text content is downloaded
immediately and users can see the images being rendered as they arrive). However, for a good user
experience it's still important that a visitor can see them as soon as possible.
Loading strategy
One of the biggest improvements to most websites is lazy-loading images beneath the fold, rather than
downloading them all on initial page load regardless of whether a visitor scrolls to see them or not.
Browsers provide this natively via the loading="lazy" attribute on the <img> element, and there are also
many client-side JavaScript libraries that can do this.
Beyond loading a subset of images, you should look into the format of the images themselves:
• Are you loading the most optimal file formats?
• Have you compressed the images well?
• Are you loading the correct sizes?
The most optimal format
The optimal file format typically depends on the character of the image.
The SVG format is more appropriate for images that have few colors and that are not photo-realistic. This
requires the source to be available as in a vector graphic format. Should such an image only exist as a
bitmap, then PNG would be the fallback format to choose. Examples of these types of motifs are logos,
illustrations, charts, or icons (note: SVGs are far better than icon fonts!). Both formats support
transparency.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

SVGOMG – an optimization tool for SVGs

ImageOptim – an optimization tool for PNGs

Other formats improve on JPEG's capabilities regarding compression, but are not available on every
browser:
• WebP — Excellent choice for both images and animated images. WebP offers much better
compression than PNG or JPEG with support for higher color depths, animated frames,
transparency, etc. (but not progressive display.). Supported by all major browsers except Safari
14 on macOS desktop Big Sur or earlier.
• AVIF — Good choice for both images and animated images due to high performance and
royalty-free image format (even more efficient than WebP, but not as widely supported). It is now
supported on Chrome, Edge, Opera, and Firefox. Squoosh is a good online tool for converting
previous image formats to AVIF.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

• JPEG2000 — once to be the successor to JPEG but only supported in Safari. Doesn't support
progressive display either.
Multimedia: VIDEOS
Why optimize your multimedia?
For the average website, 25% of bandwidth comes from video. Optimizing video has the potential for
very large bandwidth savings that translate into better website performance.
The sections below describe the following optimization techniques:
• compress all video
• optimize <source> order
• remove audio from muted video
• optimize video preload
• consider streaming
Compress all videos
Most video compression work compares adjacent frames within a video, with the intent of removing
detail that is identical in both frames. Compress the video and export to multiple video formats,
including WebM, and MPEG-4/H.264.
Your video editing software probably has a feature to reduce file size. If not, there are online tools, such
as FFmpeg (discussed in section below), that encode, decode, convert, and perform other optimization
functions.
Optimize <source> order
Order video source from smallest to largest. For example, given video compressions in the formats at
10MB and 12MB, declare the 10MB resource first:

The browser downloads the first format it understands. The goal is to offer smaller versions ahead of
larger versions. With the smallest version, make sure that the most compressed video still looks good.
There are some compression algorithms that can make video look (bad) like an animated GIF. While a
128 Kb video may seem like it could provide a better user experience than a 10 MB download, a grainy
GIF-like video may reflect poorly on the brand or project.
Remove audio from muted hero videos
For hero-video or another video without audio, removing audio is smart.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

This hero-video code (above) is common to conference websites and corporate home pages. It includes
a video that is autoplaying, looping, and muted. There are no controls, so there is no way to hear audio.
The audio is often empty, but still present, and still using bandwidth. There is no reason to serve audio
with video that is always muted. Removing audio can save 20% of the bandwidth.
Video preload
The preload attribute has three available options: auto, metadata, and none. The default setting
is metadata. These settings control how much of a video file downloads with page load. You can save
data by deferring download for less popular videos.
Setting preload="none" results in none of the video being downloaded until playback. It delays startup,
but offers significant data savings for videos with a low probability of playback.
Offering more modest bandwidth savings, setting preload="metadata" may download up to 3% of the
video on page load. This is a useful option for some small or moderately sized files.
Changing the setting to auto tells the browser to automatically download the entire video. Do this only
when playback is very likely. Otherwise, it wastes a lot of bandwidth.
Consider streaming
Video streaming allows the proper video size and bandwidth (based on network speed) to be delivered
to the end user. Similar to responsive images, the correct size video is delivered to the browser, ensuring
fast video startup, low buffering, and optimized playback.

JAVASCRIPT PERFORMANCE OPTIMIZATION

It is very important to consider how you are using JavaScript on your websites and think about how to
mitigate any performance issues that it might be causing. While images and video account for over 70%
of the bytes downloaded for the average website, byte per byte, JavaScript has a greater potential for
negative performance impact — it can significantly impact download times, rendering performance, and
CPU and battery usage.
Optimizing JavaScript downloads
The most performant, least blocking JavaScript you can use is JavaScript that you don't use at all. You
should use as little JavaScript as possible. Some tips to bear in mind:
• You don't always need a framework: You might be familiar with using a JavaScript framework. If
you are experienced and confident with using this framework, and like all of the tooling it
provides, then it might be your go-to tool for building most projects. However, frameworks are
JavaScript-heavy. If you are creating a fairly static experience with few JavaScript requirements,
you probably don't need that framework. You might be able to implement what you need using a
few lines of standard JavaScript.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

• Consider a simpler solution: You might have a flashy, interesting solution to implement, but
consider whether your users will appreciate it. Would they prefer something simpler?
• Remove unused code: This may sound obvious, but it is surprising how many developers forget
to clean up unused functionality that was added during the development process. You need to
be careful and deliberate about what is added and removed. All script gets parsed, whether it is
used or not; therefore, a quick win to speed up downloads would be to get rid of any
functionality not being used. Consider also that often you will only use a small amount of the
functionality available in a framework. Is it possible to create a custom build of the framework
that only contains the part that you need?
• Consider built-in browser features: It might be that you can use a feature the browser already
has, rather than creating your own via JavaScript. For example:
o Use built-in client-side form validation.
o Use the browser's own <video> player.
o Use CSS animations instead of a JavaScript animation library
You should also split your JavaScript into multiple files representing critical and non-critical
parts. JavaScript modules allow you to do this more efficiently than just using separate external
JavaScript files.
Then you can optimize these smaller files. Minification reduces the number of characters in your file,
thereby reducing the number of bytes or weight of your JavaScript. Gzipping compresses the file further
and should be used even if you don't minify your code. Brotli is similar to Gzip, but generally outperforms
Gzip compression.
Handling parsing and execution
Before looking at the tips contained in this section, it is important to talk about where in the process of
browser page rendering JavaScript is handled. When a web page is loaded:
1. The HTML is generally parsed first, in the order in which it appears on the page.
2. Whenever CSS is encountered, it is parsed to understand the styles that need to be applied to
the page. During this time, linked assets such as images and web fonts start to be fetched.
3. Whenever JavaScript is encountered, the browser parses, evaluates, and runs it against the
page.
4. Slightly later on, the browser works out how each HTML element should be styled, given the CSS
applied to it.
5. The styled result is then painted to the screen.
The key step here is Step 3. By default, JavaScript parsing and execution are render-blocking. This means
that the browser blocks the parsing of any HTML that appears after the JavaScript is encountered, until
the script has been handled. As a result, styling and painting are blocked too. This means that you need
to think carefully not only about what you are downloading, but also about when and how that code is
being executed.
Loading critical assets as soon as possible

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

The preload <link> fetches the JavaScript as soon as possible, without blocking rendering.
Deferring execution of non-critical JavaScript
On the other hand, you should aim to defer parsing and execution of non-critical JavaScript to later on,
when it is needed. Loading it all up-front blocks rendering unnecessarily.

This causes the script to be fetched in parallel with the DOM parsing, so it will be ready at the same time
and won't block rendering.
Breaking down long tasks
When the browser runs your JavaScript, it will organize the script into tasks that are run sequentially,
such as making fetch requests, driving user interactions and input through event handlers, running
JavaScript-driven animation, and so on.
Most of this happens on the main thread, with exceptions including JavaScript that runs in Web Workers.
The main thread can run only one task at a time.
When a single task takes longer than 50 ms to run, it is classified as a long task. If the user attempts to
interact with the page or an important UI update is requested while a long task is running, their
experience will be affected. An expected response or visual update will be delayed, resulting in the UI
appearing sluggish or unresponsive.
To mitigate this issue, you need to break down long tasks into smaller tasks. This gives the browser more
chances to perform vital user interaction handling or UI rendering updates — the browser can potentially
do them between each smaller task, rather than only before or after the long task. In your JavaScript, you
might do this by breaking your code into separate functions. This also makes sense for several other
reasons, such as easier maintenance, debugging, and writing tests.
Handling JavaScript animations
Animations can improve perceived performance, making interfaces feel snappier and making users feel
like progress is being made when they are waiting for a page to load (loading spinners, for example).

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

However, larger animations and a higher number of animations will naturally require more processing
power to handle, which can degrade performance.
The most obvious piece of animation advice is to use less animations — cut out any non-essential
animations, or consider giving your users a preference they can set to turn off animations, for example if
they are using a low-powered device or a mobile device with limited battery power.

HTML PERFORMANCE OPTIMIZATION

HTML is by default fast and accessible. It is our job, as developers, to ensure that we preserve these two
properties when creating or editing HTML code. Complications can occur when, for example, the file size
of a <video> embed is too large or when JavaScript parsing blocks the rendering of critical page
elements.
Key HTML performance issues
HTML is simple in terms of performance — it is mostly text, which is small in size, and therefore, mostly
quick to download and render. The key issues that can impact the performance of a web page include:
• Size of the image and video files: It is important to consider how to handle the content of
replaced elements such as <img> and <video>. Image and video files are large and can add
significantly to the weight of the page. Therefore, it is important to minimize the number of bytes
that get downloaded on a user's device (for example, serve smaller images for mobile). You also
need to consider improving the perceived performance by loading images and videos on a page
only when they are needed.
• Delivery of embedded content: This is usually the content embedded in <iframe> elements.
Loading content into <iframe>’s can impact performance significantly, so it should be
considered carefully.
• Order of resource loading: To maximize the perceived and actual performance, the HTML should
be loaded first, in the order in which it appears on the page. You can then use various features to
influence the order of resource loading for better performance. For example, you can preload
critical CSS and fonts early, but defer non-critical JavaScript until later on.
Responsive handling of replaced elements
Responsive design has revolutionized the way that web content layout is handled across different
devices. One key advantage that it enables is dynamic switching of layouts optimized for different
screen sizes, for example a wide screen layout versus a narrow (mobile) screen layout. It can also
handle dynamic switching of content based on other device attributes, such as resolution or preference
for light or dark color scheme.
The so-called "mobile first" technique can ensure that the default layout is for small-screen devices, so
mobiles can just download images suitable for their screens, and don't need to take the performance hit
of downloading larger desktop images. However, since this is controlled using media queries in your
CSS, it can only positively affect performance of images loaded in CSS.
Providing different image resolutions via srcset
To provide different resolution versions of the same image depending on the device's resolution and
viewport size, you can use the srcset and sizes attributes.
This example provides different size images for different screen widths:

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

The <source> elements contain media queries inside media attributes. If a media query returns true, the
image referenced in its <source> element's srcset attribute is loaded. In the above example, if the
viewport width is 799px or less, the narrow-banner-480w.jpg image is loaded. Also note how
the <picture> element includes an <img> element, which provides a default image to load in the case of
browsers that don't support <picture>.
<video> elements work in a similar way, in terms of providing different sources:

Lazy loading images

A very useful technique for improving performance is lazy loading. This refers to the practice of not
loading all images immediately when the HTML is rendered, but instead only loading them when they are
actually visible to the user in the viewport (or imminently visible). This means that the immediately
visible/usable content is ready to use more quickly, whereas subsequent content only has its images
rendered when scrolled to, and the browser won't waste bandwidth loading images that the user will
never see.
Lazy loading has historically been handled using JavaScript, but browsers now have a loading attribute
available that can instruct the browser to lazy load images automatically:
<img src="800w.jpg" alt="Family portrait" loading="lazy" />
You can also lazy load video content by using the preload attribute. For example:

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Giving preload a value of none tells the browser to not preload any of the video data before the user
decides to play it, which is obviously good for performance. Instead, it will just show the image indicated
by the poster attribute. Different browsers have different default video loading behavior, so it is good to
be explicit.

CSS PERFORMANCE OPTIMIZATION

When developing a website, you need to consider how the browser is handling the CSS on your site. To
mitigate any performance issues that CSS might be causing, you should optimize it. For example, you
should optimize the CSS to mitigate render-blocking and minimize the number of required reflows.
Optimizing rendering
Showing users an unstyled page and then repainting it after the CSS styles have been parsed would be a
bad user experience. For this reason, CSS is render blocking until the browser determines that the CSS
is required. The browser can paint the page after it has downloaded the CSS and built the CSS object
model (CSSOM).
To optimize the CSSOM construction and improve page performance, you can do one or more of the
following based on the current state of your CSS:
• Remove unnecessary styles: This may sound obvious, but it is surprising how many developers
forget to clean up unused CSS rules that were added to their stylesheets during development
and ended up not being used. All styles get parsed, whether they are being used during layout
and painting or not, so it can speed up page rendering to get rid of unused ones.
• Split CSS into separate modules: Keeping CSS modular means that CSS not required at page
load can be loaded later on, reducing initial CSS render-blocking and loading times. The
simplest way to do this is by splitting up your CSS into separate files and loading only what is
needed:

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

The above example provides three sets of styles — default styles that will always load, styles
that will only be loaded when the document is being printed, and styles that will be loaded only
by devices with narrow screens. By default, the browser assumes that each specified style sheet
is render-blocking. You can tell the browser when a style sheet should be applied by adding
a media attribute containing a media query. When the browser sees a style sheet that it only
needs to apply in a specific scenario, it still downloads the stylesheet, but doesn't render-block.
By separating the CSS into multiple files, the main render-blocking file, in this case styles.css, is
much smaller, reducing the time for which rendering is blocked.
• Minify and compress your CSS: Minifying involves removing all the whitespace in the file that is
only there for human readability, once the code is put into production. You can reduce loading
times considerably by minifying your CSS. Minification is generally done as part of a build
process (for example, most JavaScript frameworks will minify code when you build a project
ready for deployment). In addition to minification, make sure that the server that your site is
hosted on uses compression such as gzip on files before serving them.
• Simplify selectors: People often write selectors that are more complex than needed for
applying the required styles. This not only increases file sizes, but also the parsing time for those
selectors. For example:

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

• Don't apply styles to more elements than needed: A common mistake is to apply styles to all
elements using the universal selector, or at least, to more elements than needed. This kind of
styling can impact performance negatively, especially on larger sites.

• Preload important assets: You can use rel="preload" to turn <link> elements into preloaders
for critical assets. This includes CSS files, fonts, and images:

Conclusion
Web performance is a critical factor in delivering a seamless and efficient user experience. It directly
impacts user satisfaction, engagement, and retention, making it essential for developers and
organizations to prioritize optimization. By focusing on web performance, businesses can achieve faster
load times, improved accessibility, and enhanced usability, which are vital for maintaining
competitiveness in the digital landscape.
A systematic approach to measuring and optimizing these metrics is crucial. Techniques such as
reducing server response times, optimizing assets, using modern image formats, leveraging caching,
and minimizing JavaScript and CSS can lead to significant performance gains. Furthermore, tools like
Lighthouse, PageSpeed Insights, and WebPageTest empower developers to identify bottlenecks and
track improvements.

By Airone Vonn S. Villasor

 UA –Main Campus COLLEGE OF COMPUTER STUDIES

Ultimately, web performance is not a one-time task but an ongoing process. Regular monitoring,
iterative improvements, and staying informed about emerging web technologies ensure that web
applications remain efficient, scalable, and user-centric in an ever-evolving digital ecosystem.

By Airone Vonn S. Villasor