Speed ​​Up Loading Slow Website Pages, Here's How

INDEPHEDIA.com - The challenge as a web developer today is not only to build a reliable back end or responsive design or user friendly front end, but also to ensure pages accessed by users are loaded by the web browser correctly and quickly.

Although the back end is very reliable and the front end page is very interesting, but if the load time of the page is slow, we can be sure the user will be very uncomfortable and then leave our website.

Website speed certainly also affects SEO. Website speed indicator taken by Google to rank websites. The slower our website, gradually sinks in Google's search engine.

Now, to speed up this website there are several ways that can be done, including using cache, checking coding again, adding expires headers in static resources, minification scripts, optimizing images, using lazy loading mechanisms for images, combining external scripts and using CDN for static resource.

Cache
Cache is a powerful way to speed up website loading. The first cache model is to place the cache on client devices for example for static resources (js, css, images).

The second method puts the rendering results of a page on the server, meaning when a user opens a page that has been opened before. The server does not need to execute the code from beginning to end, the user only opens the rendering results of the previous user.

Add expires header in static resource
Add the http expires header or cache control in each static resource file (images, css, js, etc.) that intends to put the file on the user's device for a certain period of time. So that when users access our website again, the web browser does not need to load resources from the server and only retrieve them from the cache.

Image optimization
Image content usually when totaled will have a large size compared to other resources. For image optimization can be done by ensuring the image size as requested, for example, there is no need to use an image size of 1600px x 800px for thumbnail images of 100px x 100px.

Optimization is done by reducing the size of the image without ignoring its quality. This can be done with a variety of image editing tools, both online and installed on a PC / laptop.

Use the lazy loading mechanism for images
Lazy loading is a common design pattern used in computer programming to delay object initialization to the point where it is needed. This can contribute to efficiency in program operations if properly and appropriately used.

For example, images located in the footer will not be loaded by the web browser when the web page is first opened. This image will only load if the user scrolls the page down to the footer section.

Re-check coding
To ensure the coding we use runs optimally, make sure all coding functions if it can be summarized and nothing is not used. For example, optimizing queries in a database, avoiding the use of many variables, avoiding loading unneeded libraries, including libraries that are loaded from external links. Likewise, if we use external resources, make sure there are no broken links.

Minification script
Remove all unnecessary characters from the source code without changing its function. These include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add code readings but are not required for it to execute.

Combine external script
Sometimes we use lots of css files and lots of js files. Try to merge the css file into 1 file as well as for javascript files. So the web browser only needs to request it once for css or javascript.

Use CDN for static resources
You certainly have to pay to use the CDN. But the impact you will get will be very large. CDN is a distributed server system that provides web pages and other web content to users based on the geographical location of the user, the origin of the web page and the content delivery server.

This service is effective in accelerating the delivery of content from sites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be sent to the user.

To measure the speed and optimization of a website, there are many tools that can be used to see how well we are doing optimization. To know the speed of the website, you can use tools, such as Lighthouse, WebPageTest, PageSpeed ​​Insights and GTmetrix. You can find these four tools in the Google browser. (SBB.IN/ENG/*)