Improving Google Page Speed Score for BlogEngine

by filip 22. February 2012 17:47

I was getting a 72/100 score from Google Page Speed, so I attempted to improve that a bit.

I added caching to static resources via the web config, which raised my score by about 10:

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
  <remove fileExtension=".mp4" />
  <remove fileExtension=".gif" />
  <remove fileExtension=".htm" />
  <remove fileExtension=".html" />
  <remove fileExtension=".jpeg" />
  <remove fileExtension=".jpg" />
  <remove fileExtension=".js" />
  <remove fileExtension=".png" />
  <remove fileExtension=".txt" />
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <mimeMap fileExtension=".gif" mimeType="image/gif" />
  <mimeMap fileExtension=".htm" mimeType="text/html" />
  <mimeMap fileExtension=".html" mimeType="text/html" />
  <mimeMap fileExtension=".jpeg" mimeType="image/jpeg" />
  <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
  <mimeMap fileExtension=".js" mimeType="application/x-javascript" />
  <mimeMap fileExtension=".png" mimeType="image/png" />
  <mimeMap fileExtension=".txt" mimeType="text/plain" />
</staticContent>

New page score: 82/100

I then made sure that all of my custom javascript files went through the javascript handler in BlogEngine, which raised my score to by 3:

<script language="javascript" type="text/javascript" 
src="/js.axd?path=%2fmyuploads%2fbf_script.js&minify="></script>

New page score: 85/100

I then uninstalled the syntax highlighter extension from BE. This upped my page rank by another 3.

New page score: 88/100

There's still some room for improvement, though... I want to get as close as possible to 100 :)

Tags: , , , ,

Web Development

Flexible AutoComplete (Suggested Words) Code for Text Input Fields using JavaScript

by filip 14. November 2008 12:32

As I'm sure you've seen on many websites, displaying suggestions while a user types text into a text field has become quite popular. However, I was rather disappointed with the solutions I've found out there. The solutions I've found had any combination of the following problems:

  • No cross-browser support: Obviously, any acceptable solution needs to work across the major browsers.
  • Limited to a single text field per page: The solution needs to be flexible enough to allow multiple text fields on a page to either display the same suggestions, or display a completely different set of suggestions.
  • Ease of use: The solution needs to be simple to use, yet powerful enough to allow the designer to fairly easily modify the way the code works and change the look of the suggestions.

With that in mind, I attempted to improve on an existing library. I started working with this one, but pretty soon I realized that I would need to rewrite basically all the code. Below is a description of the code. In order to make this work, you will need to add the following to the <head> of your HTML page:

<script language="javascript" type="text/javascript" src="autocomplete.js"></script>

The file referenced above can be downloaded here.


It's probably best to see what we're doing, so below is an example of a text field that uses the autocomplete code. It only auto-completes some text that starts with the letter t, so make sure you type that as the first letter.


Suggests words after the user types in a T (ex: two, three )

Assuming you have the autocomple.js file correctly included in the page, the way to populate the autocomple drop down is with the collowing code:

<input type="text" size="40" autoComplete="mygroup1" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup1", new Array("two", "three", "twenty", "tweak", "tool", 
"two hundred", "testing", "two-thirds", "terran", "tomato", "tower", "twin", "task",
"toolbar", "test")); </script>

In order to demonstrate that this is flexible enough to support multiple text fields on the same page, here is another example of a text field, along with the code necessary to display it. Also, notice that I'm creating a new "group", which allows me to display different suggestions in the text field. If I wanted to, I could simply assign the same "group", and this second text field would have identical suggestions to the one above.


Suggests words after the user types in a F (ex: four, five )

<input type="text" size="30" autoComplete="mygroup2" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup2", new Array("four", "five", "fifty", "fast", "filip", "fun", 
"feast", "farse", "football", "fantasy", "fork", "fanta", "festival", "fall", "foo")); </script>

Obviously, people will want to style the drop downs differently. The autocomplete.js file contains script which registers a default style, but it also allows you to pass in a style using the autoComplete.Set() method. In the example below, I've created a new style, and assigned it by passing the class name of the style as the third parameter into the Set() method.


Suggests words after the user types in a A (ex: apple, art )

<style type="text/css"> 
.newPopupStyle { font-family:Verdana; font-size: 9pt; color:aqua; width: 150px; margin: 3px; 
background-color: Red; font-weight: bold; } .newPopupStyle div { top: -3px; left: -3px; background: brown; border: solid 1px blue;
position: relative; overflow: auto; max-height: 100px; } .newPopupStyle span { cursor: default; margin: 2px; display: block; } .newPopupStyle span.wordSelected { background: yellow; color: Fuchsia; } </style>
<
input type="text" size="30" autoComplete="mygroup3" /> <script language="javascript" type="text/javascript"> autoComplete.Set("mygroup3", new Array("apple", "aspen", "art", "artistic",
"abracadabra"), "newPopupStyle"); </script>

There is more you can do with the code. The javascript file is farily well documented, so hopefully if you need to change anything, it will be pretty straightforward. You can actually greatly reduce the size of the file if you remove the comments.

KNOWN ISSUES:

  1. If the margin of the body tag is not 0, the drop down will not render in the appropriate spot in IE. Apply a margin (ex: <body style="margin: 0;"> ) to fix the problem.

UPDATES:

  1. Feb. 25, 2009 – Fixed a problem in autocomplete.js.  It should now also work on Safari 4.0 beta.

LICENSE:

  • I have received a few questions about the license for this code.  You can use this code for any purpose, including commercial.  If you do find issues or bugs with the code, I do ask that you let me know so that I can put in a fix.

Tags: , ,

Web Development

IE8 and AjaxControlToolkit - Visibility bug

by filip 18. June 2008 17:08

Well, I finally downloaded IE8 to see how some of the sites I've worked on behave.  Most things work just fine, however, I did find a pretty significant problem with the AjaxControlToolkit.

I've been using the Tab control quite a bit, and I noticed that, when switching between tabs, the new tab was not showing up.  The old tab was hiding, though... 

Debugging has led me to the setVisible method located in "Common/Common.js" in the AjaxControlToolkit.  Specifically, the problem existed in the following code:

if (element && value != $common.getVisible(element))
{
  if (value) 
  {
    if (element.style.removeAttribute)
    {
      element.style.removeAttribute("display"
);
    }
    else

   
{
     
element.style.removeProperty(
"display"
);
   
}
 
}
 
else
 
{
    
element.style.display
= 'none'
;
 
}
 
element.style.visibility
= value ? 'visible' : 'hidden';
}

In the above code, removeAttribute() was being called, but the display attribute remained (display=none).  I looked up the removeAttribute method, and it does return a boolean value indicating if the method was successful or not.  Well, as it turns out, the method (for whatever reason) is not successul in IE8!

I'm not sure why this fails in IE8, but it does cause a problem.  Fortunately, there's a pretty quick fix to this:

if (element && value != $common.getVisible(element))
{
  if
(value) 
  {
    if
(element.style.removeAttribute)
    {
            if(!element.style.removeAttribute("display"))
            {
               element.style.display
= ''
;
            }

    }
   
else
   
{
     
element.style.removeProperty(
"display"
);
   
}
 
}
 
else
 
{
    
element.style.display
= 'none'
;
 
}
 
element.style.visibility
= value ? 'visible' : 'hidden';
}

Tags: , ,

Web Development

Using JavaScript methods in C#

by filip 4. June 2008 17:09

I ran into a weird problem today.  I needed to escape a string in c# in such a way as to be able to unescape() it later with JavaScript into the original string.  JavaScript has an escape() method that is able to do this, but since I'm writing the code in C#, I can't really access that method.  At first, I looked into HttpServerUtility.UrlEncode() and the HttpServerUtility.HtmlEncode() methods, but those are not equivalent to JavaScript's escape() method. 

However, it seems Microsoft has put in a library which gives us access to JavaScript methods ( whether this is simply mimicking what JavaScript does or if it actually uses JavaScript... I could really care less).  All that was needed is a reference to Microsoft.JScript in the project, and I was able to call the Microsoft.JScript.GlobalObject.escape() method, and it produces the exact same output as the JavaScript version.

Tags: ,

Web Development

Microsoft JScript runtime error: 'null' is null or not an object

by filip 28. May 2008 15:44

Programming JavaScript can be fun, but sometimes when I get errors like this it can get a little frustrating...

 

It happened on the following line, where the variable 'o' was null:

o.onmousedown = Drag.start;

Tags: ,

Web Development

About Filip Stanek

Death Note Pic I'm a developer at ACG in Cincinnati, OH. I like ASP.NET, Flash, and other web technologies, & enjoy playing chess, video games, etc.

Currently playing:
- StarCraft IIE-mail me Send mail

Disqus

Month List