There are numerous codes suggested on the internet for site optimization. However, based on my experience, I would suggest the following methods:
1. HTML should be verified on https://validator.w3.org: Validating a website enhances its quality besides successfully debugging it. This makes your website easy to load on most browsers with fast loading speeds.
The HTML code should be validated as per:
- HTML5 standards
- Structure
- SEO tags alt, name
2. The image should be optimized: Using images indiscriminately without optimization also results in slow loading of websites.
The following tips are suggested for image optimization:
- It is recommended that the size of the image should be minimized using GIF, PNG-8 or JPEG file formats.
- Ensure that the size matches your application. You can set the size for each page with the height and width.
- Do not scale images, especially from a larger to a smaller size.
- For smaller dimensions, scale the image using image editing programs.
For optimum page loading speeds, images should meet the following criteria:
- Maximum size 200kb
- Stretching of images should be avoided.
3. Remove all unwanted files and folders from server: As we develop the website we create numerous files and folders. These files and folders lose their significance after some time. Hence it is a recommended to remove the unwanted files and folders from the server. This is because these serve as one of the main reasons for slow loading of websites.
4. Avoid the use of direct links like CSS, JS for images: Using direct links for images tends to confuse the browser which results in a lower speed.
5. Move all JS files header to footer and CSS files from footer to header: If JavaScripts and CSS files are kept external, the loading speed increases because JavaScript and CSS files are cached by the browser. However, if it is necessary to include them in the web page, the JavaScript should be kept at the bottom of the page and CSS at the top.
6. Use different CSS files, one for mobile view and one for desktop view: The criteria for loading of a website on a mobile and a desktop are different. Hence, do not try using the same file for mobile and desktop view. Different CSS files should be created for mobile and desktop views.
7. Remove query strings from the URL: Query strings prevent caching of static resources on browsers and proxy servers. Eliminating them from static resources such as CSS and JavaScript enables caching the static resources. This greatly increases the website loading speed.
8. Code should be structured as per language: Websites are developed using HTML, CSS, CorePHP, WordPress, Magento, Shopify, etc. Each language has its own set of guidelines for coding. The software should be developed according to the coding standards specified by the language.
9. Code reusability: Very often certain codes need to be repeated. The options available are to copy and paste the code or to keep rewriting it. It is recommended that the coding is done such that codes can be directly used to construct other programs. This enhances the quality of the software and efficiency of the software industry. For example, some languages have software libraries from where codes can be reused.
10. Development mode off when the site goes live: It is recommended to keep the development mode off when the site goes live. If it is left on it increases the server response time. An error log should be created so that all the errors get recorded there. In the absence of the error log, the errors appear on the live site as an error, warning, fatal error, etc. leading to lower loading speeds.