Website Development with Scripting: A Comparison between Client-Side and Server-Side Scripting

Overview

This article explores the use of scripting for website development.

Scripting is the process of using programming languages to create dynamic, and responsive web pages. It can be divided into categories: client-side and server-side. Client-side script runs in the user’s browser after the webpage is fetched from the server. Server-side script runs on the server before sending content to the user's browser.

It is worth mentioning that website running client-side scripts can be hosted on free static website hosting platforms like Github Pages. To develop a website with server-side scripts, one would have to upgrade to paid hosting solutions or host their own server.

Prerequisite

Mandatory: Website design using HTML, CSS, Javascript and PHP.

Flexible: Basic knowledge of search engines and crawlers.

Search Engines and Crawlers

All of us use search engines extensively to filter websites relevant to our interest. Common examples of search engines are Duckduckgo, Google, Bing, Yahoo, Yandex. The job of search engine is to index web pages on internet and rank them in order of their relevance.

To discover new web pages and content, search engines use crawlers to explore online information. In layman terms, crawling web pages on internet is equivalent to traveling in real world.

Use Cases: Scripting for Web Developement

Scripts are used to make a website user-friendly and responsive while reducing coding overhead on the developer. Examples of use cases for scripting are as follows:

• Lazy loading using client-side scripting.

  Lazy loading is a web optimization technique where content, such as images or videos, is loaded only when it is needed, typically when it comes into the user's viewport. This approach reduces initial page load time, improves performance, and saves bandwidth by deferring the loading of offscreen elements. Lazy loading can be implemented using HTML attributes like loading="lazy" for images or JavaScript libraries to manage more complex scenarios, ensuring a smoother user experience, especially on content-heavy websites.

• Loading an interlaced JPEG image using client-side scripting.

  JPEG interlacing, also known as progressive JPEG, is a technique where an image is encoded in multiple passes, allowing a low-resolution version to load first, followed by higher-quality refinements. This approach provides a preview of the image while it is still downloading, enhancing user experience on slower connections. Unlike baseline JPEGs, which load top to bottom, progressive JPEGs improve perceived loading speed, especially for large images, but require slightly more processing power to decode.

• Pagination and infinite scrolling using client-side scripting with/without server-side scripting.

  In pagination, content is divided into discrete pages, usually navigable via numbered links or buttons. It provides better control and is easier to integrate with search engines, making it suitable for blogs, search results, and content-heavy sites.

  In infinite scrolling, content is dynamically loaded as the user scrolls down the page, creating a seamless browsing experience. Commonly used in social media and e-commerce, it eliminates the need for manual navigation. However, it can make it harder for users to reach the footer or keep track of their position in the content.

• DASH streaming using client-side and server-side scripting.

  Dynamic Adaptive Streaming over HTTP (DASH) is a streaming protocol designed to deliver high-quality video and audio content over the internet. It works by breaking media content into small chunks and dynamically adjusting the quality of the stream based on the viewer's network conditions and device capabilities. DASH uses standard HTTP servers, making it widely compatible and easy to deploy. It supports features like adaptive bitrate streaming, live and on-demand playback, and multiple audio/video tracks, ensuring a smooth viewing experience even under varying bandwidth conditions.

• Custom CSS property and personalized content using server-side and/or client-side scripting.

  CSS properties, such as custom variables, allow dynamic theme changes, enabling developers to adjust colors, fonts, and layouts specific to user selections. Media queries further enhance this by responding to system settings like dark mode or reduced motion preferences, ensuring accessibility. For device-specific personalization, user-agent detection helps fine-tune layouts and styles for optimal performance on different screens.

  Personalized content enhances engagement by providing tailored data. User preferences, such as language settings or layout choices, can be stored in a database to ensure continuity between visits. Server-side scripting can also be used to generate recommended content based on user behavior and history.

Client Side Scripting

There are several ways to generate website content on the client side, the most popular being Javascript. Website content generated by client-side scripting should be limited to content where crawling by search engines is not important. Client-side scripting is generally used for functionalities like form validation, animations, and dynamic content updates using languages like JavaScript.

Server Side Scripting

There are several ways to generate website content on the server side, the most popular being PHP. Website content generated by server-side scripts are easily discoverable by crawlers for indexing. Server-side scripting is also useful in content personlization by using backend tasks such as database interactions, and session management.

Considerations for Search Engine Discovery: Crawler-Friendly Websites

Depending on scripting mode for generating website content, one may need additional steps to make the content on their website discoverable by search engines. For client-side scripting, pre-rendering is required for discovery by crawlers. Scripting is also be used for efficient delivery of content, for e.g. lazy loading of image, and DASH video streaming. Though this prevents media discovery by crawlers; one can make them discoverable as follows:

• Use <noscript> tags to show media to crawlers without lazy loading or DASH streaming
• Use meta tags to direct crawlers to a crawler-friendly website.
• For websites designed using HTML, CSS, and Javascript, use pre-rendering to generate crawler-friendly static websites.

Crawlers Overhead on Bandwidth

Crawlers increase load on servers. Therefore, depending on how resource-intensive a website is, one may need to trade-off between discoverability by crawlers and bandwidth conservation. There are several ways to reduce bandwidth overhead by crawlers:

• Adjust the crawling frequency
• Schedule time slots for crawlers so that peak time bandwidth demand is mitigated
• Use robots.txt to limit crawlers' access to resource-intensive webpages

Author

Anurag Gupta is an M.S. graduate in Electrical and Computer Engineering from Cornell University. He also holds an M.Tech degree in Systems and Control Engineering and a B.Tech degree in Electrical Engineering from the Indian Institute of Technology, Bombay.

Comment

* Required information

Comment

1000

Upload

Drag & drop images (max 3)

Rating

Name

Email

Captcha

Notify me of new comments via email

Remember my form inputs on this computer

I have read and understand the privacy policy

I have read and agree to the terms and conditions

Powered by Commentics

x

Insert Bullet List

Please enter at least one item.

Item:

Item:

Item:

Item:

Item:

x

Insert Numeric List

Please enter at least one item.

Item:

Item:

Item:

Item:

Item:

x

Insert Link

Please enter the link of the website

Optionally you can add display text

x

Insert Email

Please enter the email address

Optionally add any display text

x

Insert Image

Please enter the link of the image

x

Insert YouTube Video

Please enter the link of the video

x

Image Upload

x

Privacy Policy

This policy contains information about your privacy. By posting, you are declaring that you understand this policy:

• Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
• Aside from the data entered into these form fields, other stored data about your comment will include:
  • Your IP address (not displayed)
  • The time/date of your submission (displayed)
• Your email address will not be shared. It is collected for only two reasons:
  • Administrative purposes, should a need to contact you arise.
  • To inform you of new comments, should you subscribe to receive notifications.
• A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.

This policy is subject to change at any time and without notice.

x

Terms and Conditions

These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:

• Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
• You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
• You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
• The administrator has the right to edit, move or remove any comment for any reason and without notice.

Failure to comply with these rules may result in being banned from submitting further comments.

These terms and conditions are subject to change at any time and without notice.

Past Comments

No comments yet. Be the first!

x

Similar content

Optimal Travel Route: OpenStreetMap + Traveling Salesman Problem + OR-Tools

Email Spoofing Attack using a PHP Script

Content Delivery Strategies: Pagination and DASH Explained

Secure API Management using FastAPI, Uvicorn and Kong in Linux

Server-Side Pagination using HTML, CSS, Javascript and PHP

Scaling Websites to Handle Large Traffic