Though the desire to pack Your main page with information to its capacity is justified, it may result in a large volume of content which takes up to 10-15 seconds to load. How do we rationalize it and make it work? Let’s look closer at possible solutions below.
1. Server optimization
Extend Your hosting resources wherever it is possible. If you can do it - do it! Today, the shortage of hosting resources is the most common factor to slow down ‘compact’ websites (like business card pages, online stores, etc.).
Optimize Your databases. If to put it simple: the job of the website is to collect data and store it in a database in order to later on display the required data in required moment. Naturally, sending request to the database and receiving a response takes most of the loading time. Therefore, if there are flaws in database structure and request coding, or the storage is overloaded with outdated information, the load speed will definitely drop.
It is important to hire only professional specialists to reorganize your database if you want to get maximal result and avoid loss of core data.
There are several ways to help optimize Your database:
Optimization of the database structure. Sort through the information and organize it in order. This will speed up the search process and access to the information.
- Optimize requests. Correctly composed requests for data allow the online resource to find required information in a database a lot faster.
Ursus Wehrli «The Art Of Clean Up»
- Use server caching. It is a powerful multi-purpose tool. Simply place results into cache and remember to refresh one in a while. This way you can speed up the page loading time by reducing the workload of the server.
2. Optimizing JS, CSS files
Simultaneous connection of several CSS files extends page loading time in a browser. The best solution is to unite few CSS files in one. It should be connected at the top of the page. The same works for JS files, accept that connection is at the bottom of the page. It is imperative to cut the united files shorter. You are free to use special utilities and various online services.
CSS files are responsible for style and appearance (fonts, colors, layout) of the page, whereas JS files manage dynamic effects (tabs, animation, drop downs, etc.).
Compact size of these files is a must for any main page. We advice to include only the code relevant for the main page.
The more animation and visual effects you put into the main page, the longer it will load. The trick is to find perfect balance.
3. Web fonts
Today, the WOFF2 and WOFF formats allow to reduce web font traffic and latency. For maximum optimization we advice to use only those sets of symbols which are available at the website.
You can use CSS Font-display properties to gain balance between aesthetics and productivity of the web page. It allows to control browser response and determine whether it is worth waiting for the font or drawing a backup one. Preliminary upload link rel=”preload” also contributes to faster display of the fonts.
There is no point in using more than a couple of fonts for a single web page. Bold and italic will work well for highlights.
4. Caching files
We advice to set up caching for elements which are rarely refreshed. This way they will be loaded from browser cache instead of the server and the use of preloaded elements can significantly reduce the number of http requests to the server during future visits to the same page. Naturally, this will have positive impact on the loading speed of Your webpage.
Cached files (images, videos, fonts, etc.) are stored in a browser on users device and are displayed instantly.
CDN (Content Delivery Network) is an organized network of a great number of web servers. CDN assures high speed and quality of data transmission. This network allows to upload CSS and JS libraries at the same time reducing the workload of your server.
It is advantageous to use CDN especially when Your audience comes from different parts of the globe. The files will be loading from local servers close to the end user increasing the loading speed of the pages.
AMP (Accelerated Mobile Pages) is a Google’s joined project with partners among the leading IT companies and news publishers of the world. The open cope technology is meant to compress the size of the website and load it instantly. Pages with AMP make the top of search engine results due to high loading speed and adaptation to mobile devices.
AMP works best to optimize the mobile version of Your website, sections with low functionality, blogs, online journals and informational resources.
7. Content optimization
The more multimedia and complex graphics a webpage contains, the longer it takes to load. It is imperative to choose right file formats to get maximal result. Here’ what works best for images:
JPEG - is good for photos and colorful images with many details;
- PNG - for high definition images with transparency;
- SVG - for animated and interactive vector graphics.
There is a number of utilities to compress graphic files preserving the quality. Just don’t compress it to much!
You are most welcome to add videos! However, mind that video files use a lot of resources. You can use modern services like Vimeo and YouTube to reduce the workload of your server.
Double check! In order to know whether Your website requires optimization or not, You can use PageSpeed Insights - a very convenient tool from Google. All you need is to enter the website address and the system will point out all the drawbacks of both original and mobile versions. Google also provides advice for improvement.
Example of effective website optimization tomahawk.in.ua
Professional optimization of the main page ensures comfortable user experience and positive impression of the online project. As a bonus You also get better perception of the website by search engines.
Don’t be slow - start optimizing today!