A web page is a document accessible via the Internet through a web browser. It is a fundamental unit of the World Wide Web, typically written in HTML (Hypertext Markup Language) and can include various types of content such as text, images, videos, and links to other pages.
Web Page Structure
(Copy Right – Web Style Guide)
The webpage is linked with a URL or Universal Resource Locator. The URL is linked with a directory in a server. The internal structure comprises of:
- Doc Type
- <Html>
- <meta charset=”UTF-8″> This is universally present in all websites. It indicates a character set or HTML encoding. HTML 5 encourages all websites to use it as its coverage of words and symbols is expansive.
- <Head>
- A number of scripts are placed inside the head. The head also contains cache control. That is how the cache will control the memory storage. Some tags, verification codes, or links are also placed here.
- <title>
- </title>
- Meta that includes description and keywords. Other elements found here are more meta that control the visibility and description of the web page. Nowadays to make the web page responsive a viewport is also added. If you go through this section by viewing the page source you will get a better idea.
- </Head>
- Body
On the top left you find a logo followed by a URL. The title is visible on the SERP and so is the meta. The title is visible on the top all the time.
The body has three columns or rather five:
- Header
- Left Column
- Center
- Right Column
- Footer
A number of pages make a website and these pages are linked to a directory in the hosting server. They may also be linked to a sub-directory within the root directory. Use FTP and you will see the directory structure.
Web Page Weight or Size
The ideal size should be around 100 kb. In the case of eCommerce pages, they could be longer up to 200kb but that’s the limit. If the size is above a hundred you should limit it by removing elements and attributes.
CSS & JS
Optimize the code when you use CSS and JavaScript (JS) by minimizing them. This process involves removing any unnecessary code, comments, and whitespace to reduce file sizes and improve loading times. Moreover, minification ensures that only the essential code needed for functionality remains, eliminating what is known as “code bloat.”
HTML DOM
Document Object Model is created when a website is loaded.
- DOM defines HTML elements as an object.
- Properties for all HTML
- Method for all HTML Elements
- Events for all HTML Elements
The HTML DOM is an API (Programming Interface) for JavaScript:
- JavaScript can add/change/remove HTML elements
- JavaScript can add/change/remove HTML attributes
- JavaScript can add/change/remove CSS styles
- JavaScript can react to HTML events
- JavaScript can add/change/remove HTML events
Solutions
Hence, reduce pagesize without eliminating UX elements. Removing large images. Manage Web Core Vitals it will solve most of the issues. Minify all coding like JS and CSS.