Make Your gpEasy Site Load Faster

Upgate: gpEasy 2.x introduces a feature the combines all JavaScript files and all CSS files which helps page load speed. Nonetheless, the information here is still pertinent.

No one wants a slow loading site, and a default installation of gpEasy CMS loads rather quickly; however, there are a few considerations to keep in mind as you go about customizing your gpEasy installation that will kept gpEasy fast.

Reduce Server Requests

Style sheets are usually rather small, only a few kilobytes each however, each additional call to load another style sheet is a call to the server and that slows down your site's performance. The number of calls each page makes is one of the main reasons for slow page loading. In fact Google's webmaster tools now point out pages on your site that are loading slowly due to the number of requests needed for that page. In other words, even Google is telling us to minimize the number of requests to the server.

So, on some of my tutorials I've told you to use @import within css files to make life easier on you, and that's a good idea as long as it's not over used or only used during the development of your site. Once you have all your styles together and themes set the way you want them it's a good idea to combine style sheets as much as possible.

Let me give you an example of this. Here at trueacu.com I styled the galleries so they are different, see the galleries hack. In doing so I used an @import however, once I finalized what themes I was using I removed the @import and pasted all the css for my galleries into my main theme's style.css file. Furthermore, in the tutorial on how to enable Colorbox I duplicated one theme and then used @import to import the main style.css file of the original theme. This is a good example of using @import to speed up the site. The first @import for the galleries added an additional request to the server; however, this later @import is importing the main style.css that has already been loaded by the browser, thus instead of re-requesting the same styles in a different linked style.css file it just uses the one that's already been loaded by the browser. Does that make sense?

Browsers, by default, cache lots of information about web pages and one of those is the style sheets. Therefore, when I use @import to import a style sheet that I know is most likely already loaded by the browser it actually lessens the load time because the browser already has it loaded; however, when I use @import to import a style sheet that should already be in the main style sheet it increases the requests thus the load time increases. So, if I need a "duplicate theme" that has all or nearly all the same styling that other pages have it's redundant to use all the same styling in that css because the browser loads it based on the link, not the styles it contains. Therefore, pointing to a css file that you know is already loaded will decrease load times = faster site.

Furthermore, it's not only style sheets that increase server requests, any file you are linking to will increase the number of request, JavaScript, CSS, PHP, etc. Sometimes it's better to place the code within the page or theme that will need it instead of linking to it. One of the examples I have on this site is a peace of JS that highlights the top horizontal menu for the active page. I can link to it in a separate *.js file within the theme or in the gpEasy page itself or paste the entire code directly into the page. Which will make fewer requests to the server? Pasting it directly into the page. Adding it to the theme would be pointless as it's only needed on six pages. Linking to it within those six pages isn't bad but since the code isn't that long it will be even better to just add the JavaScript directly to the pages that need it.

What's the main point here? Keep the number of requests to the server to a minimum! gpEasy already has a number of files it requests and we don't need to be adding more unless it's necessary.

Clean Up Your Theme's Code

One problem with a CMS is that people get lazy and throw everything into the theme, thus you end up loading more than you need for every single page that uses that theme. One example of this is enabling Colorbox in gpEasy. If you enable it site wide then that will slow your entire site down; however, if you enable it for one theme that you only apply to pages that need it then you minimize it's impact on your entire site. This is true with anything "additional" you need to add to your theme. Minimize the code within your themes!

Image Size

We all want our sites to look good and images are one of the primary ways of doing that; however, a great deal of bandwidth and loading time can be saved by using the proper image type.

Many images, such as screenshots, only need 256 color or can be compressed greatly either as png or jpg. Always check your images and see if they can be reduced in size by adjusting their color setting or compression level. Converting a 130 kilobyte image into a 30 kilobyte image can save a lot of time especially for visitors on low speed connections.

Every Bit Helps

When I was first learning about gpEasy CMS I enabled Colorbox for an entire site as well as a few additional JavaScript files and full color images. . . it was a noticeable impact. Reducing the requested links, combining css, and reducing the size of images as much as possible while still maintaining a decent quality greatly reduced the load time of pages. It was very noticeable even on a cable connection.

Always remember that many visitors to your site might still be on dial-up. . .

gpEasy is a fast CMS because it doesn't need to send requests to a database; however, how you design your theme and pages will greatly impact your site's performance.
 

gpEasy B2sq Theme by CS @True Acupuncture