27Mar2015

Content Management: Speed up page loading

Nowadays, search engines impose much more strong requirements for web sites to be ranked on top positions or even be parsed at all. Fast rise of mobile market pushed sites to be responsive to all kinds of screen widths and input schemas. But it’s not just about support mobile devices. For any Content Management system there is very important to load the pages as fast as possible. It’s not a recommendation anymore, but rather a rule. Google and other search engines may ignore your cool web site with a bunch of modern features just because it’s too slow.

Check loading speed online

First of all, check how fast is your page loading by Google’s PageSpeed test [https://developers.google.com/speed/pagespeed/insights/]. After several seconds you’ve got pretty complete report about issues at line of loading speed and suggestions how to improve it. If you receive green checks, congratulations, you are doing Content Management in right way. As it’s a Google’s service, so we can look at this list of points as optimization plan for Google Search Engine. On the other hand, the issues and methods to solve them are common for any search engine and for user experience as a whole. There are two separated modes (workflows) of analysis: for regular usage via PC’s browser and exploring on mobile devices like smartphones.

Resources loading optimization

Modern approach is to move both JavaScript and CSS from head to the bottom of the page. You can load by JavaScript both JS code and CSS styles (create appropriate link DOM nodes in the document). To have correct layout we need to load styles for layout in the header. For example, if you use Bootstrap, it’s possible to extract compiled CSS of bootstrap-grid and load it in the header before the content. That should be placed into the header directly like a part of the page instead of linking. All other parts of bootstrap may be loaded at the bottom of the page. This trick allows us to have correct responsive structure of the page right at the loading moment instead of unclear mess.

Besides, it needs to load a set of custom fonts in the header. The most modern approach is to load fonts by JavaScript function instead or direct reference. The idea is to cache the fonts in the LocalStorage of HTML5 browsers.

In production, all CSS (frameworks, libs and your custom modules) should be concatenated, minified and loaded in one place. There are several ways how to achieve the same with JavaScript. E.g., require.js library and its dependencies scheme are very helpful especially in complicated projects with plenty of modules.

Use browser cache

Both most popular web servers (apache and nginx) support expire technique. Add appropriate configuration for mod_expires section in the settings of your web application. For better structure separate expiration settings into 3 parts: images cache, fonts cache and content cache. Be careful the fonts cache. If you set up wrong path to fonts, then you need to reset the cache after correction to clear the LocalStorage.

Images

One more important thing CMS developers may forget is images compression. There is a web site tinypng.com to compress both png and jpeg images online and appropriate plug as well. To optimize images loading, join several pictures into a single sprite, then use appropriate fragment via CSS. Well, so complicate workflow makes Content Management as bit harder, but it reduces number of requests to the server. It’s important to speed up whole page loading.

Read also

Comments are closed.