7 Simple Tips for a High-Speed Webpage
Tags: aspnetcore, development, performance, tipsandtricks
Published: 2021-07-28 12:37:52

---
title: 7 Simple Tips for a High-Speed Webpage
published: true
date: 2021-07-28 10:30:58 UTC
tags: ASPNETCore,Development,Performance,TipsandTricks
canonical_url: https://www.syncfusion.com/blogs/post/7-simple-tips-for-a-high-speed-webpage.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/8-Simple-Checkpoints-for-a-High-Speed-Web-Page-672x372.png
---

These days, people won’t wait long for the content on a webpage to load. So, it has become mandatory to provide speedy webpages that load in no time. The loading speed will also directly impact your site’s [search engine optimization( SEO)](https://en.wikipedia.org/wiki/Search_engine_optimization "Link to Search engine optimization Wikipedia page"). In this blog, we will see how to analyze the loading speed of a webpage and improve it.

Contents:

- [Reduce the execution time of JavaScript code](#reduce-the-execution-time-of-javascript-code).
- [Use compressed images and provide dimensions for images and videos](#use-compressed-images-and-provide-dimensions-for-images-and-videos).
- [Implement lazy loading](#implement-lazy-loading).
- [Split your CSS based on the device resolution](#split-your-css-based-on-device-resolution).
- [Reduce the complexity of the selectors.](#reduce-complexity-of-selectors)
- [Remove unused styles.](#remove-unused-styles)
- [Serve static assets with an efficient cache policy.](#serve-static-assets-with-cache)

## How to analyze the loading speed of a webpage

To analyze the loading speed of a webpage, Google has provided a free tool, [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/ "Link to PageSpeed Insights tool"). Just enter the page URL and click **Analyze**. The tool will perform a complete analysis and generate a report. From that report, you can see your website speed and what should be done to improve the webpage’s performance.

**Note:** Check the speed for both the mobile and desktop devices options with the PageSpeed Insights tool.

Refer to the following screenshot.

![PageSpeed Insights tool](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/PageSpeed-Insights-tool.png)<figcaption>PageSpeed Insights tool</figcaption>

## Reduce the execution time of JavaScript code

The FID score ([first input delay metric](https://developer.mozilla.org/en-US/docs/Glossary/First_input_delay "Link to First input delay documentation")) helps us evaluate the JavaScript code execution time and webpage responsiveness. FID is tied to TBT ([total blocking time](https://web.dev/lighthouse-total-blocking-time/ "Link to Total Blocking Time documentation")), which is the total amount of time the webpage was blocked. If we reduce the JS execution time, then the browser will quickly compile and execute the JS code. Failing to do so, the browser will delay rendering the JavaScript files.

Google’s [Lighthouse](https://developers.google.com/web/tools/lighthouse "Link to Lighthouse-Tool for Web Developers") is used to improving the quality of your webpages. It evaluates the webpage and measures the page performance, accessibility, best practices, and SEO.

![Lighthouse result](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Lighthouse-result.png)<figcaption>Lighthouse result</figcaption>

If the JavaScript execution time is longer than two seconds when loading a page every time, the Lighthouse will report an issue.

### Reduce the JavaScript execution time

#### **Remove unused code**

Usually, an unprocessed JavaScript file will have more lines of unused code. You can identify the unused code using the Google [coverage tab developer tool](https://developer.chrome.com/docs/devtools/coverage/ "Link to Find Unused JavaScript And CSS With The Coverage Tab documentation").

Use [dead code elimination](https://en.wikipedia.org/wiki/Dead_code_elimination "Link to Dead code elimination Wikipedia page") techniques to optimize the JS code.

![Impact of the unused JavaScript in the initial load](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Dialog-showing-the-unused-JavaScript-code-size.png)<figcaption>Impact of the unused JavaScript in the initial load</figcaption>

#### Minimize and compress your JS code

You can considerably reduce the JavaScript file size by using minified and compressed versions. There are free online tools available to minimize and compress your JS code. I would recommend using [JavaScript Minifier](https://javascript-minifier.com/ "Link to JavaScript Minifier home page").

#### Render your scripts from CDN (Amazon S3)

Use a [content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network "Link to Content delivery network Wikipedia page") (CDN) like [CloudFront](https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/ "Link to How do I use CloudFront to serve a static website hosted on Amazon S3?") to load JS code on your webpage. This will quickly load the page and precache the files. CDN files are hosted in different domains and in **distributed data centers (DDC)** that would be close to the user (who loads your webpage in the browser). Thus, it will quickly download the JS files.

#### Defer JavaScript loading

By deferring the loading of JavaScript files, you can download only the main content (first contentful paint) of the webpage first.

For more information, refer to [Defer JavaScript Loading documentation](https://developers.google.com/speed/pagespeed/service/DeferJavaScript "Link to Defer JavaScript Loading documentation").

Refer to the following code.

```html
<script type="text/javascript" defer>
/// your JS codes.
</script>
```

## Use compressed images and provide dimensions for images and videos

To enhance the loading speed of your webpage, you should optimize your image to reduce its size and loading time. To do so, provide the image’s  **width, height,** and **alt text** in the image tag.

Refer to the following code.

```html
<img width="70" height="70" alt="Ease of use" src="https://cdn.syncfusion.com/ease-of-use.svg?v=29062021112846" loading="lazy">
```

![Dialog requesting the user to set the width and height for the image elements](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Dialog-requesting-the-user-to-set-the-width-and-height-for-the-image-elements.png)

[WebP](https://en.wikipedia.org/wiki/WebP "Link to WebP Wikipedia page") format is standard for images, but it’s not supported in all browsers. For more information, refer to the [Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types# "Link to Image file type and format guide") to learn about the supported image formats in web browsers.

You can easily compress your image size along with good quality using [TinyPNG](https://tinypng.com/ "Link to TinyPNG home page").

If you use any videos (Iframe) on your webpage, then you should set the width and height of the Iframe.

## Implement lazy loading

Lazy loading means that only the required data loads initially and the remaining data loads on demand. Enabling it will help us optimize our webpage and reduce the loading time, too.

Refer to the following code.

```html
<img width="70" height="70" alt="Ease of use" src="https://cdn.syncfusion.com/ease-of-use.svg?v=29062021112846" loading="lazy">
```

When using lazy loading, the viewport of the image alone will be loaded. The off-screen images will not load initially. Thus, it enhances our loading speed.

Refer to the following image.  
 ![Defer offscreen images](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Defer-offscreen-images.png)

## Split your CSS based on device resolution

Say your webpage is responsive and has styles for mobile, tab, desktop, and large desktop form factors. The best approach here is not to use all the responsive CSS code in a single file. Rather, split your CSS based on the device (media query) and use only the required files for that device. This technique will avoid unwanted style rendering on your webpage.

Refer to the following code example.

```html
<link rel="preload" href="/Xamarin-Desktop.min.css" as="style" media="screen and (min-width: 1024px)">

<link rel="stylesheet" href="/Xamarin-Desktop.min.css" type="text/css" media="screen and (min-width: 1024px)">

<link rel="preload" href="/Xamarin-Tab.min.css" as="style" media="(max-width: 1024px) and (min-width: 767px)">

<link rel="stylesheet" href="/Xamarin-Tab.min.css" type="text/css" media="(max-width: 1024px) and (min-width: 767px)">

<link rel="preload" href="/Xamarin-Mobile_v1.min.css" as="style" media="screen and (max-width: 767px)">

<link rel="stylesheet" href="/Xamarin-Mobile_v1.min.css" type="text/css" media="screen and (max-width: 767px)">
```

By using this technique, you can fix the **Eliminate render-blocking resources** and **Reduce unused CSS** issues **.**

Refer to the following screenshots.

## ![Eliminate render-blocking resources](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Eliminate-render-blocking-resources.png)

![Reduce unused CSS](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Reduce-unused-CSS.png)

## Reduce the complexity of the selectors

Avoid the styles (CSS) using traverse selectors, as it takes additional time to find the inner DOM elements of the style when the page loads.

```css
.box:nth-last-child(-n+1) .title {
    /* styles */
}
```

## Remove unused styles

Remove the unused CSS styles and the same sort of styling applied to multiple elements with different class names. You should also optimize the structure of applying CSS using a traverse selector. In the following code example, two different variables are defined for the same style, which should be avoided.

```css
.hide {
    display: none;
}

.hidden {
    display: none;
}
```

## Serve static assets with an efficient cache policy

Apply a cache-control header for all the resources loaded. The maximum age set for a resource is a year. This cache policy issue is commonly reported for third-party resources and images used on the page.

For example: In [AWS](https://www.google.com/aclk?sa=L&ai=DChcSEwjI3fCN1vDxAhVGdGAKHTYxCDYYABABGgJ0bQ&ae=2&sig=AOD64_3-Jfor3YjiVlJMCaeCFSoUwMhwNw&q&adurl&ved=2ahUKEwjwsOeN1vDxAhVZqksFHXGDC7wQ0Qx6BAgDEAE "Link to AWS Free Tier"), for a file, add the metadata type  **_System Defined,_** _the _key  **_cache-control,_** and the value  **_max-age=31536000. _** Here, 31,536,000 corresponds to the total number of seconds in a year.

## Conclusion

Thanks for reading! In this blog post, we have discussed the simple steps to improve your webpage speed in an ASP.NET Core application. These methods will help you to improve your webpage speed and reduce the loading time. Follow these awesome tips and build high-performance and responsive webpages!

Syncfusion provides [70+ ASP.NET Core UI controls](https://www.syncfusion.com/aspnet-core-ui-controls "Link to ASP.NET Core UI controls") for application development. We encourage you to take a moment to learn about our products and browse our [interactive demos](https://ej2.syncfusion.com/home/aspnetcore.html "Link to Syncfusion ASP.NET Core UI Controls demos on web").

If you have any queries, please let us know in the comments section of this blog post. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"), or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/ "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [How to Apply API Versioning in ASP.NET Core](https://dev.to/karthickramasamy08/how-to-apply-api-versioning-in-asp-net-core-3fig-temp-slug-5071663 "Link to How to Apply API Versioning in ASP.NET Core blog")
- [Create Report Viewer Component in Angular app with ASP.NET Core](https://dev.to/syncfusion/create-report-viewer-component-in-angular-app-with-asp-net-core-ib6 "Link to Create Report Viewer Component in Angular app with ASP.NET Core blog")
- [Easiest Way to OCR Process PDF Documents in ASP.NET Core](https://dev.to/syncfusion/easiest-way-to-ocr-process-pdf-documents-in-asp-net-core-4gpj "Link to Easiest Way to OCR Process PDF Documents in ASP.NET Core blog")
- [How to Add Stored Procedures in ASP.NET Core Apps Using SPToCore](https://dev.to/syncfusion/how-to-add-stored-procedures-in-asp-net-core-apps-using-sptocore-3a3o "Link to How to Add Stored Procedures in ASP.NET Core Apps Using SPToCore blog")