One of the most important things you can do is to learn how to make your website speed faster. A successful website must have pages that load quickly since they have a huge impact on many variables. Your site’s performance can be affected by a delay of just one or two seconds.
1. Cut down on HTTP requests
According to Yahoo, downloading the various components of a Web page, such as graphics, stylesheets, scripts, Flash, etc., takes up 80% of the load time, thus reduce your website speed. Each of these items requires an HTTP request, therefore the more on-page components there are, the longer it takes for the page to render.
Given this, streamlining your design is the quickest approach to increase site speed.
- The amount of components on your page should be reduced.
- When feasible, replace pictures with CSS.
- Make a single style sheet out of several.
- Scripts should be minimised and placed at the bottom of the page.
- Always keep in mind that your website should be as lean as possible.
Pro Tips: Start an initiative to lessen the amount of elements on each page. By doing this, you’ll greatly increase site performance and cut down on the amount of HTTP queries required to render the page.
Also Read: Website Loading Speed Online
2. Reduce up server responses
Your goal is a server response time of under 200 milliseconds. And you’ll be well on your way to achieving this if you use the advice in this article.
Google advises employing a web application monitoring tool and looking for speed bottlenecks. To increase your website speed, you need to reduce up server responses.
Pro tip: To keep your site functioning well, see Singlehop’s report Critical Ecommerce Infrastructure Needs to learn nine things you should concentrate on.
After that, utilise these resources:
Yslow – to assess the performance of your site and receive recommendations for optimization.
Use Google’s PageSpeed Tools to automate the process and learn more about performance best practises.
3. Enable compression
Large pages, which you might have if you provide high-quality content, are frequently 100kb or larger. They are therefore large and take a long time to download. Compression, often known as zipping, is the greatest strategy to reduce the time it takes for a page to load.
Compression lowers your pages’ bandwidth, which lowers HTTP response. Gzip is a tool you use to accomplish this and increase you website speed.
Most web servers may Gzip-compress files before delivering them for download, either by using built-in procedures or by contacting a third-party module. Yahoo claims that this can cut down download time by roughly 70%.
Additionally, since 90% of current Internet traffic uses browsers that support Gzip, it’s a fantastic alternative for accelerating your site.
Pro tip: For more information on Gzip compression, read this article. After that, configure your server to support compression:
Use mod deflate, Apache
Utilize HttpGzipModule in Nginx
Configure HTTP Compression in IIS
Also Read: HTML Website Page size
4. Make browser caching active.
In order for your browser to load the page the next time you visit a website without making another HTTP connection to the server, the elements of the page you just visited are temporarily stored on your hard drive in a cache when you visit a website.
The HTML file, stylesheets, javascript files, and graphics must all be downloaded the first time someone visits your website in order for them to use it. It could take up to 30 components and 2.4 seconds to do that.
Only a small portion of the website has to be downloaded on subsequent visits once the page has been loaded and the various components have been stored in the user’s cache.
Pro tip: To discover four techniques for enabling caching, read this article.
The cache lifetime for static resources should be at least one week. Ads and widgets are examples of third-party resources that ought to have a cache lifespan of at least one day.
Set Expires to a minimum of one week, and preferably up to one year in the future, for all cacheable resources (JS and CSS files, picture files, video files, PDFs, etc.). Setting it to a date more than a year from now would be against RFC rules.
5. Minimize Resources
WYSIWYG tools make it simple to construct a Web page, but they can occasionally produce confusing code, which can significantly slow down your website speed.
It’s crucial to remove unneeded spaces, line breaks, and indentation from your code in order to make your pages as slim as possible because every unused piece of code increases the size of your page.
Your code should be minified as well. Google offers the following advice:
- To generate an optimised version of your HTML code, utilise the PageSpeed Insights Chrome Extension. Navigate to the “Minify HTML” rule after running the analysis against your HTML page. To view the HTML code that has been optimised, click “See optimised content.”
- You can use YUI Compressor and cssmin.js to minify CSS.
- Try the Closure Compiler, JSMin, or YUI Compressor to minify JavaScript. These programmes can be integrated into a build procedure to minify, rename, and save development files in a production directory.
6. Image optimization
Three factors need to be considered when using images: size, format, and the src property.
Image size
It’s crucial to keep your images as tiny as possible because larger images take longer to load. Use photo editing software to:
- Crop your photos to the proper dimensions. For instance, adjust the image to 570px wide if your page is that broad. Don’t just upload an image with a 2000px width and set the width parameter to 570. This makes for a poor user experience and slows down the loading of your page.
- Reduce colour depth to the bare minimum that is tolerable.
- Take away the image comments.
Image format
- Your best option is JPEG.
- Although some older browsers might not fully support it, PNG is also useful.
- Only small or straightforward graphics (less than 1010 pixels, or with a colour palette of three or fewer colours) and animated images should be stored as GIFs.
- Avoid using TIFF or BMP files.
Src attribute
Make sure the code is correct once the size and format are correct. Avoid empty image src codes in particular.
The HTML code for an image consists of the following:
<img src=””>
The browser sends a request to the page’s directory or the actual page when there is no source enclosed in quotation marks. This could increase unneeded server traffic and possibly taint user data.
Pro Tip: Before uploading your photographs, spend some time resizing them. Additionally, a legitimate URL must always have the src attribute.
Think about integrating the WP Smush.it plugin to ensure that your photos load swiftly.
7. Optimally Deliver CSS
The style specifications for your page are stored in CSS. In general, there are two methods that your website can get this data: inline, which is incorporated directly into the HTML document, or externally, which loads before your page renders.
Your HTML’s head section contains code that loads the external CSS and looks something like this:
An external style sheet is generally preferred because it makes your code smaller and prevents code duplication.
Pro tip: Only use one external CSS stylesheet when configuring your styles because using more stylesheets would result in more HTTP queries. Two helpful resources are listed below:
How many external stylesheets are being used by your website is revealed by the CSS Delivery Tool.
instructions on how to combine outside CSS files.
Do not use CSS in your headings or divs in your HTML code (like the inline CSS pictured above). If you include all CSS in your external stylesheet, your code will be cleaner to increase your website speed.
8. Give above-the-fold content priority
There is one caution you need to take into account after it was suggested that you use only one CSS stylesheet and no inline CSS. Even if the remainder of the page takes a while to load, you can improve user experience by making your above-the-fold (top of the page) load faster.
Consider dividing your CSS into two sections: a brief inline section that styles elements above the fold, and an external section that can be postponed.
9. Decrease the quantity of plugins on your website.
Too many plugins slow down your website, compromise its security, and frequently result in crashes and other technical concerns.
Pro tip: Turn off and remove any plugins that are not required. Then remove any plugins that make your site load slowly.
Consider carefully turning off plugins before gauging server performance. By doing this, you can spot any plugins that slow down your website.
Also Read: Pagespeed Insights Checker
10. Reduce redirects
Redirects lengthen load times by generating extra HTTP requests. Therefore, you should limit them to a minimum.
Most likely, if you’ve built a responsive website, you’ve set up redirects to send mobile users from your primary website to the responsive version.
Pro Tips:
Google suggests taking the following two steps to ensure that a responsive redirect doesn’t cause your site to load slowly:
- Send users with mobile user agents directly to the mobile equivalent URL using an HTTP redirect to avoid any intermediate redirects, and
- Use the link rel=”alternate”> markup to indicate the mobile equivalent URL on your desktop pages so Googlebot can find them.
The conclusion
Some of these suggestions are simple to put into practise, but others involve more complex strategies that can intimidate someone who lacks technical aptitude.
If so, you might wish to get assistance. A few resources I can suggest are listed below:
Google Developers contains helpful information that can assist you in enhancing site performance if you enjoy delving in and taking on DIY projects.
It’s your time now.
Leave a Reply