Blog homepage optimization experience

Over the weekend, we optimized the homepage of the blog Park and shared some of our experiences with you.

　　Background Image Optimization

This problem exists before the background image in the main navigation of the blog homepage: When the page is opened for the first time in IE and Chrome, the loading delay of the background image is obvious. If you refresh the page, the location of the background image will flash, even if the image is in the 304 status (this problem is not found in FireFox, it may be because the mechanism for loading the background image in FireFox is different ). Because the navigation text is dimmed (# EEEEEE), it looks uncomfortable without the background color.

At first, we used two optimization methods without any effect.

1. pre-loading background images

 <script type="text/javascript">
jQuery.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
            jQuery("        }
    }
var staticImgUrl ="http://static.cnblogs.com/images/";
$.preloadImages(staticImgUrl + "bg_menu_nav.png");
</script>

Reference: Learn jQuery skills to improve your code

2. Compression of background images

Tool used: Pngcrush

Command: pngcrush-reduce-brute bg_menu_nav.png bg_menu_nav2.png

Reference: Best Practices for Speeding Up Your Web Site

Next, we want to avoid the background image, but CSS cannot implement gradient in the background image (filter only supports IE), so we tried to use multiple 1 px-high divs to spell the gradient effect, and it was not successful.

Later, we used a simplified method to solve this problem, and added a background color closest to the background image to the navigation bar. This way, from the process of loading a background image to a background image, the color changes will not be very large. From our experience, we still feel acceptable.

　　Space and blank lines in HTML code

Use the following ASP. NET code to clear the page output.

 private static readonly Regex REGEX_LINE_BREAKS = new Regex(@"\n\s*", RegexOptions.Compiled);
private static readonly Regex REGEX_LINE_SPACE = new Regex(@"\n\s*\r", RegexOptions.Compiled);
private static readonly Regex REGEX_SPACE = new Regex(@"( )+", RegexOptions.Compiled);

protected override void Render(HtmlTextWriter writer)
{
using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
    {
base.Render(htmlwriter);
string html = htmlwriter.InnerWriter.ToString();
        html = REGEX_LINE_BREAKS.Replace(html, string.Empty);
        html = REGEX_LINE_SPACE.Replace(html, string.Empty);
        html = REGEX_SPACE.Replace(html, " ");
        writer.Write(html.Trim());
    }
}

Further, you need to clear the carriage return line break.

　　Javascript file Compression

Tool: JSMin

Command: jsmin <site. src. js> site. js

　　Reduced CSS naming

The class Name of CSS is shortened based on the principle that saving one byte is one byte.

　　Some content is loaded using scripts

For example, for the second-level website classification, jQuery calls WebService to load, which not only reduces the page size, but also reduces the processing burden when the server displays the homepage.

　　Summary

In this homepage optimization, the results are obvious from our user experience. Of course, there is still much room for homepage optimization and we will continue to optimize it.

If you have any suggestions for optimizing the homepage of the blog garden, we look forward to your sharing!