Unit 5: Performance, SEO, and Deployment - Practice Quiz

INT257 — Modern Web Application Development 60 Questions
0 Correct 0 Wrong 60 Left
0/60

1 What is the main purpose of image optimization in a web application?

Image Optimization Easy
A. To create database tables
B. To manage user sessions
C. To reduce loading time
D. To increase server count

2 Which image format commonly provides efficient compression for modern websites?

Image Optimization Easy
A. WebP
B. TIFF
C. RAW
D. BMP

3 What type of information is commonly defined using a Metadata API?

Metadata API Easy
A. Server memory and storage
B. User passwords and tokens
C. Database rows and columns
D. Page title and description

4 Which metadata value is normally displayed on a browser tab?

Metadata API Easy
A. Port number
B. Page title
C. Request method
D. Cookie value

5 What does code splitting do in a web application?

Code Splitting Easy
A. Divides code into smaller bundles
B. Copies data across databases
C. Combines images into one file
D. Converts CSS into HTML

6 What is a common benefit of code splitting?

Code Splitting Easy
A. A smaller initial download
B. A longer database query
C. A higher server temperature
D. A larger image resolution

7 What does lazy loading mean?

Lazy Loading Easy
A. Storing all content in cookies
B. Loading all content before rendering
C. Deleting content after each request
D. Loading content when it is needed

8 Which resource is commonly lazy-loaded when it is below the visible part of a page?

Lazy Loading Easy
A. An image
B. A domain name
C. A status code
D. A page title

9 What does SEO stand for?

SEO Fundamentals Easy
A. Server Execution Operation
B. Software Evaluation Order
C. Search Engine Optimization
D. Site Encryption Output

10 Which HTML element is most appropriate for the main heading of a page?

SEO Fundamentals Easy
A. <footer>
B. <span>
C. <h1>
D. <button>

11 What is a production build?

Production Build Easy
A. A draft version for note-taking
B. An optimized version for deployment
C. A database backup for testing
D. A design file for editing

12 Which process commonly reduces the size of production JavaScript files?

Production Build Easy
A. Pagination
B. Authentication
C. Normalization
D. Minification

13 What is an environment variable commonly used for?

Environment Configuration Easy
A. Formatting page headings
B. Drawing interface icons
C. Compressing image files
D. Storing configuration values

14 Which value commonly changes between development and production environments?

Environment Configuration Easy
A. Image aspect ratio
B. API base URL
C. HTML heading level
D. Button label text

15 What is the main role of a deployment platform?

Deployment Platforms Easy
A. Creating all database records
B. Writing all application code
C. Designing every page layout
D. Hosting and serving an application

16 Which service is commonly used to deploy modern web applications?

Deployment Platforms Easy
A. Jest
B. Vercel
C. Postman
D. Figma

17 What is the purpose of performance monitoring?

Performance Monitoring Easy
A. To measure application speed
B. To choose brand colors
C. To write privacy policies
D. To create user accounts

18 Which metric measures how long a page takes to become usable?

Performance Monitoring Easy
A. Time to Interactive
B. Screen resolution
C. HTTP status code
D. Domain expiration

19 What is the main purpose of error logging?

Error Logging Easy
A. To record application failures
B. To improve image colors
C. To arrange navigation links
D. To rename CSS classes

20 Which information is useful in an error log?

Error Logging Easy
A. Font family and text size
B. Menu label and icon shape
C. Logo width and page color
D. Error message and timestamp

21 A product page displays the same image at widths ranging from 320 px on phones to 1200 px on desktops. Which approach best reduces unnecessary image transfer?

Image Optimization Medium
A. Serve one 1200 px JPEG to every device
B. Use responsive srcset and sizes attributes
C. Store the image as a Base64 string
D. Resize the image using only CSS width

22 A website's Largest Contentful Paint element is a hero image visible immediately after navigation. Which optimization is most appropriate?

Image Optimization Medium
A. Load the hero image after user interaction
B. Lazy-load the hero image below all scripts
C. Convert the hero image into an icon font
D. Preload the hero image and size it explicitly

23 A Next.js product route must generate a unique title and description from the product identifier. Which implementation is most suitable?

Metadata API Medium
A. Place one shared title in the global stylesheet
B. Export static metadata from the root layout
C. Update document.title inside a click handler
D. Call generateMetadata in the dynamic route

24 A page appears correctly in search results, but social platforms show no preview image when its URL is shared. Which metadata should be added?

Metadata API Medium
A. Open Graph image metadata
B. Robots indexing metadata
C. Viewport scaling metadata
D. Character encoding metadata

25 An analytics dashboard includes a large chart editor used only after the user selects Edit chart. What is the best code-splitting strategy?

Code Splitting Medium
A. Embed the editor code in the HTML
B. Duplicate the editor in each route bundle
C. Import the editor in the root module
D. Dynamically import the editor on demand

26 After route-based code splitting, users notice a short delay when opening a frequently visited settings page. Which technique can reduce the delay without restoring one large bundle?

Code Splitting Medium
A. Render the settings page as an image
B. Disable caching for the settings bundle
C. Move every route into the main bundle
D. Prefetch the settings route when appropriate

27 A long article contains twenty photographs, but only the first two are visible when the page loads. Which loading policy is most appropriate?

Lazy Loading Medium
A. Load visible images only after scrolling
B. Load all photographs with high priority
C. Load every photograph after a fixed delay
D. Load visible images eagerly and others lazily

28 A lazily loaded comments component causes the page footer to jump downward when the component appears. Which change best addresses the problem?

Lazy Loading Medium
A. Increase the component's JavaScript bundle
B. Hide the footer until the page reloads
C. Reserve space with a stable placeholder
D. Remove caching from the comments request

29 An online store exposes the same product through URLs containing different tracking parameters. Which SEO measure best consolidates ranking signals?

SEO Fundamentals Medium
A. Add a canonical URL to the product page
B. Block all product images from crawlers
C. Repeat the product title in every heading
D. Redirect the product page to the homepage

30 A recipe page is indexed, but the team wants search engines to better understand ingredients, cooking time, and ratings. What should be added?

SEO Fundamentals Medium
A. More CSS classes for each ingredient
B. A second navigation menu for crawlers
C. Tracking parameters for recipe sections
D. Recipe structured data using JSON-LD

31 A React application performs well during local production testing but is slow when tested through the development server. Why should performance be measured using a production build?

Production Build Medium
A. Production builds avoid rendering components
B. Production builds disable browser networking
C. Production builds minify and optimize assets
D. Production builds remove all runtime errors

32 A production bundle unexpectedly contains a large debugging library that is imported but never used. Which build feature should normally remove it when the package supports static analysis?

Production Build Medium
A. Source mapping
B. Server polling
C. Hot reloading
D. Tree shaking

33 A frontend needs an API base URL that differs between staging and production. How should the URL normally be configured?

Environment Configuration Medium
A. Use environment-specific configuration variables
B. Ask each user to enter the URL manually
C. Detect the environment from the user's language
D. Store both URLs in a public HTML comment

34 A developer stores a database password in a variable prefixed for exposure to browser code. What is the primary problem?

Environment Configuration Medium
A. The password can be included in client bundles
B. The password changes the application's route paths
C. The password prevents CSS from being minified
D. The password disables server-side rendering

35 A single-page application deployed to static hosting returns a 404 when users refresh /account/settings, although client-side navigation works. What configuration is needed?

Deployment Platforms Medium
A. Disable JavaScript caching for nested routes
B. Redirect every route to an external search engine
C. Generate a separate stylesheet for each route
D. Rewrite unknown routes to the application entry file

36 A team wants every pull request to receive an isolated URL for testing before production deployment. Which platform capability best supports this workflow?

Deployment Platforms Medium
A. Preview deployments
B. Permanent redirects
C. Manual minification
D. Local storage

37 Laboratory tests report fast page loads, but users in one geographic region report poor performance. Which monitoring approach would best verify their experience?

Performance Monitoring Medium
A. Measure the size of the development database
B. Run only local tests on a faster computer
C. Count the number of source code comments
D. Collect real-user performance metrics by region

38 A page becomes visually complete quickly, but clicking its main button often feels delayed. Which Core Web Vital is most relevant to investigate?

Performance Monitoring Medium
A. Cumulative Layout Shift
B. Largest Contentful Paint
C. Interaction to Next Paint
D. Time to First Byte

39 A minified production stack trace points to app.8fd3.js, making the original source location difficult to identify. What should the error-monitoring service use?

Error Logging Medium
A. Unminified CSS class names
B. Uploaded production source maps
C. Browser history snapshots
D. Database migration records

40 An error report says Request failed but gives no clue which release, route, or user action produced it. Which improvement would make the report most actionable?

Error Logging Medium
A. Replace the message with a numeric status alone
B. Suppress repeated errors before recording them
C. Record only the browser's screen dimensions
D. Attach structured context and a correlation identifier

41 A product page displays a 2400×1600 hero photograph in a 600px-wide container. The image is above the fold, uses object-fit: cover, and the server supports responsive image transformation. Which implementation most effectively reduces the image's Largest Contentful Paint contribution without reducing visible quality?

Image Optimization Hard
A. Serve several 600px images simultaneously so the browser can select the sharpest one after layout
B. Serve the original JPEG with loading="lazy" and decoding="async"
C. Serve a 600px WebP image with srcset and a matching sizes value
D. Serve a 2400px PNG with fetchpriority="high"

42 A responsive site uses an art-directed mobile crop and a different desktop crop of the same editorial image. Which markup best communicates that the source must change with the viewport rather than merely scale?

Image Optimization Hard
A. Use <picture> with media-specific <source> elements and a fallback <img>
B. Use CSS background-image declarations for both crops
C. Use one <img> with width and height attributes only
D. Use one <img> with srcset descriptors that reference the two crop URLs

43 A route renders product metadata from asynchronous database data. The application generates a canonical URL, Open Graph image, and title. Which design best prevents stale metadata when the product slug changes while preserving a stable canonical URL?

Metadata API Hard
A. Place product values in the URL but keep the metadata object statically cached
B. Define one global title and canonical URL for every product route
C. Generate metadata only in a client-side effect after the page mounts
D. Generate metadata from the resolved route parameters and product record

44 A site has a localized article at /en/guide and /fr/guide. Search engines are receiving duplicate-content warnings because each page declares only its own canonical URL. Which metadata strategy is most appropriate?

Metadata API Hard
A. Canonicalize both URLs to the English page and omit alternate-language references
B. Remove canonical tags and rely exclusively on translated page titles
C. Canonicalize both URLs to the French page because it contains more translated text
D. Use self-canonicals plus reciprocal hreflang references for both locales

45 A dashboard's initial JavaScript bundle contains a 900KB charting library used only after a user opens an analytics tab. Which change most directly improves the initial route's parse and execution cost?

Code Splitting Hard
A. Replace the chart library's variable names while preserving the same static import
B. Duplicate the chart library into a separate entry without changing imports
C. Dynamically import the chart module when the analytics tab is activated
D. Minify the chart library while keeping it in the initial bundle

46 A bundler produces a shared vendor chunk containing nearly every dependency. The application has several rarely visited routes, but each route still downloads this large chunk on first navigation. Which change best targets route-level performance?

Code Splitting Hard
A. Add cache-busting query strings to force each route to receive a fresh vendor chunk
B. Disable tree shaking so route modules retain consistent dependency boundaries
C. Increase the vendor chunk size limit so fewer files appear in the build output
D. Split dependencies according to route usage and load shared code selectively

47 A page contains a below-the-fold video player and an above-the-fold hero image. Which loading policy is most appropriate?

Lazy Loading Hard
A. Lazy-load the video and eagerly load the hero image
B. Lazy-load the hero image and eagerly load the video to reserve its layout
C. Eagerly load both resources because users may eventually view them
D. Lazy-load both resources because bandwidth should always be minimized

48 An infinite-scroll feed uses IntersectionObserver, but it repeatedly requests the next page when the sentinel remains visible during a slow network response. What is the most robust fix?

Lazy Loading Hard
A. Increase the observer threshold to 1 so callbacks occur less frequently
B. Increase the root margin substantially so the next request starts earlier and can overlap
C. Guard requests with an in-flight flag and update pagination after success
D. Remove the sentinel after the first callback and recreate it on every render

49 A faceted commerce site exposes thousands of URLs through combinations of filters, many containing the same products and no unique search value. Which strategy best controls crawl waste while preserving useful category pages?

SEO Fundamentals Hard
A. Add every filter URL to the XML sitemap so crawlers discover the complete catalog
B. Return identical product pages for every combination and rely on search engines to deduplicate them
C. Use nofollow on every filter link while leaving all generated URLs indexable
D. Allow valuable facets, canonicalize duplicates, and block low-value combinations where appropriate

50 A JavaScript-rendered article shows a loading shell in the initial HTML, and the article body appears only after client execution. Organic traffic is low despite correct titles and descriptions. Which change most directly improves crawl reliability?

SEO Fundamentals Hard
A. Add more keywords to the client-generated title after hydration
B. Hide the loading shell with CSS until the browser finishes executing scripts
C. Add an extra analytics script so crawlers receive more page activity signals
D. Render the article's primary content in server HTML or a pre-rendered response

51 A production build passes functional tests, but its JavaScript bundle contains source maps with embedded source content and internal API paths. What is the primary deployment concern?

Production Build Hard
A. The maps will prevent browsers from caching JavaScript bundles
B. The maps make all runtime exceptions impossible to capture
C. The maps necessarily cause the minifier to remove dead code incorrectly
D. The maps may expose proprietary source and infrastructure details

52 A release changes hashed asset filenames, but the deployment replaces the old assets immediately. Users with an older HTML document then receive 404 responses for its referenced chunks. Which deployment improvement addresses this failure mode?

Production Build Hard
A. Set all JavaScript responses to no-store so browsers always refetch them
B. Retain old hashed assets for a compatibility window and publish HTML atomically
C. Increase JavaScript compression so old documents reference fewer chunk files
D. Disable filename hashing so every release overwrites the same asset names

53 A frontend build exposes variables prefixed for client access. A developer places a database password in one of those variables, assuming the value is protected because the repository is private. What is the correct assessment?

Environment Configuration Hard
A. The password is protected because bundlers encrypt public variables automatically
B. The password is exposed to clients and must be rotated and removed
C. The password is safe if the production build disables source maps
D. The password is safe when the variable name does not include the word secret

54 A single container image should be promoted from staging to production without rebuilding. The frontend currently embeds the API base URL during compilation. Which architecture best supports this requirement?

Environment Configuration Hard
A. Build separate images for staging and production with different embedded URLs
B. Inject runtime configuration through a server-generated config endpoint
C. Choose the API URL from window.location.host for every request
D. Store the production URL in a public client variable and override it after deployment

55 A globally distributed application has personalized pages that cannot be publicly cached, while its static assets are content-hashed and immutable. Which deployment design gives the best performance and correctness balance?

Deployment Platforms Hard
A. Cache all HTML publicly for a year and vary responses only by browser user agent
B. Disable CDN caching entirely because personalized HTML prevents asset caching
C. Cache immutable assets at the edge and use short-lived or private caching for personalized HTML
D. Cache personalized HTML by URL alone and purge it only during scheduled releases

56 A serverless deployment handles ordinary requests quickly but times out during a large report export. The export performs CPU-intensive work and exceeds the platform's execution limit. Which redesign is most appropriate?

Deployment Platforms Hard
A. Queue the export as an asynchronous job and notify the user when it completes
B. Increase the browser timeout and keep the same synchronous serverless request
C. Add more client-side polling while the original request continues running
D. Move compression into the browser after downloading the complete report dataset

57 A field-monitoring dashboard reports excellent average LCP, but users on slow mobile networks still complain. Which measurement change is most likely to reveal the problem?

Performance Monitoring Hard
A. Average LCP across all sessions without retaining device or network dimensions
B. Report only the fastest LCP value to isolate ideal rendering conditions
C. Compare p75 or p95 LCP by device, connection, and geographic segment
D. Replace field measurements with a single desktop Lighthouse run

58 A release lowers the overall error rate but increases INP for users on low-end devices. Which investigation provides the strongest evidence for a release decision?

Performance Monitoring Hard
A. Measure total JavaScript bytes without examining interaction timing or affected cohorts
B. Compare segmented INP distributions and correlate regressions with changed interactions
C. Use only the median INP because tail latency is caused by network conditions
D. Approve the release because fewer errors always indicate better user experience

59 An error-monitoring service receives a stack trace from a minified production bundle, but the frames are unreadable. Source maps exist locally and contain sensitive source code. Which setup is most appropriate?

Error Logging Hard
A. Disable minification in production so stack traces remain readable by default
B. Upload source maps privately with release identifiers and omit them from public assets
C. Log only the error message because stack frames cannot be trusted after bundling
D. Publish source maps publicly and rely on obscurity to protect implementation details

60 A client application logs full request payloads and authenticated URLs whenever an exception occurs. Logs are useful for debugging, but they may contain passwords and personal data. What is the best correction?

Error Logging Hard
A. Redact sensitive fields, minimize context, and restrict log access
B. Send all logs to the browser console and let users decide what to report
C. Hash the entire payload while retaining authentication headers for correlation
D. Keep every payload because complete logs provide the most reliable diagnosis